看来一体机的css分辨率并不是那么大，而是正常水平。所以各元素尺寸又要改小。

README.md

@@ -1,5 +1,7 @@
 # 开发环境url：
-origin + '/showMobile.html?id=WK1605878330354143232&vr=fd720_PuMQyMgf3&lang=zh'
+http://192.168.0.17:8082/showMobile.html?id=WK1655851305115074560&vr=fd720_Gwqluzq8r&lang=zh
+
+http://192.168.0.17:8082/showMobile.html?id=WK1666378820984242176&vr=fd720_VlB2fUXPH&lang=zh
 
 # 测试环境打包
 yarn build-prod

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

@@ -6,6 +6,7 @@
     <li @click="onIsAutoRotate">
       <img :src="require(`@/assets/images/js_icon/${isAutoRotate ? 'auto_active.png' : 'auto.png'}`)"
         alt=""
+        draggable="false"
       />
       <div>[自动漫游]</div>
     </li>
@@ -15,6 +16,7 @@
     <li @click="onIsShowList" v-if="!((metadata.catalogRoot && metadata.catalogRoot.length == 1) && scenes.length == 1 && secondaryList.length == 1)">
       <img :src="require(`@/assets/images/js_icon/${isShowScenesList ? 'daolan_active.png' : 'daolan.png'}`)"
         alt="" 
+        draggable="false"
       />
       <div>[导览列表]</div>
     </li>
@@ -24,6 +26,7 @@
     <li @click="onIsShowHotspotList">
       <img :src="require(`@/assets/images/js_icon/${isShowHotspotList ? 'hotspot_active.png' : 'hotspot.png'}`)"
         alt="" 
+        draggable="false"
       />
       <div>[热点列表]</div>
     </li>
@@ -34,6 +37,7 @@
      v-if="currentScene.type == 'pano' || (fdkkCurrentVersion == 'v3') || (currentScene.type == '4dkk' && (fdkkmetadata.controls && fdkkmetadata.controls.showVR))">
       <img :src="require(`@/assets/images/js_icon/${isShowHotspotList ? 'vr_active.png' : 'vr.png'}`)"
         alt="" 
+        draggable="false"
       />
       <div>[VR可视]</div>
     </li>
@@ -44,12 +48,12 @@
       v-if="isLargeScreen && metadata.backgroundMusic && metadata.backgroundMusic.id"
       @click="onIsBGM"
     >
-      <img :src="require(`@/assets/images/js_icon/${!showMusicPlaying ? 'music_active.png' : 'music.png'}`)" alt="" />
+      <img :src="require(`@/assets/images/js_icon/${!showMusicPlaying ? 'music_active.png' : 'music.png'}`)" alt="" draggable="false"/>
       <div v-show="!showMusicPlaying">[打开音乐]</div>
       <div v-show="showMusicPlaying">[关闭音乐]</div>
     </li>
     
-    <img v-if="isLargeScreen" class="splitter music-inline-splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
+    <img v-if="isLargeScreen && metadata.backgroundMusic && metadata.backgroundMusic.id" class="splitter music-inline-splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
   </ul>
 
   <teleport to='body'>
@@ -144,7 +148,7 @@ const fdkkmetadata = computed(() => store.getters["fdkk/metadata"]);
 const fdkkCurrentVersion = computed(() => store.getters["scene/fdkkCurrentVersion"]);
 const vrStatus = computed(() => store.getters["functions/vrStatus"]);
 
-const isLargeScreen = ref(window.innerWidth > 1750)
+const isLargeScreen = ref(window.innerWidth > 1234)
 
 const showMusicPlaying = ref(musicPlayer.isPlay)
 
@@ -328,16 +332,16 @@ soundPlayer.on('pause', () => (showCommentaryPlaying.value = false))
     }
   }
 }
-@media only screen and (min-width: 1750px){
+@media only screen and (min-width: 1234px){
   .control-pano {
     justify-content: space-evenly;
-    padding-left: 118px;
-    padding-right: 118px;
+    padding-left: 59px;
+    padding-right: 59px;
     background-image: url('@/assets/images/js_icon/line-large-screen.png');
-    background-position: 0 calc(50% - 42px);
+    background-position: 0 calc(50% - 21px);
     background-size: 95% auto;
     >img.splitter {
-      transform: translateY(-20px);
+      transform: translateY(-10px);
     }
     >li {
       margin: initial;
@@ -348,12 +352,12 @@ soundPlayer.on('pause', () => (showCommentaryPlaying.value = false))
         margin-left: initial;
       }
       >img {
-        width: 118px;
-        height: 118px;
+        width: 59px;
+        height: 59px;
       }
       >div {
         font-family: DreamHanSerifCN;
-        font-size: 29px;
+        font-size: 15px;
       }
     }
   }
@@ -370,7 +374,7 @@ soundPlayer.on('pause', () => (showCommentaryPlaying.value = false))
     width: 100%;
   }
 }
-@media only screen and (min-width: 1750px){
+@media only screen and (min-width: 1234px){
     .musicfix {
       display: none;
     }

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

@@ -126,7 +126,7 @@ const close = () => {
 
 }
 
-@media only screen and (min-width: 1750px){
+@media only screen and (min-width: 1234px){
   .tag-layer {
     display: initial;
     .hotlistcon {
@@ -134,7 +134,7 @@ const close = () => {
       top: 0;
       right: 0;
       bottom: 0;
-      width: 844px;
+      width: 422px;
       height: initial;
       max-height: initial;
       display: flex;
@@ -152,30 +152,30 @@ const close = () => {
         left: 50%;
         transform: translateX(-50%);
         top: initial;
-        bottom: 118px;
-        width: 118px;
+        bottom: 59px;
+        width: 59px;
       }
       .htitle {
         position: absolute;
         left: 50%;
         top: 0;
         transform: translateX(-50%);
-        width: 206px;
+        width: 103px;
       }
 
       >ul {
         position: absolute;
         left: 0;
         width: 100%;
-        top: 430px;
-        bottom: 380px;
+        top: 163px;
+        bottom: 120px;
         height: initial;
         overflow-y: auto;
         text-align: center;
-        padding-right: 20px;
+        padding-right: 10px;
 
         >li {
-          font-size: 43px;
+          font-size: 22px;
           overflow: hidden;
           white-space: pre;
           text-overflow: ellipsis;
@@ -183,8 +183,8 @@ const close = () => {
         }
 
         &::-webkit-scrollbar {
-          width: 20px;
-          height: 20px;
+          width: 10px;
+          height: 10px;
         }
       }
     }

src/components/UIGather/mobile/control_js.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="controlcon" :class="{ showcon: isShowMenu }">
     <Pano :injectStyle="isShowMenu ? '' : 'opacity: 0'" v-if="currentScene.type == 'pano'" />
-    <img class="btn-expand-shrink" @click="isShowMenu = !isShowMenu"
-      :src="require(`@/assets/images/js_icon/${isShowMenu ? 'shouqi.png' : 'zhankai.png'}`)" alt="" />
+    <img
+      class="btn-expand-shrink"
+      @click="isShowMenu = !isShowMenu"
+      :src="require(`@/assets/images/js_icon/${isShowMenu ? 'shouqi.png' : 'zhankai.png'}`)" alt=""
+      draggable="false"
+    />
   </div>
 </template>
 
@@ -85,13 +89,13 @@ watchEffect(() => {
     }
   }
 }
-@media only screen and (min-width: 1750px){
+@media only screen and (min-width: 1234px){
   .controlcon {
     border-radius: 0;
-    height: 206px;
-    padding-top: 20px;
+    height: 103px;
+    padding-top: 10px;
     .btn-expand-shrink {
-      width: 106px;
+      width: 53px;
       transform: translateY(-58%);
     }
     &.showcon {

src/components/UIGather/mobile/index.vue

@@ -115,12 +115,12 @@ useApp().then((app) => {
   }
 }
 
-@media only screen and (min-width: 1750px){
+@media only screen and (min-width: 1234px){
   .btn-style {
-    bottom: 138px;
+    bottom: 69px;
   }
   .btn-style.needBottomSpace {
-    bottom: 260px;
+    bottom: 180px;
   }
 }
 </style>

src/components/UIGather/mobile/list.vue

@@ -89,7 +89,7 @@
     </div>
 
     <div
-      class="swiper-container"
+      class="group-level-1 swiper-container"
       id="swcatalogRoot"
       :style="`width:${Math.min(catalogRootW, innerW)}px;
     padding:${catalogRootW > innerW ? '0 15px' : '0'}`"
@@ -131,7 +131,7 @@ const { t } = useI18n({ useScope: "global" });
 
 const store = useStore();
 
-const spanlength = ref(window.innerWidth > 1750 ? 12 : 5);
+const spanlength = ref(5);
 
 const metadata = computed(() => store.getters["scene/metadata"]);
 const scenes = computed(() => store.getters["scene/list"]);
@@ -216,7 +216,7 @@ const loadList = () => {
         let tmp = new Swiper(item, {
           slidesPerView: "auto",
           centeredSlides: true,
-          spaceBetween: window.innerWidth > 1750 ? 72 : 10,
+          spaceBetween: window.innerWidth > 1234 ? 36 : 10,
           centerInsufficientSlides: true,
           centeredSlidesBounds: true,
           freeMode: true,
@@ -265,9 +265,9 @@ onMounted(() => {
   transition: 0.3s all ease;
   z-index: 9;
   width: 100%;
-  @media only screen and (min-width: 1750px){
+  @media only screen and (min-width: 1234px){
     bottom: 0;
-    padding-top: 40px;
+    padding-top: 100px;
   }
   .swiper-container {
     width: 100%;
@@ -307,18 +307,18 @@ onMounted(() => {
     padding: 10px 0;
     width: 100%;
     background: rgba(0, 0, 0, 0.8);
-    @media only screen and (min-width: 1750px){
+    @media only screen and (min-width: 1234px){
       margin-bottom: initial;
     }
   }
 
   #swcatalogRoot {
     padding: 0 15px;
-    @media only screen and (min-width: 1750px){
+    @media only screen and (min-width: 1234px){
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      bottom: 230px;
+      bottom: 150px;
     }
     > ul {
       > li {
@@ -329,14 +329,14 @@ onMounted(() => {
         border: 1px solid rgba(255, 255, 255, 0.5);
         box-sizing: border-box;
         overflow: hidden;
-        @media only screen and (min-width: 1750px){
-          width: 156px;
-          font-size: 18px;
+        @media only screen and (min-width: 1234px){
+          width: 100px;
+          font-size: 16px;
         }
         > span {
           width: 100%;
           word-break: keep-all;
-          @media only screen and (min-width: 1750px){
+          @media only screen and (min-width: 1234px){
             font-family: kaiti;
           }
         }
@@ -358,14 +358,14 @@ onMounted(() => {
         box-sizing: border-box;
         overflow: hidden;
         padding-bottom: 6px;
-        @media only screen and (min-width: 1750px){
-          width: 180px;
+        @media only screen and (min-width: 1234px){
+          width: 90px;
         }
         > span {
           width: 100%;
           word-break: keep-all;
-          @media only screen and (min-width: 1750px){
-            font-size: 20px;
+          @media only screen and (min-width: 1234px){
+            font-size: 16px;
             font-family: kaiti;
           }
         }
@@ -401,9 +401,9 @@ onMounted(() => {
         background-size: cover;
         position: relative;
         overflow: hidden;
-        @media only screen and (min-width: 1750px){
-          width: 250px;
-          height: 140px;
+        @media only screen and (min-width: 1234px){
+          width: 125px;
+          height: 70px;
         }
         .iconfont {
           position: absolute;
@@ -439,11 +439,11 @@ onMounted(() => {
             line-height: 20px;
             word-break: keep-all;
           }
-          @media only screen and (min-width: 1750px){
-            height: 40px;
+          @media only screen and (min-width: 1234px){
+            height: 20px;
             > span {
-              font-size: 20px;
-              line-height: 40px;
+              font-size: 16px;
+              line-height: 20px;
               font-family: kaiti;
             }
           }
@@ -465,7 +465,7 @@ onMounted(() => {
 .barshow {
   max-height: 190px;
 }
-@media only screen and (min-width: 1750px){
+@media only screen and (min-width: 1234px){
   .barshow {
     max-height: initial;
   }

src/components/assembly/MobileTags/index.vue

@@ -68,8 +68,8 @@ const close = () => {
   left: 0;
   background-color: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(10px);
-  @media only screen and (min-width: 1750px){
-    font-size: 40px;
+  @media only screen and (min-width: 1234px){
+    font-size: 20px;
   }
   ::-webkit-scrollbar {
     width: 30px;
@@ -85,9 +85,9 @@ const close = () => {
     font-size: 18px;
     border-bottom: solid 1px rgba(255, 255, 255, 0.16);
     color: #fff;
-    @media only screen and (min-width: 1750px){
-      height: 120px;
-      font-size: 50px;
+    @media only screen and (min-width: 1234px){
+      height: 60px;
+      font-size: 25px;
     }
     > span {
       overflow: hidden;
@@ -98,8 +98,8 @@ const close = () => {
     .close {
       color: rgba(255, 255, 255, 0.6);
       z-index: 999;
-      @media only screen and (min-width: 1750px){
-        font-size: 50px;
+      @media only screen and (min-width: 1234px){
+        font-size: 25px;
       }
     }
   }