mky-vent-base/src/views/vent/home/configurable/components/preset/generalList.vue

<template>
  <div class="general-list">
    <div class="general-content-box" v-for="(item, index) in generalData" :key="index">
      <div class="general-icon" :class="index % 2 == 0 ? 'icon-blue' : 'icon-green'"></div>
      <div class="general-label">{{ item.areaName }}</div>
      <div class="general-status" :class="index % 2 == 0 ? 'text-blue' : 'text-green'">{{ item.CORealtime || '-' }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

let props = defineProps({
  generalData: {
    type: Array,
    default: () => {
      return []
    }
  }
})

</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
  .card-list {
    --image-bg-green: url('@/assets/images/themify/deepblue/home-container/configurable/electroChamper/3-3.png');
    --image-bg-blue: url('@/assets/images/themify/deepblue/home-container/configurable/electroChamper/3-4.png');
    --image-bg-green-icon: url('@/assets/images/themify/deepblue/home-container/configurable/electroChamper/3-3.png');
    --image-bg-blue-icon: url('@/assets/images/themify/deepblue/home-container/configurable/electroChamper/3-2.png');

  }
}

.general-list {
  --image-bg-green: url('@/assets/images/home-container/configurable/electroChamper/3-3.png');
  --image-bg-blue: url('@/assets/images/home-container/configurable/electroChamper/3-1.png');
  --image-bg-green-icon: url('@/assets/images/home-container/configurable/electroChamper/3-4.png');
  --image-bg-blue-icon: url('@/assets/images/home-container/configurable/electroChamper/3-2.png');
  width: 100%;
  height: 100%;
  padding: 10px 15px;
  box-sizing: border-box;

  .general-content-box {
    position: relative;
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;

    &:nth-child(odd) {
      background: var(--image-bg-blue) no-repeat;
      background-size: 100% 100%;
    }

    &:nth-child(even) {
      background: var(--image-bg-green) no-repeat;
      background-size: 100% 100%;
    }

    .general-label {
      position: absolute;
      left: 60px;
    }

    .general-status {
      position: absolute;
      right: 98px;
    }

  }

  .general-icon {
    position: absolute;
    width: 22px;
    height: 22px;
    left: 12px;
    top: 50%;
    transform: translate(0, -50%);
  }

  .icon-green {
    background: var(--image-bg-green-icon) no-repeat;
    background-size: 100% 100%;
  }

  .icon-blue {
    background: var(--image-bg-blue-icon) no-repeat;
    background-size: 100% 100%;
  }

  .text-green {
    font-size: 12px;
    font-family: 'douyuFont';
    color: #2af7d7;
  }

  .text-blue {
    font-size: 12px;
    font-family: 'douyuFont';
    color: #91e0ff;
  }
}
</style>