vpp/src/views/sjcjjk/gznfh/index.vue

<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="width: 1429px;font-size: 17px;background: none"
            >
                <el-table-column
                        align="center"
                        label="节点名称"
                        prop="stationName"
                        width="270px"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        label="预测值"
                        prop="capacity"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        label="预测时间"
                        prop="time">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="数据接收时间"
                        prop="date">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>

export default {
    name: 'Article-Index',
    data() {
        return {
            form: {
                taskNumber: '',
                date: '',
                current: 1,
                size: 10
            },
            tableData: []
        }
    },
    methods: {},
    mounted() {
        const tableDataList = require('../../tabledata.json');
        this.tableData = tableDataList.windDataList
    }
}
</script>

<style lang="less" scoped>

.el-table__row > td {
  border: none;
}

.el-table::before {
  height: 0;
}


body {
  border: 0;
  background-image: url(../../Articles/img/bgc.png)
}

.table-wrapper {
  width: 97%;
  height: 100%;
  padding-left: 2%;

  .table-box {
    min-height: 600px;
    background-size: cover;
  }

  .title {
    margin-bottom: 20px;
    margin-left: 60px;
    font-size: 18px;
    color: #fff;
  }

  /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--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%;
  }

  /deep/ .el-col:nth-child(5) {
    width: 11%;
  }


  /deep/ .el-input__inner {
    width: 100%;
  }


  /deep/ .el-icon-arrow-up {
    transform: rotateZ(0deg);

  }


  /deep/ .el-icon-arrow-up:before {
    content: url(../../Articles/img/xiala2.png);
  }

  /deep/ .el-input__prefix {
    left: 75%;
    padding-top: 3px;
    width: 10%;
  }

  /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;
    border: 0;
  }

  /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>