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

s

Browse Source
This commit is contained in:
Phoenix 2024-02-01 18:48:35 +08:00
parent b569883d25
commit f3c6e6b196
1 changed files with 87 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
src/views/homepage.vue
View File

@ -3,67 +3,72 @@
class="100vw">
<div style="height: 80px; background: #000"
class="color-white row items-center">
<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('')">
数字文脉
<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>
<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="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"
style="padding: 8px; border-bottom: 1px solid #fff"
@click="handleLink('/common/interpretive')">
讲解服务
</div>
<div class="cursor"
style="padding: 8px"
@click="handleLink('/common/audiencesurveys')">
观众调查
<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>
</div>
</div>
</div>
</div>
</template>
<template v-else>
<div class="model-title">{{ route.meta.title }}</div>
</template>
</div>
<div>
<router-view></router-view>
@ -74,11 +79,14 @@
<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>
@ -94,7 +102,7 @@
"
class="relative menu-dom">
<img src="../assets/images/icon-menu.png"
style="width: 32px" />
style="width: 32px"/>
<div class="menu-hover-dom row justify-center"
style="
@ -192,9 +200,13 @@ 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,
@ -216,13 +228,24 @@ const handleLink = (url) => {
</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;
}
@ -230,11 +253,13 @@ 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");
@ -247,6 +272,7 @@ const handleLink = (url) => {
left: 50%;
transform: translateX(-50%);
}
.menu-dom:hover .menu-hover-dom {
display: block;
}
@ -254,9 +280,11 @@ const handleLink = (url) => {
.menu-hover-dom {
display: none;
}
.about-dom:hover .about-hover-dom {
display: block;
}
.about-hover-dom {
display: none;
}