邓洁 : 两侧收缩展开

src/views/tunnel/index.vue

@@ -20,13 +20,41 @@
         </div>
       </div>
     </div>
-    <tunnel-scene id="tunnel-box" />
-    <fan-info />
-    <transducer-list />
-    <used-ele />
-    <wind-pressure-list />
-    <air-info />
-    <bad-gas-info />
+    <tunnel-scene id="tunnel-box"/>
+    <div class="left">
+      <el-drawer
+          v-model="drawerLeft"
+          direction="ltr"
+          modal-class="modal-box"
+          :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>