89 lines
2.4 KiB
Vue
89 lines
2.4 KiB
Vue
<template>
|
|
<div style="min-height:100vh"
|
|
class="100vw">
|
|
<div style="height:80px;background:#000;"
|
|
class="color-white row items-center">
|
|
<div class="col-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-6 row justify-around items-center">
|
|
|
|
<div class="cursor header-title"
|
|
@click="handkeLink('/home/navigation')">首页</div>
|
|
<div class="cursor header-title"
|
|
@click="handkeLink('')">导航</div>
|
|
<div class="cursor header-title"
|
|
@click="handkeLink('')">展览</div>
|
|
<div class="cursor header-title"
|
|
@click="handkeLink('')">典藏</div>
|
|
<div class="cursor header-title"
|
|
@click="handkeLink('')">资讯</div>
|
|
<div class="cursor header-title"
|
|
@click="handkeLink('')">文创</div>
|
|
<div class="cursor header-title"
|
|
@click="handkeLink('')">数字文脉</div>
|
|
<div class="cursor header-title"
|
|
@click="handkeLink('/about/statutes')">关于</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<router-view></router-view>
|
|
</div>
|
|
|
|
<div style="height:187px;background:#000;"
|
|
class="row justify-center color-white">
|
|
<div class="col-6 row justify-around fl-mt-lg">
|
|
<div class="cursor">首页</div>
|
|
<div class="cursor">导航</div>
|
|
<div class="cursor">展览</div>
|
|
<div class="cursor">典藏</div>
|
|
<div class="cursor">资讯</div>
|
|
<div class="cursor">文创</div>
|
|
<div class="cursor">数字文脉</div>
|
|
<div class="cursor">关于</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onBeforeMount,
|
|
getCurrentInstance,
|
|
watch,
|
|
nextTick,
|
|
} from "vue";
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const state = reactive({
|
|
activePage: '',
|
|
});
|
|
onBeforeMount(() => {
|
|
const currentPath = route.path;
|
|
state.activePage = currentPath;
|
|
})
|
|
|
|
|
|
const handkeLink = (url) => {
|
|
if (url) {
|
|
router.push(url)
|
|
state.activePage = url;
|
|
} else {
|
|
router.push('/common/staytuned')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header-title {
|
|
padding: 4px 18px;
|
|
border-radius: 25px;
|
|
}
|
|
.header-title:hover {
|
|
background: #3d8873;
|
|
}
|
|
</style>
|