vent-forewarn-micro/src/views/vent/common/basicCard4.vue

<template>
  <div class="basicCard4">
    <div :class="activeIndex == index ? 'card4-box1' : 'card4-box'" v-for="(item, index) in card4List" :key="index"
      @click="toggleDustCard(index, item)">
      <div class="card4-title">{{ item.title }}</div>
      <div class="card4-content">
        <div class="content-item" v-for="(items, ind) in item.list" :key="ind">
          <span>{{ items.label }}</span>
          <span>{{ items.value }}</span>
        </div>
      </div>
      <div class="card4-level">
        <div class="level-text">{{ warningLevel }}</div>
      </div>
    </div>

  </div>
</template>

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

let props = defineProps({
  cardData4: {
    type: Array,
    default: () => {
      return []
    }
  },
  warningLevel:{
    type:String,
    default:''
  }
})

let emit=defineEmits(['toggleDustCards'])
let activeIndex = ref(0)
let card4List = ref<any[]>([])

function toggleDustCard(index, item) {
  activeIndex.value = index
  emit('toggleDustCards',item.sensorCode)
}

watch(() => props.cardData4, (newC, oldC) => {
  console.log(newC, 'newC------')
  if (newC.length != 0) {
    card4List.value = newC
  }
}, {
  immediate: true,
  deep: true
})

</script>

<style lang="less" scoped>
.basicCard4 {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding-bottom: 10px;
  overflow-x: auto;
  transform: scaleY(-1);
  background-color: rgb(41 49 53 / 80%);

  .card4-box {
    position: relative;
    flex-shrink: 0;
    width: 338px;
    height: 147px;
    margin: 0 10px;
    transform: scaleY(-1);
    background: url('../../../assets/images/workPlaceWarn/composite.png') no-repeat center;
    background-size: 100% 100%;

    .card4-title {
      position: absolute;
      top: 8px;
      left: 0;
      width: 100%;
      color: #fff;
      font-size: 14px;
      text-align: center;
    }

    .card4-content {
      display: flex;
      position: absolute;
      top: 26px;
      left: 0;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;
      height: 120px;

      .content-item {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 50%;
        height: 50%;
        background: url('../../../assets/images/dust/dusthome/content-item.png') no-repeat center;
        background-size: 95% 50%;

        span {
          &:first-child {
            color: #fff;
            font-size: 14px;
          }

          &:last-child {
            color: #01fefc;
            font-family: douyuFont;
          }
        }
      }
    }

    .card4-level{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 75px;
      height: 75px;

      .level-text{
        position: absolute;
        top: 65%;
        left: 10%;
        transform: rotate(45deg);
        color: #fff;
        font-size: 12px;
      }
    }
  }

  .card4-box1 {
    position: relative;
    flex-shrink: 0;
    width: 338px;
    height: 170px;
    margin: 0 10px;
    transform: scaleY(-1);
    background: url('../../../assets/images/workPlaceWarn/composite1.png') no-repeat center;
    background-size: 100% 100%;

    .card4-title {
      position: absolute;
      top: 8px;
      left: 0;
      width: 100%;
      color: #fff;
      font-size: 16px;
      text-align: center;
    }

    .card4-content {
      display: flex;
      position: absolute;
      top: 26px;
      left: 0;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;
      height: 120px;

      .content-item {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 50%;
        height: 50%;
        background: url('../../../assets/images/dust/dusthome/content-item.png') no-repeat center;
        background-size: 95% 50%;

        span {
          &:first-child {
            color: #fff;
            font-size: 12px;
          }

          &:last-child {
            color: #01fefc;
            font-family: douyuFont;
            font-size: 14px;
          }
        }
      }
    }

    .card4-level{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 75px;
      height: 75px;

      .level-text{
        position: absolute;
        top: 36%;
        left: 10%;
        transform: rotate(45deg);
        color: #fff;
        font-size: 12px;
      }
    }
  }
}
</style>