xingyy/heritage-hub
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

f

Browse Source
This commit is contained in:
张 元山 2024-02-01 18:04:35 +08:00
parent 9f5b72ebed
commit 3109518425
2 changed files with 225 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/views/commonpage.vue
View File

@ -70,7 +70,7 @@
</div>
<div style="height: 145px; background: #000"
class="row justify-center color-white">
class="row justify-center color-white relative">
<div class="col-6 col-md-4 row justify-around"
style="margin-top: 32px; max-width: 300px">
<div class="cursor"
@ -83,6 +83,102 @@
copyright 2024 最终所有权归延庆博物馆
</div>
</div>
<div v-if="state.isH5 == 'true'"
style="
border-radius: 50%;
position: absolute;
top: -60px;
left: 60px;
z-index: 10;
"
class="relative menu-dom">
<img src="../assets/images/icon-menu.png"
style="width: 32px" />
<div class="menu-hover-dom row justify-center"
style="
position: absolute;
top: -345px;
left: 18px;
z-index: 9;
padding-bottom: 20px;
">
<div class="row justify-center fl-mt-lg"
style="
padding: 0 10px;
height: 340px;
width: 104px;
background: #000;
">
<div class="cursor col-12 row items-center justify-center"
style="border-bottom: 1px solid #fff"
@click="handleLink('/home/navigation')">
首页
</div>
<div class="cursor col-12 row items-center justify-center"
style="border-bottom: 1px solid #fff"
@click="handleLink('')">
导航
</div>
<div class="cursor col-12 row items-center justify-center"
style="border-bottom: 1px solid #fff"
@click="handleLink('')">
展览
</div>
<div class="cursor col-12 row items-center justify-center"
style="border-bottom: 1px solid #fff"
@click="handleLink('')">
典藏
</div>
<div class="cursor col-12 row items-center justify-center"
style="border-bottom: 1px solid #fff"
@click="handleLink('')">
资讯
</div>
<div class="cursor col-12 row items-center justify-center"
style="border-bottom: 1px solid #fff"
@click="handleLink('')">
文创
</div>
<div class="cursor col-12 row items-center justify-center"
style="border-bottom: 1px solid #fff"
@click="handleLink('')">
数字文脉
</div>
<div class="cursor col-12 row items-center justify-center relative about-dom">
关于
<div class="about-hover-dom row justify-center"
style="
position: absolute;
top: -122px;
left: 120%;
z-index: 9;
padding-bottom: 20px;
">
<div class="row justify-center fl-mt-lg"
style="padding: 0 10px; width: 104px; background: #000">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
@ -100,10 +196,12 @@ const route = useRoute();
const router = useRouter();
const state = reactive({
activePage: "",
isH5: false,
});
onBeforeMount(() => {
const currentPath = route.path;
state.activePage = currentPath;
state.isH5 = localStorage.getItem("isH5");
});
const handleLink = (url) => {
@ -148,4 +246,17 @@ 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>

114
src/views/homepage.vue
View File

@ -70,7 +70,7 @@
</div>
<div style="height: 145px; background: #000"
class="row justify-center color-white">
class="row justify-center color-white relative">
<div class="col-6 col-md-4 row justify-around"
style="margin-top: 32px; max-width: 300px">
<div class="cursor"
@ -83,6 +83,103 @@
copyright 2024 最终所有权归延庆博物馆
</div>
</div>
<div v-if="state.isH5 == 'true'"
style="
border-radius: 50%;
position: absolute;
top: -60px;
left: 60px;
z-index: 10;
"
class="relative menu-dom">
<img src="../assets/images/icon-menu.png"
style="width: 32px" />
<div class="menu-hover-dom row justify-center"
style="
position: absolute;
top: -345px;
left: 18px;
z-index: 9;
padding-bottom: 20px;
">
<div class="row justify-center fl-mt-lg"
style="
padding: 0 10px;
height: 340px;
width: 104px;
background: #000;
">
<div class="cursor col-12 row items-center justify-center"
style="border-bottom: 1px solid #fff"
@click="handleLink('/home/navigation')">
首页
</div>
<div class="cursor col-12 row items-center justify-center"
style="border-bottom: 1px solid #fff"
@click="handleLink('')">
导航
</div>
<div class="cursor col-12 row items-center justify-center"
style="border-bottom: 1px solid #fff"
@click="handleLink('')">
展览
</div>
<div class="cursor col-12 row items-center justify-center"
style="border-bottom: 1px solid #fff"
@click="handleLink('')">
典藏
</div>
<div class="cursor col-12 row items-center justify-center"
style="border-bottom: 1px solid #fff"
@click="handleLink('')">
资讯
</div>
<div class="cursor col-12 row items-center justify-center"
style="border-bottom: 1px solid #fff"
@click="handleLink('')">
文创
</div>
<div class="cursor col-12 row items-center justify-center"
style="border-bottom: 1px solid #fff"
@click="handleLink('')">
数字文脉
</div>
<div class="cursor col-12 row items-center justify-center relative about-dom">
关于
<div class="about-hover-dom row justify-center"
style="
position: absolute;
top: -122px;
left: 120%;
z-index: 9;
padding-bottom: 20px;
">
<div class="row justify-center fl-mt-lg"
style="padding: 0 10px; width: 104px; background: #000">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
@ -100,10 +197,12 @@ const route = useRoute();
const router = useRouter();
const state = reactive({
activePage: "",
isH5: false,
});
onBeforeMount(() => {
const currentPath = route.path;
state.activePage = currentPath;
state.isH5 = localStorage.getItem("isH5");
});
const handleLink = (url) => {
@ -148,4 +247,17 @@ 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>