|
|
|
|
@ -1,84 +1,197 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div style="min-height:100vh"
|
|
|
|
|
<div style="min-height: 100vh"
|
|
|
|
|
class="100vw">
|
|
|
|
|
<div style="height:80px;background:#000;"
|
|
|
|
|
<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-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>
|
|
|
|
|
@click="handleLink('/home/navigation')">
|
|
|
|
|
首页
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cursor header-title relative"
|
|
|
|
|
@click="handleLink('')">导航</div>
|
|
|
|
|
@click="handleLink('')">
|
|
|
|
|
导航
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cursor header-title relative"
|
|
|
|
|
@click="handleLink('')">展览</div>
|
|
|
|
|
@click="handleLink('')">
|
|
|
|
|
展览
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cursor header-title relative"
|
|
|
|
|
@click="handleLink('')">典藏</div>
|
|
|
|
|
@click="handleLink('')">
|
|
|
|
|
典藏
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cursor header-title relative"
|
|
|
|
|
@click="handleLink('')">资讯</div>
|
|
|
|
|
@click="handleLink('')">
|
|
|
|
|
资讯
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cursor header-title relative"
|
|
|
|
|
@click="handleLink('')">文创</div>
|
|
|
|
|
@click="handleLink('')">
|
|
|
|
|
文创
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cursor header-title relative"
|
|
|
|
|
@click="handleLink('')">数字文脉</div>
|
|
|
|
|
<div class="cursor header-title hover-dom 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">
|
|
|
|
|
style="position: absolute; top: 20px; left: -38px; z-index: 9999">
|
|
|
|
|
<div class="row justify-center secmenu fl-mt-lg"
|
|
|
|
|
style="padding: 4px 8px ">
|
|
|
|
|
style="padding: 4px 8px">
|
|
|
|
|
<div class="cursor"
|
|
|
|
|
style="padding: 8px;border-bottom:1px solid #fff "
|
|
|
|
|
@click="handleLink('/about/statutes')">制度公开</div>
|
|
|
|
|
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>
|
|
|
|
|
style="padding: 8px; border-bottom: 1px solid #fff"
|
|
|
|
|
@click="handleLink('/common/interpretive')">
|
|
|
|
|
讲解服务
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cursor"
|
|
|
|
|
style="padding: 8px "
|
|
|
|
|
@click="handleLink('/common/audiencesurveys')">观众调查</div>
|
|
|
|
|
|
|
|
|
|
style="padding: 8px"
|
|
|
|
|
@click="handleLink('/common/audiencesurveys')">
|
|
|
|
|
观众调查
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row fl-page-width">
|
|
|
|
|
<div class="color-white overflow-auto about-menu"
|
|
|
|
|
style="background:rgba(0,0,0,0.8);">
|
|
|
|
|
<div style="height:50px"
|
|
|
|
|
style="background: rgba(0, 0, 0, 0.8)">
|
|
|
|
|
<div style="height: 50px"
|
|
|
|
|
class="cursor row items-center justify-center fl-px-sm"
|
|
|
|
|
v-for="(item,index) in state.aboutPages"
|
|
|
|
|
v-for="(item, index) in state.aboutPages"
|
|
|
|
|
:key="index"
|
|
|
|
|
@click="handleLink(item.url)"
|
|
|
|
|
:class="state.activePage === item.url? 'active-about':''">{{item.title}}</div>
|
|
|
|
|
:class="state.activePage === item.url ? 'active-about' : ''">
|
|
|
|
|
{{ item.title }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="about-router">
|
|
|
|
|
<router-view></router-view>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="height:145px;background:#000;"
|
|
|
|
|
class="row justify-center color-white">
|
|
|
|
|
<div class="col-6 col-md-4 row justify-around "
|
|
|
|
|
style="margin-top:32px;max-width:300px">
|
|
|
|
|
<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"
|
|
|
|
|
<div class="cursor"
|
|
|
|
|
@click="handleLink('')">隐私</div>
|
|
|
|
|
<div class="
|
|
|
|
|
cursor"
|
|
|
|
|
<div class="cursor"
|
|
|
|
|
@click="handleLink('')">条款</div>
|
|
|
|
|
<div class="
|
|
|
|
|
col-12
|
|
|
|
|
cursor
|
|
|
|
|
text-center">copyright 2024 最终所有权归延庆博物馆</div>
|
|
|
|
|
<div class="col-12 cursor text-center">
|
|
|
|
|
copyright 2024 最终所有权归延庆博物馆
|
|
|
|
|
</div>
|
|
|
|
|
</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>
|
|
|
|
|
<script setup>
|
|
|
|
|
@ -90,69 +203,69 @@ import {
|
|
|
|
|
watch,
|
|
|
|
|
nextTick,
|
|
|
|
|
} from "vue";
|
|
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
|
const route = useRoute();
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
const state = reactive({
|
|
|
|
|
activePage: '/about/statutes',
|
|
|
|
|
activePage: "/about/statutes",
|
|
|
|
|
aboutPages: [
|
|
|
|
|
{
|
|
|
|
|
url: '/about/statutes',
|
|
|
|
|
title: '博物馆章程资料',
|
|
|
|
|
url: "/about/statutes",
|
|
|
|
|
title: "博物馆章程资料",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
url: '/about/council',
|
|
|
|
|
title: '理事会材料',
|
|
|
|
|
url: "/about/council",
|
|
|
|
|
title: "理事会材料",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
url: '/about/seniormanagement',
|
|
|
|
|
title: '高级管理人员材料',
|
|
|
|
|
url: "/about/seniormanagement",
|
|
|
|
|
title: "高级管理人员材料",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
url: '/about/academiccommittee',
|
|
|
|
|
title: '学术委员会组织制度等材料',
|
|
|
|
|
url: "/about/academiccommittee",
|
|
|
|
|
title: "学术委员会组织制度等材料",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
url: '/about/supervisoryauthority',
|
|
|
|
|
title: '监督机构材料',
|
|
|
|
|
url: "/about/supervisoryauthority",
|
|
|
|
|
title: "监督机构材料",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
url: '/about/developmentplanning',
|
|
|
|
|
title: '发展规划材料',
|
|
|
|
|
url: "/about/developmentplanning",
|
|
|
|
|
title: "发展规划材料",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
url: '/about/annualworkplan',
|
|
|
|
|
title: '年度工作计划材料',
|
|
|
|
|
url: "/about/annualworkplan",
|
|
|
|
|
title: "年度工作计划材料",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
url: '/about/threeyeannrep',
|
|
|
|
|
title: '前三年年度报告材料',
|
|
|
|
|
url: "/about/threeyeannrep",
|
|
|
|
|
title: "前三年年度报告材料",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
url: '/about/socialdonation',
|
|
|
|
|
title: '社会捐赠管理制度材料',
|
|
|
|
|
url: "/about/socialdonation",
|
|
|
|
|
title: "社会捐赠管理制度材料",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
url: '/about/friendsofthemuseum',
|
|
|
|
|
title: '“博物馆之友”组织章程',
|
|
|
|
|
url: "/about/friendsofthemuseum",
|
|
|
|
|
title: "“博物馆之友”组织章程",
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
],
|
|
|
|
|
isH5: false,
|
|
|
|
|
});
|
|
|
|
|
onBeforeMount(() => {
|
|
|
|
|
const currentPath = route.path;
|
|
|
|
|
state.activePage = currentPath;
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
state.isH5 = localStorage.getItem("isH5");
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const handleLink = (url) => {
|
|
|
|
|
if (url) {
|
|
|
|
|
router.push(url)
|
|
|
|
|
router.push(url);
|
|
|
|
|
state.activePage = url;
|
|
|
|
|
} else {
|
|
|
|
|
router.push('/common/staytuned')
|
|
|
|
|
router.push("/common/staytuned");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
@ -215,4 +328,18 @@ 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>
|
|
|
|
|
|
张 元山
8 months ago
