顶部菜单栏改为可隐藏，曾经铺满视口的页面改为默认不遮盖顶部菜单栏

src/App.vue

@@ -1,13 +1,18 @@
 <template>
   <div class="app-wrap">
-    <div class="top-bar">
+    <div
+      v-show="isShowTopBar"
+      class="top-bar"
+    >
       <img
         class="logo"
         src="@/assets/images/logo.png"
         alt=""
         draggable="false"
       >
-      <menu class="tab-bar">
+      <menu
+        class="tab-bar"
+      >
         <button
           :class="{
             active: $route.meta.tabIdx === 1
@@ -95,17 +100,18 @@
           @click="onClickShop"
         />
         <button
-          class="user"
-          @click="router.push({
-            name: 'CityOfXishan',
-            query: {
-              scene: 4,
-            }
-          })"
+          class="hide-top-bar"
+          @click="isShowTopBar = false"
         />
       </div>
     </div>
 
+    <button
+      v-show="!isShowTopBar"
+      class="show-top-bar"
+      @click="isShowTopBar = true"
+    />
+
     <FeedBack
       v-if="isShowFeedBack"
       @close="isShowFeedBack = false"
@@ -136,6 +142,8 @@ store.commit('getPageVisitRecordFromStorage')
 // checkLoginStatusAndProcess()
 getUserFromStorageIfNeed()
 
+const isShowTopBar = ref(true)
+
 const isShowFeedBack = ref(false)
 function onClickFeedBack() {
   if (process.env.VUE_APP_CLI_MODE === 'dev' || store.state.loginStatus === store.getters.loginStatusEnum.wxUser) {
@@ -342,32 +350,39 @@ html, body {
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center center;
-        &:hover, &.active{
+        &.active{
           background-image: url(@/assets/images/icon_shop-active.png);
           background-size: cover;
           background-repeat: no-repeat;
           background-position: center center;
         }
       }
-      >button.user{
+      >button.hide-top-bar{
         width: 42px;
         height: 42px;
-        background-image: url(@/assets/images/icon_user.png);
+        background-image: url(@/assets/images/button-hide-top-bar.png);
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center center;
-        &:hover{
-          background-image: url(@/assets/images/icon_user-active.png);
-          background-size: cover;
-          background-repeat: no-repeat;
-          background-position: center center;
-        }
       }
     }
   }
+  >button.show-top-bar{
+    position: fixed;
+    top: 0px;
+    right: 10px;
+    width: 60px;
+    height: 60px;
+    background-image: url(@/assets/images/button-show-top-bar.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    z-index: 2;
+  }
   >.content-area{
     flex: 1 0 1px;
     position: relative;
+    z-index: 1;
   }
 }
 </style>

src/components/IframeWrap.vue

@@ -47,7 +47,7 @@ const props = defineProps({
 
 <style lang="less" scoped>
 .iframe-wrap{
-  position: fixed;
+  position: absolute;
   left: 0;
   top: 0;
   width: 100%;

src/views/CityOfXishan.vue

@@ -71,7 +71,7 @@ function onClickStartBtn() {
 
 <style lang="less" scoped>
 .city-of-xishan{
-  position: fixed;
+  position: absolute;
   left: 0;
   top: 0;
   width: 100%;

src/views/HomeView.vue

@@ -191,6 +191,7 @@
 
     <IframeWrap
       v-if="isShowIframeWrap"
+      class="iframe-wrap"
       :url="iframeUrl"
       @back="isShowIframeWrap = false, iframeUrl = ''"
     />
@@ -956,5 +957,8 @@ const iframeUrl = ref('')
     background-position: center center;
     z-index: 5;
   }
+  .iframe-wrap{
+    z-index: 10;
+  }
 }
 </style>

src/views/MuseumView.vue

@@ -1,21 +1,17 @@
 <template>
-  <div class="iframe-wrap">
-    <iframe
-      src="https://houseoss.4dkankan.com/project/wuxicishanbwg/index.html?m=SG-igv7wQAyyyG_01#/"
-      frameborder="0"
-      allow="fullscreen src"
-    />
-    <button
-      class="back"
-      @click="router.go(-1)"
-    />
-  </div>
+  <IframeWrap
+    class="iframe-wrap"
+    url="https://houseoss.4dkankan.com/project/wuxicishanbwg/index.html?m=SG-igv7wQAyyyG_01#/"
+    :need-back-btn="false"
+  />
+  <!-- @back="onClickBack" -->
 </template>
 
 <script setup>
 import { ref, computed, watch, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
+import IframeWrap from '@/components/IframeWrap.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -29,7 +25,7 @@ store.dispatch('recordPageVisitIfNeeded', {
 
 <style lang="less" scoped>
 .iframe-wrap{
-  position: fixed;
+  position: absolute;
   left: 0;
   top: 0;
   width: 100%;