heritage-hub/src/views/commonpage.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="handleLink('/home/navigation')">首页</div>
        <div class="cursor header-title"
             @click="handleLink('')">导航</div>
        <div class="cursor header-title"
             @click="handleLink('')">展览</div>
        <div class="cursor header-title"
             @click="handleLink('')">典藏</div>
        <div class="cursor header-title"
             @click="handleLink('')">资讯</div>
        <div class="cursor header-title"
             @click="handleLink('')">文创</div>
        <div class="cursor header-title"
             @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="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 class="fl-page-width">
      <router-view></router-view>
    </div>

    <div style="height:145px;background:#000;"
         class="row justify-center color-white">
      <div class="col-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>
  </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 handleLink = (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;
}
.hover-dom:hover .hidden-dom {
  display: block;
}

.hidden-dom {
  display: none;
}
.secmenu {
  width: 120px;
  background: #343434;
  border-radius: 10px;
}
</style>