heritage-hub/src/views/commonpage.vue

<template>
  <div style="min-height: 100vh"
       class="100vw">
    <div v-if="currentDevice==='pc'" 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 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>
      <div v-if="state.isH5 == 'true'"
           style="
          border-radius: 50%;
          position: absolute;
          top: -60px;
          left: 60px;
          z-index: 10;
        "
           class="relative menu-dom"
           @click="handleMenuClick()">
        <img src="../assets/images/icon-menu.png"
             style="width: 32px" />

        <div v-if="state.showMenu"
             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"
                 @click="handleSecMenuClick()">
              关于
              <div v-if="state.showSecMenu"
                   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>
import {
  ref,
  reactive,
  onBeforeMount,
  getCurrentInstance,
  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();
const state = reactive({
  activePage: "",
  isH5: false,
  showMenu: false,
  showSecMenu: false,
});
onBeforeMount(() => {
  const currentPath = route.path;
  state.activePage = currentPath;
  state.isH5 = localStorage.getItem("isH5");
});
const pagepath = ref(window.location.pathname);
console.log('pagepath', pagepath.value);
watch(
  () => route.path,
  (to, from) => {
    // 执行路由变化时的操作
    state.showMenu = false
    state.showSecMenu = false
  },
  { deep: true }
);

const handleLink = (url) => {
  if (url) {
    router.push(url);
    state.activePage = url;
  } else {
    router.push("/common/staytuned");
  }
};
const handleMenuClick = () => {
  state.showMenu = true
}
const handleSecMenuClick = () => {
  state.showSecMenu = true
}
</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>