|
|
@@ -1,13 +1,198 @@
|
|
|
<template>
|
|
|
-
|
|
|
+ <div class="table-wrapper">
|
|
|
+ <div class="table-box">
|
|
|
+ <!-- <div class="title"-->
|
|
|
+ <!-- style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;height: 40px">-->
|
|
|
+ <!-- <span style="position: absolute;top:-3px;left: 70px">普通负荷</span>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <el-table
|
|
|
+ :cell-style="{border:0,color:'#fff'}"
|
|
|
+ :data="tableData"
|
|
|
+ :header-cell-style="{color:'#fff'}"
|
|
|
+ :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
|
|
|
+ size="mini"
|
|
|
+ style="background: none;margin-top: -1%;"
|
|
|
+ :show-header="false"
|
|
|
+ >
|
|
|
+ <el-table-column label="信息" prop="info">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="height: 25px">
|
|
|
+ <img src="../../../assets/images/shape1.png" style="position:absolute;top: 8px" :width="20" :height="20"
|
|
|
+ alt="">
|
|
|
+ <img src="../../../assets/images/bg/bg-table-row.png" style="position:absolute;left: 35px" :width="535"
|
|
|
+ :height="25" alt="">
|
|
|
+ <span style="position:absolute;top:8px;left: 43px">{{ scope.row.info }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+
|
|
|
export default {
|
|
|
- name: "center-top"
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ taskNumber: '',
|
|
|
+ date: '',
|
|
|
+ current: 1,
|
|
|
+ size: 10
|
|
|
+ },
|
|
|
+ tableData: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.tableData = [
|
|
|
+ {
|
|
|
+ "info": "0:00时刻，现货数据接口正常",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "info": "0:00时刻，D5000数据接口正常",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "info": "0:15时刻，储能AGC数据下发正常",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "info": "0:15时刻，火电AGC数据下发正常",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "info": "0:15时刻，储能AGC数据下发正常",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "info": "0:15时刻，火电AGC数据下发正常",
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style lang="less" scoped>
|
|
|
+
|
|
|
+@font-face {
|
|
|
+ font-family: AliMaMa;//自定义字体名称
|
|
|
+ src: url("../../Articles/font/AlimamaDaoLiTi.ttf")
|
|
|
+}
|
|
|
+
|
|
|
+.table-wrapper {
|
|
|
+ //width: 1483px;
|
|
|
+ //padding-left: 20px;
|
|
|
+
|
|
|
+ .table-box {
|
|
|
+ //min-height: 600px;
|
|
|
+ margin-left: 6%;
|
|
|
+ margin-top: 5%;
|
|
|
+ width: 550px;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-form-item__label {
|
|
|
+ color: #fff;
|
|
|
+ //font-size: 17px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ background-color: rgba(14, 73, 131);
|
|
|
+ border: 1px solid rgb(64, 153, 255);
|
|
|
+ //height: 34px;
|
|
|
+ //font-size: 17px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-table__header {
|
|
|
+ background: url(../../Articles/img/bg1.png);
|
|
|
+ }
|
|
|
+
|
|
|
+ ///deep/ .el-table th.el-table__cell.is-leaf {
|
|
|
+ // border-bottom: none;
|
|
|
+ //}
|
|
|
+
|
|
|
+ /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
|
+ background-color: rgb(103, 118, 49) !important
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-col {
|
|
|
+ padding: 0;
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-col:nth-child(1) {
|
|
|
+ width: 19%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-col:nth-child(2) {
|
|
|
+ width: 22%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-col:nth-child(3) {
|
|
|
+ width: 19%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-col:nth-child(4) {
|
|
|
+ width: 19%;
|
|
|
+ }
|
|
|
|
|
|
-</style>
|
|
|
+ /deep/ .el-col:nth-child(5) {
|
|
|
+ width: 15%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__inner:nth-child(1) {
|
|
|
+ //width: 176px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__inner:nth-child(2) {
|
|
|
+ //width: 176px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__inner:nth-child(2) {
|
|
|
+ //width: 126px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__inner:nth-child(2) {
|
|
|
+ //width: 175px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-icon-arrow-up {
|
|
|
+ transform: rotateZ(0deg);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-icon-arrow-up:before {
|
|
|
+ content: url(../../Articles/img/xiala2.png);
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__prefix {
|
|
|
+ right: -60px;
|
|
|
+ padding-top: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-icon-date:before {
|
|
|
+ content: url(../../Articles/img/riqi.png);
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-table__header tr {
|
|
|
+ background: url(../../Articles/img/bg1.png);
|
|
|
+ //height: 49px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-table th.el-table__cell {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-table__body {
|
|
|
+ //-webkit-border-vertical-spacing: 13px; // 垂直间距
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-form-item__content {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-table, .el-table__expanded-cell {
|
|
|
+ background-color: rgb(1, 40, 81);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
