邓洁 : 隧道切换效果

src/assets/styles/index.scss

@@ -42,8 +42,9 @@ html, body, #app, .el-container, .el-aside, .el-main {
         width: 60px;
         height: 60px;
       }
-      .select-active{
-        color: #11EAF2!important;
+
+      .select-active {
+        color: #11EAF2 !important;
       }
     }
   }
@@ -163,7 +164,34 @@ html, body, #app, .el-container, .el-aside, .el-main {
   margin-left: -925px;
   background-image: url('../images/topAndDown/sp_dbbj.png');
 
+  .el-carousel__mask {
+    display: none;
+  }
+
+  .el-carousel {
+    width: 1250px;
+    height: 146px;
+    padding-top: 35px;
+
+    .el-carousel__container {
+      width: 1250px;
+
+      .el-carousel__arrow--left {
+        display: none;
+      }
+
+      .el-carousel__arrow--right {
+        display: none;
+      }
+    }
+
+    .el-carousel__indicators {
+      display: none;
+    }
+  }
+
   .arrow {
+    cursor: pointer;
     margin: 50px 0 0 263px;
     width: 46px;
     height: 54px;
@@ -172,32 +200,31 @@ html, body, #app, .el-container, .el-aside, .el-main {
 
   .btn {
     width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
     margin-top: 14px;
     font-size: 26px;
     color: #9FC3CD;
 
+    .el-carousel__item {
+      left: 19%;
+    }
+
     > div {
       display: flex;
       justify-content: center;
+      padding-top: 5px;
+      width: 158px;
+      height: 50px;
+      background-image: url('../images/topAndDown/sp_icon_sdqhx.png');
     }
 
-    > div:nth-child(2) {
+    .is-active {
+      margin-top: -5px;
       color: #FFFFFF;
       padding-top: 7px;
       width: 201px;
       height: 62px;
       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('../images/topAndDown/sp_icon_sdqhx.png');
-    }
   }
 
   .right {

src/views/tunnel/index.vue

@@ -50,15 +50,20 @@
       <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">
-        <div>一号隧道</div>
-        <div>二号隧道</div>
-        <div>三号隧道</div>
-      </div>
-      <div class="arrow right"></div>
+      <div class="arrow" @click="previousBtn"></div>
+      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false">
+        <div class="btn">
+          <el-carousel-item v-for="(item,index) in tunnelList" :key="item.value">
+            {{ item.name }}
+          </el-carousel-item>
+        </div>
+      </el-carousel>
+      <div class="arrow right" @click="nextBtn"></div>
     </div>
+
+
   </div>
 </template>
 
@@ -76,13 +81,37 @@ import {useAuthStore} from '@/store/userstore.js'
 
 const authStore = useAuthStore()
 const router = useRouter()
-const selectIndex=ref(1)
+const selectIndex = ref(1)
 const drawerLeft = ref(true)
 const drawerRight = ref(true)
 const currentSite = ref('松江站')
 const currentUser = ref('admin')
 const currentDate = ref(dateFormat())
-
+const tunnelBtn=ref()
+const tunnelList = ref([
+  {
+    value: 0,
+    name: '一号隧道'
+  }, {
+    value: 1,
+    name: '二号隧道'
+  }, {
+    value: 2,
+    name: '三号隧道'
+  }, {
+    value: 3,
+    name: '四号隧道'
+  }, {
+    value: 4,
+    name: '五号隧道'
+  }, {
+    value: 5,
+    name: '六号隧道'
+  }, {
+    value: 6,
+    name: '七号隧道'
+  },
+])
 const manageSelect = () => {
   // getInfo();
 };
@@ -96,6 +125,14 @@ const handleLogout = () => {
   authStore.userLogout()
   router.push('/login')
 }
+const previousBtn = () => {
+  tunnelBtn.value.prev()
+}
+const nextBtn = () => {
+  tunnelBtn.value.next();
+  // tunnelList.value.push(tunnelList.value.shift())
+  // console.log('tunnelList.value', tunnelList.value)
+}
 </script>
 
 <style lang="scss" scoped>