vent-template/src/views/vent/monitorManager/alarmMonitor/common/fireWork.vue

<template>
  <div class="fireWork">
    <!-- 顶部区域 -->
    <div class="work-nav">
      <internalFireTop :internalFireTopData="internalFireTopData"></internalFireTop>
    </div>
    <!-- 中间区域 -->
    <div class="center-echart">
      <internalFireCenter :internalFireCenterData="internalFireCenterData"></internalFireCenter>
    </div>
    <!-- 底部区域 -->
    <div class="bot-content">
      <internalFireBot :internalFireBotData="internalFireBotData"></internalFireBot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, defineProps } from 'vue';
import internalFireTop from './internal-fire-top.vue'
import internalFireCenter from './internal-fire-center.vue';
import internalFireBot from './internal-fire-bot.vue';
// import BaseTab from '../../../gas/components/tab/baseTab.vue';

let props = defineProps({
  listData: Object,
});
let internalFireTopData = ref<any[]>([])
let internalFireCenterData = ref<any[]>([])
let internalFireBotData = ref<any[]>([])

watch(
  () => props.listData,
  (val: any, val1) => {
    if (JSON.stringify(val) === '{}') return;
    internalFireTopData.value = val.fiber
    internalFireCenterData.value = val.fiber
    internalFireBotData.value = val.bundletube
  },
  { deep: true }
);
</script>

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

@{theme-deepblue} {
  .fireWork {
    --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
    --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
    --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
    --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
    --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
    --image-14174: url('/@/assets/images/themify/deepblue/fire/14174.png');
    --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
  }
}

.fireWork {
  --image-bj1: url('/@/assets/images/fire/bj1.png');
  --image-max: url('/@/assets/images/fire/max.svg');
  --image-min: url('/@/assets/images/fire/min.svg');
  --image-pj: url('/@/assets/images/fire/pj.svg');
  --image-bj1: url('/@/assets/images/fire/bj1.png');
  --image-14174: url('/@/assets/images/fire/14174.png');
  --image-contetn: url('/@/assets/images/fire/contetn.png');
  --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  .work-nav {
    height: 15%;
    width: 100%;
    margin-bottom: 20px;
    background: var(--image-bj1) no-repeat center;
    background-size: 100% 100%;



  }

  .center-echart {
    width: 100%;
    height: 32%;
    padding: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    background: var(--image-bj1) no-repeat center;
    background-size: 100% 100%;


  }

  .bot-content {
    position: relative;
    width: 100%;
    height: calc(53% - 40px);
    padding: 10px 10px 0px 10px;
    box-sizing: border-box;
    background: var(--image-bj1) no-repeat center;
    background-size: 100% 100%;


  }
}

:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
  border: 1px solid #3ad8ff77 !important;
  background-color: #ffffff00 !important;
}

:deep(.zxm-select-selection-item) {
  color: #fff !important;
}

:deep(.zxm-select-arrow) {
  color: #fff;
}
</style>