feat：完善功能

src/components/Header/index.vue

@@ -4,7 +4,7 @@
       <li
         class="nav-left-item"
         :style="{
-          backgroundImage: `url(${current == index && !isSkip ? title2Select : title2})`
+          backgroundImage: `url(${current === index && !isSkip ? title2Select : title2})`
         }"
         v-for="(item, index) in navLeft"
         :key="index"
@@ -12,6 +12,24 @@
       >
         {{ item.name }}
       </li>
+      <el-dropdown v-if="navLeft.length > 3" trigger="click" @command="handleCommand">
+        <li
+          class="nav-left-item"
+          :style="{
+            backgroundImage: `url(${title2})`
+          }"
+        >
+          {{ otherScenic || '其他景区' }}
+          <img class="icon" src="@/assets/images/arrow-down-1.png" />
+        </li>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(item, index) in navLeft" :key="index" :command="item">
+              <span class="label"> {{ item.name }}</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </ul>
     <div class="title">
       <span>{{ title }}</span>
@@ -44,8 +62,8 @@
   import { useRouter } from 'vue-router'
   import title2 from '@/assets/images/title-2.png'
   import title2Select from '@/assets/images/title-2-select.png'
-
   import { getWeatherApi } from '@/api/home'
+  import { getSpotApi } from '@/api/sentiment'
 
   const emit = defineEmits(['change'])
 
@@ -59,6 +77,7 @@
   let isSkip = ref(true)
   let isBack = ref(false)
   let current = ref(0)
+  let otherScenic = ref('')
 
   // 补零
   const fillZero = (value) => {
@@ -79,31 +98,37 @@
       minute
     )}:${fillZero(second)}`
   }
-
+  const handleCommand = (e) => {
+    console.log(e, '=========')
+    title.value = e.name
+    otherScenic.value = e.name
+    current.value = ''
+  }
   // 返回上一页
   const handleBack = () => {
     router.go(-1)
   }
-
   // 点击导航
   const handleNav = (item, index) => {
     if (isSkip.value) {
       router.push(item.path)
     } else {
-      emit('on-change', index)
+      if (current.value === index) return
+      otherScenic.value = ''
+      current.value = index
+      title.value = item.name
     }
   }
-
   // 获取天气数据
   const getWeather = async () => {
     let res = await getWeatherApi()
     weatherData.value = res.data
   }
-
   // 设置当前路由导航栏
-  const setNav = () => {
+  const setNav = async () => {
     switch (router.currentRoute.value.path) {
       case '/home':
+        isSkip.value = true
         title.value = '奉节县旅游指挥调度中心'
         navLeft.value = [
           { name: '安全', path: '/monitor' },
@@ -118,10 +143,17 @@
         ]
         break
       case '/scenic':
-        title.value = '景区'
-        navLeft.value = []
-        navRight.value = []
+        isSkip.value = false
         isBack.value = true
+        let res = await getSpotApi()
+        navLeft.value = res.data.map((item) => {
+          return {
+            name: item.ssname,
+            id: item.id
+          }
+        })
+        title.value = navLeft.value[current.value].name
+        navRight.value = []
         break
       case '/sentiment':
         title.value = '舆情检测'
@@ -249,6 +281,7 @@
         font-size: vw(48);
         font-weight: 800;
         color: transparent;
+        letter-spacing: vw(10);
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
@@ -271,6 +304,10 @@
         text-align: center;
         color: rgba(208, 236, 255, 0.9);
         background-size: 100% 100%;
+        .icon {
+          width: vw(18);
+          height: vw(18);
+        }
       }
     }
     .nav-right {