feat：完善功能

src/layout/components/Header/index.vue

@@ -8,13 +8,15 @@
         }"
         v-for="(item, index) in navLeft"
         :key="index"
+        :title="item.name"
         @click="handleNav(item, index)"
       >
         {{ item.name }}
       </li>
-      <!-- v-if="navLeft.length > 3" -->
       <el-dropdown
-        v-if="router.currentRoute.value.path == '/scenic'"
+        v-if="
+          ['/scenic', '/hotel'].includes(router.currentRoute.value.path) && otherLeftNav.length > 0
+        "
         trigger="click"
         @command="handleCommand"
       >
@@ -24,12 +26,12 @@
             backgroundImage: `url(${title2})`
           }"
         >
-          {{ otherScenic || '其他景区' }}
+          {{ otherLeftLabel || '其他' }}
           <img class="icon" src="@/assets/images/arrow-down-1.png" />
         </li>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item v-for="(item, index) in otherNav" :key="index" :command="item">
+            <el-dropdown-item v-for="(item, index) in otherLeftNav" :key="index" :command="item">
               <span class="label"> {{ item.name }}</span>
             </el-dropdown-item>
           </el-dropdown-menu>
@@ -42,9 +44,10 @@
     <ul class="nav-right">
       <li
         class="nav-right-item"
-        @click="handleNav(item, index)"
         v-for="(item, index) in navRight"
         :key="index"
+        :title="item.name"
+        @click="handleNav(item, index)"
       >
         {{ item.name }}
       </li>
@@ -85,18 +88,8 @@
   let isSkip = ref(true)
   let isBack = ref(false)
   let current = ref(0)
-  let otherScenic = ref('')
-  let otherNav = ref([
-    {
-      name: '大窝景区'
-    },
-    {
-      name: '天坑景区'
-    },
-    {
-      name: '旅游环线'
-    }
-  ])
+  let otherLeftLabel = ref('')
+  let otherLeftNav = ref([])
   let spotList = ref([])
 
   // 补零
@@ -122,14 +115,28 @@
   const handleBack = () => {
     router.push('/home')
   }
-  const handleCommand = () => {}
+  const handleCommand = (item) => {
+    current.value = ''
+    otherLeftLabel.value = item.name
+    switch (router.currentRoute.value.path) {
+      case '/scenic':
+        pubSub.publish('scenicChange', item)
+        break
+      case '/monitor':
+        pubSub.publish('monitorChange', item)
+        break
+      case '/hotel':
+        pubSub.publish('hotelChange', item)
+        break
+    }
+  }
   // 点击导航
   const handleNav = (item, index) => {
     if (isSkip.value) {
       router.push(item.path)
     } else {
       if (current.value === index) return
-      otherScenic.value = ''
+      otherLeftLabel.value = ''
       current.value = index
       title.value = item.name
       switch (router.currentRoute.value.path) {
@@ -184,6 +191,17 @@
         current.value = 0
         title.value = navLeft.value[current.value].name
         pubSub.publish('scenicChange', navLeft.value[current.value])
+        otherLeftNav.value = [
+          {
+            name: '大窝景区'
+          },
+          {
+            name: '天坑景区'
+          },
+          {
+            name: '旅游环线'
+          }
+        ]
         break
       case '/sentiment':
         title.value = '舆情监测'
@@ -257,8 +275,9 @@
         current.vlaue = ''
         isBack.value = true
         let hotelRes = await getHotelListApi()
-        navLeft.value = hotelRes.data
+        navLeft.value = hotelRes.data.slice(0, 3)
         pubSub.publish('hotelChange', hotelRes.data[0])
+        otherLeftNav.value = hotelRes.data.slice(3, hotelRes.data.length - 1)
         break
     }
   }

src/views/scenic/components/box-1.vue

@@ -200,8 +200,23 @@
     .main {
       width: 100%;
       height: vh(600);
+      overflow-x: auto;
+      overflow-y: hidden;
+      /* 滚动条整体样式 */
+      &::-webkit-scrollbar {
+        height: vh(10); /* 滚动条的宽度 */
+      }
+      /* 滚动条轨道 */
+      &::-webkit-scrollbar-track {
+        background: 'transparent'; /* 轨道的背景色 */
+      }
+      /* 滚动条滑块 */
+      &::-webkit-scrollbar-thumb {
+        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+        border-radius: 5px; /* 滑块的圆角 */
+      }
       > img {
-        width: 100%;
+        width: auto;
         height: 100%;
       }
     }