zhgdyun/src/views/projectAdmin/jlw/safeManage/leftTop.vue

<template>
  <Card :title="title">
    <!-- <JProgressChart :seriesData="seriesData" :yData="yData" /> -->

    <div class="table">
      <div class="thead">
        <div class="row">
          <div class="td">检查项</div>
          <div class="td">检查内容</div>
          <div class="td">检查时间</div>
          <div class="td">整改人</div>
        </div>
      </div>
      <div class="tbody">
        <div class="row" v-for="i in 5" :key="i">
          <div class="td">2022.03.05 15:23:22</div>
          <div class="td">边临防护</div>
          <div class="td">2022-03-05 15:23:22</div>
          <div class="td">光怪陆离</div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card.vue'
import JProgressChart from '../jChart/bar/JProgressChart.vue'
export default {
  components: { Card, JProgressChart },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // yData: [
      //   '未分类',
      //   '临边防护',
      //   '洞口防护',
      //   '悬挑式脚手架',
      //   '被电箱与开关箱',
      //   '扣件式钢管脚手架',
      //   '现场防火',
      //   '材料管理',
      //   '施工方案'
      // ].reverse(),
      // seriesData: [100, 235, 232, 532, 112, 532, 449, 269, 998]
    }
  }
}
</script>

<style lang="less" scoped>
.table {
  padding: 0 6px;
  height: 100%;
  font-size: 14px;
  color: #fff;
  .thead,
  .tbody {
    &.thead {
      margin-bottom: 5px;
      padding-bottom: 5px;
      color: #6ee4f0;
      border-bottom: 1px solid #fff;
    }
    .row {
      width: 100%;
      display: flex;
      .td {
        height: 30px;
        line-height: 30px;
        &:nth-child(1) {
          width: 40%;
        }
        &:nth-child(2) {
          flex: 1;
        }
        &:nth-child(3) {
          width: 140px;
        }
        &:nth-child(4) {
          width: 56px;
        }
      }
    }
  }
}
</style>