[Feat 0000] 新的预设以及旧模块问题修复

src/views/vent/home/configurable/components/content.vue

@@ -66,8 +66,14 @@
         <template v-if="config.key === 'blast_delta'">
           <BlastDelta class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
         </template>
-        <template v-if="config.key === 'measure_point'">
-          <MeasureDetail class="content__module" :composite-data="config.data" />
+        <template v-if="config.key === 'measure_detail'">
+          <MeasureDetail
+            class="content__module"
+            :show-title="false"
+            :composite-data="config.data"
+            :topconfig="config.config.topconfig"
+            :btnconfig="config.config.btnconfig"
+          />
         </template>
         <!-- <template v-if="config.key === 'fire_control'">
         <FIreControl class="content__module" />
@@ -100,7 +106,7 @@
   import { get, clone } from 'lodash-es';
   import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
-  import MeasureDetail from '../../clique/dustComponents/measure-detail.vue';
+  import MeasureDetail from './preset/MeasureDetail.vue';
   // import FIreWarn from './preset/FIreWarn.vue';
   // import FIreControl from './preset/FIreControl.vue';
 

src/views/vent/home/configurable/components/header.vue

@@ -1,11 +1,11 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <!-- Header部分 -->
-  <div v-if="headerConfig.show" class="w-100% flex content__header">
+  <div v-if="headerConfig.show" class="w-100% flex costume-header">
     <!-- 选择下拉框，自动填充剩余空间，这种实现是因为 Select 不支持 suffix -->
     <Dropdown
       v-if="headerConfig.showSelector"
-      class="flex-grow-1 content__header_left"
+      class="flex-grow-1 costume-header_left"
       :trigger="['click']"
       :bordered="false"
       @open-change="visible = $event"
@@ -27,7 +27,7 @@
       </template>
     </Dropdown>
     <template v-if="headerConfig.showSlot">
-      <div class="flex flex-items-center flex-grow-1 content__header_right">
+      <div class="flex flex-items-center flex-grow-1 costume-header_right">
         <SwapOutlined class="w-30px" />
         <div class="flex-grow-1">
           {{ selectedDeviceSlot }}
@@ -40,7 +40,8 @@
   import { onMounted, onUnmounted, ref } from 'vue';
   import { Config } from '../../../deviceManager/configurationTable/types';
   import { useInitDevices } from '../hooks/useInit';
-  import { MenuItem } from 'ant-design-vue';
+  import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+  import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
 
   const props = defineProps<{
     moduleData: Config['moduleData'];
@@ -59,11 +60,13 @@
 
   function selectHandler({ key }) {
     selectedDeviceID.value = key;
-    emit('select', selectedDevice);
+    emit('select', selectedDevice.value);
   }
 
   onMounted(() => {
-    fetchDevices({ init: true });
+    fetchDevices({ init: true }).then(() => {
+      selectHandler({ key: selectedDeviceID.value });
+    });
     interval = setInterval(() => {
       fetchDevices();
     }, 600000);
@@ -74,17 +77,17 @@
   });
 </script>
 <style scoped>
-  .costume-header__header {
+  .costume-header {
     height: 30px;
     background-image: linear-gradient(90deg, #3df6ff44, transparent 20%, transparent 80%, #3df6ff44);
   }
-  .costume-header__header_left {
+  .costume-header_left {
     border-left: 3px solid;
     border-right: 3px solid;
     border-image-source: linear-gradient(to top, #185f7188, #3df6ff, #185f7188);
     border-image-slice: 1;
   }
-  .costume-header__header_right {
+  .costume-header_right {
     border-right: 3px solid;
     border-image-source: linear-gradient(to top, #185f7188, #3df6ff, #185f7188);
     border-image-slice: 1;

src/views/vent/home/configurable/components/preset/MeasureDetail.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="content-box">
+    <div class="dust-scroll-content">
+      <a-carousel dot-position="left" dotsClass="dots-class" :dots="true" :autoplay="true">
+        <template v-for="(data, selectIndex) in selectData" :key="selectIndex">
+          <div class="monitor-item">
+            <div class="title-box">{{ data['devicePos'] }}</div>
+            <div class="monitor-content-top">
+              <div v-for="(dustItem, index) in topConfig" :key="index" class="top-item-box" :class="`top-item-box-${index + 1}`">
+                <div class="item-top-title">{{ dustItem.title }}</div>
+                <div class="item-top-value">{{ data[dustItem.code] }}</div>
+              </div>
+            </div>
+            <div class="monitor-content-bottom">
+              <div v-for="(dustItem, index) in btnConfig" :key="index" class="bottom-item-box" :class="`bottom-item-box-${index + 1}`">
+                <div class="item-bottom-title">{{ dustItem.title }}</div>
+                <div class="item-bottom-value">{{ data[dustItem.code] }}</div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </a-carousel>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, defineProps, watch } from 'vue';
+  import { dustMonitorColumnTop, dustMonitorColumnBootom } from '../../../clique/dust.data';
+
+  let props = defineProps({
+    compositeData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    topconfig: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    btnconfig: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  });
+  const selectData = ref<any>([]);
+  const topConfig: any = props.topconfig.length ? props.topconfig : dustMonitorColumnTop;
+  const btnConfig: any = props.btnconfig.length ? props.btnconfig : dustMonitorColumnBootom;
+  watch(
+    () => props.compositeData,
+    (newS) => {
+      console.log('debug', newS);
+      selectData.value = newS;
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
+  }
+
+  .content-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    .dust-scroll-content {
+      width: 400px;
+      height: 420px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      .monitor-item {
+        margin-bottom: 15px;
+        .title-box {
+          color: #fff;
+          width: 100%;
+          height: 40px;
+          margin-left: 5px;
+          margin-top: 00px;
+          margin-bottom: 5px;
+          padding-left: 40px;
+          padding-top: 6px;
+          background: url('/@/assets//images//company//lentj.png') no-repeat;
+          background-size: 199px 100%;
+          font-size: 15px;
+          font-weight: 600;
+        }
+        .monitor-content-top {
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          color: #fff;
+          .top-item-box {
+            width: 193px;
+            height: 64px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 28px;
+          }
+          .top-item-box-1 {
+            background: url('/@/assets//images//company//dust//tip-bg-1.png');
+          }
+          .top-item-box-2 {
+            background: url('/@/assets//images//company//dust//tip-bg-2.png');
+          }
+          .top-item-box-3 {
+            background: url('/@/assets//images//company//dust//tip-bg-3.png');
+          }
+          .top-item-box-4 {
+            background: url('/@/assets//images//company//dust//tip-bg-4.png');
+          }
+        }
+        .monitor-content-bottom {
+          padding: 0 20px;
+          color: #fff;
+          .bottom-item-box {
+            width: 358px;
+            height: 43px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 14px;
+            position: relative;
+            .item-bottom-title {
+              margin-left: 65px;
+            }
+            .item-bottom-value {
+              margin-right: 20px;
+            }
+          }
+          .bottom-item-box-1 {
+            background: url('/@/assets//images//company//dust//tip-bg1-1.png');
+            &::after {
+              content: '';
+              width: 25px;
+              height: 25px;
+              position: absolute;
+              left: 13px;
+              top: 7px;
+              background: url('/@/assets//images//company//dust//dustCon-icon.png');
+            }
+          }
+          .bottom-item-box-2 {
+            background: url('/@/assets//images//company//dust//tip-bg1-2.png');
+            &::after {
+              content: '';
+              width: 25px;
+              height: 25px;
+              position: absolute;
+              left: 12px;
+              top: 6px;
+              background: url('/@/assets//images//company//dust//respirableDustCon-icon.png');
+            }
+          }
+          .bottom-item-box-3 {
+            background: url('/@/assets//images//company//dust//tip-bg1-1.png');
+            &::after {
+              content: '';
+              width: 28px;
+              height: 22px;
+              position: absolute;
+              left: 10px;
+              top: 7px;
+              background: url('/@/assets//images//company//dust//SiO2Content-icon.png');
+            }
+          }
+          .bottom-item-box-4 {
+            background: url('/@/assets//images//company//dust//tip-bg1-2.png');
+            &::after {
+              content: '';
+              width: 26px;
+              height: 20px;
+              position: absolute;
+              left: 11px;
+              top: 8px;
+              background: url('/@/assets//images//company//dust//respirableDustRatio-icon.png');
+            }
+          }
+        }
+      }
+    }
+  }
+  .dots-class {
+    width: 8px;
+  }
+  ::v-deep .slick-dots-left {
+    left: 0 !important;
+  }
+  ::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector {
+    height: 24px;
+  }
+
+  ::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector .zxm-select-selection-search-input {
+    height: 24px;
+  }
+
+  ::v-deep .zxm-select-selection-placeholder {
+    color: #fff !important;
+    line-height: 22px !important;
+  }
+
+  ::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector::after {
+    line-height: 24px;
+  }
+
+  ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
+    background-color: transparent;
+    border-top: 0px;
+    border-bottom: 0px;
+    border-left: 2px solid;
+    border-right: 2px solid;
+    border-image: linear-gradient(to bottom, transparent, rgba(49, 184, 255, 1), transparent) 1 1 1;
+  }
+
+  ::v-deep .zxm-select-arrow {
+    color: #fff !important;
+  }
+
+  ::v-deep .zxm-select-selection-item {
+    color: #fff !important;
+  }
+
+  ::v-deep .zxm-select-single .zxm-select-selector .zxm-select-selection-item {
+    line-height: 24px !important;
+  }
+</style>

src/views/vent/home/configurable/configurable.data.ts

@@ -3207,8 +3207,8 @@ export const testConfigBDNew: Config[] = [
     // },
     showStyle: {
       size: 'width:1000px;height:280px;',
-      version: '保德',
-      position: 'top:350px;left:460px',
+      version: '新版',
+      position: 'top:350px;left:460px;',
     },
   },
   {
@@ -3312,117 +3312,6 @@ export const testConfigBDNew: Config[] = [
       position: 'top:160px;left:0;',
     },
   },
-  // {
-  //   deviceType: '',
-  //   moduleName: '光纤测温',
-  //   pageType: '',
-  //   moduleData: {
-  //     header: {
-  //       show: true,
-  //       showSelector: true,
-  //       showSlot: false,
-  //       selector: {
-  //         value: '',
-  //       },
-  //       slot: {
-  //         value: '',
-  //       },
-  //     },
-  //     background: {
-  //       show: false,
-  //       type: 'video',
-  //       link: '',
-  //     },
-  //     slice: {
-  //       direction: 'row',
-  //       basis: ['50%', '50%'],
-  //     },
-  //     layout: ['list', 'chart'],
-  //     board: [],
-  //     chart: [
-  //       {
-  //         type: 'line',
-  //         readFrom: 'btArray',
-  //         legend: { show: false },
-  //         xAxis: [{ show: true }],
-  //         yAxis: [{ show: true, name: '值', position: 'left' }],
-  //         series: [{ label: '', readFrom: '', xprop: 'value', yprop: 'pos' }],
-  //       },
-  //     ],
-  //     gallery: [],
-  //     gallery_list: [],
-  //     table: [],
-  //     list: [
-  //       {
-  //         type: 'G',
-  //         readFrom: 'dsArray',
-  //         items: [
-  //           {
-  //             label: 'CO',
-  //             value: '--',
-  //             color: 'blue',
-  //             info: '--',
-  //           },
-  //           {
-  //             label: 'CO₂',
-  //             value: '--',
-  //             color: 'blue',
-  //             info: '--',
-  //           },
-  //           {
-  //             label: 'CH₄',
-  //             value: '--',
-  //             color: 'blue',
-  //             info: '--',
-  //           },
-  //           {
-  //             label: 'C₂H₂',
-  //             value: '--',
-  //             color: 'blue',
-  //             info: '--',
-  //           },
-  //           // {
-  //           //   label: 'C₂H₄',
-  //           //   value: '--',
-  //           //   color: 'blue',
-  //           //   info: '--',
-  //           // },
-  //           // {
-  //           //   label: 'O₂',
-  //           //   value: '--',
-  //           //   color: 'blue',
-  //           //   info: '--',
-  //           // },
-  //           // {
-  //           //   label: '温度',
-  //           //   value: '--',
-  //           //   color: 'blue',
-  //           //   info: '--',
-  //           // },
-  //           // {
-  //           //   label: '风险',
-  //           //   value: '--',
-  //           //   color: 'blue',
-  //           //   info: '--',
-  //           // },
-  //         ],
-  //       },
-  //     ],
-  //     complex_list: [],
-  //     preset: [],
-  //     // mock: BDfireMock,
-  //   },
-  //   // showStyle: {
-  //   //   size: 'width:450px;height:760px;',
-  //   //   version: '保德',
-  //   //   position: 'top:160px;left:0;',
-  //   // },
-  //   showStyle: {
-  //     size: 'width:1000px;height:280px;',
-  //     version: '保德',
-  //     position: 'top:640px;left:460px',
-  //   },
-  // },
   {
     deviceType: 'btArray',
     moduleName: '工作面束管监测',
@@ -3647,7 +3536,112 @@ export const testConfigBDNew: Config[] = [
     showStyle: {
       size: 'width:1000px;height:280px;',
       version: '保德',
-      position: 'top:640px;left:460px',
+      position: 'top:640px;left:460px;',
+    },
+  },
+  {
+    deviceType: 'mockPath',
+    moduleName: '测试右上',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: true,
+        showSelector: true,
+        showSlot: false,
+        selector: {
+          value: '${orgname}',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
+      layout: ['measure_detail'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'dust_data',
+        },
+      ],
+      mock: {
+        mockPath: [
+          {
+            orgname: '布尔台煤矿',
+            orgcode: 'sdmtjtbetmk',
+            dust_data: [
+              {
+                devicePos: '布尔台煤矿掘进工作面',
+                dustType: '煤',
+                fireLen: '',
+                isBlast: '无',
+                airQuantity: '1208.00',
+                dustCon: '8.00',
+                respirableDustCon: '3.90',
+                SiO2Content: '28.00',
+                respirableDustRatio: '68.00',
+              },
+              {
+                devicePos: '布尔台煤矿综放工作面',
+                dustType: '煤',
+                fireLen: '',
+                isBlast: '无',
+                airQuantity: '708.00',
+                dustCon: '3.17',
+                respirableDustCon: '1.65',
+                SiO2Content: '18.00',
+                respirableDustRatio: '48.00',
+              },
+            ],
+          },
+          {
+            orgname: '大柳塔井',
+            orgcode: 'sdmtjtdltmk',
+            dust_data: [
+              {
+                devicePos: '22煤主运大巷掘进工作面',
+                dustType: '煤',
+                fireLen: '',
+                isBlast: '无',
+                airQuantity: '',
+                dustCon: '8.00',
+                respirableDustCon: '3.90',
+                SiO2Content: '28.00',
+                respirableDustRatio: '68.00',
+              },
+              {
+                devicePos: '42205综放工作面',
+                dustType: '煤',
+                fireLen: '',
+                isBlast: '无',
+                airQuantity: '',
+                dustCon: '3.17',
+                respirableDustCon: '1.65',
+                SiO2Content: '18.00',
+                respirableDustRatio: '48.00',
+              },
+            ],
+          },
+        ],
+      },
+    },
+    showStyle: {
+      size: 'width:450px;height:570px;',
+      version: '新版',
+      position: 'top:60px;right:0;',
     },
   },
   {

src/views/vent/home/configurable/index.vue

@@ -15,79 +15,96 @@
     </a-dropdown> -->
     <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
 
-    <div class="left-t">
-      <div class="tcontent-area">
-        <div class="tcontent-l">
-          <div>监测</div>
-          <div>区域</div>
+    <template v-if="isOriginal">
+      <ModuleOriginal
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :visible="true"
+      />
+    </template>
+    <template v-else-if="isCommon">
+      <ModuleCommon
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :visible="true"
+      />
+    </template>
+    <template v-else>
+      <!-- 下面是正常展示的各新版模块 -->
+      <ModuleEnhanced
+        v-for="cfg in enhancedConfigs"
+        :key="cfg.deviceType"
+        :visible="cfg.visible"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        @close="cfg.visible = false"
+      />
+      <!-- 下面是用于呼出已隐藏的模块的按钮 -->
+      <div class="pos-absolute top-70px left-460px">
+        <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
+          <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>
-        <div class="tcontent-c">
-          <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
-            {{ homedata.allMineWarn }}
-          </div>
-          <!-- <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div> -->
-        </div>
-        <div class="tcontent-r">
-          <div>粉尘</div>
-          <div>风险</div>
-        </div>
-      </div>
-    </div>
-    <!-- <div class="right-t">
-      <div class="tcontent-l" @click="redirectTo('https://bing.cn')">
-        <div>智能</div>
-        <div>灌浆系统</div>
-      </div>
-      <div class="tcontent-r" @click="redirectTo('https://bing.cn')">
-        <div>智能</div>
-        <div>注氟系统</div>
       </div>
-    </div> -->
-    <ModuleBD
-      v-for="cfg in configs"
-      :key="cfg.deviceType"
-      :show-style="cfg.showStyle"
-      :module-data="cfg.moduleData"
-      :module-name="cfg.moduleName"
-      :device-type="cfg.deviceType"
-      :visible="true"
-      :page-type="pageType"
-    />
-    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
-      <VentModal />
-    </div>
+    </template>
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue';
+  import { computed, onMounted, ref } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
-  // import { useInitConfigs } from './hooks/useInit';
-  import ModuleBD from './components/ModuleBD.vue';
+  import { useInitConfigs } from './hooks/useInit';
+  import { Config } from '../../deviceManager/configurationTable/types';
+  import ModuleEnhanced from './components/ModuleEnhanced.vue';
+  import ModuleOriginal from './components/ModuleOriginal.vue';
+  import ModuleCommon from './components/ModuleCommon.vue';
   import { testConfigBDNew } from './configurable.data';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getBDDustData } from './configurable.api';
+  import { useRoute } from 'vue-router';
 
-  const mainTitle = ref('保德煤矿粉尘灾害预警系统');
-  const pageType = 'BD_dust';
+  interface EnhancedConfig extends Config {
+    visible: boolean;
+  }
+
+  const mainTitle = ref('智能通风管控系统');
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const configs = ref(testConfigBDNew);
-  // const { configs, fetchConfigs } = useInitConfigs();
-  const homedata = ref<any>({});
+  const enhancedConfigs = ref<EnhancedConfig[]>([]);
+
+  const hiddenList = computed(() => {
+    return enhancedConfigs.value.filter((e) => e.visible === false);
+  });
+  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
 
   onMounted(() => {
+    const query = useRoute().query;
+    if (query.fire) {
+      mainTitle.value = '智能火灾管控系统';
+    }
+    if (query.gas) {
+      mainTitle.value = '智能瓦斯管控系统';
+    }
     // configs.value = testConfigB;
-    getBDDustData({}).then((r) => {
-      homedata.value = r;
+    fetchConfigs('configurable_home').then(() => {
+      configs.value = testConfigBDNew;
+      // configs.value.push(...testConfigBDNew);
+      enhancedConfigs.value = configs.value.map((c) => {
+        return {
+          visible: true,
+          ...c,
+        };
+      });
     });
-    // fetchConfigs(pageType);
   });
-
-  // function redirectTo(url) {
-  //   window.open(url);
-  // }
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -104,14 +121,14 @@
 
     .top-bg {
       width: 100%;
-      height: 86px;
+      height: 56px;
       background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
-        height: 86px;
+        height: 56px;
         font-family: 'douyuFont';
-        font-size: 26px;
+        font-size: 20px;
         letter-spacing: 2px;
         display: flex;
         justify-content: center;
@@ -161,123 +178,4 @@
       border-bottom: 2px solid #3df6ff;
     }
   }
-
-  .left-t {
-    position: absolute;
-    height: 115px;
-    top: 30px;
-    width: 450px;
-    background-image: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
-    background-color: #000723;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 100% 100%;
-
-    .tcontent-area {
-      display: flex;
-      position: absolute;
-      top: 50%;
-      left: 0;
-      box-sizing: border-box;
-      align-items: center;
-      justify-content: space-around;
-      width: 100%;
-      height: 70px;
-      padding: 0 15px;
-      transform: translate(0, -40%);
-
-      .tcontent-l {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        color: #9da5aa;
-        font-size: 14px;
-        font-weight: bold;
-        letter-spacing: 2px;
-      }
-
-      .tcontent-c {
-        display: flex;
-        flex: 3;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-      }
-
-      .tcontent-r {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        color: #9da5aa;
-        font-size: 14px;
-        font-weight: bold;
-        letter-spacing: 2px;
-      }
-    }
-  }
-  .right-t {
-    position: absolute;
-    height: 160px;
-    right: 0;
-    top: 40px;
-    width: 450px;
-    background-image: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
-    background-color: #000723;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 100% 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-
-    .tcontent-l {
-      flex: 1;
-      height: 70%;
-      font-size: 20px;
-      font-weight: bold;
-      background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
-        url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
-      background-size:
-        auto 100%,
-        auto auto;
-      background-repeat: no-repeat;
-      background-position:
-        center,
-        center top;
-      text-align: center;
-      padding-top: 40px;
-      line-height: 50px;
-      cursor: pointer;
-    }
-    .tcontent-r {
-      flex: 1;
-      height: 70%;
-      font-size: 20px;
-      font-weight: bold;
-      background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
-        url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
-      background-size:
-        auto 100%,
-        auto auto;
-      background-repeat: no-repeat;
-      background-position:
-        center,
-        center top;
-      text-align: center;
-      padding-top: 40px;
-      line-height: 50px;
-      cursor: pointer;
-    }
-  }
-
-  :deep(.loading-box) {
-    position: unset;
-  }
 </style>