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-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="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-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>
  </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;
}
.header-title:hover::after {
  content: "";
  background-image: url("../assets/images/icon-header-btn.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 45px;
  height: 3px;
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
}
</style>