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>