[Mod 0000] 优化样式

src/design/themify/default.less

@@ -39,7 +39,7 @@ html {
 
   --vent-configurable-bg: #09316a;
   --vent-configurable-module-bg: #3df6ff11;
-  --vent-configurable-original-module-bg: #00336655;
+  --vent-configurable-original-module-bg: #00466633;
   --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
   --vent-configurable-dropdown: linear-gradient(to bottom, #036886, #072a40);
   --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);

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

@@ -31,178 +31,177 @@
 </template>
 
 <script setup lang="ts">
-// 引入内容组件
-import Content from './content.vue';
-import { defineProps, defineEmits, computed, watch } from 'vue';
-import { useInitModule } from '../hooks/useInit';
-import { getFormattedText } from '../hooks/helper';
-import { openWindow } from '/@/utils';
-
-// 定义组件接收的属性
-const props = defineProps<{
-  moduleData: any;
-  showStyle: any;
-  deviceType: string;
-  data: any;
-  moduleName: string;
-  visible: boolean;
-}>();
-const emit = defineEmits(['close', 'select']);
-
-// 取出头部配置
-const { header } = props.moduleData;
-
-// 初始化模块相关的下拉、选中项等
-const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
-
-// 计算样式（宽高+定位）
-const style = computed(() => {
-  const size = props.showStyle.size;
-  const position = props.showStyle.position;
-  return size + position;
-});
-
-// 计算不同布局下的class
-const moduleClass = computed(() => {
-  const position = props.showStyle.position;
-  const size = props.showStyle.size;
-  const [_, width] = size.match(/width:([0-9]+)px/) || [];
-  if (position.includes('bottom') || parseInt(width) > 800) {
-    return 'module-wide';
-  }
-  if (position.includes('left')) {
-    return 'module-medium';
-  }
-  if (position.includes('right')) {
+  // 引入内容组件
+  import Content from './content.vue';
+  import { defineProps, defineEmits, computed, watch } from 'vue';
+  import { useInitModule } from '../hooks/useInit';
+  import { getFormattedText } from '../hooks/helper';
+  import { openWindow } from '/@/utils';
+
+  // 定义组件接收的属性
+  const props = defineProps<{
+    moduleData: any;
+    showStyle: any;
+    deviceType: string;
+    data: any;
+    moduleName: string;
+    visible: boolean;
+  }>();
+  const emit = defineEmits(['close', 'select']);
+
+  // 取出头部配置
+  const { header } = props.moduleData;
+
+  // 初始化模块相关的下拉、选中项等
+  const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
+
+  // 计算样式（宽高+定位）
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position;
+  });
+
+  // 计算不同布局下的class
+  const moduleClass = computed(() => {
+    const position = props.showStyle.position;
+    const size = props.showStyle.size;
+    const [_, width] = size.match(/width:([0-9]+)px/) || [];
+    if (position.includes('bottom') || parseInt(width) > 800) {
+      return 'module-wide';
+    }
+    if (position.includes('left')) {
+      return 'module-medium';
+    }
+    if (position.includes('right')) {
+      return 'module-medium';
+    }
     return 'module-medium';
+  });
+
+  // 计算内容区高度样式
+  const contentStyle = computed(() => {
+    if (header.show && header.selector.show) {
+      return 'height: calc(100% - 48px - 40px);'; // 有下拉框的情况
+    }
+    return 'height: calc(100% - 40px);'; // 没有下拉框的情况
+  });
+
+  // 下拉选择事件
+  function selectHandler(id) {
+    selectedDeviceID.value = id;
+    emit('select', selectedDevice);
   }
-  return 'module-medium';
-});
 
-// 计算内容区高度样式
-const contentStyle = computed(() => {
-  if (header.show && header.selector.show) {
-    return 'height: calc(100% - 48px - 40px);'; // 有下拉框的情况
+  // 跳转事件
+  function redirectTo() {
+    const { to } = props.moduleData;
+    if (!to) return;
+    openWindow(to);
   }
-  return 'height: calc(100% - 40px);'; // 没有下拉框的情况
-});
-
-// 下拉选择事件
-function selectHandler(id) {
-  selectedDeviceID.value = id;
-  emit('select', selectedDevice);
-}
-
-// 跳转事件
-function redirectTo() {
-  const { to } = props.moduleData;
-  if (!to) return;
-  openWindow(to);
-}
-
-// 监听数据变化，初始化
-watch(
-  () => props.data,
-  (d) => {
-    init(d);
+
+  // 监听数据变化，初始化
+  watch(
+    () => props.data,
+    (d) => {
+      init(d);
       if (!selectedDeviceID.value) {
         selectedDeviceID.value = options.value[0]?.value;
       }
-  },
-  {
-    immediate: true,
-  }
-);
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 
 <style scoped lang="less">
-    @font-face {
-      font-family: 'douyuFont';
-      src: url('../../../../assets/font/douyuFont.otf');
-    }
-    .module-mine {
-      --image-common-border1: url('@/assets/images/home-container/configurable/minehome/common-border1.png');
-      --image-common-border2: url('@/assets/images/home-container/configurable/minehome/common-border2.png');
-      --image-common-border3: url('@/assets/images/home-container/configurable/minehome/common-border3.png');
-      --image-select-border: url('@/assets/images/home-container/configurable/minehome/select-border.png');
-      position: absolute;
-      //   width: 100%;
-      //   height: 100%;
-      background: var(--image-common-border2) no-repeat center;
-      background-size: 100% 100%;
-      overflow: hidden;
-
-      /* 标题栏样式 */
-      .module-title {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 40px;
-        color: #fff;
-        font-size: 14px;
-        font-weight: bold;
-
-        .title-content {
-          font-family: 'douyuFont';
-          margin-right: 10px;
-          &.cursor-pointer {
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
+  .module-mine {
+    --image-common-border1: url('@/assets/images/home-container/configurable/minehome/common-border1.png');
+    --image-common-border2: url('@/assets/images/home-container/configurable/minehome/common-border2.png');
+    --image-common-border3: url('@/assets/images/home-container/configurable/minehome/common-border3.png');
+    --image-select-border: url('@/assets/images/home-container/configurable/minehome/select-border.png');
+    position: absolute;
+    //   width: 100%;
+    //   height: 100%;
+    background: var(--image-common-border2) no-repeat center;
+    background-size: 100% 100%;
+    overflow: hidden;
+
+    /* 标题栏样式 */
+    .module-title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 40px;
+      color: #fff;
+      font-size: 14px;
+      font-weight: bold;
+
+      .title-content {
+        font-family: 'douyuFont';
+        margin-right: 10px;
+        &.cursor-pointer {
           cursor: pointer;
           text-decoration: underline;
-          }
         }
       }
+    }
 
-      /* 下拉选择框单独一行样式 */
-      .module-selector-row {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        padding: 10px 35px 0 35px;
-        width: 100%;
-        min-height: 40px;
-        .custom-select {
-          flex: 1;
-          width: 100% !important;
-          min-width: 0;
-          font-size: 18px;
+    /* 下拉选择框单独一行样式 */
+    .module-selector-row {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      padding: 10px 35px 0 35px;
+      width: 100%;
+      min-height: 40px;
+      .custom-select {
+        flex: 1;
+        width: 100% !important;
+        min-width: 0;
+        font-size: 18px;
+        color: white !important;
+        ::v-deep .zxm-select-selector {
+          background: var(--image-select-border) no-repeat center/100% 100%;
+          border: none !important;
+          padding: 0 20px;
+        }
+        /* 隐藏默认的下拉箭头 */
+        ::v-deep .zxm-select-arrow {
+          display: none;
+        }
+
+        /* 添加自定义白色下拉三角形 */
+        &::after {
+          content: '';
+          position: absolute;
+          right: 16px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 0;
+          height: 0;
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-top: 8px solid white;
+          pointer-events: none;
+        }
+        /* 修复占位符颜色 */
+        ::v-deep .zxm-select-selection-placeholder {
           color: white !important;
-          ::v-deep .zxm-select-selector {
-            background: var(--image-select-border) no-repeat center/100% 100%;
-            border: none !important;
-            padding: 0 20px;
-
-          }
-          /* 隐藏默认的下拉箭头 */
-          ::v-deep .zxm-select-arrow {
-            display: none;
-          }
-          
-          /* 添加自定义白色下拉三角形 */
-          &::after {
-            content: '';
-            position: absolute;
-            right: 16px;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 0;
-            height: 0;
-            border-left: 6px solid transparent;
-            border-right: 6px solid transparent;
-            border-top: 8px solid white;
-            pointer-events: none;
-          }
-          /* 修复占位符颜色 */
-          ::v-deep .zxm-select-selection-placeholder {
-            color: white !important;
-            font-size: 18px;
-          }
+          font-size: 18px;
         }
       }
+    }
 
-      /* 内容区样式 */
-      .module-content {
-        padding: 10px 23px;
-        background: transparent;
-      }
+    /* 内容区样式 */
+    .module-content {
+      padding: 10px 23px;
+      background: transparent;
     }
-</style>
+  }
+</style>

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

@@ -441,7 +441,7 @@
     // z-index: -2;
     display: flex;
     flex-direction: column;
-    overflow-y: auto;
+    overflow-y: auto; // 这里会导致样式无故添加滚动条
   }
 
   .content__background {

src/views/vent/home/configurable/components/enhanced/moduleBottom.vue

@@ -39,6 +39,7 @@
     color: #fff;
     box-sizing: border-box;
     position: absolute;
+    backdrop-filter: blur(3px);
 
     .module-content {
       width: 100%;

src/views/vent/home/configurable/components/enhanced/moduleLeft.vue

@@ -41,6 +41,7 @@
     color: #fff;
     box-sizing: border-box;
     position: absolute;
+    backdrop-filter: blur(3px);
 
     .module-content {
       width: 100%;

src/views/vent/home/configurable/components/enhanced/moduleRight.vue

@@ -41,6 +41,7 @@
     color: #fff;
     box-sizing: border-box;
     position: absolute;
+    backdrop-filter: blur(3px);
 
     .module-content {
       width: 100%;

src/views/vent/home/configurable/components/originalNew/moduleBottom.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div v-if="visible" class="module-content">
     <div class="left-solt" @click="scrollLeft"></div>
@@ -12,123 +11,123 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+  import { ref, computed } from 'vue';
 
-defineProps<{ title: string; visible: boolean }>();
-const emit = defineEmits(['close', 'click']);
+  defineProps<{ title: string; visible: boolean }>();
+  const emit = defineEmits(['close', 'click']);
 
-const tabList = ['Tab标题名称 1', 'Tab标题名称 2', 'Tab标题名称 3', 'Tab标题名称 4', 'Tab标题名称 5', 'Tab标题名称 6'];
-const activeIndex = ref(0);
-const currentStart = ref(0);
-const visibleCount = 4;
+  const tabList = ['Tab标题名称 1', 'Tab标题名称 2', 'Tab标题名称 3', 'Tab标题名称 4', 'Tab标题名称 5', 'Tab标题名称 6'];
+  const activeIndex = ref(0);
+  const currentStart = ref(0);
+  const visibleCount = 4;
 
-const visibleTabs = computed(() => {
-  return tabList.slice(currentStart.value, currentStart.value + visibleCount);
-});
+  const visibleTabs = computed(() => {
+    return tabList.slice(currentStart.value, currentStart.value + visibleCount);
+  });
 
-function closeModel() {
-  emit('close');
-}
+  function closeModel() {
+    emit('close');
+  }
 
-function clickHandler() {
-  emit('click');
-}
+  function clickHandler() {
+    emit('click');
+  }
 
-function selectTab(index: number) {
-  activeIndex.value = index;
-}
+  function selectTab(index: number) {
+    activeIndex.value = index;
+  }
 
-function scrollLeft() {
-  if (currentStart.value > 0) {
-    currentStart.value--;
+  function scrollLeft() {
+    if (currentStart.value > 0) {
+      currentStart.value--;
+    }
   }
-}
 
-function scrollRight() {
-  if (currentStart.value + visibleCount < tabList.length) {
-    currentStart.value++;
+  function scrollRight() {
+    if (currentStart.value + visibleCount < tabList.length) {
+      currentStart.value++;
+    }
   }
-}
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-
-.module-content {
-  color: #fff;
-  box-sizing: border-box;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.left-solt,
-.right-solt {
-  width: 15%;
-  height: 60%;
-  cursor: pointer;
-  position: relative;
-  z-index: 1;
-}
-
-.left-solt {
-  background: url('@/assets/images/vent/homeNew/Bottom-left.png') no-repeat;
-  background-size: 100% 100%;
-}
-
-.right-solt {
-  background: url('@/assets/images/vent/homeNew/Bottom_right.png') no-repeat;
-  background-size: 100% 100%;
-}
-
-.center-solt {
-  display: flex;
-  width: 70%;
-  height: 60%;
-  justify-content: space-between;
-}
-
-.tab-item {
-  flex: 1;
-  text-align: center;
-  line-height: 60px;
-  cursor: pointer;
-  background: url('@/assets/images/vent/homeNew/tab-defult.png') no-repeat;
-  background-size: 100% 100%;
-  transition: all 0.3s;
-  margin: 0 5px;
-  color: #999;
-}
-.tab-name {
-  font-size: 14px;
-  display: inline-block;
-  float: right;
-  margin-right: 13px;
-}
-.tab-item.active {
-  background: url('@/assets/images/vent/homeNew/tab-active.png') no-repeat;
-  background-size: 100% 100%;
-  font-weight: bold;
-  color: #fff;
-  transform: translateY(-5px);
-}
-
-.module-slot {
-  height: calc(100% - 33px);
-  width: calc(100% - 15px);
-  margin-left: 10px;
-}
-
-.v-enter-active,
-.v-leave-active {
-  transition: all 0.3s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
-  transform: translateY(-33px);
-}
+  @import '/@/design/theme.less';
+
+  .module-content {
+    color: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .left-solt,
+  .right-solt {
+    width: 15%;
+    height: 60%;
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+  }
+
+  .left-solt {
+    background: url('@/assets/images/vent/homeNew/Bottom-left.png') no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .right-solt {
+    background: url('@/assets/images/vent/homeNew/Bottom_right.png') no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .center-solt {
+    display: flex;
+    width: 70%;
+    height: 60%;
+    justify-content: space-between;
+  }
+
+  .tab-item {
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    cursor: pointer;
+    background: url('@/assets/images/vent/homeNew/tab-defult.png') no-repeat;
+    background-size: 100% 100%;
+    transition: all 0.3s;
+    margin: 0 5px;
+    color: #999;
+  }
+  .tab-name {
+    font-size: 14px;
+    display: inline-block;
+    float: right;
+    margin-right: 13px;
+  }
+  .tab-item.active {
+    background: url('@/assets/images/vent/homeNew/tab-active.png') no-repeat;
+    background-size: 100% 100%;
+    font-weight: bold;
+    color: #fff;
+    transform: translateY(-5px);
+  }
+
+  .module-slot {
+    height: calc(100% - 33px);
+    width: calc(100% - 15px);
+    margin-left: 10px;
+  }
+
+  .v-enter-active,
+  .v-leave-active {
+    transition: all 0.3s ease;
+  }
+
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
+    transform: translateY(-33px);
+  }
 </style>

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

@@ -99,6 +99,13 @@
       await setModelType();
     }
   });
+
+  onUnmounted(() => {
+    modal.clearGroup(modalGroup);
+    modal.destroy();
+    modalGroup = null;
+    modal = null;
+  });
 </script>
 <style lang="less" scoped>
   #three3D {

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

@@ -1234,8 +1234,8 @@ export const testConfigSDG: Config[] = [
       gallery_list: [],
     },
     showStyle: {
-      size: 'width:470px;height:280px;',
-      version: '原版',
+      size: 'width:450px;height:280px;',
+      version: '普通版',
       position: 'top:350px;left:0;',
     },
   },
@@ -1313,8 +1313,8 @@ export const testConfigSDG: Config[] = [
       gallery_list: [],
     },
     showStyle: {
-      size: 'width:470px;height:280px;',
-      version: '原版',
+      size: 'width:450px;height:280px;',
+      version: '普通版',
       position: 'top:640px;left:0;',
     },
   },
@@ -1387,8 +1387,8 @@ export const testConfigSDG: Config[] = [
       gallery_list: [],
     },
     showStyle: {
-      size: 'width:470px;height:280px;',
-      version: '原版',
+      size: 'width:450px;height:280px;',
+      version: '普通版',
       position: 'top:60px;left:0;',
     },
   },
@@ -1480,7 +1480,7 @@ export const testConfigSDG: Config[] = [
     },
     showStyle: {
       size: 'width:1000px;height:280px;',
-      version: '原版',
+      version: '普通版',
       position: 'top:640px;left:460px;',
     },
   },
@@ -1569,8 +1569,8 @@ export const testConfigSDG: Config[] = [
       gallery_list: [],
     },
     showStyle: {
-      size: 'width:470px;height:280px;',
-      version: '原版',
+      size: 'width:450px;height:280px;',
+      version: '普通版',
       position: 'top:60px;right:0;',
     },
   },
@@ -1652,8 +1652,8 @@ export const testConfigSDG: Config[] = [
       gallery_list: [],
     },
     showStyle: {
-      size: 'width:470px;height:280px;',
-      version: '原版',
+      size: 'width:450px;height:280px;',
+      version: '普通版',
       position: 'top:350px;right:0;',
     },
   },
@@ -1735,8 +1735,8 @@ export const testConfigSDG: Config[] = [
       gallery_list: [],
     },
     showStyle: {
-      size: 'width:470px;height:280px;',
-      version: '原版',
+      size: 'width:450px;height:280px;',
+      version: '普通版',
       position: 'top:640px;right:0;',
     },
   },

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

@@ -57,7 +57,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
+      <div class="flex flex pos-absolute bottom-10px left-60px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>

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

@@ -57,7 +57,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
+      <div class="flex pos-absolute bottom-10px left-60px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>

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

@@ -53,7 +53,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
+      <div class="flex pos-absolute bottom-10px left-60px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>

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

@@ -57,7 +57,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
+      <div class="flex pos-absolute bottom-10px left-60px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>

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

@@ -57,7 +57,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
+      <div class="flex pos-absolute bottom-10px left-60px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>

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

@@ -53,7 +53,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
+      <div class="flex pos-absolute bottom-10px left-60px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>

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

@@ -74,7 +74,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
+      <div class="flex pos-absolute bottom-10px left-60px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>

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

@@ -49,7 +49,7 @@
           @close="cfg.visible = false"
         />
         <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-        <div class="pos-absolute top-70px left-460px z-3">
+        <div class="flex pos-absolute bottom-10px left-60px z-3">
           <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
             <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
           </div>

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

@@ -58,7 +58,7 @@
           @close="cfg.visible = false"
         />
         <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-        <div class="pos-absolute top-70px left-460px z-3">
+        <div class="flex pos-absolute bottom-10px left-60px z-3">
           <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
             <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
           </div>

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

@@ -58,7 +58,7 @@
           @close="cfg.visible = false"
         />
         <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-        <div class="pos-absolute top-70px left-460px z-3">
+        <div class="flex pos-absolute bottom-10px left-60px z-3">
           <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
             <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
           </div>