gasInjection-project/src/views/vent/home/clique/components/mine-wind.vue

<template>
  <div class="mineWind">
    <div class="mine-title">{{ mineTitle }}</div>
    <div class="mine-content">
      <div class="content-label">
        <div class="label-t" v-for="(ite, ind) in labelList" :key="ind">{{ ite.name }}</div>
      </div>
      <div class="content-text">
        <div class="text" v-for="(item, index) in mineData" :key="index">
          <span>{{ item.name }}</span>
          <span>{{ item.jf }}</span>
          <span>{{ item.hf }}</span>
          <span>{{ item.xf }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive } from 'vue';

  let mineTitle = ref('矿井通风状态监测');
  let labelList = reactive([{ name: '矿井名称' }, { name: '总进风量' }, { name: '总回风量' }, { name: '总需风量' }]);
  let mineData = reactive([
    { name: 'XXX', jf: 10215, hf: 10198, xf: 9810 },
    { name: 'XXX', jf: 10215, hf: 10198, xf: 9810 },
    { name: 'XXX', jf: 10215, hf: 10198, xf: 9810 },
    { name: 'XXX', jf: 10215, hf: 10198, xf: 9810 },
    { name: 'XXX', jf: 10215, hf: 10198, xf: 9810 },
    { name: 'XXX', jf: 10215, hf: 10198, xf: 9810 },
    { name: 'XXX', jf: 10215, hf: 10198, xf: 9810 },
  ]);
</script>
<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url('../../../../assets/font/douyuFont.otf');
  }

  .mineWind {
    position: relative;
    width: 100%;
    height: 100%;

    .mine-title {
      position: absolute;
      left: 50px;
      top: 12px;
      color: #fff;
      font-family: 'douyuFont';
      font-size: 14px;
    }

    .mine-content {
      height: 100%;
      padding: 62px 0px 28px 0px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;

      .content-label {
        width: 366px;
        height: 32px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: url('../../../../../assets/images/company/content-label.png') no-repeat;
        .label-t {
          width: 25%;
          color: #3df6ff;
          text-align: center;
          font-size: 14px;
        }
      }

      .content-text {
        height: calc(100% - 32px);
        width: 378px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        overflow-y: auto;
        .text {
          width: 100%;
          height: 25px;
          display: flex;
          justify-content: space-around;
          align-items: flex-start;
          background: url('../../../../../assets/images/company/content-text.png') no-repeat;
          color: #fff;
          span {
            display: inline-block;
            width: 25%;
            text-align: center;
          }
        }
      }
    }
  }
</style>