Merge pull request '邓洁 : 首页上下方和两侧合并' (#50) from dj into master

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/50

src/assets/styles/index.scss

@@ -52,7 +52,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
     top: 0;
     left: 50%;
     margin-left: -1165px;
-    background-image: url('../../assets/image/sp_tb.png');
+    background-image: url('../images/topAndDown/sp_tb.png');
   }
 
   .top-right {
@@ -75,7 +75,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
       .toggle {
         width: 50px;
         height: 50px;
-        background-image: url('../../assets/image/sp_icon_zdqh.png');
+        background-image: url('../images/topAndDown/sp_icon_zdqh.png');
       }
     }
 
@@ -93,7 +93,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
         margin-left: 27px;
         width: 50px;
         height: 50px;
-        background-image: url('../../assets/image/sp_icon_tcdl.png');
+        background-image: url('../images/topAndDown/sp_icon_tcdl.png');
       }
     }
   }
@@ -109,13 +109,13 @@ html, body, #app, .el-container, .el-aside, .el-main {
   bottom: 0;
   left: 50%;
   margin-left: -925px;
-  background-image: url('../../assets/image/sp_dbbj.png');
+  background-image: url('../images/topAndDown/sp_dbbj.png');
 
   .arrow {
     margin: 50px 0 0 263px;
     width: 46px;
     height: 54px;
-    background-image: url('../../assets/image/sp_icon_zst.png');
+    background-image: url('../images/topAndDown/sp_icon_zst.png');
   }
 
   .btn {
@@ -127,12 +127,9 @@ html, body, #app, .el-container, .el-aside, .el-main {
     font-size: 26px;
     color: #9FC3CD;
 
-    > * {
+    > div {
       display: flex;
       justify-content: center;
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      background-position: center;
     }
 
     > div:nth-child(2) {
@@ -140,14 +137,14 @@ html, body, #app, .el-container, .el-aside, .el-main {
       padding-top: 7px;
       width: 201px;
       height: 62px;
-      background-image: url('../../assets/image/sp_icon_sdqhd.png');
+      background-image: url('../images/topAndDown/sp_icon_sdqhd.png');
     }
 
     > div:first-child, > div:last-child {
       padding-top: 5px;
       width: 158px;
       height: 50px;
-      background-image: url('../../assets/image/sp_icon_sdqhx.png');
+      background-image: url('../images/topAndDown/sp_icon_sdqhx.png');
     }
   }
 

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 FanInfo from "../../components/content/fanInfo/FanInfo.vue";
+import TransducerList from "@/components/content/transducerList/TransducerList.vue";
-import TransducerList from "../../components/content/transducerList/TransducerList.vue";
+import UsedEle from "@/components/content/usedEle/UsedEle.vue";
-import UsedEle from "../../components/content/usedEle/UsedEle.vue";
+import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
-import WindPressureList from "../../components/content/windPressure/WindPressureList.vue";
+import AirInfo from "@/components/content/airInfo/AirInfo.vue";
-import AirInfo from "../../components/content/airInfo/AirInfo.vue";
+import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.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>