gas-injection/src/views/vent/home/configurable/bule/components/yj_gasWarn.vue

<template>
  <div class="dz-fire">
    <div class="fire-container" :class="`fire-container_${type}`">
      <div class="title-box" :class="`title-box_${type}`">
        <div :class="`title-box-label_icon_${type}`"></div>
        <div :class="`title-box-label_${type}`">{{ titleData?.label }}</div>
        <div :class="`title-box-val_${type}`">{{ gasData[titleData?.value] }}</div>
      </div>
      <div class="content-box" :class="`content-box_${type}`" :scroll="10">
        <div class="content-box-item" v-for="(item, index) in gasData.monitorData" :key="index">
          <div class="box-item-label">{{ item.label }}</div>
          <div v-if="type == 'A'" class="box-item-value">{{ item.value }}</div>
          <div v-if="type == 'B'" class="box-item-value">{{ item.value1 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { scrollIntoParentView } from 'ant-design-vue/lib/vc-cascader/utils/commonUtil';
import { ref, watch } from 'vue';

let props = defineProps({
  type: {
    type: String,
    default: '',
  },
  titleData: {
    type: Object,
    defualt: () => {
      return {};
    },
  },
  gasData: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
</script>

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

.dz-fire {
  --image-model_fire-container_A: url('@/assets/images/home-warn/5-1.png');
  --image-model_fire-container_B: url('@/assets/images/home-warn/5-2.png');
  height: 100%;
  padding: 10px 25px 0px 25px;
  box-sizing: border-box;

  .fire-container_A {
    position: relative;
    width: 100%;
    height: 50%;
  }

  .fire-container_B {
    position: relative;
    width: 100%;
    height: 50%;
  }
  .title-box-label_icon_A {
    width: 20px;
    height: 20px;
    margin-left: 16px;
    background: url('@/assets/images/home-warn/5-4.svg') no-repeat;
    background-size: 100% 100%;
  }
  .title-box-label_icon_B {
    width: 20px;
    height: 20px;
    margin-left: 16px;
    background: url('@/assets/images/home-warn/5-5.svg') no-repeat;
    background-size: 100% 100%;
  }
  .title-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    height: 50px;
    top: 0;
    background: var(--image-model_fire-container_A) no-repeat;
    background-size: 100% 100%;
  }

  .content-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    width: 100%;
    top: 46px;
    background: url('@/assets/images/home-warn/5-2.png') no-repeat;
    background-size: 100% 100%;
  }

  .content-box-item {
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
    height: 100%;
    margin-top: 10px;
    justify-content: space-around;
    align-items: center;
    background: url('@/assets/images/home-warn/5-3.png') no-repeat;
    background-size: 100% 100%;
  }

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

  .title-box_A {
    width: 100%;
    height: 40px;
  }

  .title-box_B {
    width: 100%;
    height: 40px;
  }

  .title-box-label_A {
    margin: 20px;
    color: #fff;
  }

  .title-box-label_B {
    margin: 20px;
    color: #fff;
  }

  .title-box-val_A {
    font-family: 'douyuFont';
    color: #baf5fe;
    margin-left: 86px;
  }

  .title-box-val_B {
    font-family: 'douyuFont';
    color: #baf5fe;
    margin-left: 86px;
  }

  .content-box_A {
    width: 295px;
    height: 100%;
    margin-left: 46px;
  }

  .content-box_B {
    width: 295px;
    height: 100%;
    margin-left: 46px;
  }
}
</style>