适配大屏：尺寸改为自适应

src/components/Pano/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <QuitApp class="quit-app" v-if="isBigScreen"></QuitApp>
   <div id="pano" v-show="currentScene.type != '4dkk'"></div>
   <Fdkk v-if="currentScene.type == '4dkk' && hadGetInfo" />
 </template>
@@ -12,6 +13,9 @@ import { getFdkkInfo } from "@/apis";
 import { useMusicPlayer, useSoundPlayer } from "@/utils/sound";
 import browser from "@/utils/browser";
 import config from "@/utils/config";
+import QuitApp from "@/components/UIGather/LeftArrowQuit.vue";
+
+const isBigScreen = ref(window.innerWidth > 1234)
 
 //背景音乐
 const musicPlayer = useMusicPlayer();

src/components/UIGather/LeftArrowQuit.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="back-btn" @click="handleBack">
+    <img src="@/assets/images/icon/icon_back@2x.png" />
+    返回
+  </div>
+</template>
+
+<script setup>
+const handleBack = () => {
+  window.parent.postMessage({ command: "back"}, "*");
+};
+</script>
+
+<style lang="scss" scoped>
+.back-btn {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  top: 2.08vw;
+  left: 2.08vw;
+  font-size: 1.3vw;
+  font-family: Source Han Serif CN-Bold;
+  font-weight: bold;
+  color: #fffae9;
+  text-shadow: 0px 0px 0.78vw #9f7b46;
+  z-index: 1000;
+  cursor: pointer;
+  img {
+    margin-right: 0.3125vw;
+    width: 2.6vw;
+  }
+}
+</style>

src/components/UIGather/mobile/control.pano_js.vue

@@ -335,13 +335,13 @@ soundPlayer.on('pause', () => (showCommentaryPlaying.value = false))
 @media only screen and (min-width: 1234px){
   .control-pano {
     justify-content: space-evenly;
-    padding-left: 70px;
-    padding-right: 70px;
+    padding-left: 3.65vw;
+    padding-right: 3.65vw;
     background-image: url('@/assets/images/js_icon/line-large-screen.png');
-    background-position: 0 calc(50% - 21px);
+    background-position: 0 calc(50% - 1.09vw);
     background-size: 95% auto;
     >img.splitter {
-      transform: translateY(-10px);
+      transform: translateY(-0.52vw);
     }
     >li {
       margin: initial;
@@ -352,12 +352,12 @@ soundPlayer.on('pause', () => (showCommentaryPlaying.value = false))
         margin-left: initial;
       }
       >img {
-        width: 70px;
-        height: 70px;
+        width: 3.646vw;
+        height: 3.646vw;
       }
       >div {
         font-family: DreamHanSerifCN;
-        font-size: 16px;
+        font-size: 0.833vw;
       }
     }
   }

src/components/UIGather/mobile/control/hotspotList.vue

@@ -134,7 +134,7 @@ const close = () => {
       top: 0;
       right: 0;
       bottom: 0;
-      width: 422px;
+      width: 21.98vw;
       height: initial;
       max-height: initial;
       display: flex;
@@ -152,30 +152,30 @@ const close = () => {
         left: 50%;
         transform: translateX(-50%);
         top: initial;
-        bottom: 59px;
-        width: 59px;
+        bottom: 3.073vw;
+        width: 3.073vw;
       }
       .htitle {
         position: absolute;
         left: 50%;
         top: 0;
         transform: translateX(-50%);
-        width: 103px;
+        width: 5.365vw;
       }
 
       >ul {
         position: absolute;
         left: 0;
         width: 100%;
-        top: 163px;
-        bottom: 120px;
+        top: 8.49vw;
+        bottom: 6.25vw;
         height: initial;
         overflow-y: auto;
         text-align: center;
-        padding-right: 10px;
+        padding-right: 0.52vw;
 
         >li {
-          font-size: 22px;
+          font-size: 1.146vw;
           overflow: hidden;
           white-space: pre;
           text-overflow: ellipsis;
@@ -183,8 +183,8 @@ const close = () => {
         }
 
         &::-webkit-scrollbar {
-          width: 10px;
-          height: 10px;
+          width: 0.52vw;
+          height: 0.52vw;
         }
       }
     }

src/components/UIGather/mobile/control_js.vue

@@ -92,10 +92,10 @@ watchEffect(() => {
 @media only screen and (min-width: 1234px){
   .controlcon {
     border-radius: 0;
-    height: 103px;
-    padding-top: 10px;
+    height: 5.36vw;
+    padding-top: 0.52vw;
     .btn-expand-shrink {
-      width: 53px;
+      width: 2.76vw;
       transform: translateY(-58%);
     }
     &.showcon {

src/components/UIGather/mobile/index.vue

@@ -117,10 +117,10 @@ useApp().then((app) => {
 
 @media only screen and (min-width: 1234px){
   .btn-style {
-    bottom: 69px;
+    bottom: 3.59vw;
   }
   .btn-style.needBottomSpace {
-    bottom: 180px;
+    bottom: 9.375vw;
   }
 }
 </style>

src/components/UIGather/mobile/list.vue

@@ -267,7 +267,7 @@ onMounted(() => {
   width: 100%;
   @media only screen and (min-width: 1234px){
     bottom: 0;
-    padding-top: 100px;
+    padding-top: 5.21vw;
   }
   .swiper-container {
     width: 100%;
@@ -318,7 +318,7 @@ onMounted(() => {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      bottom: 150px;
+      bottom: 7.81vw;
     }
     > ul {
       > li {
@@ -330,8 +330,8 @@ onMounted(() => {
         box-sizing: border-box;
         overflow: hidden;
         @media only screen and (min-width: 1234px){
-          width: 100px;
-          font-size: 16px;
+          width: 5.21vw;
+          font-size: 0.833vw;
         }
         > span {
           width: 100%;
@@ -359,13 +359,13 @@ onMounted(() => {
         overflow: hidden;
         padding-bottom: 6px;
         @media only screen and (min-width: 1234px){
-          width: 90px;
+          width: 4.6875vw;
         }
         > span {
           width: 100%;
           word-break: keep-all;
           @media only screen and (min-width: 1234px){
-            font-size: 16px;
+            font-size: 0.833vw;
             font-family: kaiti;
           }
         }
@@ -402,8 +402,8 @@ onMounted(() => {
         position: relative;
         overflow: hidden;
         @media only screen and (min-width: 1234px){
-          width: 125px;
-          height: 70px;
+          width: 6.51vw;
+          height: 3.65vw;
         }
         .iconfont {
           position: absolute;
@@ -440,10 +440,10 @@ onMounted(() => {
             word-break: keep-all;
           }
           @media only screen and (min-width: 1234px){
-            height: 20px;
+            height: 1.042vw;
             > span {
-              font-size: 16px;
-              line-height: 20px;
+              font-size: 0.833vw;
+              line-height: 1.042vw;
               font-family: kaiti;
             }
           }

src/components/assembly/MobileTags/index.vue

@@ -69,11 +69,11 @@ const close = () => {
   background-color: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(10px);
   @media only screen and (min-width: 1234px){
-    font-size: 20px;
+    font-size: 1.04vw;
   }
   ::-webkit-scrollbar {
-    width: 30px;
-    height: 30px;
+    width: 0.78vw;
+    height: 0.78vw;
   }
   .tag-header {
     display: flex;
@@ -86,8 +86,8 @@ const close = () => {
     border-bottom: solid 1px rgba(255, 255, 255, 0.16);
     color: #fff;
     @media only screen and (min-width: 1234px){
-      height: 60px;
-      font-size: 25px;
+      height: 3.125vw;
+      font-size: 1.3vw;
     }
     > span {
       overflow: hidden;
@@ -96,10 +96,10 @@ const close = () => {
     }
 
     .close {
-      color: rgba(255, 255, 255, 0.6);
+      color: rgba(255, 255, 255, 1);
       z-index: 999;
       @media only screen and (min-width: 1234px){
-        font-size: 25px;
+        font-size: 1.3vw;
       }
     }
   }