zhgdyun/src/views/projectAdmin/zjsj/govComp/Col3.vue

<template>
  <Card title="质量检测">
    <div class="contentBox">
      <div class="topBox">
        <div class="top">
          <div class="left">
            <div class="point"></div>
            <span class="mintit">监测报告统计</span>
            <div class="rowInfo">
              <span>总分数</span>
              <span>252份</span>
              <span>合格</span>
              <span style="color:#6ee4f0;">9243份</span>
            </div>
            <div class="rowInfo2">
              <span>其他</span>
              <span>252份</span>
              <span></span>
              <span></span>
            </div>
          </div>
          <div class="right">
            <div class="row">
              <p>99.89%</p>
              <p>合格率</p>
            </div>
          </div>
        </div>
      </div>
      <div class="titleRow">
        <span>建材类型</span>
        <span>检测报告数</span>
        <span>合格数</span>
        <span>合格率</span>
      </div>
      <div class="contentBtn">
        <template>
          <el-table :data="tableData" :show-header="false" style="width: 100%">
            <el-table-column prop="date" label="建材类型" width="150"></el-table-column>
            <el-table-column prop="name" label="检测报告数" width="120"></el-table-column>
            <el-table-column prop="address" label="合格数"></el-table-column>
            <el-table-column prop="rale" style="color:red" label="合格率">
               <template slot-scope="scope">
                <span class="raleRow"
	          >{{ scope.row.rale }}</span>
               </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from "../components/Card.vue";
export default {
  components: { Card },
  data() {
    return {
      tableData: [
        {
          date: "混泥土抗压试验",
          name: "6430",
          address: "5934",
          rale: "99.88%"
        },
        {
          date: "钢筋原材试验",
          name: "6430",
          address: "5934",
          rale: "99.88%"
        },
        {
          date: "混泥土抗渗试验",
          name: "6430",
          address: "5934",
          rale: "99.88%"
        },
        {
          date: "混泥土抗压试验",
          name: "6430",
          address: "5934",
          rale: "99.88%"
        },
         {
          date: "混泥土抗压试验",
          name: "6430",
          address: "5934",
          rale: "99.88%"
        },
        {
          date: "钢筋原材试验",
          name: "6430",
          address: "5934",
          rale: "99.88%"
        },
        {
          date: "混泥土抗渗试验",
          name: "6430",
          address: "5934",
          rale: "99.88%"
        },
        {
          date: "混泥土抗压试验",
          name: "6430",
          address: "5934",
          rale: "99.88%"
        },
         {
          date: "混泥土抗压试验",
          name: "6430",
          address: "5934",
          rale: "99.88%"
        },
        {
          date: "钢筋原材试验",
          name: "6430",
          address: "5934",
          rale: "99.88%"
        },
        {
          date: "混泥土抗渗试验",
          name: "6430",
          address: "5934",
          rale: "99.88%"
        },
        {
          date: "混泥土抗压试验",
          name: "6430",
          address: "5934",
          rale: "99.88%"
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.contentBox {
  color: white;
  margin-top: 2%;
  margin-left: 1%;
  .topBox {
    .point {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #dddfe2;
      display: inline-block;
      margin-right: 2%;
    }
    .mintit {
      font-size: 20px;
      color: #dddfe2;
    }
    .top {
      display: flex;
      margin-top: 4%;
      height: 30%;
      .left {
        width: 70%;
        .rowInfo,
        .rowInfo2 {
          display: flex;
          margin-top: 3%;
          height: 30px;
          line-height: 30px;
          color: #c4c7cc;
          background-image: url(../assets/images/common/bg-intro.png);
          background-size: 100%;
          background-repeat: no-repeat;
          margin-bottom: 3%;
          span {
            flex: 1;
            margin-left: 8%;
          }
        }
        .rowInfo2 {
          background-image: url(../assets/images/common/bgc_other.png);
        }
      }
      .right {
        width: 25%;
        background-image: url(../assets/images/common/bgc_bluechart.png);
        background-size: 100%;
        .row {
          font-size: 12px;
          color: #c4c7cc;
          margin-left: 32%;
          margin-top: 38%;
        }
      }
    }
  }
  .titleRow{
     margin-top: 5%;
     color: #5ec2c8;
     display: flex;
     span{
      flex: 1;
      margin-left: 5%;
     }
  }
  .contentBtn {
    margin-top: 1%;
    color: white;
  }
}
.raleRow{
  color: #5ec2c8 !important;
  font-weight:bold;
  
}
::v-deep .el-table {
  color: #7f8691;
}
::v-deep  .el-table td{
  border: none;
}
</style>