1

src/views/layout/pc/footer/components/nav.vue

@@ -7,24 +7,26 @@ const navStore = useNavStore()
 const router = useRouter()
 const footerNav = ref([])
 
+const emit = defineEmits(['downloadClick'])
+
 onMounted(() => {
   footerNav.value = window.nav.footer
 })
 
-const navClick = (url) => {
-  navStore.changeNavIndex(url)
-  router.push(url)
+const navClick = (node) => {
+  if (node.downloadType) {
+    emit('downloadClick', node.downloadType)
+    return
+  }
+  if (!node.url) return
+  navStore.changeNavIndex(node.url)
+  router.push(node.url)
 }
 </script>
 
 <template>
   <ul class="footer-nav flex j-s">
-    <NavNode
-      v-for="node in footerNav"
-      :key="node.id"
-      :node="node"
-      @nav-click="navClick"
-    />
+    <NavNode v-for="node in footerNav" :key="node.id" :node="node" @nav-click="navClick" />
   </ul>
 </template>
 

src/views/layout/pc/footer/components/navNode.vue

@@ -8,12 +8,12 @@ defineProps({
 
 const emits = defineEmits(['navClick'])
 
-const onClick = (url) => emits('navClick', url)
+const onClick = (node) => emits('navClick', node)
 </script>
 
 <template>
   <li class="footer-nav__item">
-    <div class="item-label" @click="onClick(node.url)">
+    <div class="item-label" @click="onClick(node)">
       {{ node.label }}
     </div>
 
@@ -41,8 +41,8 @@ const onClick = (url) => emits('navClick', url)
     cursor: pointer;
     transition: all 0.3s ease;
     &:hover {
-      -webkit-transform: translateY(-8px);
-      transform: translateY(-8px);
+      -webkit-transform: translateY(-2px);
+      transform: translateY(-2px);
     }
   }
 }

src/views/layout/pc/footer/index.vue

@@ -3,6 +3,21 @@ import {ref, onMounted} from 'vue'
 import Logo from './components/logo.vue'
 import Nav from './components/nav.vue'
 import QRCode from './components/QRCode.vue'
+import DownloadImg from '@/components/downloadImg/index.vue'
+import {ElMessage} from 'element-plus'
+
+const imgType = ref('ios')
+const showImgType = ref(false)
+
+const handleDownloadClick = (type) => {
+  if (type === 'pc') {
+    ElMessage.warning('敬请期待！')
+    return
+  }
+  imgType.value = type
+  showImgType.value = true
+}
+
 onMounted(() => {})
 
 const toMIIF = () => {
@@ -16,7 +31,7 @@ const toMIIF = () => {
     <Logo id="logo" />
 
     <!-- 内容 -->
-    <Nav id="nav" />
+    <Nav id="nav" @download-click="handleDownloadClick" />
 
     <!-- 二维码 -->
     <QRCode id="QR" />
@@ -29,6 +44,8 @@ const toMIIF = () => {
       <span class="url" @click="toMIIF">苏ICP备2023030548号-1</span>
       <span class="url" @click="toMIIF">苏ICP备2023030548号-5</span>
     </div>
+
+    <DownloadImg :type="imgType" v-model="showImgType" />
   </div>
 </template>
 

src/views/layout/pc/header/nav.vue

@@ -1,19 +1,39 @@
 <script setup>
 import {ref, onMounted, watch, onUnmounted} from 'vue'
+import {useRouter} from 'vue-router'
 import {useNavStore} from '@/store/nav'
 import {storeToRefs} from 'pinia'
 
 // Store 相关
 const navStore = useNavStore()
 const {navIndex} = storeToRefs(navStore)
+const router = useRouter()
 
 // 响应式数据
 const navList = ref([])
 const activeIndex = ref('/')
 
+// 根据 url 查找导航项（含子级）
+const findNavItem = (url) => {
+  for (const nav of navList.value) {
+    if (nav.url === url && !nav.hasChildren) return nav
+    if (nav.children) {
+      const child = nav.children.find((c) => c.url === url)
+      if (child) return child
+    }
+  }
+  return null
+}
+
 // 处理导航选择
 const handleSelect = (key) => {
+  const navItem = findNavItem(key)
+  if (navItem?.open) {
+    window.open(navItem.url)
+    return
+  }
   navStore.changeNavIndex(key)
+  router.push(key)
 }
 
 // 监听 store 中的 navIndex 变化
@@ -47,33 +67,20 @@ onUnmounted(() => {
       active-text-color="#FFFFFF"
       text-color="#999999"
       background-color="$bg_color"
-      router
     >
       <template v-for="nav in navList" :key="nav.id">
         <!-- 有子菜单的情况 -->
-        <el-sub-menu
-          v-if="nav.hasChildren || nav?.children?.length > 0"
-          :index="nav.url"
-          popper-class="pepper"
-        >
+        <el-sub-menu v-if="nav.hasChildren || nav?.children?.length > 0" :index="nav.url" popper-class="pepper">
           <template #title>
             <span>{{ nav.label }}</span>
           </template>
-          <el-menu-item
-            v-for="child in nav.children"
-            :key="child.id"
-            :index="child.url"
-          >
+          <el-menu-item v-for="child in nav.children" :key="child.id" :index="child.url">
             {{ child.label }}
           </el-menu-item>
         </el-sub-menu>
 
         <!-- 无子菜单的情况 -->
-        <el-menu-item
-          v-else
-          :index="nav.url"
-          :class="{'is-active': activeIndex === nav.url}"
-        >
+        <el-menu-item v-else :index="nav.url" :class="{'is-active': activeIndex === nav.url}">
           {{ nav.label }}
         </el-menu-item>
       </template>