feat：完善样式

src/layout/components/Header/index.vue

@@ -4,12 +4,12 @@
       <li
         class="nav-left-item"
         :style="{
-          backgroundImage: `url(${current === index && !isSkip ? title2Select : title2})`
+          backgroundImage: `url(${current === item.id && !isSkip ? title2Select : title2})`
         }"
         v-for="(item, index) in navLeft"
         :key="index"
         :title="item.name"
-        @click="handleNav(item, index)"
+        @click="handleNav(item)"
       >
         {{ item.name }}
       </li>
@@ -18,7 +18,7 @@
           ['/scenic', '/hotel'].includes(router.currentRoute.value.path) && otherLeftNav.length > 0
         "
         trigger="click"
-        @command="handleCommand"
+        @command="handleCommand($event, 'hotel')"
       >
         <li
           class="nav-left-item"
@@ -44,13 +44,40 @@
     <ul class="nav-right">
       <li
         class="nav-right-item"
+        :style="{
+          backgroundImage: `url(${current === item.id && !isSkip ? title3Select : title3})`
+        }"
         v-for="(item, index) in navRight"
         :key="index"
         :title="item.name"
-        @click="handleNav(item, index)"
+        @click="handleNav(item)"
       >
         {{ item.name }}
       </li>
+      <el-dropdown
+        v-if="
+          ['/scenic', '/hotel'].includes(router.currentRoute.value.path) && otherRightNav.length > 0
+        "
+        trigger="click"
+        @command="handleCommand($event, 'venue')"
+      >
+        <li
+          class="nav-right-item"
+          :style="{
+            backgroundImage: `url(${title3})`
+          }"
+        >
+          {{ otherRightLabel }}
+          <img class="icon" src="@/assets/images/arrow-down-1.png" />
+        </li>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(item, index) in otherRightNav" :key="index" :command="item">
+              <span class="label"> {{ item.name }}</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </ul>
     <div class="weather">
       <span>{{ weatherData?.temperature }}-{{ weatherData?.skycon }}</span>
@@ -70,7 +97,9 @@
   import { useRouter } from 'vue-router'
 
   import title2 from '@/assets/images/title-2.png'
+  import title3 from '@/assets/images/title-3.png'
   import title2Select from '@/assets/images/title-2-select.png'
+  import title3Select from '@/assets/images/title-3-select.png'
 
   import { getWeatherApi } from '@/api/home'
   import { getSpotListApi } from '@/api/sentiment'
@@ -87,9 +116,11 @@
   let navRight = ref([])
   let isSkip = ref(true)
   let isBack = ref(false)
-  let current = ref(0)
+  let current = ref(1)
   let otherLeftLabel = ref('')
+  let otherRightLabel = ref('')
   let otherLeftNav = ref([])
+  let otherRightNav = ref([])
   let spotList = ref([])
 
   // 补零
@@ -115,9 +146,15 @@
   const handleBack = () => {
     router.push('/home')
   }
-  const handleCommand = (item) => {
+  const handleCommand = (item, type) => {
     current.value = ''
-    otherLeftLabel.value = item.name
+    if (type === 'hotel') {
+      otherRightLabel.value = '其他场馆'
+      otherLeftLabel.value = item.name
+    } else {
+      otherLeftLabel.value = '其他酒店'
+      otherRightLabel.value = item.name
+    }
     switch (router.currentRoute.value.path) {
       case '/scenic':
         pubSub.publish('scenicChange', item)
@@ -131,19 +168,21 @@
     }
   }
   // 点击导航
-  const handleNav = (item, index) => {
+  const handleNav = (item) => {
     if (isSkip.value) {
       router.push(item.path)
     } else {
-      if (current.value === index) return
+      if (current.value === item.id) return
       otherLeftLabel.value = '其他酒店'
-      current.value = index
-      title.value = item.name
+      otherRightLabel.value = '其他场馆'
+      current.value = item.id
       switch (router.currentRoute.value.path) {
         case '/scenic':
+          title.value = item.name
           pubSub.publish('scenicChange', item)
           break
         case '/monitor':
+          title.value = item.name
           pubSub.publish('monitorChange', item)
           break
         case '/hotel':
@@ -167,6 +206,8 @@
   const setNav = async () => {
     navLeft.value = []
     navRight.value = []
+    otherLeftNav.value = []
+    otherRightNav.value = []
     switch (router.currentRoute.value.path) {
       case '/home':
         title.value = '奉节县旅游指挥调度中心'
@@ -273,13 +314,17 @@
       case '/hotel':
         title.value = '酒店场馆'
         otherLeftLabel.value = '其他酒店'
+        otherRightLabel.value = '其他场馆'
         isSkip.value = false
         current.vlaue = ''
         isBack.value = true
         let hotelRes = await getHotelListApi({ hotelStadiumType: 1 })
         navLeft.value = hotelRes.data.slice(0, 3)
-        pubSub.publish('hotelChange', hotelRes.data[0])
         otherLeftNav.value = hotelRes.data.slice(3, hotelRes.data.length - 1)
+        let venueRes = await getHotelListApi({ hotelStadiumType: 2 })
+        navRight.value = venueRes.data.slice(0, 3)
+        otherRightNav.value = venueRes.data.slice(3, venueRes.data.length - 1)
+        pubSub.publish('hotelChange', hotelRes.data[0])
         break
     }
   }
@@ -411,6 +456,10 @@
         color: rgba(208, 236, 255, 0.9);
         background-image: url('@/assets/images/title-3.png');
         background-size: 100% 100%;
+        .icon {
+          width: vw(18);
+          height: vw(18);
+        }
       }
     }
   }