邓洁 : 两侧收缩展开

src/assets/styles/index.scss

@@ -99,6 +99,52 @@ html, body, #app, .el-container, .el-aside, .el-main {
   }
 }
 
+.modal-box {
+  z-index: -1 !important;
+  position: static !important;
+
+  .el-drawer {
+    width: 900px !important;
+    background-color: transparent;
+  }
+}
+
+.left-arrow {
+  position: absolute;
+  top: 1095px;
+  left: 900px;
+  width: 100px;
+  height: 114px;
+  background-image: url('../images/topAndDown/sp_icon_zyc.png');
+}
+
+.shrink-left {
+  position: absolute;
+  top: 1095px;
+  left: 0;
+  width: 100px;
+  height: 114px;
+  background-image: url('../images/topAndDown/sp_yyc.png');
+}
+
+.right-arrow {
+  position: absolute;
+  top: 1095px;
+  right: 900px;
+  width: 100px;
+  height: 114px;
+  background-image: url('../images/topAndDown/sp_yyc.png');
+}
+
+.shrink-right {
+  position: absolute;
+  top: 1095px;
+  right: 0;
+  width: 100px;
+  height: 114px;
+  background-image: url('../images/topAndDown/sp_icon_zyc.png');
+}
+
 .switch-btn {
   display: flex;
   justify-content: space-between;
@@ -152,4 +198,4 @@ html, body, #app, .el-container, .el-aside, .el-main {
     margin: 50px 263px 0 0;
     transform: rotate(180deg);
   }
-}
+}

src/views/tunnel/index.vue

@@ -20,13 +20,41 @@
         </div>
       </div>
     </div>
-    <tunnel-scene id="tunnel-box" />
+    <tunnel-scene id="tunnel-box"/>
-    <fan-info />
+    <div class="left">
-    <transducer-list />
+      <el-drawer
-    <used-ele />
+          v-model="drawerLeft"
-    <wind-pressure-list />
+          direction="ltr"
-    <air-info />
+          modal-class="modal-box"
-    <bad-gas-info />
+          :modal="false"
+          :show-close="false"
+          :close-on-click-modal="false"
+          :close-on-press-escape="false"
+      >
+        <fan-info/>
+        <transducer-list/>
+        <used-ele/>
+      </el-drawer>
+      <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
+      <div v-else class="shrink-left" @click="closeLeft"></div>
+    </div>
+    <div class="right">
+      <el-drawer
+          v-model="drawerRight"
+          direction="rtl"
+          modal-class="modal-box"
+          :modal="false"
+          :show-close="false"
+          :close-on-click-modal="false"
+          :close-on-press-escape="false"
+      >
+        <wind-pressure-list/>
+        <air-info/>
+        <bad-gas-info/>
+      </el-drawer>
+      <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
+      <div v-else class="shrink-right" @click="closeRight"></div>
+    </div>
     <div class="switch-btn">
       <div class="arrow"></div>
       <div class="btn">
@@ -47,6 +75,9 @@ import UsedEle from "@/components/content/usedEle/UsedEle.vue";
 import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
 import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
+
+const drawerLeft = ref(true)
+const drawerRight = ref(true)
 const currentSite = ref('松江站')
 const currentUser = ref('admin')
 const btnList = ref([
@@ -71,9 +102,18 @@ const btnList = ref([
     name: '模拟仿真'
   },
 ])
+
 const getImageUrl = (name) => {
   return new URL(`../../assets/images/topAndDown/${name}`, import.meta.url).href
 }
+const closeLeft = () => {
+  drawerLeft.value = !drawerLeft.value
+}
+const closeRight = () => {
+  drawerRight.value = !drawerRight.value
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+
+</style>