调整布局，修改导航头的占位问题，为了满足安全分院嵌入

src/settings/projectSetting.ts

@@ -62,7 +62,7 @@ const setting: ProjectConfig = {
     // header bg color
     bgColor: HEADER_PRESET_BG_COLOR_LIST[0],
     // Fixed at the top
-    fixed: true,
+    fixed: false,
     // Whether to show top
     show: false,
     // theme

src/views/vent/dust/dustHome/index.vue

@@ -5,7 +5,7 @@
       <iframe src="http://82.157.13.146:18224/valkyrja/" width="100%" height="100%" frameborder="0"></iframe>
     </div> -->
     <div class="main-container">
-      <transition name="fade" mode="out-in" >
+      <transition name="fade" mode="out-in">
         <div class="left-area" v-if="isShow">
           <!-- 左上区域 -->
           <div class="left-t">
@@ -24,12 +24,21 @@
           <!-- 左中区域 -->
           <div class="left-c">
             <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '645px' }">
-              <workJc :heightT="'22%'" :heightB="'78%'" :cardData="cardData" :echartData="echartDataWork" />
+              <workJc
+                :heightT="'22%'"
+                :heightB="'78%'"
+                :cardData="cardData"
+                :echartData="echartDataWork"
+              />
             </DanelBd>
           </div>
           <!-- 左底部区域 -->
           <div class="left-f">
-            <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs" />
+            <DanelBd
+              :moduleName="'GIS重点区域风险监测'"
+              :contentStyle="{ contentH: '0px' }"
+              commonTitle="switchs"
+            />
           </div>
         </div>
       </transition>
@@ -37,493 +46,515 @@
       <div :class="isShow ? 'center-area' : 'center-area1'">
         <div :class="isShow ? 'center-t' : 'center-t1'">
           <div class="center-scalc" @click="getScalc">
-            <img src="../../../../assets/images/scalc.png" alt="">
+            <img src="../../../../assets/images/scalc.png" alt="" />
           </div>
-          <iframe src="http://82.157.13.146:18224/valkyrja/" width="100%" height="100%" frameborder="0"></iframe>
+          <iframe
+            src="http://82.157.13.146:18224/valkyrja/"
+            width="100%"
+            height="100%"
+            frameborder="0"
+          ></iframe>
         </div>
         <transition name="fade" mode="out-in">
           <div class="center-b" v-if="isShow">
-          <DanelBd :moduleName="'综放工作面粉尘浓度'" :contentStyle="{ contentH: '288px' }" :commonTitle="'selected'"
-            :selectList="selectListBd" :selectValue="sensorCode" @change-select="changeSelect">
-            <multipleDust :echartData="echartData" />
-          </DanelBd>
-        </div>
+            <DanelBd
+              :moduleName="'综放工作面粉尘浓度'"
+              :contentStyle="{ contentH: '288px' }"
+              :commonTitle="'selected'"
+              :selectList="selectListBd"
+              :selectValue="sensorCode"
+              @change-select="changeSelect"
+            >
+              <multipleDust :echartData="echartData" />
+            </DanelBd>
+          </div>
         </transition>
-       
       </div>
 
       <transition name="fade" mode="out-in">
         <div class="right-area" v-if="isShow">
-        <!-- 右上区域 -->
-        <div class="right-t">
-          <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '305px' }">
-            <dustFallDevice :deviceTotal="deviceTotal" :pwTotal="pwTotal" :interTotal="interTotal"
-              :unInterTotal="unInterTotal" :pwData="pwData" />
-          </DanelBd>
-        </div>
-        <!-- 右中区域 -->
-        <div class="right-c">
-          <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '250px' }" commonTitle="selected"
-            :selectList="selectListBd" :selectValue="sensorCode" @change-select="changeSelect1">
-            <dustGlzb :dustGlzbData="dustGlzbData" />
-          </DanelBd>
-        </div>
-        <!-- 右下区域 -->
-        <div class="right-b">
-          <DanelBd :moduleName="'粉尘静态指标'" :contentStyle="{ contentH: '160px' }" commonTitle="selected"
-            :selectList="selectListJt" :selectValue="jtzbCode">
-            <dustJtzb />
-          </DanelBd>
+          <!-- 右上区域 -->
+          <div class="right-t">
+            <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '305px' }">
+              <dustFallDevice
+                :deviceTotal="deviceTotal"
+                :pwTotal="pwTotal"
+                :interTotal="interTotal"
+                :unInterTotal="unInterTotal"
+                :pwData="pwData"
+              />
+            </DanelBd>
+          </div>
+          <!-- 右中区域 -->
+          <div class="right-c">
+            <DanelBd
+              :moduleName="'粉尘关联指标'"
+              :contentStyle="{ contentH: '250px' }"
+              commonTitle="selected"
+              :selectList="selectListBd"
+              :selectValue="sensorCode"
+              @change-select="changeSelect1"
+            >
+              <dustGlzb :dustGlzbData="dustGlzbData" />
+            </DanelBd>
+          </div>
+          <!-- 右下区域 -->
+          <div class="right-b">
+            <DanelBd
+              :moduleName="'粉尘静态指标'"
+              :contentStyle="{ contentH: '160px' }"
+              commonTitle="selected"
+              :selectList="selectListJt"
+              :selectValue="jtzbCode"
+            >
+              <dustJtzb />
+            </DanelBd>
+          </div>
         </div>
-      </div>
       </transition>
-     
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, onUnmounted } from 'vue';
-import DanelBd from '../../common/danelBd.vue';
-import workJc from '../../fire/fireHome/components/workJc.vue';
-import multipleDust from './components/multipleDust.vue';
-import dustFallDevice from './components/dustFallDevice.vue';
-import dustGlzb from './components/dustGlzb.vue';
-import dustJtzb from './components/dustJtzb.vue';
-import {
-  getAreaTypeList,
-  getRealSensorDataByType,
-  getDustInfos,
-  historyAndForecast,
-  realData,
-} from './dustHome.api';
-
-//是否显示左侧区域和右侧区域
-let isShow = ref(true)
-
-//工作面风险监测数据
-let cardData = reactive<any[]>([]);
-let echartDataWork = reactive<any[]>([]);
-let areaType = ref('');
-
-//综放工作面粉尘浓度数据
-let selectListBd = reactive<any[]>([]);
-let sensorCode = ref('');
-let echartData = reactive({
-  xData: [],
-  yData: [],
-  legendName: ['实时值'],
-});
-
-//智能喷雾降尘装置数据
-let deviceTotal = ref(0);
-let pwTotal = ref(0);
-let interTotal = ref(0);
-let unInterTotal = ref(0);
-let pwData = reactive<any[]>([]);
-
-//粉尘关联指标数据
-let dustGlzbData = reactive<any[]>([
-  { label: '最高温度(℃)', val: 0 },
-  { label: '环境湿度(%)', val: 0 },
-  { label: '风速(m/s)', val: 0 },
-  { label: '采煤机', val: 0 },
-  { label: '水压(Mpa)', val: 0 },
-  { label: '水阀', val: 0 },
-]);
-
-//粉尘静态指标数据
-let selectListJt = reactive<any[]>([
-  { label: '8#煤层', value: '0' },
-  { label: '9#煤层', value: '1' },
-  { label: '10#煤层', value: '2' },
-])
-let jtzbCode = ref('0')
-
-//隐藏和显示左右侧区域
-function getScalc() {
-  isShow.value = !isShow.value
-
-}
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor() {
-  timer = setTimeout(async () => {
-    await getFireAreaInfoList();
-    await getRealDataList();
-    if (timer) {
-      timer = null;
-    }
-    getMonitor();
-  }, 5000);
-}
-
-//综放工作面下拉选项切换
-function changeSelect(data) {
-  console.log(data, '下拉选项-----');
-  sensorCode.value = data.value;
-  getDustInfosList();
-}
-//粉尘关联指标下拉选项切换
-function changeSelect1(data) {
-  console.log(data, '下拉选项-----');
-  let param = selectListBd.filter((v) => v.value == data.value)[0];
-  console.log(param, 'param------');
-  dustGlzbData[0].val = param['temperature'] || '--';
-  dustGlzbData[1].val = param['humidity'] || '--';
-  dustGlzbData[2].val = param['windSpeed'] || '--';
-  dustGlzbData[3].val = '--';
-  dustGlzbData[4].val = param['waterPressure'] || '--';
-  dustGlzbData[5].val = '--';
-}
-//获取工作面风险监测数据
-async function getFireAreaInfoList() {
-  let res = await getAreaTypeList();
-  console.log(res, '工作面风险监测数据');
-  if (res.length != 0) {
-    cardData.length = 0;
-    echartDataWork.length = 0;
-    res.forEach((el) => {
-      cardData.push({
-        title: '风险',
-        val:
-          el.warningLevel == 1
-            ? '低'
-            : el.warningLevel == 2
-              ? '中'
-              : el.warningLevel == 3
-                ? '较大'
-                : el.warningLevel == 4
-                  ? '重大'
-                  : '--',
-        label: el.typeName,
-        title1: '最大值',
-        val1: el.maxValue,
-      });
-    });
-    areaType.value = res[0]['areaType'];
-    //获取粉尘选项数据
-    getRealSensorDataByTypeList();
+  import { ref, reactive, onMounted, onUnmounted } from 'vue';
+  import DanelBd from '../../common/danelBd.vue';
+  import workJc from '../../fire/fireHome/components/workJc.vue';
+  import multipleDust from './components/multipleDust.vue';
+  import dustFallDevice from './components/dustFallDevice.vue';
+  import dustGlzb from './components/dustGlzb.vue';
+  import dustJtzb from './components/dustJtzb.vue';
+  import {
+    getAreaTypeList,
+    getRealSensorDataByType,
+    getDustInfos,
+    historyAndForecast,
+    realData,
+  } from './dustHome.api';
+
+  //是否显示左侧区域和右侧区域
+  let isShow = ref(true);
+
+  //工作面风险监测数据
+  let cardData = reactive<any[]>([]);
+  let echartDataWork = reactive<any[]>([]);
+  let areaType = ref('');
+
+  //综放工作面粉尘浓度数据
+  let selectListBd = reactive<any[]>([]);
+  let sensorCode = ref('');
+  let echartData = reactive({
+    xData: [],
+    yData: [],
+    legendName: ['实时值'],
+  });
+
+  //智能喷雾降尘装置数据
+  let deviceTotal = ref(0);
+  let pwTotal = ref(0);
+  let interTotal = ref(0);
+  let unInterTotal = ref(0);
+  let pwData = reactive<any[]>([]);
+
+  //粉尘关联指标数据
+  let dustGlzbData = reactive<any[]>([
+    { label: '最高温度(℃)', val: 0 },
+    { label: '环境湿度(%)', val: 0 },
+    { label: '风速(m/s)', val: 0 },
+    { label: '采煤机', val: 0 },
+    { label: '水压(Mpa)', val: 0 },
+    { label: '水阀', val: 0 },
+  ]);
+
+  //粉尘静态指标数据
+  let selectListJt = reactive<any[]>([
+    { label: '8#煤层', value: '0' },
+    { label: '9#煤层', value: '1' },
+    { label: '10#煤层', value: '2' },
+  ]);
+  let jtzbCode = ref('0');
+
+  //隐藏和显示左右侧区域
+  function getScalc() {
+    isShow.value = !isShow.value;
+  }
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor() {
+    timer = setTimeout(async () => {
+      await getFireAreaInfoList();
+      await getRealDataList();
+      if (timer) {
+        timer = null;
+      }
+      getMonitor();
+    }, 5000);
   }
-}
-//获取粉尘选项数据
-async function getRealSensorDataByTypeList() {
-  let res = await getRealSensorDataByType({ areaType: areaType.value });
-  console.log(res, '下拉选项数据---');
-  if (res.length != 0) {
-    selectListBd.length = 0;
-    res.forEach((el) => {
-      selectListBd.push({
-        label: el.name,
-        value: el.code,
-        temperature: el.temperature,
-        humidity: el.humidity,
-        windSpeed: el.windSpeed,
-        waterPressure: el.waterPressure,
-      });
-    });
-    sensorCode.value = sensorCode.value ? sensorCode.value : selectListBd[0]['value'];
-    dustGlzbData[0].val = selectListBd[0]['temperature'] || '--';
-    dustGlzbData[1].val = selectListBd[0]['humidity'] || '--';
-    dustGlzbData[2].val = selectListBd[0]['windSpeed'] || '--';
-    dustGlzbData[3].val = '--';
-    dustGlzbData[4].val = selectListBd[0]['waterPressure'] || '--';
-    dustGlzbData[5].val = '--';
 
-    //获取单项数据
+  //综放工作面下拉选项切换
+  function changeSelect(data) {
+    console.log(data, '下拉选项-----');
+    sensorCode.value = data.value;
     getDustInfosList();
   }
-}
-//获取单项数据
-async function getDustInfosList() {
-  let res = await getDustInfos({ sensorCode: sensorCode.value });
-  console.log(res, '单项数据------');
-  //获取粉尘图表数据
-  historyAndForecastList(res.areaCode);
-}
-//获取粉尘图表数据
-async function historyAndForecastList(params) {
-  let res = await historyAndForecast({ areaCode: params });
-  console.log(res, '粉尘图表数据----');
-  if (res.lineData.length != 0) {
-    echartData.xData.length = 0;
-    echartData.yData.length = 0;
-    res.lineData.forEach((el) => {
-      echartData.xData.push(el.time);
-      echartData.yData.push(el.value || 0);
-    });
+  //粉尘关联指标下拉选项切换
+  function changeSelect1(data) {
+    console.log(data, '下拉选项-----');
+    let param = selectListBd.filter((v) => v.value == data.value)[0];
+    console.log(param, 'param------');
+    dustGlzbData[0].val = param['temperature'] || '--';
+    dustGlzbData[1].val = param['humidity'] || '--';
+    dustGlzbData[2].val = param['windSpeed'] || '--';
+    dustGlzbData[3].val = '--';
+    dustGlzbData[4].val = param['waterPressure'] || '--';
+    dustGlzbData[5].val = '--';
   }
-}
-
-//获取智能喷雾降尘装置数据
-async function getRealDataList() {
-  let res = await realData({ type: 'DustPw' });
-  console.log(res, '智能喷雾降尘装置数据');
-  if (res.length != 0) {
-    pwData.length = 0;
-    deviceTotal.value = res.length;
-    pwTotal.value = res.filter((v) => v.deviceState == '1').length;
-    interTotal.value = res.filter((v) => v.stateConn == '1').length;
-    unInterTotal.value = res.filter((v) => v.stateConn != '1').length;
-    res.forEach((el, index) => {
-      el.stateSpray = el.stateSpray == '1' ? '喷雾开' : '喷雾关';
-      el.stateConn = el.stateConn == '1' ? '链接' : '未链接';
-      pwData.push(el);
-    });
+  //获取工作面风险监测数据
+  async function getFireAreaInfoList() {
+    let res = await getAreaTypeList();
+    console.log(res, '工作面风险监测数据');
+    if (res.length != 0) {
+      cardData.length = 0;
+      echartDataWork.length = 0;
+      res.forEach((el) => {
+        cardData.push({
+          title: '风险',
+          val:
+            el.warningLevel == 1
+              ? '低'
+              : el.warningLevel == 2
+                ? '中'
+                : el.warningLevel == 3
+                  ? '较大'
+                  : el.warningLevel == 4
+                    ? '重大'
+                    : '--',
+          label: el.typeName,
+          title1: '最大值',
+          val1: el.maxValue,
+        });
+      });
+      areaType.value = res[0]['areaType'];
+      //获取粉尘选项数据
+      getRealSensorDataByTypeList();
+    }
   }
-}
-
-onMounted(() => {
-  getFireAreaInfoList();
-  getRealDataList();
-  getMonitor();
-});
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = null;
+  //获取粉尘选项数据
+  async function getRealSensorDataByTypeList() {
+    let res = await getRealSensorDataByType({ areaType: areaType.value });
+    console.log(res, '下拉选项数据---');
+    if (res.length != 0) {
+      selectListBd.length = 0;
+      res.forEach((el) => {
+        selectListBd.push({
+          label: el.name,
+          value: el.code,
+          temperature: el.temperature,
+          humidity: el.humidity,
+          windSpeed: el.windSpeed,
+          waterPressure: el.waterPressure,
+        });
+      });
+      sensorCode.value = sensorCode.value ? sensorCode.value : selectListBd[0]['value'];
+      dustGlzbData[0].val = selectListBd[0]['temperature'] || '--';
+      dustGlzbData[1].val = selectListBd[0]['humidity'] || '--';
+      dustGlzbData[2].val = selectListBd[0]['windSpeed'] || '--';
+      dustGlzbData[3].val = '--';
+      dustGlzbData[4].val = selectListBd[0]['waterPressure'] || '--';
+      dustGlzbData[5].val = '--';
+
+      //获取单项数据
+      getDustInfosList();
+    }
+  }
+  //获取单项数据
+  async function getDustInfosList() {
+    let res = await getDustInfos({ sensorCode: sensorCode.value });
+    console.log(res, '单项数据------');
+    //获取粉尘图表数据
+    historyAndForecastList(res.areaCode);
+  }
+  //获取粉尘图表数据
+  async function historyAndForecastList(params) {
+    let res = await historyAndForecast({ areaCode: params });
+    console.log(res, '粉尘图表数据----');
+    if (res.lineData.length != 0) {
+      echartData.xData.length = 0;
+      echartData.yData.length = 0;
+      res.lineData.forEach((el) => {
+        echartData.xData.push(el.time);
+        echartData.yData.push(el.value || 0);
+      });
+    }
   }
-});
+
+  //获取智能喷雾降尘装置数据
+  async function getRealDataList() {
+    let res = await realData({ type: 'DustPw' });
+    console.log(res, '智能喷雾降尘装置数据');
+    if (res.length != 0) {
+      pwData.length = 0;
+      deviceTotal.value = res.length;
+      pwTotal.value = res.filter((v) => v.deviceState == '1').length;
+      interTotal.value = res.filter((v) => v.stateConn == '1').length;
+      unInterTotal.value = res.filter((v) => v.stateConn != '1').length;
+      res.forEach((el, index) => {
+        el.stateSpray = el.stateSpray == '1' ? '喷雾开' : '喷雾关';
+        el.stateConn = el.stateConn == '1' ? '链接' : '未链接';
+        pwData.push(el);
+      });
+    }
+  }
+
+  onMounted(() => {
+    getFireAreaInfoList();
+    getRealDataList();
+    getMonitor();
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  });
 </script>
 
 <style lang="less" scoped>
-@font-face {
-  font-family: douyuFont;
-  src: url('../../../../assets/font/douyuFont.otf');
-}
-
-.dustHome {
-  position: relative;
-  // width: calc(100% - 20px);
-  // height: calc(100vh - 82px);
-  width: 100%;
-  // height: calc(100vh - 70px);
-  height: 875px;
-  margin-top: 50px;
-
-  .moduleArea {
-    width: 100%;
-    height: 100%;
+  @font-face {
+    font-family: douyuFont;
+    src: url('../../../../assets/font/douyuFont.otf');
   }
 
-  .main-container {
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    box-sizing: border-box;
-    justify-content: space-between;
+  .dustHome {
+    position: relative;
+    // width: calc(100% - 20px);
+    // height: calc(100vh - 82px);
     width: 100%;
-    height: 100%;
-    padding: 15px 10px;
+    // height: calc(100vh - 70px);
+    height: 875px;
+    margin-top: 50px;
+
+    .moduleArea {
+      width: 100%;
+      height: 100%;
+    }
 
-    .left-area {
+    .main-container {
       display: flex;
-      flex-direction: column;
-      align-items: center;
+      position: absolute;
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
       justify-content: space-between;
-      // width: 30%;
-      width: 392px;
+      width: 100%;
       height: 100%;
-      margin-right: 15px;
+      padding: 15px 10px;
+
+      .left-area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        // width: 30%;
+        width: 392px;
+        height: 100%;
+        margin-right: 15px;
 
-      .left-t {
-        position: relative;
-        width: 100%;
-        // height: 121px;
-        height: 100px;
-        background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat 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;
+        .left-t {
+          position: relative;
           width: 100%;
-          height: 90px;
-          padding: 0 15px;
-          transform: translate(0, -50%);
+          // height: 121px;
+          height: 100px;
+          background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
+          background-size: 100% 100%;
 
-          .tcontent-l {
+          .tcontent-area {
             display: flex;
-            flex: 1;
-            flex-direction: column;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            box-sizing: border-box;
             align-items: center;
-            justify-content: center;
-            height: 100%;
-            color: #9da5aa;
-            font-size: 14px;
-            letter-spacing: 2px;
-          }
+            justify-content: space-around;
+            width: 100%;
+            height: 90px;
+            padding: 0 15px;
+            transform: translate(0, -50%);
+
+            .tcontent-l {
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              height: 100%;
+              color: #9da5aa;
+              font-size: 14px;
+              letter-spacing: 2px;
+            }
 
-          .tcontent-c {
-            display: flex;
-            flex: 3;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-          }
+            .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;
-            letter-spacing: 2px;
+            .tcontent-r {
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              height: 100%;
+              color: #9da5aa;
+              font-size: 14px;
+              letter-spacing: 2px;
+            }
           }
         }
-      }
 
-      .left-c {
-        width: 100%;
-      }
+        .left-c {
+          width: 100%;
+        }
 
-      .left-f {
-        width: 100%;
+        .left-f {
+          width: 100%;
+        }
       }
-    }
 
-    .center-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      width: calc(100% - 814px);
+      .center-area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        width: calc(100% - 814px);
 
-      .center-t {
-        position: relative;
-        width: 100%;
-        height: 60%;
-        margin-bottom: 15px;
-        overflow: hidden;
-
-        .center-scalc {
-          position: absolute;
-          top: 10px;
-          left: 10px;
-          width: 50px;
-          height: 50px;
-          background-color: rgb(30 58 117 / 41.8%);
-
-          img {
+        .center-t {
+          position: relative;
+          width: 100%;
+          height: 60%;
+          margin-bottom: 15px;
+          overflow: hidden;
+
+          .center-scalc {
             position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 37px;
-            height: 41px;
-            transform: translate(-50%, -50%);
-            cursor: pointer;
-
-            &:hover {
-              width: 43px;
-              height: 47px;
-              background-color: rgb(100 228 185 / 6.27%);
+            top: 10px;
+            left: 10px;
+            width: 50px;
+            height: 50px;
+            background-color: rgb(30 58 117 / 41.8%);
+
+            img {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              width: 37px;
+              height: 41px;
+              transform: translate(-50%, -50%);
+              cursor: pointer;
+
+              &:hover {
+                width: 43px;
+                height: 47px;
+                background-color: rgb(100 228 185 / 6.27%);
+              }
             }
           }
         }
+
+        .center-b {
+          width: 100%;
+          height: calc(40% - 15px);
+        }
       }
 
-      .center-b {
+      .center-area1 {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
         width: 100%;
-        height: calc(40% - 15px);
-      }
-    }
 
-    .center-area1 {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
+        .center-t1 {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          margin-bottom: 15px;
+          overflow: hidden;
 
-      .center-t1 {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        margin-bottom: 15px;
-        overflow: hidden;
-
-        .center-scalc {
-          position: absolute;
-          top: 10px;
-          left: 10px;
-          width: 50px;
-          height: 50px;
-          background-color: rgb(30 58 117 / 41.8%);
-
-          img {
+          .center-scalc {
             position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 37px;
-            height: 41px;
-            transform: translate(-50%, -50%);
-            cursor: pointer;
-
-            &:hover {
-              width: 43px;
-              height: 47px;
-              background-color: rgb(100 228 185 / 6.27%);
+            top: 10px;
+            left: 10px;
+            width: 50px;
+            height: 50px;
+            background-color: rgb(30 58 117 / 41.8%);
+
+            img {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              width: 37px;
+              height: 41px;
+              transform: translate(-50%, -50%);
+              cursor: pointer;
+
+              &:hover {
+                width: 43px;
+                height: 47px;
+                background-color: rgb(100 228 185 / 6.27%);
+              }
             }
           }
         }
       }
 
-    
-    }
-
-    .right-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      // width: 30%;
-      width: 392px;
-      height: 100%;
-      margin-left: 15px;
+      .right-area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        // width: 30%;
+        width: 392px;
+        height: 100%;
+        margin-left: 15px;
 
-      .right-t {
-        width: 100%;
-      }
+        .right-t {
+          width: 100%;
+        }
 
-      .right-c {
-        width: 100%;
-      }
+        .right-c {
+          width: 100%;
+        }
 
-      .right-b {
-        width: 100%;
+        .right-b {
+          width: 100%;
+        }
       }
     }
-  }
 
-   /* fade.css */
-   .fade-enter-active {
-    transition:opacity 2.5s ease;
+    /* fade.css */
+    .fade-enter-active {
+      transition: opacity 2.5s ease;
 
-    /* 设置过渡时间为1秒 */
-  }
+      /* 设置过渡时间为1秒 */
+    }
 
-  .fade-leave-active {
-    transition:  opacity 0.5s ease;
+    .fade-leave-active {
+      transition: opacity 0.5s ease;
 
-    /* 设置过渡时间为1秒 */
-  }
+      /* 设置过渡时间为1秒 */
+    }
 
-  .fade-enter,
-  .fade-leave-to {
-    opacity: 0;
+    .fade-enter,
+    .fade-leave-to {
+      opacity: 0;
 
-    /* 初始状态为不可见 */
+      /* 初始状态为不可见 */
+    }
   }
-}
 </style>