From f3c6e6b1965c77c22e1e6f618faf519c53c5b348 Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Thu, 1 Feb 2024 18:48:35 +0800
Subject: [PATCH] s

---
 src/views/homepage.vue | 146 ++++++++++++++++++++++++-----------------
 1 file changed, 87 insertions(+), 59 deletions(-)

diff --git a/src/views/homepage.vue b/src/views/homepage.vue
index 47968d6..1ed862c 100644
--- a/src/views/homepage.vue
+++ b/src/views/homepage.vue
@@ -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-else>
+        <div class="model-title">{{ route.meta.title }}</div>
+      </template>
     </div>
     <div>
       <router-view></router-view>
@@ -74,11 +79,14 @@
       <div class="col-6 col-md-4 row justify-around"
            style="margin-top: 32px; max-width: 300px">
         <div class="cursor"
-             @click="handleLink('')">帮助</div>
+             @click="handleLink('')">帮助
+        </div>
         <div class="cursor"
-             @click="handleLink('')">隐私</div>
+             @click="handleLink('')">隐私
+        </div>
         <div class="cursor"
-             @click="handleLink('')">条款</div>
+             @click="handleLink('')">条款
+        </div>
         <div class="col-12 cursor text-center">
           copyright 2024 最终所有权归延庆博物馆
         </div>
@@ -94,7 +102,7 @@
         "
            class="relative menu-dom">
         <img src="../assets/images/icon-menu.png"
-             style="width: 32px" />
+             style="width: 32px"/>
 
         <div class="menu-hover-dom row justify-center"
              style="
@@ -192,9 +200,13 @@ import {
   watch,
   nextTick,
 } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import {useRoute, useRouter} from "vue-router";
+
 const route = useRoute();
 const router = useRouter();
+import {useAdaptation} from '@/utils/self-adaption.js'
+
+const {currentDevice} = useAdaptation()
 const state = reactive({
   activePage: "",
   isH5: false,
@@ -216,13 +228,24 @@ const handleLink = (url) => {
 </script>
 
 <style scoped>
+.model-title {
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-size: 82px;
+}
+
 .header-title {
   padding: 4px 18px;
   border-radius: 25px;
 }
+
 .header-title:hover {
   background: #3d8873;
 }
+
 .hover-dom:hover .hidden-dom {
   display: block;
 }
@@ -230,11 +253,13 @@ const handleLink = (url) => {
 .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");
@@ -247,6 +272,7 @@ const handleLink = (url) => {
   left: 50%;
   transform: translateX(-50%);
 }
+
 .menu-dom:hover .menu-hover-dom {
   display: block;
 }
@@ -254,9 +280,11 @@ const handleLink = (url) => {
 .menu-hover-dom {
   display: none;
 }
+
 .about-dom:hover .about-hover-dom {
   display: block;
 }
+
 .about-hover-dom {
   display: none;
 }