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 19:24:22 +08:00
parent 83b11fae80
commit 7b4f1e1e8c
3 changed files with 245 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/zu1236@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

185
src/views/aboutpage.vue
View File

@ -3,66 +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>
<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="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="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 class="row fl-page-width">
<div class="color-white overflow-auto about-menu"
@ -83,18 +89,30 @@
</div>
<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 最终所有权归延庆博物馆
<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>
</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%;
@ -208,6 +226,8 @@ import {
nextTick,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import {useAdaptation} from '@/utils/self-adaption.js'
const {currentDevice}= useAdaptation()
const route = useRoute();
const router = useRouter();
const state = reactive({
@ -291,7 +311,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;

201
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-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;