gas-injection/src/views/vent/home/configurable/components/preset/gasBoard.vue

<template>
  <div class="gas-board">
    <div :class="`board-box-${type}`" v-for="(item, index) in option" :key="index">
      <div :class="`board-item-${type}`">
        <div :class="`board-item-icon-${type}`">
          <SvgIcon :class="`icon-style-${type}`" size="24" :name="item.iconName" />
        </div>
        <div :class="`board-item-content-${type}`">
          <div :class="`item-content-label-${type}`">{{ item.label }}</div>
          <div :class="`item-content-value-${type}`">
            <span>{{ item.value }}</span>
            <span style="margin-left: 10px;">{{ item.unit }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { SvgIcon } from '/@/components/Icon';

let props = defineProps({
  option: {
    type: Array as any
  },
  type: {
    type: String
  }
})

// let listData = ref<any[]>(
//   [
//   { label: '氧气浓度', value: '60', iconName: 'o2-gas', unit: 'Nm³' },
//   { label: '甲烷浓度', value: '60', iconName: 'ch4-gas', unit: 'm³/min' },
//   { label: '温度', value: '60', iconName: 'temp-gas', unit: '' },
//   { label: '风速', value: '60', iconName: 'wind-gas', unit: '' },
// ]
// )
</script>

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

@{theme-deepblue} {
  .gas-board {
    --image-gas_board_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/7-4.png');
    --image-gas_board_bg1: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/7-5.png');
    --image-gas_board_bg2: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/2-12.png');
    --image-gas_board_bg3: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/3-3.png');
    --image-gas_board_bg4: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/3-4.png');
  }
}

.gas-board {
  --image-gas_board_bg: url('@/assets/images/gasInjection/7-4.png');
  --image-gas_board_bg1: url('@/assets/images/gasInjection/7-5.png');
  --image-gas_board_bg2: url('@/assets/images/gasInjection/2-12.png');
  --image-gas_board_bg3: url('@/assets/images/gasInjection/3-3.png');
  --image-gas_board_bg4: url('@/assets/images/gasInjection/3-4.png');
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  padding: 15px 20px;
  box-sizing: border-box;

  .board-box-A {
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    &:nth-child(1) {
      .board-item-A {
        background: var(--image-gas_board_bg1) no-repeat;
        background-size: 100% 100%;

        .item-content-value-A {
          color: #91e0ff;
        }
      }

    }

    &:nth-child(2) {
      .board-item-A {
        background: var(--image-gas_board_bg) no-repeat;
        background-size: 100% 100%;

        .item-content-value-A {
          color: #2cffdd;
        }
      }

    }

    &:nth-child(3) {
      .board-item-A {
        background: var(--image-gas_board_bg) no-repeat;
        background-size: 100% 100%;

        .item-content-value-A {
          color: #2cffdd;
        }
      }


    }

    &:nth-child(4) {
      .board-item-A {
        background: var(--image-gas_board_bg1) no-repeat;
        background-size: 100% 100%;

        .item-content-value-A {
          color: #91e0ff;
        }
      }
    }
  }

  .board-box-B {
    width: 33.3%;
    height: 33.3%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .board-box-C {
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    &:nth-child(1) {
      .board-item-C {
        background: var(--image-gas_board_bg3) no-repeat;
        background-size: 100% 100%;

        .item-content-value-C {
          color: #91e0ff;
        }
      }

    }

    &:nth-child(2) {
      .board-item-C {
        background: var(--image-gas_board_bg4) no-repeat;
        background-size: 100% 100%;

        .item-content-value-C {
          color: #2cffdd;
        }
      }

    }

    &:nth-child(3) {
      .board-item-C {
        background: var(--image-gas_board_bg4) no-repeat;
        background-size: 100% 100%;

        .item-content-value-C {
          color: #2cffdd;
        }
      }


    }

    &:nth-child(4) {
      .board-item-C {
        background: var(--image-gas_board_bg3) no-repeat;
        background-size: 100% 100%;

        .item-content-value-C {
          color: #91e0ff;
        }
      }
    }
  }

  .board-item-A {
    position: relative;
    width: 180px;
    height: 60px;
  }


  .board-item-B {
    position: relative;
    width: 213px;
    height: 57px;
    background: var(--image-gas_board_bg2) no-repeat;
    background-size: 100% 100%;
  }

  .board-item-C {
    position: relative;
    width: 194px;
    height: 76px;
  }

  .board-item-icon-A {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translate(0, -35%);
  }

  .board-item-icon-B {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translate(0, -45%);
  }

  .board-item-icon-C {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translate(0, -45%);
  }

  .board-item-content-A {
    position: absolute;
    height: 100%;
    left: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .board-item-content-B {
    position: absolute;
    height: 100%;
    left: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .board-item-content-C {
    position: absolute;
    height: 100%;
    left: 82px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .item-content-label-A {
    margin-bottom: 10px;
  }

  .item-content-label-B {
    margin-bottom: 10px;
  }

  .item-content-label-C {
      font-size: 13px;
    margin-bottom: 10px;
  }

  .item-content-value-A {
    font-size: 12px;
    font-family: 'douyuFont';
  }

  .item-content-value-B {
    font-size: 12px;
    color: #91e0ff;
    font-family: 'douyuFont';
  }

  .item-content-value-C {
    font-size: 12px;
    font-family: 'douyuFont';
  }
}
</style>