添加一个tab item：虚拟展厅

src/App.vue

@@ -85,6 +85,21 @@
           draggable="false"
         >
       </button>
+      <button
+        class="tab-item"
+        :class="{
+          active: $route.meta.belongNavGroup === 4
+        }"
+        @click="$router.push({name: 'VirtualMuseum'})"
+      >
+        虚拟展厅
+        <img
+          class="decorator"
+          src="@/assets/images/nav-item-active-decorator.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
     </nav>
 
     <Teleport to="body">
@@ -608,7 +623,7 @@ html, body {
       font-family: Source Han Sans CN-Regular, Source Han Sans CN;
       font-weight: 400;
       color: #FFFFFF;
-      margin-left: 200px;
+      margin-left: 150px;
       opacity: 0.5;
       position: relative;
       user-select: none;
@@ -631,9 +646,14 @@ html, body {
         }
       }
     }
-    @media only screen and (max-width: 1400px) {
+    @media only screen and (max-width: 1468px) {
+      >button.tab-item {
+        margin-left: 50px;
+      }
+    }
+    @media only screen and (max-width: 1075px) {
       >button.tab-item {
-        margin-left: 100px;
+        margin-left: 10px;
       }
     }
   }

src/router/index.js

@@ -5,6 +5,7 @@ import TreasureView from '../views/Treasure.vue'
 import TreasureDetail from '../views/TreasureDetail.vue'
 import RecordView from '../views/Record.vue'
 import MetaverseView from '../views/Metaverse.vue'
+import VirtualMuseum from '../views/VirtualMuseum.vue'
 import TestView from '../views/Test.vue'
 import TreasureShare from "@/components/TreasureShare.vue"
 
@@ -87,6 +88,15 @@ const routes = [
     }
   },
   {
+    path: '/virtual-museum',
+    name: 'VirtualMuseum',
+    component: VirtualMuseum,
+    meta: {
+      isShowUnityModel: false,
+      belongNavGroup: 4,
+    },
+  },
+  {
     path: '/test',
     name: 'TestView',
     component: TestView,

src/views/VirtualMuseum.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="virtual-museum">
+    <iframe
+      allow="fullscreen"
+      src="https://shmuseum.4dage.com/#/"
+      frameborder="0"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+</script>
+
+<style lang="less" scoped>
+.virtual-museum{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  overflow: hidden; // 不加这句的话，傻逼移动端浏览器就会不显示底部栏！
+  >iframe{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>