底部栏改为不与主界面重叠

public/unity/TemplateData/style.css

@@ -1,6 +1,4 @@
 body { padding: 0; margin: 0 }
-#unity-container { position: fixed; width: 100%; height: 100%; }
-#unity-canvas { width: 100%; height: 100%; background: #231F20 }
 #unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
 #unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
 #unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-dark.png') no-repeat center }

src/App.vue

@@ -1,5 +1,10 @@
 <template>
-  <div id="app">
+  <div
+    class="app-view"
+    :class="{
+      higher: !isShowNavBar,
+    }"
+  >
     <transition name="fade-out">
       <HomeFadeIn
         v-if="isShowFadeInMask"
@@ -217,7 +222,6 @@ html, body {
 #app {
   height: 100%;
   width: 100%;
-  height: 100%;
   background-image: url(@/assets/images/main-bg.jpg);
   background-size: cover;
   background-repeat: no-repeat;
@@ -290,12 +294,29 @@ html, body {
 // }
 </style>
 <style scoped lang="less">
-#app {
+.app-view {
+  width: 100%;
+  height: calc(100% - 112px);
+  position: relative;
+  &.higher {
+    height: 100%;
+  }
   >.fade-in-mask {
     z-index: 2005;
   }
-  >nav {
+  >#unity-container {
     position: absolute;
+    width: 100%;
+    height: 100%;
+    >#unity-canvas {
+      height: 100%;
+      width: 100%;
+      background: #231F20;
+    }
+  }
+
+  >nav {
+    position: fixed;
     left: 0;
     width: 100%;
     height: 112px;
@@ -311,6 +332,7 @@ html, body {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+    background-color: #0c0d12;
     >button.tab-item {
       font-size: 30px;
       font-family: Source Han Sans CN-Regular, Source Han Sans CN;
@@ -345,7 +367,7 @@ html, body {
     }
   }
   >button.show-hide {
-    position: absolute;
+    position: fixed;
     right: 82px;
     bottom: 34px;
     width: 36px;

src/views/General.vue

@@ -265,6 +265,7 @@ export default {
 
 <style lang="less" scoped>
 .general {
+  height: 100%;
   >h1 {
     position: absolute;
     top: 51px;
@@ -331,7 +332,7 @@ export default {
     position: absolute;
     top: 272px;
     left: 81px;
-    max-height: 520px;
+    max-height: calc(100% - 305px);
     overflow: auto;
     user-select: none;
     >li {
@@ -471,7 +472,8 @@ export default {
     top: 74px;
     right: 0;
     width: 653px;
-    height: calc(100% - 74px - 112px - 50px);
+    height: calc(100% - 74px - 50px);
+    max-height: 740px;
     backdrop-filter: blur(5px);
     background-image: url(@/assets/images/general-article-bg.png);
     background-size: 100% auto;

src/views/Metaverse.vue

@@ -1,13 +1,5 @@
 <template>
   <div class="metaverse-root">
-    <button
-      v-for="(item, index) in rawData.value"
-      :key="item.id"
-      class="mock-star"
-      @click="onClickStar(index)"
-    >
-      {{ item.name }}
-    </button>
     <article v-if="isShowDesc">
       <button
         class="close"
@@ -100,19 +92,19 @@ export default {
 
 <style lang="less" scoped>
 .metaverse-root {
-  >button.mock-star {
-    display: block;
-    color: #fff;
-    background: blue;
-    margin-bottom: 5px;
-  }
+  height: 100%;
+  position: relative;
+  pointer-events: none;
   >article {
+    pointer-events: initial;
     position: absolute;
-    top: calc((100% - 112px) / 2);
+    top: calc(100% / 2);
     transform: translateY(-50%);
     right: 0;
     width: 653px;
-    backdrop-filter: blur(5px);
+    height: calc(100% - 74px - 50px);
+    max-height: 740px;
+    backdrop-filter: blur(10px);
     background-image: url(@/assets/images/general-article-bg.png);
     background-size: 100% auto;
     background-repeat: no-repeat;
@@ -152,13 +144,12 @@ export default {
       margin-bottom: 20px;
     }
     >.txt {
-      flex: 0 0 auto;
-      max-height: calc(100vh - 112px - 300px);
+      flex: 1 0 1px;
       font-size: 20px;
       font-family: Source Han Sans CN-Regular, Source Han Sans CN;
       font-weight: 400;
       color: rgba(255, 255, 255, 0.8);
-      line-height: 1.7px;
+      line-height: 1.7;
       overflow: auto;
       padding-right: 10px;
       margin-right: -10px;

src/views/Treasure.vue

@@ -141,10 +141,12 @@ onMounted(() => {
       border: 5px solid #000;
       font-size: 0; // 令strut高度为0
       cursor: pointer;
+      min-width: 100px;
+      min-height: 100px;
+      max-height: 100%;
       > img {
-        min-width: 100px;
-        min-height: 100px;
-        max-height: 100vh;
+        width: 100%;
+        height: 100%;
         object-fit: cover;
       }
       >h3 {