vpp/src/views/rqdd/rqdddm.vue

<template>
    <div class="table-wrapper">
        <div class="table-box">
            <el-table
                    :cell-style="{border:0,color:'#fff',background:'none'}"
                    :data="tableData"
                    :header-cell-style="{color:'#fff'}"
                    :row-style="{background:'none'}"
                    size="mini"
                    style="font-size: 15px"
            >
                <el-table-column align="center" label="断面名称" prop="name" width="180px"></el-table-column>
                <el-table-column align="center" label="状态" prop="state">
                    <template slot-scope="scope">
                        <img height="16px" src="../../assets/images/r-green.png">
                    </template>
                </el-table-column>
                <el-table-column align="center" label="有功" prop="ap"></el-table-column>
                <el-table-column align="center" label="负限" prop="lower"></el-table-column>
                <el-table-column align="center" label="正限" prop="upper"></el-table-column>
                <el-table-column align="center" label="区间" prop="range">
                    <template slot-scope="scope">
                        <div style="color:#92fc53">正常</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            form: {
                taskNumber: '',
                date: '',
                current: 1,
                size: 10
            },
            tableData: []
        }
    },
    methods: {},
    mounted() {
        this.tableData = [
            {
                "name": "汗海-庆云断面",
                "state": "1",
                "ap": "500",
                "lower": "450",
                "upper": "550",
                "range": "1"
            },
            {
                "name": "汗海-庆云断面",
                "state": "1",
                "ap": "500",
                "lower": "450",
                "upper": "550",
                "range": "1"
            },
            {
                "name": "汗海-庆云断面",
                "state": "1",
                "ap": "500",
                "lower": "450",
                "upper": "550",
                "range": "1"
            },
            {
                "name": "汗海-庆云断面",
                "state": "1",
                "ap": "500",
                "lower": "450",
                "upper": "550",
                "range": "1"
            },
            {
                "name": "汗海-庆云断面",
                "state": "1",
                "ap": "500",
                "lower": "450",
                "upper": "550",
                "range": "1"
            },
            {
                "name": "汗海-庆云断面",
                "state": "1",
                "ap": "500",
                "lower": "450",
                "upper": "550",
                "range": "1"
            },
            {
                "name": "汗海-庆云断面",
                "state": "1",
                "ap": "500",
                "lower": "450",
                "upper": "550",
                "range": "1"
            },
        ]
    }
}
</script>

<style lang="less" scoped>

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #4ded68;
}

@font-face {
  font-family: AliMaMa;//自定义字体名称
  src: url("../Articles/font/AlimamaDaoLiTi.ttf")
}


/deep/ .el-table tr {
  background: none;
}

.table-wrapper {
  width: 90%;
  height: 99%;

  .table-box {
    //min-height: 600px;
    margin-left: 6%;
    margin-top: 8%;
    width: 100%;
    height: 99%;
    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 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%;
  }

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


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

  }


  /deep/ .el-icon-arrow-up:before {
    content: url(../../views/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 {
    background: url(../Articles/img/组2460.png) no-repeat;
    background-position-x: 30%;
    background-position-y: 30%;
    background-size: 100% 100%;
    height: 95%;
    //height: 49px;
  }


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

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

  /deep/ .el-table th.el-table__cell {
    background: none;
    border: 0px;
  }

  /deep/ .el-table tr.el-table__cell {
    background: none;
    border: 0px;
  }

  /deep/ .el-table .el-table__body {
    -webkit-border-vertical-spacing: 13px; // 垂直间距
  }

  /deep/ .el-form-item__content {
    text-align: left;
  }

  /deep/ .el-table, .el-table__expanded-cell {


  }
}
</style>