备份代码
This commit is contained in:
@ -1,31 +1,34 @@
|
||||
window.nav = {
|
||||
header: [
|
||||
{id: 1, label: '首页', url: '/', hasChildren: false},
|
||||
{id: 1, label: '首页', url: '/', mobileUrl: '/m/homepage', hasChildren: false},
|
||||
{
|
||||
id: 2,
|
||||
label: '解决方案',
|
||||
url: '/product',
|
||||
mobileUrl: '/m/product',
|
||||
hasChildren: true,
|
||||
children: [
|
||||
{
|
||||
id: 2.1,
|
||||
label: '空域感知矩阵',
|
||||
url: '/product/hardwareSystem',
|
||||
mobileUrl: '/m/product/hardwareSystem',
|
||||
hasChildren: false,
|
||||
},
|
||||
{
|
||||
id: 2.2,
|
||||
label: '低空智控中枢',
|
||||
url: '/product/softwareSystem',
|
||||
mobileUrl: '/m/product/softwareSystem',
|
||||
hasChildren: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
// {id: 3, label: '服务与支撑', url: '/services', hasChildren: false},
|
||||
{id: 4, label: '新闻中心', url: '/news', hasChildren: false},
|
||||
{id: 5, label: '关于我们', url: '/about', hasChildren: false},
|
||||
{id: 6, label: '联系我们', url: '/link', hasChildren: false},
|
||||
{id: 7, label: '资源下载', url: '/download', hasChildren: false},
|
||||
// {id: 3, label: '服务与支撑', url: '/services', mobileUrl: '/m/services', hasChildren: false},
|
||||
{id: 4, label: '新闻中心', url: '/news', mobileUrl: '/m/news', hasChildren: false},
|
||||
{id: 5, label: '关于我们', url: '/about', mobileUrl: '/m/about', hasChildren: false},
|
||||
{id: 6, label: '联系我们', url: '/link', mobileUrl: '/m/link', hasChildren: false},
|
||||
{id: 7, label: '资源下载', url: '/download', mobileUrl: '/m/download', hasChildren: false},
|
||||
{id: 8, label: '演示系统', url: window.config.featureUrl, hasChildren: false, open: true},
|
||||
],
|
||||
|
||||
@ -36,14 +39,15 @@ window.nav = {
|
||||
url: '',
|
||||
hasChildren: true,
|
||||
children: [
|
||||
{id: 1.1, label: '空域感知矩阵', url: '/product/hardwareSystem'},
|
||||
{id: 1.2, label: '低空智控中枢', url: '/product/softwareSystem'},
|
||||
{id: 1.1, label: '空域感知矩阵', url: '/product/hardwareSystem', mobileUrl: '/m/product/hardwareSystem'},
|
||||
{id: 1.2, label: '低空智控中枢', url: '/product/softwareSystem', mobileUrl: '/m/product/softwareSystem'},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// id: 2,
|
||||
// label: '服务与支撑',
|
||||
// url: '/services',
|
||||
// mobileUrl: '/m/services',
|
||||
// hasChildren: false,
|
||||
// },
|
||||
{
|
||||
@ -52,21 +56,21 @@ window.nav = {
|
||||
url: '/download',
|
||||
hasChildren: true,
|
||||
children: [
|
||||
{id: 3.1, label: '资源下载', url: '/download'},
|
||||
{id: 3.1, label: '资源下载', url: '/download', mobileUrl: '/m/download'},
|
||||
{id: 3.2, label: 'Android', url: '', downloadType: 'android'},
|
||||
{id: 3.3, label: 'iOS', url: '', downloadType: 'ios'},
|
||||
{id: 3.4, label: '客户端', url: '', downloadType: 'pc'},
|
||||
],
|
||||
},
|
||||
// {id: 4, label: '新闻中心', url: '/news', hasChildren: false},
|
||||
// {id: 4, label: '新闻中心', url: '/news', mobileUrl: '/m/news', hasChildren: false},
|
||||
{
|
||||
id: 5,
|
||||
label: '关于燃谷',
|
||||
url: '',
|
||||
hasChildren: true,
|
||||
children: [
|
||||
{id: 5.1, label: '公司简介', url: '/about'},
|
||||
{id: 5.2, label: '联系我们', url: '/link'},
|
||||
{id: 5.1, label: '公司简介', url: '/about', mobileUrl: '/m/about'},
|
||||
{id: 5.2, label: '联系我们', url: '/link', mobileUrl: '/m/link'},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import {createWebHashHistory, createRouter} from 'vue-router'
|
||||
import mobileRoutes from './mobile.js'
|
||||
|
||||
import HomeView from '@/views/homepage/index.vue'
|
||||
|
||||
const routes = [
|
||||
const pcRoutes = [
|
||||
// ============================================ 首页 ============================================
|
||||
{path: '/', component: HomeView},
|
||||
|
||||
@ -100,6 +101,8 @@ const routes = [
|
||||
},
|
||||
]
|
||||
|
||||
const routes = [...pcRoutes, ...mobileRoutes]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
@ -108,6 +111,25 @@ const router = createRouter({
|
||||
// 移动端/PC端断点
|
||||
const MOBILE_BREAKPOINT = 1000
|
||||
|
||||
// PC → 移动端路由映射
|
||||
const pcToMobileMap = {
|
||||
'/': '/m/homepage',
|
||||
'/product/hardwareSystem': '/m/product/hardwareSystem',
|
||||
'/product/softwareSystem': '/m/product/softwareSystem',
|
||||
'/product/detail': '/m/product/detail',
|
||||
'/services': '/m/services',
|
||||
'/news': '/m/news',
|
||||
'/news/detail': '/m/news/detail',
|
||||
'/about': '/m/about',
|
||||
'/link': '/m/link',
|
||||
'/download': '/m/download',
|
||||
}
|
||||
|
||||
// 移动端 → PC 路由映射(反向)
|
||||
const mobileToPcMap = Object.fromEntries(
|
||||
Object.entries(pcToMobileMap).map(([k, v]) => [v, k])
|
||||
)
|
||||
|
||||
// 判断是否为移动端
|
||||
function checkIsMobile() {
|
||||
return window.innerWidth < MOBILE_BREAKPOINT
|
||||
@ -116,8 +138,21 @@ function checkIsMobile() {
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
const {useNavStore} = await import('@/store/nav.js')
|
||||
const navStore = useNavStore()
|
||||
const isMobile = checkIsMobile()
|
||||
|
||||
// 更新移动端状态
|
||||
navStore.setIsMobile(checkIsMobile())
|
||||
navStore.setIsMobile(isMobile)
|
||||
|
||||
// 移动端访问 PC 路由 → 重定向到移动端路由
|
||||
if (isMobile && pcToMobileMap[to.path]) {
|
||||
return next({path: pcToMobileMap[to.path], query: to.query, hash: to.hash, replace: true})
|
||||
}
|
||||
|
||||
// PC端访问移动端路由 → 重定向到 PC 路由
|
||||
if (!isMobile && mobileToPcMap[to.path]) {
|
||||
return next({path: mobileToPcMap[to.path], query: to.query, hash: to.hash, replace: true})
|
||||
}
|
||||
|
||||
next()
|
||||
})
|
||||
|
||||
|
||||
76
src/router/mobile.js
Normal file
76
src/router/mobile.js
Normal file
@ -0,0 +1,76 @@
|
||||
const mobileRoutes = [
|
||||
// ============================================ 首页 ============================================
|
||||
{
|
||||
path: '/m/homepage',
|
||||
name: 'MobileHomepage',
|
||||
component: () => import('@/views/homepage/mobile.vue'),
|
||||
},
|
||||
|
||||
// ============================================ 产品中心 ============================================
|
||||
{
|
||||
path: '/m/product/hardwareSystem',
|
||||
name: 'MobileHardwareSystem',
|
||||
component: () => import('@/views/product/mobileHardwareSystem.vue'),
|
||||
meta: {title: '低空监管体系'},
|
||||
},
|
||||
{
|
||||
path: '/m/product/softwareSystem',
|
||||
name: 'MobileSoftwareSystem',
|
||||
component: () => import('@/views/product/mobileSoftwareSystem.vue'),
|
||||
meta: {title: '低空远程识别设备'},
|
||||
},
|
||||
{
|
||||
path: '/m/product/detail',
|
||||
name: 'MobileProductDetail',
|
||||
component: () => import('@/views/product/mobileDetail.vue'),
|
||||
meta: {title: '产品详情'},
|
||||
},
|
||||
|
||||
// ============================================ 服务与支撑 ============================================
|
||||
{
|
||||
path: '/m/services',
|
||||
name: 'MobileServices',
|
||||
component: () => import('@/views/services/mobile.vue'),
|
||||
meta: {title: '服务与支撑'},
|
||||
},
|
||||
|
||||
// ============================================ 新闻中心 ============================================
|
||||
{
|
||||
path: '/m/news',
|
||||
name: 'MobileNews',
|
||||
component: () => import('@/views/news/mobile.vue'),
|
||||
meta: {title: '新闻中心'},
|
||||
},
|
||||
{
|
||||
path: '/m/news/detail',
|
||||
name: 'MobileNewsDetail',
|
||||
component: () => import('@/views/news/mobileDetail.vue'),
|
||||
meta: {title: '新闻详情'},
|
||||
},
|
||||
|
||||
// ============================================ 关于我们 ============================================
|
||||
{
|
||||
path: '/m/about',
|
||||
name: 'MobileAbout',
|
||||
component: () => import('@/views/about/mobile.vue'),
|
||||
meta: {title: '关于我们'},
|
||||
},
|
||||
|
||||
// ============================================ 联系我们 ============================================
|
||||
{
|
||||
path: '/m/link',
|
||||
name: 'MobileLink',
|
||||
component: () => import('@/views/link/mobile.vue'),
|
||||
meta: {title: '联系我们'},
|
||||
},
|
||||
|
||||
// ============================================ 下载中心 ============================================
|
||||
{
|
||||
path: '/m/download',
|
||||
name: 'MobileDownload',
|
||||
component: () => import('@/views/download/mobile.vue'),
|
||||
meta: {title: '下载中心'},
|
||||
},
|
||||
]
|
||||
|
||||
export default mobileRoutes
|
||||
6
src/views/about/mobile.vue
Normal file
6
src/views/about/mobile.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<script setup>
|
||||
import PcIndex from './index.vue'
|
||||
</script>
|
||||
<template>
|
||||
<PcIndex />
|
||||
</template>
|
||||
6
src/views/download/mobile.vue
Normal file
6
src/views/download/mobile.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<script setup>
|
||||
import PcIndex from './index.vue'
|
||||
</script>
|
||||
<template>
|
||||
<PcIndex />
|
||||
</template>
|
||||
6
src/views/homepage/mobile.vue
Normal file
6
src/views/homepage/mobile.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<script setup>
|
||||
import PcIndex from './index.vue'
|
||||
</script>
|
||||
<template>
|
||||
<PcIndex />
|
||||
</template>
|
||||
@ -22,18 +22,22 @@ const closeSidebar = () => {
|
||||
sidebarVisible.value = false
|
||||
}
|
||||
|
||||
const toggleSubMenu = (url) => {
|
||||
const idx = expandedSubMenus.value.indexOf(url)
|
||||
const toggleSubMenu = (navId) => {
|
||||
const idx = expandedSubMenus.value.indexOf(navId)
|
||||
if (idx > -1) {
|
||||
expandedSubMenus.value.splice(idx, 1)
|
||||
} else {
|
||||
expandedSubMenus.value.push(url)
|
||||
expandedSubMenus.value.push(navId)
|
||||
}
|
||||
}
|
||||
|
||||
const getTargetUrl = (nav) => {
|
||||
return nav.mobileUrl || nav.url
|
||||
}
|
||||
|
||||
const handleNavClick = (nav) => {
|
||||
if (nav.hasChildren || nav.children?.length > 0) {
|
||||
toggleSubMenu(nav.url)
|
||||
toggleSubMenu(nav.id)
|
||||
return
|
||||
}
|
||||
if (nav.open) {
|
||||
@ -41,9 +45,10 @@ const handleNavClick = (nav) => {
|
||||
sidebarVisible.value = false
|
||||
return
|
||||
}
|
||||
navStore.changeNavIndex(nav.url)
|
||||
activeIndex.value = nav.url
|
||||
router.push(nav.url)
|
||||
const targetUrl = getTargetUrl(nav)
|
||||
navStore.changeNavIndex(targetUrl)
|
||||
activeIndex.value = targetUrl
|
||||
router.push(targetUrl)
|
||||
sidebarVisible.value = false
|
||||
}
|
||||
|
||||
@ -83,21 +88,21 @@ const toMIIF = () => {
|
||||
<div v-if="nav.hasChildren || nav.children?.length > 0" class="nav-group">
|
||||
<div
|
||||
class="nav-item nav-item--parent"
|
||||
:class="{'nav-item--expanded': expandedSubMenus.includes(nav.url)}"
|
||||
:class="{'nav-item--expanded': expandedSubMenus.includes(nav.id)}"
|
||||
@click="handleNavClick(nav)"
|
||||
>
|
||||
<span class="nav-label">{{ nav.label }}</span>
|
||||
<el-icon class="nav-arrow" :size="12">
|
||||
<ArrowDown v-if="expandedSubMenus.includes(nav.url)" />
|
||||
<ArrowDown v-if="expandedSubMenus.includes(nav.id)" />
|
||||
<ArrowRight v-else />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div v-show="expandedSubMenus.includes(nav.url)" class="nav-sub">
|
||||
<div v-show="expandedSubMenus.includes(nav.id)" class="nav-sub">
|
||||
<div
|
||||
v-for="child in nav.children"
|
||||
:key="child.id"
|
||||
class="nav-item nav-item--child"
|
||||
:class="{'nav-item--active': activeIndex === child.url}"
|
||||
:class="{'nav-item--active': activeIndex === getTargetUrl(child)}"
|
||||
@click="handleNavClick(child)"
|
||||
>
|
||||
{{ child.label }}
|
||||
@ -108,7 +113,7 @@ const toMIIF = () => {
|
||||
<div
|
||||
v-else
|
||||
class="nav-item"
|
||||
:class="{'nav-item--active': activeIndex === nav.url}"
|
||||
:class="{'nav-item--active': activeIndex === getTargetUrl(nav)}"
|
||||
@click="handleNavClick(nav)"
|
||||
>
|
||||
<span class="nav-label">{{ nav.label }}</span>
|
||||
|
||||
6
src/views/link/mobile.vue
Normal file
6
src/views/link/mobile.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<script setup>
|
||||
import PcIndex from './index.vue'
|
||||
</script>
|
||||
<template>
|
||||
<PcIndex />
|
||||
</template>
|
||||
6
src/views/news/mobile.vue
Normal file
6
src/views/news/mobile.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<script setup>
|
||||
import PcIndex from './index.vue'
|
||||
</script>
|
||||
<template>
|
||||
<PcIndex />
|
||||
</template>
|
||||
6
src/views/news/mobileDetail.vue
Normal file
6
src/views/news/mobileDetail.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<script setup>
|
||||
import PcPage from './detail.vue'
|
||||
</script>
|
||||
<template>
|
||||
<PcPage />
|
||||
</template>
|
||||
6
src/views/product/mobileDetail.vue
Normal file
6
src/views/product/mobileDetail.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<script setup>
|
||||
import PcPage from './detail.vue'
|
||||
</script>
|
||||
<template>
|
||||
<PcPage />
|
||||
</template>
|
||||
6
src/views/product/mobileHardwareSystem.vue
Normal file
6
src/views/product/mobileHardwareSystem.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<script setup>
|
||||
import PcPage from './hardwareSystem.vue'
|
||||
</script>
|
||||
<template>
|
||||
<PcPage />
|
||||
</template>
|
||||
6
src/views/product/mobileSoftwareSystem.vue
Normal file
6
src/views/product/mobileSoftwareSystem.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<script setup>
|
||||
import PcPage from './softwareSystem.vue'
|
||||
</script>
|
||||
<template>
|
||||
<PcPage />
|
||||
</template>
|
||||
6
src/views/services/mobile.vue
Normal file
6
src/views/services/mobile.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<script setup>
|
||||
import PcIndex from './index.vue'
|
||||
</script>
|
||||
<template>
|
||||
<PcIndex />
|
||||
</template>
|
||||
Reference in New Issue
Block a user