琐碎bug和新需求

src/App.vue

@@ -129,11 +129,11 @@ export default {
       var canvas = document.querySelector("#unity-canvas")
 
       var buildUrl = "unity/Build"
-      var loaderUrl = buildUrl + "/SHIndustryMuseum_2.3.loader.js"
+      var loaderUrl = buildUrl + "/SHIndustryMuseum_2.4.loader.js"
       var config = {
-        dataUrl: buildUrl + "/SHIndustryMuseum_2.3.data.unityweb",
-        frameworkUrl: buildUrl + "/SHIndustryMuseum_2.3.framework.js.unityweb",
-        codeUrl: buildUrl + "/SHIndustryMuseum_2.3.wasm.unityweb",
+        dataUrl: buildUrl + "/SHIndustryMuseum_2.4.data.unityweb",
+        frameworkUrl: buildUrl + "/SHIndustryMuseum_2.4.framework.js.unityweb",
+        codeUrl: buildUrl + "/SHIndustryMuseum_2.4.wasm.unityweb",
         streamingAssetsUrl: "StreamingAssets",
         companyName: "DefaultCompany",
         productName: "SHIndustryMuseum",
@@ -236,11 +236,15 @@ html, body {
 
 // 字体
 @font-face {
-  font-family: 'Source Han Serif CN-Regular';
+  font-family: 'Source Han Sans CN-Regular';
   src: url('@/assets/style/SOURCEHANSANSCN-REGULAR.OTF');
 }
 @font-face {
-  font-family: 'Source Han Serif CN-Bold';
+  font-family: 'Source Han Sans CN';
+  src: url('@/assets/style/SOURCEHANSANSCN-REGULAR.OTF');
+}
+@font-face {
+  font-family: 'Source Han Sans CN-Bold';
   src: url('@/assets/style/SOURCEHANSANSCN-BOLD.OTF');
 }
 // i {
@@ -303,6 +307,10 @@ html, body {
     align-items: center;
     transition: all 0.5s;
     backdrop-filter: blur(5px);
+    background-image: url(@/assets/images/bg-bottom-bar.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
     >button.tab-item {
       font-size: 30px;
       font-family: Source Han Sans CN-Regular, Source Han Sans CN;

src/components/TreasureShare.vue

@@ -138,6 +138,8 @@ export default {
     padding: 32px 50px 50px 50px;
     display: flex;
     flex-direction: column;
+    background-color: rgba(40, 47, 58, 0.7);
+    backdrop-filter: blur(50px);
     >button.close {
       position: absolute;
       top: 30px;
@@ -178,7 +180,7 @@ export default {
       font-family: Source Han Sans CN-Regular, Source Han Sans CN;
       font-weight: 400;
       color: rgba(255, 255, 255, 0.8);
-      line-height: 23px;
+      line-height: 1.5;
       overflow: auto;
       margin-right: -10px;
       padding-right: 10px;

src/views/General.vue

@@ -3,10 +3,9 @@
     class="general"
   >
     <h1
-      v-if="activeCorpInfo"
-      :title="activeCorpInfo.name"
+      :title="activeCorpInfo?.name || '上海市工业博物馆'"
     >
-      {{ activeCorpInfo.name }}
+      {{ activeCorpInfo?.name || '上海市工业博物馆' }}
     </h1>
     <form @submit.prevent="onSearch">
       <input
@@ -88,7 +87,7 @@
       >
       <div
         class="txt"
-        v-html="activeCorpInfo.description || ''"
+        v-html="activeCorpInfo?.description ? activeCorpInfo.description.replace(/\x20\x20/g, '&emsp;&emsp;') : ''"
       />
     </article>
 
@@ -173,24 +172,46 @@ export default {
 
     // 无论是网页里还是unity内部点击了企业，都调用这个
     function onClickCorpItem(id) {
-      let isFound = false
-      for (let index = 0; index < corpListRaw.value.length; index++) {
-        const element = corpListRaw.value[index]
-        if (element.id === id) {
-          isFound = true
-          window.gUnityInst.SendMessage('Panel1', 'ShowEnterprise', element.id) //显示某个企业
-          window.gUnityInst.SendMessage('Panel1', 'SetEnterpriseUnSelected', element.id) //高亮某个企业
-        } else if (!isFound) {
-          window.gUnityInst.SendMessage('Panel1', 'ShowEnterprise', element.id) //显示某个企业
-        } else {
-          window.gUnityInst.SendMessage('Panel1', 'HideEnterprise', element.id) //隐藏某个企业
+      // let isFound = false
+      // for (let index = 0; index < corpListRaw.value.length; index++) {
+      //   const element = corpListRaw.value[index]
+      //   if (element.id === id) {
+      //     isFound = true
+      //     window.gUnityInst.SendMessage('Panel1', 'ShowEnterprise', element.id) //显示某个企业
+      //     window.gUnityInst.SendMessage('Panel1', 'SetEnterpriseUnSelected', element.id) //高亮某个企业
+      //   } else if (!isFound) {
+      //     window.gUnityInst.SendMessage('Panel1', 'ShowEnterprise', element.id) //显示某个企业
+      //   } else {
+      //     window.gUnityInst.SendMessage('Panel1', 'HideEnterprise', element.id) //隐藏某个企业
+      //   }
+      // }
+      // activeCorpId.value = id
+      // isShowDesc.value = true
+      // const clickedElement = document.querySelector(`#corp-item-${id}`)
+      // if (clickedElement) {
+      //   clickedElement.scrollIntoView()
+      // }
+
+      if (activeCorpId.value === id) {
+        activeCorpId.value = ''
+        isShowDesc.value = false
+        window.gUnityInst.SendMessage('Panel1', 'HideEnterprise', id) //隐藏某个企业
+      } else {
+        for (let index = 0; index < corpListRaw.value.length; index++) {
+          const element = corpListRaw.value[index]
+          if (element.id === id) {
+            window.gUnityInst.SendMessage('Panel1', 'ShowEnterprise', element.id) //显示某个企业
+            window.gUnityInst.SendMessage('Panel1', 'SetEnterpriseUnSelected', element.id) //高亮某个企业
+          } else {
+            window.gUnityInst.SendMessage('Panel1', 'HideEnterprise', element.id) //隐藏某个企业
+          }
         }
-      }
-      activeCorpId.value = id
-      isShowDesc.value = true
-      const clickedElement = document.querySelector(`#corp-item-${id}`)
-      if (clickedElement) {
-        clickedElement.scrollIntoView()
+        activeCorpId.value = id
+        isShowDesc.value = true
+        // const clickedElement = document.querySelector(`#corp-item-${id}`)
+        // if (clickedElement) {
+        //   clickedElement.scrollIntoView()
+        // }
       }
     }
     window.handleClickEnterprise = onClickCorpItem
@@ -402,12 +423,14 @@ export default {
           overflow: hidden;
           white-space: pre;
           text-overflow: ellipsis;
+          opacity: 0.6;
         }
         &.active {
           >span.corp-name {
             font-size: 20px;
             font-family: Source Han Sans CN-Bold, Source Han Sans CN;
             text-shadow: 0px 0px 16px #BD9D48;
+            opacity: initial;
           }
         }
         >span.corp-time {
@@ -416,6 +439,7 @@ export default {
           font-family: Source Han Sans CN-Regular, Source Han Sans CN;
           font-weight: 400;
           color: #FFFFFF;
+          opacity: 0.5;
         }
         &:hover {
           background: linear-gradient(90deg, #B0A179 0%, rgba(255,209,91,0) 100%);
@@ -493,12 +517,12 @@ export default {
       font-family: Source Han Sans CN-Regular, Source Han Sans CN;
       font-weight: 400;
       color: rgba(255, 255, 255, 0.8);
-      line-height: 23px;
+      line-height: 1.5;
       overflow: auto;
       padding-right: 10px;
       margin-right: -10px;
       white-space: pre-wrap;
-      text-indent: 2em;
+      // text-indent: 2em;
       &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
       &::-webkit-scrollbar-thumb {
         background: rgba(220, 231, 240, 0.2);

src/views/History.vue

@@ -386,7 +386,7 @@ export default {
         font-family: Source Han Sans CN-Regular, Source Han Sans CN;
         font-weight: 400;
         color: rgba(255, 255, 255, 0.8);
-        line-height: 23px;
+        line-height: 1.5;
         padding-right: 10px;
         margin-right: -10px;
         white-space: pre-wrap;

src/views/Metaverse.vue

@@ -158,7 +158,7 @@ export default {
       font-family: Source Han Sans CN-Regular, Source Han Sans CN;
       font-weight: 400;
       color: rgba(255, 255, 255, 0.8);
-      line-height: 35px;
+      line-height: 1.7px;
       overflow: auto;
       padding-right: 10px;
       margin-right: -10px;

src/views/Treasure.vue

@@ -26,768 +26,6 @@
         >
         <h3>{{ item.name }}</h3>
       </div>
-      <div
-        class="cover grid-item"
-        @click="!isDragged && $router.push({name: 'TreasureDetail'})"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>万吨水压机</h3>
-      </div>
-      <div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div><div
-        class="cover grid-item"
-      >
-        <img
-          class="photo"
-          src="@/assets/mock/treasure-demo-fake.png"
-          alt=""
-          draggable="false"
-          load="lazy"
-        >
-        <h3>风云四号模型</h3>
-      </div>
     </div>
     <!-- element-ui的loading效果从调用到出现有延时，这期间要遮盖住组件 -->
     <div
@@ -920,7 +158,7 @@ onMounted(() => {
         font-family: Source Han Sans CN-Regular, Source Han Sans CN;
         font-weight: 400;
         color: #FFFFFF;
-        line-height: 23px;
+        line-height: 1.5;
       }
     }
     >.grid-item--width2 { width: 400px; }

src/views/TreasureDetail.vue

@@ -22,14 +22,17 @@
 
     <h1>{{ rawData.value?.entity?.name }}</h1>
 
-    <div class="tab-bar">
+    <div
+      v-if="isShowTabbar"
+      class="tab-bar"
+    >
       <button
         v-if="modelUrlList?.length"
         class="model"
         :class="{
-          active: activeTabIndx === 0
+          active: activeTabIndex === 0
         }"
-        @click="activeTabIndx = 0"
+        @click="activeTabIndex = 0"
       >
         <span>模型</span>
       </button>
@@ -37,9 +40,9 @@
         v-if="videoUrlList?.length"
         class="video"
         :class="{
-          active: activeTabIndx === 1
+          active: activeTabIndex === 1
         }"
-        @click="activeTabIndx = 1"
+        @click="activeTabIndex = 1"
       >
         <span>视频</span>
       </button>
@@ -47,9 +50,9 @@
         v-if="imageUrlList?.length"
         class="image"
         :class="{
-          active: activeTabIndx === 2
+          active: activeTabIndex === 2
         }"
-        @click="activeTabIndx = 2"
+        @click="activeTabIndex = 2"
       >
         <span>图片</span>
       </button>
@@ -62,39 +65,81 @@
         class="swiper-root"
       >
         <div
-          v-if="activeTabIndx === 0"
+          v-if="activeTabIndex === 0"
           class="swiper-wrapper"
         >
-          <iframe
+          <div
             v-for="(item) in modelUrlList"
             :key="item.id"
-            :src="`${prefix}/web-model/index.html#/relic-detail?model-path=${encodeURIComponent(item.filePath)}`"
-            frameborder="0"
             class="swiper-slide"
-          />
+          >
+            <iframe
+              :src="`${prefix}/web-model/index.html#/relic-detail?model-path=${encodeURIComponent(item.filePath)}`"
+              frameborder="0"
+            />
+            <button
+              v-show="fullScreenStatus"
+              @click="cancelFullScreen"
+            >
+              <img
+                class=""
+                :src="require(`@/assets/images/icon_full_screen_off.png`)"
+                alt=""
+                draggable="false"
+              >
+            </button>
+          </div>
         </div>
         <div
-          v-if="activeTabIndx === 1"
+          v-if="activeTabIndex === 1"
           class="swiper-wrapper"
         >
-          <video
+          <div
             v-for="(item) in videoUrlList"
             :key="item.id"
-            :src="item.filePath"
             class="swiper-slide"
-          />
+          >
+            <video
+              :src="item.filePath"
+            />
+            <button
+              v-show="fullScreenStatus"
+              @click="cancelFullScreen"
+            >
+              <img
+                class=""
+                :src="require(`@/assets/images/icon_full_screen_off.png`)"
+                alt=""
+                draggable="false"
+              >
+            </button>
+          </div>
         </div>
         <div
-          v-if="activeTabIndx === 2"
+          v-if="activeTabIndex === 2"
           class="swiper-wrapper"
         >
-          <img
+          <div
             v-for="(item) in imageUrlList"
             :key="item.id"
-            draggable="false"
-            :src="`${prefix}/${item.filePath}`"
             class="swiper-slide"
           >
+            <img
+              draggable="false"
+              :src="`${prefix}/${item.filePath}`"
+            >
+            <button
+              v-show="fullScreenStatus"
+              @click="cancelFullScreen"
+            >
+              <img
+                class=""
+                :src="require(`@/assets/images/icon_full_screen_off.png`)"
+                alt=""
+                draggable="false"
+              >
+            </button>
+          </div>
         </div>
         <!-- <div class="swiper-pagination">
           <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ list.length }}</span>
@@ -132,7 +177,7 @@
         >
       </button>
       <button
-        v-if="canRecord && activeTabIndx === 0"
+        v-if="canRecord && activeTabIndex === 0"
         @click="$router.push({name: 'RecordView', query: {
           url: encodeURI(`${prefix}/web-model/index.html#/relic-detail?model-path=${encodeURIComponent(modelUrlList[activeSwiperItemIndex].filePath)}`)
         }})"
@@ -144,10 +189,10 @@
           draggable="false"
         >
       </button>
-      <button @click="fullScreenStatus = !fullScreenStatus">
+      <button @click="onClickFullScreen">
         <img
           class=""
-          :src="require(`@/assets/images/icon_full_screen_${fullScreenStatus ? 'off' : 'on'}.png`)"
+          :src="require(`@/assets/images/icon_full_screen_on.png`)"
           alt=""
           draggable="false"
         >
@@ -193,7 +238,20 @@ export default {
     /**
      * tab bar
      */
-    const activeTabIndx = ref(0)
+    const activeTabIndex = ref(0)
+    const isShowTabbar = computed(() => {
+      let count = 0
+      if (modelUrlList.length > 0) {
+        count++
+      }
+      if (videoUrlList.length > 0) {
+        count++
+      }
+      if (imageUrlList.length > 0) {
+        count++
+      }
+      return count >= 2
+    })
 
     /**
      * swiper 相关
@@ -223,7 +281,7 @@ export default {
       })
     }
     onMounted(initSwiper)
-    watch(activeTabIndx, (newV) => {
+    watch(activeTabIndex, (newV) => {
       swiper.destroy()
       nextTick(() => {
         initSwiper()
@@ -260,18 +318,25 @@ export default {
      * 全屏相关
      */
     const fullScreenStatus = ref(false)
-    watch(fullScreenStatus, (newVal) => {
-      if (newVal) {
-        const el = document.querySelector('.treasure-detail')
-        if (el) {
-          utils.requestFullScreen(el)
-        } else {
-          console.error('没有找到组件根元素！')
-        }
+    function onFullScreenChange(e) {
+      if (document.fullscreenElement) {
+        fullScreenStatus.value = true
       } else {
-        utils.exitFullScreen()
+        fullScreenStatus.value = false
       }
-    })
+    }
+    function onClickFullScreen() {
+      const el = document.getElementsByClassName('swiper-slide')[activeSwiperItemIndex.value]
+      if (el) {
+        utils.requestFullScreen(el)
+        document.addEventListener('fullscreenchange', onFullScreenChange)
+      } else {
+        console.error('没有找到要全屏显示的元素！', document.getElementsByClassName('.swiper-slide'))
+      }
+    }
+    function cancelFullScreen() {
+      utils.exitFullScreen()
+    }
 
     /**
      * 展示数据
@@ -299,22 +364,32 @@ export default {
           break
         }
       }
+      if (modelUrlList.length) {
+        activeTabIndex.value = 0
+      } else if (!modelUrlList.length && videoUrlList.length) {
+        activeTabIndex.value = 1
+      } else if (!modelUrlList.length && !videoUrlList.length && imageUrlList.length) {
+        activeTabIndex.value = 2
+      }
     })
 
     return {
-      prefix,
-      encodeURIComponent,
       activeSwiperItemIndex,
-      activeTabIndx,
+      activeTabIndex,
       bgAudio,
+      cancelFullScreen,
       canRecord,
+      encodeURIComponent,
       fullScreenStatus,
       hasMusic,
       imageUrlList,
       isMusicOn,
       isShowShare,
+      isShowTabbar,
       modelUrlList,
       musicUrl,
+      onClickFullScreen,
+      prefix,
       rawData,
       videoUrlList,
     }
@@ -396,8 +471,34 @@ export default {
         margin-left: auto;
         margin-right: auto;
         .swiper-slide {
-          user-select: none;
-          object-fit: contain;
+          font-size: 0;
+          > iframe {
+            width: 100%;
+            height: 100%;
+          }
+          > video {
+            width: 100%;
+            height: 100%;
+            user-select: none;
+            object-fit: contain;
+          }
+          > img {
+            width: 100%;
+            height: 100%;
+            user-select: none;
+            object-fit: contain;
+          }
+          >button{
+            position: fixed;
+            bottom: 44px;
+            right: 44px;
+            width: 44px;
+            height: 44px;
+            > img {
+              width: 100%;
+              height: 100%;
+            }
+          }
         }
       }
       // .swiper-pagination {
@@ -431,7 +532,7 @@ export default {
       max-width: 1164px;
       text-align: center;
       font-size: 20px;
-      line-height: 23px;
+      line-height: 1.5;
       font-family: Source Han Sans CN-Regular, Source Han Sans CN;
       font-weight: 400;
       color: #FFFFFF;