fix menu select
This commit is contained in:
张 元山
parent
f3c6e6b196
commit
a38004a6c6
@ -103,11 +103,13 @@
|
||||
left: 60px;
|
||||
z-index: 10;
|
||||
"
|
||||
class="relative menu-dom">
|
||||
class="relative menu-dom"
|
||||
@click="handleMenuClick()">
|
||||
<img src="../assets/images/icon-menu.png"
|
||||
style="width: 32px" />
|
||||
|
||||
<div class="menu-hover-dom row justify-center"
|
||||
<div v-if="state.showMenu"
|
||||
class="menu-hover-dom row justify-center"
|
||||
style="
|
||||
position: absolute;
|
||||
top: -345px;
|
||||
@ -157,9 +159,11 @@
|
||||
@click="handleLink('')">
|
||||
数字文脉
|
||||
</div>
|
||||
<div class="cursor col-12 row items-center justify-center relative about-dom">
|
||||
<div class="cursor col-12 row items-center justify-center relative about-dom"
|
||||
@click="handleSecMenuClick()">
|
||||
关于
|
||||
<div class="about-hover-dom row justify-center"
|
||||
<div v-if="state.showSecMenu"
|
||||
class=" row justify-center"
|
||||
style="
|
||||
position: absolute;
|
||||
top: -122px;
|
||||
@ -251,7 +255,20 @@ const state = reactive({
|
||||
},
|
||||
],
|
||||
isH5: false,
|
||||
showMenu: false,
|
||||
showSecMenu: false,
|
||||
});
|
||||
const pagepath = ref(window.location.pathname);
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(to, from) => {
|
||||
// 执行路由变化时的操作
|
||||
state.showMenu = false
|
||||
state.showSecMenu = false
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
onBeforeMount(() => {
|
||||
const currentPath = route.path;
|
||||
state.activePage = currentPath;
|
||||
@ -266,6 +283,12 @@ const handleLink = (url) => {
|
||||
router.push("/common/staytuned");
|
||||
}
|
||||
};
|
||||
const handleMenuClick = () => {
|
||||
state.showMenu = true
|
||||
}
|
||||
const handleSecMenuClick = () => {
|
||||
state.showSecMenu = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -328,18 +351,4 @@ const handleLink = (url) => {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.menu-dom:hover .menu-hover-dom {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-hover-dom {
|
||||
display: none;
|
||||
}
|
||||
.about-dom:hover .about-hover-dom {
|
||||
display: block;
|
||||
}
|
||||
.about-hover-dom {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -91,11 +91,13 @@
|
||||
left: 60px;
|
||||
z-index: 10;
|
||||
"
|
||||
class="relative menu-dom">
|
||||
class="relative menu-dom"
|
||||
@click="handleMenuClick()">
|
||||
<img src="../assets/images/icon-menu.png"
|
||||
style="width: 32px" />
|
||||
|
||||
<div class="menu-hover-dom row justify-center"
|
||||
<div v-if="state.showMenu"
|
||||
class="menu-hover-dom row justify-center"
|
||||
style="
|
||||
position: absolute;
|
||||
top: -345px;
|
||||
@ -145,9 +147,12 @@
|
||||
@click="handleLink('')">
|
||||
数字文脉
|
||||
</div>
|
||||
<div class="cursor col-12 row items-center justify-center relative about-dom">
|
||||
|
||||
<div class="cursor col-12 row items-center justify-center relative about-dom"
|
||||
@click="handleSecMenuClick()">
|
||||
关于
|
||||
<div class="about-hover-dom row justify-center"
|
||||
<div v-if="state.showSecMenu"
|
||||
class="about-hover-dom row justify-center"
|
||||
style="
|
||||
position: absolute;
|
||||
top: -122px;
|
||||
@ -197,12 +202,25 @@ const router = useRouter();
|
||||
const state = reactive({
|
||||
activePage: "",
|
||||
isH5: false,
|
||||
showMenu: false,
|
||||
showSecMenu: false,
|
||||
});
|
||||
onBeforeMount(() => {
|
||||
const currentPath = route.path;
|
||||
state.activePage = currentPath;
|
||||
state.isH5 = localStorage.getItem("isH5");
|
||||
});
|
||||
const pagepath = ref(window.location.pathname);
|
||||
console.log('pagepath', pagepath.value);
|
||||
watch(
|
||||
() => route.path,
|
||||
(to, from) => {
|
||||
// 执行路由变化时的操作
|
||||
state.showMenu = false
|
||||
state.showSecMenu = false
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const handleLink = (url) => {
|
||||
if (url) {
|
||||
@ -212,6 +230,12 @@ const handleLink = (url) => {
|
||||
router.push("/common/staytuned");
|
||||
}
|
||||
};
|
||||
const handleMenuClick = () => {
|
||||
state.showMenu = true
|
||||
}
|
||||
const handleSecMenuClick = () => {
|
||||
state.showSecMenu = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -246,17 +270,4 @@ const handleLink = (url) => {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.menu-dom:hover .menu-hover-dom {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-hover-dom {
|
||||
display: none;
|
||||
}
|
||||
.about-dom:hover .about-hover-dom {
|
||||
display: block;
|
||||
}
|
||||
.about-hover-dom {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,72 +3,67 @@
|
||||
class="100vw">
|
||||
<div style="height: 80px; background: #000"
|
||||
class="color-white row items-center">
|
||||
<template v-if="currentDevice==='pc'">
|
||||
<div class="col-3 col-md-4 row items-center justify-center">
|
||||
<img src="../assets/images/icon-title.png"
|
||||
style="width: 40px; height: 40px"/><span class="fl-ml-sm">延庆博物馆</span>
|
||||
<div class="col-3 col-md-4 row items-center justify-center">
|
||||
<img src="../assets/images/icon-title.png"
|
||||
style="width: 40px; height: 40px" /><span class="fl-ml-sm">延庆博物馆</span>
|
||||
</div>
|
||||
|
||||
<div class="col-9 col-md-6 row justify-around items-center">
|
||||
<div class="cursor header-title relative"
|
||||
@click="handleLink('/home/navigation')">
|
||||
首页
|
||||
</div>
|
||||
<div class="cursor header-title relative"
|
||||
@click="handleLink('')">
|
||||
导航
|
||||
</div>
|
||||
<div class="cursor header-title relative"
|
||||
@click="handleLink('')">
|
||||
展览
|
||||
</div>
|
||||
<div class="cursor header-title relative"
|
||||
@click="handleLink('')">
|
||||
典藏
|
||||
</div>
|
||||
<div class="cursor header-title relative"
|
||||
@click="handleLink('')">
|
||||
资讯
|
||||
</div>
|
||||
<div class="cursor header-title relative"
|
||||
@click="handleLink('')">
|
||||
文创
|
||||
</div>
|
||||
<div class="cursor header-title relative"
|
||||
@click="handleLink('')">
|
||||
数字文脉
|
||||
</div>
|
||||
|
||||
<div class="col-9 col-md-6 row justify-around items-center">
|
||||
<div class="cursor header-title relative"
|
||||
@click="handleLink('/home/navigation')">
|
||||
首页
|
||||
</div>
|
||||
<div class="cursor header-title relative"
|
||||
@click="handleLink('')">
|
||||
导航
|
||||
</div>
|
||||
<div class="cursor header-title relative"
|
||||
@click="handleLink('')">
|
||||
展览
|
||||
</div>
|
||||
<div class="cursor header-title relative"
|
||||
@click="handleLink('')">
|
||||
典藏
|
||||
</div>
|
||||
<div class="cursor header-title relative"
|
||||
@click="handleLink('')">
|
||||
资讯
|
||||
</div>
|
||||
<div class="cursor header-title relative"
|
||||
@click="handleLink('')">
|
||||
文创
|
||||
</div>
|
||||
<div class="cursor header-title relative"
|
||||
@click="handleLink('')">
|
||||
数字文脉
|
||||
</div>
|
||||
<div class="cursor header-title hover-dom relative">
|
||||
关于
|
||||
<div class="hidden-dom row justify-center"
|
||||
style="position: absolute; top: 20px; left: -38px; z-index: 9999">
|
||||
<div class="row justify-center secmenu fl-mt-lg"
|
||||
style="padding: 4px 8px">
|
||||
<div class="cursor"
|
||||
style="padding: 8px; border-bottom: 1px solid #fff"
|
||||
@click="handleLink('/about/statutes')">
|
||||
制度公开
|
||||
</div>
|
||||
|
||||
<div class="cursor header-title hover-dom relative">
|
||||
关于
|
||||
<div class="hidden-dom row justify-center"
|
||||
style="position: absolute; top: 20px; left: -38px; z-index: 9999">
|
||||
<div class="row justify-center secmenu fl-mt-lg"
|
||||
style="padding: 4px 8px">
|
||||
<div class="cursor"
|
||||
style="padding: 8px; border-bottom: 1px solid #fff"
|
||||
@click="handleLink('/about/statutes')">
|
||||
制度公开
|
||||
</div>
|
||||
|
||||
<div class="cursor"
|
||||
style="padding: 8px; border-bottom: 1px solid #fff"
|
||||
@click="handleLink('/common/interpretive')">
|
||||
讲解服务
|
||||
</div>
|
||||
<div class="cursor"
|
||||
style="padding: 8px"
|
||||
@click="handleLink('/common/audiencesurveys')">
|
||||
观众调查
|
||||
</div>
|
||||
<div class="cursor"
|
||||
style="padding: 8px; border-bottom: 1px solid #fff"
|
||||
@click="handleLink('/common/interpretive')">
|
||||
讲解服务
|
||||
</div>
|
||||
<div class="cursor"
|
||||
style="padding: 8px"
|
||||
@click="handleLink('/common/audiencesurveys')">
|
||||
观众调查
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="model-title">{{ route.meta.title }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
@ -79,14 +74,11 @@
|
||||
<div class="col-6 col-md-4 row justify-around"
|
||||
style="margin-top: 32px; max-width: 300px">
|
||||
<div class="cursor"
|
||||
@click="handleLink('')">帮助
|
||||
</div>
|
||||
@click="handleLink('')">帮助</div>
|
||||
<div class="cursor"
|
||||
@click="handleLink('')">隐私
|
||||
</div>
|
||||
@click="handleLink('')">隐私</div>
|
||||
<div class="cursor"
|
||||
@click="handleLink('')">条款
|
||||
</div>
|
||||
@click="handleLink('')">条款</div>
|
||||
<div class="col-12 cursor text-center">
|
||||
copyright 2024 最终所有权归延庆博物馆
|
||||
</div>
|
||||
@ -100,11 +92,13 @@
|
||||
left: 60px;
|
||||
z-index: 10;
|
||||
"
|
||||
class="relative menu-dom">
|
||||
class="relative menu-dom"
|
||||
@click="handleMenuClick()">
|
||||
<img src="../assets/images/icon-menu.png"
|
||||
style="width: 32px"/>
|
||||
style="width: 32px" />
|
||||
|
||||
<div class="menu-hover-dom row justify-center"
|
||||
<div v-if="state.showMenu"
|
||||
class="menu-hover-dom row justify-center"
|
||||
style="
|
||||
position: absolute;
|
||||
top: -345px;
|
||||
@ -154,9 +148,12 @@
|
||||
@click="handleLink('')">
|
||||
数字文脉
|
||||
</div>
|
||||
<div class="cursor col-12 row items-center justify-center relative about-dom">
|
||||
|
||||
<div class="cursor col-12 row items-center justify-center relative about-dom"
|
||||
@click="handleSecMenuClick()">
|
||||
关于
|
||||
<div class="about-hover-dom row justify-center"
|
||||
<div v-if="state.showSecMenu"
|
||||
class="about-hover-dom row justify-center"
|
||||
style="
|
||||
position: absolute;
|
||||
top: -122px;
|
||||
@ -200,23 +197,29 @@ import {
|
||||
watch,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
import {useAdaptation} from '@/utils/self-adaption.js'
|
||||
|
||||
const {currentDevice} = useAdaptation()
|
||||
const state = reactive({
|
||||
activePage: "",
|
||||
isH5: false,
|
||||
showMenu: false,
|
||||
showSecMenu: false,
|
||||
});
|
||||
onBeforeMount(() => {
|
||||
const currentPath = route.path;
|
||||
state.activePage = currentPath;
|
||||
state.isH5 = localStorage.getItem("isH5");
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(to, from) => {
|
||||
// 执行路由变化时的操作
|
||||
state.showMenu = false
|
||||
state.showSecMenu = false
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
const handleLink = (url) => {
|
||||
if (url) {
|
||||
router.push(url);
|
||||
@ -225,27 +228,22 @@ const handleLink = (url) => {
|
||||
router.push("/common/staytuned");
|
||||
}
|
||||
};
|
||||
const handleMenuClick = () => {
|
||||
state.showMenu = true
|
||||
}
|
||||
const handleSecMenuClick = () => {
|
||||
state.showSecMenu = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.model-title {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
font-size: 82px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
padding: 4px 18px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.header-title:hover {
|
||||
background: #3d8873;
|
||||
}
|
||||
|
||||
.hover-dom:hover .hidden-dom {
|
||||
display: block;
|
||||
}
|
||||
@ -253,13 +251,11 @@ const handleLink = (url) => {
|
||||
.hidden-dom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.secmenu {
|
||||
width: 120px;
|
||||
background: #343434;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.header-title:hover::after {
|
||||
content: "";
|
||||
background-image: url("../assets/images/icon-header-btn.png");
|
||||
@ -272,20 +268,4 @@ const handleLink = (url) => {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.menu-dom:hover .menu-hover-dom {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-hover-dom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.about-dom:hover .about-hover-dom {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.about-hover-dom {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user