邓洁 : 首页上下方和两侧合并

src/views/tunnel/index.vue

@@ -1,5 +1,25 @@
 <template>
   <div>
+    <div class="box-top">
+      <div class="manage-btn">
+        <div v-for="item in btnList" :key="item.name" class="btn-box">
+          <div :style="{ backgroundImage:'url(' +getImageUrl(item.icon)+')' }"></div>
+          <div>{{ item.name }}</div>
+        </div>
+      </div>
+      <div class="tunnel-title"></div>
+      <div class="top-right">
+        <div class="current-site">
+          当前站点：<span>{{ currentSite }}</span>
+          <div class="toggle"></div>
+        </div>
+        <div class="current-user">
+          上午好：<span>{{ currentUser }}</span>
+          <span>今天是: 2023年12月12日 星期三</span>
+          <div class="logout"></div>
+        </div>
+      </div>
+    </div>
     <tunnel-scene id="tunnel-box" />
     <fan-info />
     <transducer-list />
@@ -7,18 +27,53 @@
     <wind-pressure-list />
     <air-info />
     <bad-gas-info />
+    <div class="switch-btn">
+      <div class="arrow"></div>
+      <div class="btn">
+        <div>一号隧道</div>
+        <div>二号隧道</div>
+        <div>三号隧道</div>
+      </div>
+      <div class="arrow right"></div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
-// 两边echarts展示
-import FanInfo from "../../components/content/fanInfo/FanInfo.vue";
-import TransducerList from "../../components/content/transducerList/TransducerList.vue";
-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";
+import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
+import TransducerList from "@/components/content/transducerList/TransducerList.vue";
+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 currentSite = ref('松江站')
+const currentUser = ref('admin')
+const btnList = ref([
+  {
+    icon: 'sp_icon_zdgl.png',
+    name: '站点管理'
+  },
+  {
+    icon: 'sp_icon_sdgl.png',
+    name: '隧道管理'
+  },
+  {
+    icon: 'sp_icon_yhgl.png',
+    name: '用户管理'
+  },
+  {
+    icon: 'sp_icon_xtgl.png',
+    name: '系统管理'
+  },
+  {
+    icon: 'sp_icon_mngl.png',
+    name: '模拟仿真'
+  },
+])
+const getImageUrl = (name) => {
+  return new URL(`../../assets/images/topAndDown/${name}`, import.meta.url).href
+}
 </script>
 
 <style lang="scss" scoped></style>