|
|
|
@ -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-if="currentDevice==='mobile'">
|
|
|
|
|
<div class="mobile-title">{{route.meta.title}}</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<router-view></router-view>
|
|
|
|
@ -71,19 +76,30 @@
|
|
|
|
|
|
|
|
|
|
<div style="height: 145px; background: #000"
|
|
|
|
|
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"
|
|
|
|
|
@click="handleLink('')">帮助</div>
|
|
|
|
|
<div class="cursor"
|
|
|
|
|
@click="handleLink('')">隐私</div>
|
|
|
|
|
<div class="cursor"
|
|
|
|
|
@click="handleLink('')">条款</div>
|
|
|
|
|
<div class="col-12 cursor text-center">
|
|
|
|
|
copyright 2024 最终所有权归延庆博物馆
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<template v-if="currentDevice==='pc'">
|
|
|
|
|
<div class="col-6 col-md-4 row justify-around"
|
|
|
|
|
style="margin-top: 32px; max-width: 300px">
|
|
|
|
|
<div class="cursor"
|
|
|
|
|
@click="handleLink('')">帮助</div>
|
|
|
|
|
<div class="cursor"
|
|
|
|
|
@click="handleLink('')">隐私</div>
|
|
|
|
|
<div class="cursor"
|
|
|
|
|
@click="handleLink('')">条款</div>
|
|
|
|
|
<div class="col-12 cursor text-center">
|
|
|
|
|
copyright 2024 最终所有权归延庆博物馆
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-if="currentDevice==='mobile'">
|
|
|
|
|
<div class="mobile-footer">
|
|
|
|
|
<div class="content1">
|
|
|
|
|
<div class="wrap1">
|
|
|
|
|
<img src="@/assets/images/zu1236@2x.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap2">延庆博物馆</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div v-if="state.isH5 == 'true'"
|
|
|
|
|
style="
|
|
|
|
|
border-radius: 50%;
|
|
|
|
@ -197,6 +213,8 @@ import {
|
|
|
|
|
watch,
|
|
|
|
|
nextTick,
|
|
|
|
|
} from "vue";
|
|
|
|
|
import {useAdaptation} from '@/utils/self-adaption.js'
|
|
|
|
|
const {currentDevice}= useAdaptation()
|
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
|
const route = useRoute();
|
|
|
|
|
const router = useRouter();
|
|
|
|
@ -212,13 +230,13 @@ onBeforeMount(() => {
|
|
|
|
|
state.isH5 = localStorage.getItem("isH5");
|
|
|
|
|
});
|
|
|
|
|
watch(
|
|
|
|
|
() => route.path,
|
|
|
|
|
(to, from) => {
|
|
|
|
|
// 执行路由变化时的操作
|
|
|
|
|
state.showMenu = false
|
|
|
|
|
state.showSecMenu = false
|
|
|
|
|
},
|
|
|
|
|
{ deep: true }
|
|
|
|
|
() => route.path,
|
|
|
|
|
(to, from) => {
|
|
|
|
|
// 执行路由变化时的操作
|
|
|
|
|
state.showMenu = false
|
|
|
|
|
state.showSecMenu = false
|
|
|
|
|
},
|
|
|
|
|
{ deep: true }
|
|
|
|
|
);
|
|
|
|
|
const handleLink = (url) => {
|
|
|
|
|
if (url) {
|
|
|
|
@ -236,7 +254,40 @@ const handleSecMenuClick = () => {
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.mobile-footer{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.content1{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.wrap2{
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
font-size: 77px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.wrap1{
|
|
|
|
|
width: 137px;
|
|
|
|
|
height: 137px;
|
|
|
|
|
img{
|
|
|
|
|
width: 137px;
|
|
|
|
|
height: 137px;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.mobile-title{
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 80px;
|
|
|
|
|
}
|
|
|
|
|
.header-title {
|
|
|
|
|
padding: 4px 18px;
|
|
|
|
|
border-radius: 25px;
|
|
|
|
|