vent-forewarn-micro/src/views/vent/fire/fireHome/components/fiberBunbleJc.vue

<template>
  <div class="fiberBunbleJc">
    <div class="fiberBunbleJc-box" v-for="(item, index) in fiberBunbleJcList" :key="index">
      <div class="jc-title">{{ item.type }}</div>
      <div class="jc-item">
        <span class="item-label">{{ `${item.label} : ` }}</span>
        <span class="item-val">{{ `${item.val}` || '--' }}</span>
        <span class="item-dw">{{ item.unit }}</span>
      </div>
      <div class="jc-item1">
        <span class="item-label">{{ `${item.label1} : ` }}</span>
        <span class="item-val">{{ item.val1 || '--' }}</span>
      </div>
      <div class="jc-item2">
        <span class="item-label">{{ `${item.label2} : ` }}</span>
        <span class="item-val">{{ item.val2 || '--' }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, watch } from 'vue';

let props = defineProps({
  bunbleData: {
    type: Array,
    default: () => {
      return []
    }
  }
})
let fiberBunbleJcList = ref<any[]>([]);

watch(() => props.bunbleData, (newB, oldB) => {
  console.log(newB,'newB---------')
  if (newB.length == 0) {
    fiberBunbleJcList.value = newB
  }
}, { immediate: true, deep: true })
</script>

<style lang="less" scoped>
.fiberBunbleJc {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;

  .fiberBunbleJc-box {
    position: relative;
    width: 100%;
    height: 65px;
    background: url('../../../../../assets/images/fire/firehome/img-7.png') no-repeat center;
    background-size: 100% 100%;

    .jc-title {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      color: #fff;
      font-size: 14px;
      font-weight: bolder;
    }

    &:nth-child(1) .jc-title {
      left: 54px;
    }

    &:nth-child(2) .jc-title {
      left: 50px;
    }

    &:nth-child(3) .jc-title {
      left: 54px;
    }

    &:nth-child(4) .jc-title {
      left: 50px;
    }

    &:nth-child(5) .jc-title {
      left: 46px;
    }

    &:nth-child(6) .jc-title {
      left: 46px;
    }

    &:nth-child(7) .jc-title {
      left: 112px;
    }

    .jc-item {
      display: flex;
      position: absolute;
      left: 20%;
      align-items: center;
      height: 100%;
    }

    .jc-item1 {
      display: flex;
      position: absolute;
      left: 40%;
      align-items: center;
      height: 100%
    }

    .jc-item2 {
      display: flex;
      position: absolute;
      left: 70%;
      align-items: center;
      height: 100%
    }

    .item-label {
      color: #fff;
      font-size: 12px;
    }

    .item-val {
      margin-left: 10px;
      color: #089dff;
      font-size: 14px;
    }

    .item-dw {
      margin-left: 5px;
      color: #089dff;
    }
  }
}
</style>