适配大屏

README.md

@@ -16,5 +16,5 @@ yarn build-prod
 # 正式环境url
 https://yswl.jswlpt.com/panoPage/showMobile.html?id=WK1656467989114929152&vr=fd720_shAAUWVEr&lang=zh
 
-# 本地化环境url?还是公司的另一个测试环境？
+# 另一个测试环境？
 https://sit-js518.4dage.com/showMobile.html?id=WK1655851305115074560&vr=fd720_Gwqluzq8r&lang=zh

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

@@ -1,36 +1,36 @@
 <template>
   <ul class="control-pano" :style="injectStyle">
-
+    <img v-if="isShowSplitter" class="splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
     <li @click="onIsAutoRotate">
       <img :src="require(`@/assets/images/js_icon/${isAutoRotate ? 'auto_active.png' : 'auto.png'}`)"
         alt=""
       />
-      <div>自动漫游</div>
+      <div>[自动漫游]</div>
     </li>
-
+    <img v-if="isShowSplitter" class="splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
     <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="" 
       />
-      <div>导览列表</div>
+      <div>[导览列表]</div>
     </li>
-
+    <img v-if="isShowSplitter" class="splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
     <li @click="onIsShowHotspotList">
       <img :src="require(`@/assets/images/js_icon/${isShowHotspotList ? 'hotspot_active.png' : 'hotspot.png'}`)"
         alt="" 
       />
-      <div>热点列表</div>
+      <div>[热点列表]</div>
     </li>
-
+    <img v-if="isShowSplitter" class="splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
     
     <li @click="onVR"
      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="" 
       />
-      <div>VR可视</div>
+      <div>[VR可视]</div>
     </li>
-
+    <img v-if="isShowSplitter" class="splitter" src="@/assets/images/js_icon/bottom-menu-splitter.png" alt="" draggable="false">
   </ul>
 
   <teleport to='body'>
@@ -125,7 +125,7 @@ const fdkkmetadata = computed(() => store.getters["fdkk/metadata"]);
 const fdkkCurrentVersion = computed(() => store.getters["scene/fdkkCurrentVersion"]);
 const vrStatus = computed(() => store.getters["functions/vrStatus"]);
 
-
+const isShowSplitter = ref(window.innerWidth > 1750)
 
 const showMusicPlaying = ref(musicPlayer.isPlay)
 
@@ -293,6 +293,12 @@ soundPlayer.on('pause', () => (showCommentaryPlaying.value = false))
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
+    &:last-of-type{
+      margin-right: 10px;
+    }
+    &:first-of-type{
+      margin-left: 10px;
+    }
     img {
       width: 34px;
       height: 34px;
@@ -301,22 +307,34 @@ soundPlayer.on('pause', () => (showCommentaryPlaying.value = false))
       font-size: 12px;
       margin-top: 4px;
     }
-    
-    &:last-of-type{
-      margin-right: 10px;
-    }
-    &:first-of-type{
-      margin-left: 10px;
-    }
   }
-  @media only screen and (min-width: 2000px) {
+}
+@media only screen and (min-width: 1750px){
+  .control-pano {
+    justify-content: space-evenly;
+    padding-left: 118px;
+    padding-right: 118px;
+    background-image: url('@/assets/images/js_icon/line-large-screen.png');
+    background-position: 0 calc(50% - 42px);
+    background-size: 95% auto;
+    >img.splitter {
+      transform: translateY(-20px);
+    }
     >li {
+      margin: initial;
+      &:last-of-type{
+      margin-right: initial;
+      }
+      &:first-of-type{
+        margin-left: initial;
+      }
       >img {
-        width: 68px;
-        height: 68px;
+        width: 118px;
+        height: 118px;
       }
       >div {
-        font-size: 24px;
+        font-family: DreamHanSerifCN;
+        font-size: 29px;
       }
     }
   }
@@ -333,7 +351,7 @@ soundPlayer.on('pause', () => (showCommentaryPlaying.value = false))
     width: 100%;
   }
 }
-@media only screen and (min-width: 2000px) {
+@media only screen and (min-width: 1750px){
     .musicfix {
       width: 80px;
     }

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

@@ -82,11 +82,6 @@ const close = () => {
       top: 10px;
       width: 34px;
     }
-    @media only screen and (min-width: 2000px) {
-      .close {
-        width: 68px;
-      }
-    }
     .htitle {
       position: absolute;
       left: 50%;
@@ -130,4 +125,70 @@ const close = () => {
   }
 
 }
+
+@media only screen and (min-width: 1750px){
+  .tag-layer {
+    display: initial;
+    .hotlistcon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 844px;
+      height: initial;
+      max-height: initial;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      background-size: initial;
+      background-image: initial;
+      background-color: black;
+      .close {
+        color: rgba(255, 255, 255, 0.6);
+        z-index: 999;
+        position: absolute;
+        right: initial;
+        left: 50%;
+        transform: translateX(-50%);
+        top: initial;
+        bottom: 118px;
+        width: 118px;
+      }
+      .htitle {
+        position: absolute;
+        left: 50%;
+        top: 0;
+        transform: translateX(-50%);
+        width: 206px;
+      }
+
+      >ul {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        top: 430px;
+        bottom: 380px;
+        height: initial;
+        overflow-y: auto;
+        text-align: center;
+        padding-right: 20px;
+
+        >li {
+          font-size: 43px;
+          overflow: hidden;
+          white-space: pre;
+          text-overflow: ellipsis;
+          font-family: DreamHanSerifCN;
+        }
+
+        &::-webkit-scrollbar {
+          width: 20px;
+          height: 20px;
+        }
+      }
+    }
+
+  }
+}
 </style>

src/components/UIGather/mobile/control_js.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="controlcon" :class="{ showcon: isShowMenu }">
     <Pano :injectStyle="isShowMenu ? '' : 'opacity: 0'" v-if="currentScene.type == 'pano'" />
-    <img class="showsss" @click="isShowMenu = !isShowMenu"
+    <img class="btn-expand-shrink" @click="isShowMenu = !isShowMenu"
       :src="require(`@/assets/images/js_icon/${isShowMenu ? 'shouqi.png' : 'zhankai.png'}`)" alt="" />
   </div>
 </template>
@@ -69,27 +69,37 @@ watchEffect(() => {
   overflow-y: hidden;
   position: relative;
   transition: 0.3s ease width;
-  
-  .showsss {
+  .btn-expand-shrink {
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 30px;
   }
-
   &.showcon {
     width: 100%;
     overflow-x: auto;
-    .showsss {
+    .btn-expand-shrink {
       left: initial;
       right: 0;
     }
   }
-  @media only screen and (min-width: 2000px) {
-    height: 104px;
-    .showsss {
-      width: 60px;
+}
+@media only screen and (min-width: 1750px){
+  .controlcon {
+    border-radius: 0;
+    height: 206px;
+    padding-top: 20px;
+    .btn-expand-shrink {
+      width: 106px;
+      transform: translateY(-58%);
+    }
+    &.showcon {
+      width: 60%;
+      margin-left: auto;
+      margin-right: auto;
+      .btn-expand-shrink {
+      }
     }
   }
 }

src/components/UIGather/mobile/index.vue

@@ -4,7 +4,12 @@
   <!-- <Menu /> -->
   <div v-show="showUI && !vrStatus">
     <sceneList />
-    <div class="btn-style">
+    <div
+      class="btn-style"
+      :class="{
+        needBottomSpace: isShowScenesList
+      }"
+    >
       <!-- <div class="menu-icon">
       <div @click="onIsShowList"
         v-if="!((metadata.catalogRoot && metadata.catalogRoot.length == 1) && scenes.length == 1 && secondaryList.length == 1)">
@@ -81,13 +86,11 @@ useApp().then((app) => {
 .btn-style {
   display: flex;
   width: 96%;
-  max-width: 600px;
   position: absolute;
   left: 2%;
   right: 2%;
   bottom: 38px;
   z-index: 9;
-
   .menu-icon {
     width: 36px;
     height: 36px;
@@ -111,4 +114,13 @@ useApp().then((app) => {
     }
   }
 }
+
+@media only screen and (min-width: 1750px){
+  .btn-style {
+    bottom: 138px;
+  }
+  .btn-style.needBottomSpace {
+    bottom: 260px;
+  }
+}
 </style>

src/components/UIGather/mobile/list.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bar-list test"
+    class="bar-list"
     v-if="
       show &&
       !(
@@ -131,7 +131,7 @@ const { t } = useI18n({ useScope: "global" });
 
 const store = useStore();
 
-const spanlength = ref(5);
+const spanlength = ref(window.innerWidth > 1750 ? 12 : 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: 10,
+          spaceBetween: window.innerWidth > 1750 ? 72 : 10,
           centerInsufficientSlides: true,
           centeredSlidesBounds: true,
           freeMode: true,
@@ -265,7 +265,10 @@ onMounted(() => {
   transition: 0.3s all ease;
   z-index: 9;
   width: 100%;
-
+  @media only screen and (min-width: 1750px){
+    bottom: 0;
+    padding-top: 40px;
+  }
   .swiper-container {
     width: 100%;
     position: relative;
@@ -304,24 +307,38 @@ onMounted(() => {
     padding: 10px 0;
     width: 100%;
     background: rgba(0, 0, 0, 0.8);
+    @media only screen and (min-width: 1750px){
+      margin-bottom: initial;
+    }
   }
 
   #swcatalogRoot {
     padding: 0 15px;
-
+    @media only screen and (min-width: 1750px){
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 230px;
+    }
     > ul {
       > li {
         width: 104px;
         background: rgba(0, 0, 0, 0.5);
         border-radius: 4px;
-        padding: 4px 10px;
+        padding: 3px 10px;
         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;
+        }
         > span {
           width: 100%;
           word-break: keep-all;
+          @media only screen and (min-width: 1750px){
+            font-family: kaiti;
+          }
         }
 
         &.active {
@@ -341,10 +358,16 @@ onMounted(() => {
         box-sizing: border-box;
         overflow: hidden;
         padding-bottom: 6px;
-
+        @media only screen and (min-width: 1750px){
+          width: 180px;
+        }
         > span {
           width: 100%;
           word-break: keep-all;
+          @media only screen and (min-width: 1750px){
+            font-size: 20px;
+            font-family: kaiti;
+          }
         }
 
         &.active {
@@ -378,7 +401,10 @@ onMounted(() => {
         background-size: cover;
         position: relative;
         overflow: hidden;
-
+        @media only screen and (min-width: 1750px){
+          width: 250px;
+          height: 140px;
+        }
         .iconfont {
           position: absolute;
           left: 4px;
@@ -399,7 +425,6 @@ onMounted(() => {
             filter: blur(4px);
           }
         }
-
         > div {
           position: absolute;
           bottom: 0;
@@ -414,6 +439,14 @@ onMounted(() => {
             line-height: 20px;
             word-break: keep-all;
           }
+          @media only screen and (min-width: 1750px){
+            height: 40px;
+            > span {
+              font-size: 20px;
+              line-height: 40px;
+              font-family: kaiti;
+            }
+          }
         }
 
         &.active {
@@ -432,7 +465,11 @@ onMounted(() => {
 .barshow {
   max-height: 190px;
 }
-
+@media only screen and (min-width: 1750px){
+  .barshow {
+    max-height: initial;
+  }
+}
 @keyframes wordsLoop {
   0% {
     transform: translateX(100%);

src/components/assembly/MobileTags/index.vue

@@ -68,6 +68,13 @@ 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;
+  }
+  ::-webkit-scrollbar {
+    width: 30px;
+    height: 30px;
+  }
   .tag-header {
     display: flex;
     width: 100%;
@@ -78,7 +85,10 @@ 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;
+    }
     > span {
       overflow: hidden;
       white-space: nowrap;
@@ -88,6 +98,9 @@ const close = () => {
     .close {
       color: rgba(255, 255, 255, 0.6);
       z-index: 999;
+      @media only screen and (min-width: 1750px){
+        font-size: 50px;
+      }
     }
   }
 }

src/pages/showMobile.vue

@@ -307,3 +307,13 @@ const handlePass = () => {
   position: relative;
 }
 </style>
+<style>
+@font-face {
+  font-family: 'DreamHanSerifCN';
+  src: url('@/assets/DreamHanSerifCN-W27.ttf');
+}
+@font-face {
+  font-family: 'kaiti';
+  src: url('@/assets/simkai.ttf');
+}
+</style>