傻逼样式优化

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

@@ -358,6 +358,7 @@ soundPlayer.on('pause', () => (showCommentaryPlaying.value = false))
       >div {
         font-family: DreamHanSerifCN-W27;
         font-size: 0.833vw;
+        letter-spacing: 0.2em;
       }
     }
   }

src/components/UIGather/mobile/control_js.vue

@@ -93,7 +93,7 @@ watchEffect(() => {
   .controlcon {
     border-radius: 0;
     height: 5.36vw;
-    padding-top: 0.52vw;
+    padding-top: 0;
     .btn-expand-shrink {
       width: 2.76vw;
       transform: translateY(-58%);

src/components/UIGather/mobile/index.vue

@@ -6,8 +6,8 @@
     <sceneList />
     <div
       class="btn-style"
-      :class="{
-        needBottomSpace: isShowScenesList
+      :style="{
+        bottom: menuStyleBottom,
       }"
     >
       <!-- <div class="menu-icon">
@@ -50,12 +50,12 @@ const secondaryList = computed(() => store.getters["scene/secondaryList"]);
 const currentScene = computed(() => store.getters["scene/currentScene"]);
 const vrStatus = computed(() => store.getters["functions/vrStatus"]);
 
-const onIsShowList = (data) => {
-  if (showTours.value) {
-    store.commit('fdkk/setShowToursList', false)
-  }
-  store.commit("functions/setShowScenesList", !isShowScenesList.value);
-};
+// const onIsShowList = (data) => {
+//   if (showTours.value) {
+//     store.commit('fdkk/setShowToursList', false)
+//   }
+//   store.commit("functions/setShowScenesList", !isShowScenesList.value);
+// };
 
 watch(currentScene, () => {
   if (currentScene.value.type == '4dkk' && isShowScenesList.value) {
@@ -80,6 +80,29 @@ useApp().then((app) => {
   })
 })
 
+const menuStyleBottom = computed(() => {
+  if (window.innerWidth > 750) {
+    if (isShowScenesList.value &&
+      !(
+        metadata.value.catalogRoot &&
+        metadata.value.catalogRoot?.length == 1 &&
+        scenes.value?.length == 1 &&
+        secondaryList.value?.length == 1
+      )
+    ) {
+      let rootListSpace = metadata.value?.catalogRoot?.length > 1 ? 2.61 : 0
+      let groupL2ListSpace = secondaryList.value?.length > 1 ? 2.81: 0
+      let sceneList = 5.89
+      let margin = 1
+      return rootListSpace + groupL2ListSpace + sceneList + margin + 'vw'
+    } else {
+      return '3.59vw'
+    }
+  } else {
+    return ''
+  }
+})
+
 </script>
 
 <style lang="scss" scoped>
@@ -114,13 +137,4 @@ useApp().then((app) => {
     }
   }
 }
-
-@media only screen and (min-width: 750px){
-  .btn-style {
-    bottom: 3.59vw;
-  }
-  .btn-style.needBottomSpace {
-    bottom: 9.375vw;
-  }
-}
 </style>

src/components/UIGather/mobile/list.vue

@@ -13,6 +13,40 @@
     :class="{ barshow: isShowScenesList }"
   >
     <div class="top-con">
+      <template v-if="isLargeScreen">
+        <div
+          class="swiper-container"
+          id="swSecondary"
+          :style="`width:${Math.min(secondaryW, innerW)}px;
+        padding:${secondaryW > innerW ? '0 15px' : '0'}`"
+          v-if="secondaryList.length > 1"
+        >
+          <ul class="swiper-wrapper">
+            <li
+              class="swiper-slide"
+              @click="tabSecondary(item)"
+              :class="{
+                active: currentSecondary.id == item.id,
+                loopspan:
+                  fixTitle(item.name).length > spanlength &&
+                  currentSecondary.id == item.id,
+              }"
+              v-for="(item, i) in secondaryList"
+              :key="i"
+            >
+              <span v-if="currentSecondary.id == item.id">{{
+                fixTitle(item.name)
+              }}</span>
+              <span v-else>{{
+                fixTitle(item.name).length > spanlength
+                  ? fixTitle(item.name).slice(0, spanlength)
+                  : fixTitle(item.name)
+              }}</span>
+            </li>
+          </ul>
+        </div>
+      </template>
+
       <div
         class="swiper-container"
         id="swScenes"
@@ -55,44 +89,45 @@
         </ul>
       </div>
 
-      <div
-        class="swiper-container"
-        id="swSecondary"
-        :style="`width:${Math.min(secondaryW, innerW)}px;
-      padding:${secondaryW > innerW ? '0 15px' : '0'}`"
-        v-if="secondaryList.length > 1"
-      >
-        <ul class="swiper-wrapper">
-          <li
-            class="swiper-slide"
-            @click="tabSecondary(item)"
-            :class="{
-              active: currentSecondary.id == item.id,
-              loopspan:
-                fixTitle(item.name).length > spanlength &&
-                currentSecondary.id == item.id,
-            }"
-            v-for="(item, i) in secondaryList"
-            :key="i"
-          >
-            <span v-if="currentSecondary.id == item.id">{{
-              fixTitle(item.name)
-            }}</span>
-            <span v-else>{{
-              fixTitle(item.name).length > spanlength
-                ? fixTitle(item.name).slice(0, spanlength)
-                : fixTitle(item.name)
-            }}</span>
-          </li>
-        </ul>
-      </div>
+      <template v-if="!isLargeScreen">
+        <div
+          class="swiper-container"
+          id="swSecondary"
+          :style="`width:${Math.min(secondaryW, innerW)}px;
+        padding:${secondaryW > innerW ? '0 15px' : '0'}`"
+          v-if="secondaryList.length > 1"
+        >
+          <ul class="swiper-wrapper">
+            <li
+              class="swiper-slide"
+              @click="tabSecondary(item)"
+              :class="{
+                active: currentSecondary.id == item.id,
+                loopspan:
+                  fixTitle(item.name).length > spanlength &&
+                  currentSecondary.id == item.id,
+              }"
+              v-for="(item, i) in secondaryList"
+              :key="i"
+            >
+              <span v-if="currentSecondary.id == item.id">{{
+                fixTitle(item.name)
+              }}</span>
+              <span v-else>{{
+                fixTitle(item.name).length > spanlength
+                  ? fixTitle(item.name).slice(0, spanlength)
+                  : fixTitle(item.name)
+              }}</span>
+            </li>
+          </ul>
+        </div>
+      </template>
     </div>
 
     <div
       class="group-level-1 swiper-container"
       id="swcatalogRoot"
-      :style="`width:${Math.min(catalogRootW, innerW)}px;
-    padding:${catalogRootW > innerW ? '0 15px' : '0'}`"
+      :style="`width:${Math.min(catalogRootW, innerW)}px; padding:${catalogRootW > innerW ? '0 15px' : '0'}; bottom: ${rootListBottom}`"
       v-if="metadata.catalogRoot.length > 0 && metadata.catalogs.length > 1"
     >
       <ul class="swiper-wrapper" v-show="metadata.catalogRoot.length > 1">
@@ -101,7 +136,7 @@
           :class="{
             active: currentCatalogRoot.id == item.id,
             loopspan:
-              fixTitle(item.name).length > spanlength &&
+              fixTitle(item.name).length > spanlengthRoot &&
               currentCatalogRoot.id == item.id,
           }"
           @click="tabRoot(item)"
@@ -112,8 +147,8 @@
             fixTitle(item.name)
           }}</span>
           <span v-else>{{
-            fixTitle(item.name).length > spanlength
-              ? fixTitle(item.name).slice(0, spanlength)
+            fixTitle(item.name).length > spanlengthRoot
+              ? fixTitle(item.name).slice(0, spanlengthRoot)
               : fixTitle(item.name)
           }}</span>
         </li>
@@ -131,12 +166,15 @@ const { t } = useI18n({ useScope: "global" });
 
 const store = useStore();
 
-const spanlength = ref(5);
+const spanlengthRoot = window.innerWidth > 750 ? ref(10) : ref(5);
+const spanlength = window.innerWidth > 750 ? ref(5) : ref(5);
 
 const metadata = computed(() => store.getters["scene/metadata"]);
 const scenes = computed(() => store.getters["scene/list"]);
 const currentScene = computed(() => store.getters["scene/currentScene"]);
 
+const isLargeScreen = window.innerWidth > 750
+
 watch(currentScene, (newV, oldV) => {
   nextTick(() => {
     const activeLiElem = document.querySelector(`#scene-item-${newV.sceneCode}`)
@@ -208,15 +246,33 @@ const fixTitle = (name) => {
   return name;
 };
 
+const rootListBottom = computed(() => {
+  if (window.innerWidth > 750) {
+    if (secondaryList.value.length > 1) {
+      return '9.2vw'
+    } else {
+      return '7vw'
+    }
+  } else {
+    return ''
+  }
+})
+
 const loadList = () => {
   nextTick(() => {
+    const spaceBetween = {
+      'swcatalogRoot': window.innerWidth > 750 ? 100 : 10,
+      'swSecondary': window.innerWidth > 750 ? 200 : 10,
+      'swScenes': window.innerWidth > 750 ? 36 : 10,
+    }
     let t = setTimeout(() => {
       clearTimeout(t);
       ["#swcatalogRoot", "#swSecondary", "#swScenes"].forEach((item) => {
+        console.log(item, 'sdfksadklgkl');
         let tmp = new Swiper(item, {
           slidesPerView: "auto",
           centeredSlides: true,
-          spaceBetween: window.innerWidth > 750 ? 36 : 10,
+          spaceBetween: spaceBetween[item.substring(1)],
           centerInsufficientSlides: true,
           centeredSlidesBounds: true,
           freeMode: true,
@@ -308,6 +364,7 @@ onMounted(() => {
     width: 100%;
     background: rgba(0, 0, 0, 0.8);
     @media only screen and (min-width: 750px){
+      padding: 0.521vw 0;
       margin-bottom: initial;
     }
   }
@@ -318,7 +375,7 @@ onMounted(() => {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      bottom: 7.81vw;
+      padding: 0 0.625vw;
     }
     > ul {
       > li {
@@ -330,8 +387,13 @@ onMounted(() => {
         box-sizing: border-box;
         overflow: hidden;
         @media only screen and (min-width: 750px){
-          width: 5.21vw;
-          font-size: 0.833vw;
+          padding: 0.512vw 0.25vw;
+          width: 10.5vw;
+          background: rgba(0, 0, 0, 0.8);
+          font-size: 0.938vw;
+          border: 1px solid rgba(47, 133, 226, 0.8);
+          border-radius: initial;
+          color: #C6C6C6;
         }
         > span {
           width: 100%;
@@ -343,15 +405,21 @@ onMounted(() => {
 
         &.active {
           border: 1px solid rgba(255, 255, 255, 1);
+          @media only screen and (min-width: 750px){
+            border: 1px solid rgba(0, 118, 246, 1);
+          }
         }
       }
     }
   }
-
+  
   #swSecondary {
-    margin: 20px auto 10px;
+    margin: 10px auto 20px;
     padding: 0 15px;
-
+    @media only screen and (min-width: 750px){
+      margin: 0.512vw auto 1.024vw;
+      padding: 0 0.781vw;
+    }
     > ul {
       > li {
         width: 84px;
@@ -365,6 +433,7 @@ onMounted(() => {
           width: 100%;
           word-break: keep-all;
           @media only screen and (min-width: 750px){
+            letter-spacing: 0.156vw;
             font-size: 0.833vw;
             font-family: kaiti;
           }
@@ -402,15 +471,17 @@ onMounted(() => {
         position: relative;
         overflow: hidden;
         @media only screen and (min-width: 750px){
-          width: 6.51vw;
-          height: 3.65vw;
+          width: 6.56vw;
+          height: 4.74vw;
         }
         .iconfont {
           position: absolute;
           left: 4px;
           top: 4px;
           z-index: 99;
-
+          @media only screen and (min-width: 750px){
+            display: none;
+          }
           &::after {
             background: rgba(0, 0, 0, 0.3);
             content: "";

src/utils/config.js

@@ -28,6 +28,7 @@ const config = {
       'WK1666376954959364096',
       'WK1666378820984242176',
       'WK1666379589867274240',
+      'WK1657992317333684224',
     ],
 };