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

<template>
  <div class="basicCard3">
    <div
      :class="activeIndex == index ? 'card3-box1' : 'card3-box'"
      v-for="(item, index) in card3Lists"
      :key="index"
      @click="toggleChange(index, item)"
    >
      <div class="card3-box-title">{{ item.title }}</div>
      <div class="card3-box-nd">
        <span class="card3-box-label">{{ item.ndLabel }}</span>
        <span class="card3-box-val">{{ `${item.ndVal}%` }}</span>
      </div>
      <div class="card3-box-time">
        <span class="card3-box-label">{{ item.tLabel }}</span>
        <span class="card3-box-val">{{ item.tVal }}</span>
      </div>
      <div class="card3-box-address">
        <span class="card3-box-label">{{ item.aLabel }}</span>
        <span class="card3-box-val">{{ item.aVal }}</span>
      </div>
      <div class="card3-box-warn">
        <div class="card3-box-item">
          {{ warningLevel }}
        </div>
      </div>
    </div>
  </div>
</template>

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

  let props = defineProps({
    card3List: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //风险等级
    warningLevel: {
      type: String,
      default: () => {
        return '';
      },
    },
  });
  let activeIndex = ref(0);
  let card3Lists = ref<any[]>([]);
  const emit = defineEmits(['toggleChange']);

  //选项切换
  function toggleChange(index, item) {
    console.log(index, '当前激活索引-------');
    activeIndex.value = index;
    emit('toggleChange', item.title);
  }

  watch(
    () => props.card3List,
    (newV, oldV) => {
      console.log(newV, 'newV---------');
      card3Lists.value = newV;
    },
    {
      immediate: true,
      deep: true,
    },
  );
</script>

<style lang="less" scoped>
  @font-face {
    font-family: douyuFont;
    src: url('../../../assets/font/douyuFont.otf');
  }

  .basicCard3 {
    display: flex;
    position: relative;
    box-sizing: border-box;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding-bottom: 15px;
    overflow-x: auto;
    transform: scaleY(-1);

    .card3-box {
      position: relative;
      flex-shrink: 0;
      width: 352px;
      height: 202px;
      margin-right: 20px;
      transform: scaleY(-1);
      background: url('../../../assets/images/workPlaceWarn/composite.png') no-repeat center;
      background-size: 100% 100%;

      &:last-child {
        margin-right: 0;
      }

      .card3-box-title {
        position: absolute;
        top: 11px;
        width: 100%;
        color: #fff;
        font-size: 18px;
        text-align: center;
      }

      .card3-box-nd {
        display: flex;
        position: absolute;
        top: 55px;
        left: 50%;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        width: 312px;
        height: 34px;
        padding: 0 10px;
        transform: translate(-50%, 0);
        background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
        background-size: 100% 100%;
      }

      .card3-box-time {
        display: flex;
        position: absolute;
        top: 100px;
        left: 50%;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        width: 312px;
        height: 34px;
        padding: 0 10px;
        transform: translate(-50%, 0);
        background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
        background-size: 100% 100%;
      }

      .card3-box-address {
        display: flex;
        position: absolute;
        top: 145px;
        left: 50%;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        width: 312px;
        height: 34px;
        padding: 0 10px;
        transform: translate(-50%, 0);
        background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
        background-size: 100% 100%;
      }

      .card3-box-warn {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 75px;
        height: 75px;

        .card3-box-item {
          position: absolute;
          top: 52%;
          left: 7%;
          transform: rotate(45deg);
          color: #fff;
        }
      }

      .card3-box-label {
        width: 40px;
        color: #fff;
      }

      .card3-box-val {
        color: #0097db;
        font-family: douyuFont;
      }
    }

    .card3-box1 {
      position: relative;
      flex-shrink: 0;
      width: 352px;
      height: 230px;
      margin-right: 20px;
      transform: scaleY(-1);
      background: url('../../../assets/images/workPlaceWarn/composite1.png') no-repeat center;
      background-size: 100% 100%;

      &:last-child {
        margin-right: 0;
      }

      .card3-box-title {
        position: absolute;
        top: 11px;
        width: 100%;
        color: #fff;
        font-size: 18px;
        text-align: center;
      }

      .card3-box-nd {
        display: flex;
        position: absolute;
        top: 55px;
        left: 50%;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        width: 312px;
        height: 34px;
        padding: 0 10px;
        transform: translate(-50%, 0);
        background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
        background-size: 100% 100%;
      }

      .card3-box-time {
        display: flex;
        position: absolute;
        top: 100px;
        left: 50%;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        width: 312px;
        height: 34px;
        padding: 0 10px;
        transform: translate(-50%, 0);
        background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
        background-size: 100% 100%;
      }

      .card3-box-address {
        display: flex;
        position: absolute;
        top: 145px;
        left: 50%;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        width: 312px;
        height: 34px;
        padding: 0 10px;
        transform: translate(-50%, 0);
        background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
        background-size: 100% 100%;
      }

      .card3-box-warn {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 75px;
        height: 100px;

        .card3-box-item {
          position: absolute;
          top: 36%;
          left: 8%;
          transform: rotate(45deg);
          color: #fff;
        }
      }

      .card3-box-label {
        width: 40px;
        color: #fff;
      }

      .card3-box-val {
        color: #0097db;
        font-family: douyuFont;
      }
    }
  }
</style>