style: flexible

hotspot/views/hotspot/index.scss

@@ -85,9 +85,13 @@
       height: 100%;
     }
   }
+  .swiper-slide {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   &-video {
-    width: 100%;
-    height: 100%;
+    max-height: 100%;
     object-fit: cover;
   }
   &-img {
@@ -134,108 +138,41 @@
 
 @media only screen and (max-width: 600px) {
   .hotspot-page {
-    .audioIcon {
-      top: 20px;
-      right: 60px;
-
-      img {
-        width: 35px;
-        height: 35px;
-      }
-    }
-  }
-  .hotspot-page-info {
-    top: unset;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 20px 25px;
-    max-width: 100%;
-    height: calc(100vh - 50vh - 95px);
-    box-sizing: border-box;
-    border-top-left-radius: 17px;
-    border-top-right-radius: 17px;
-    background: linear-gradient(181deg, #d67729 0%, #c41800 100%);
-
-    h3 {
-      margin-bottom: 7px;
+    &-container {
       max-width: 100%;
       width: 100%;
-      color: white;
-      font-size: 18px;
-      font-weight: bold;
-      display: -webkit-box;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
-      word-break: break-all;
-      word-wrap: break-word;
+      background: none;
     }
-    p {
-      flex: 1;
-      padding-right: 2px;
-      width: 100%;
-      height: 0;
-      color: white;
-      font-size: 15px;
-
-      &::-webkit-scrollbar {
-        width: 2px;
+    &-swiper {
+      &__left,
+      &__right {
+        top: unset;
+        bottom: 12px;
+        transform: none;
       }
-      &::-webkit-scrollbar-thumb {
-        background-color: #ddaf35;
+      &__left {
+        left: 14px;
+      }
+      &__right {
+        right: 14px;
       }
     }
-  }
-  .hotspot-page-nav {
-    bottom: 194px;
-    gap: 13px;
+    &-nav {
+      bottom: 0;
 
-    &__item {
-      width: 70px;
-      height: 20px;
-      font-size: 10px;
-      gap: 4px;
-
-      .video-icon,
-      .img-icon {
-        width: 12px;
-        height: 10px;
-      }
-      .model-icon {
-        width: 10px;
-        height: 11px;
+      &__item {
+        width: 48px;
+        height: 48px;
       }
     }
-  }
-  .hotspot-page-swiper__left,
-  .hotspot-page-swiper__right {
-    width: 19px;
-    height: 38px;
-  }
-  .hotspot-page-swiper__left {
-    left: 0;
-    background-image: url('@hotspot/assets/images/icon-left-min.png');
-  }
-  .hotspot-page-swiper__right {
-    right: 0;
-    background-image: url('@hotspot/assets/images/icon-right-min.png');
-  }
-  .hotspot-page-main {
-    top: 75px;
-    width: 100%;
-    transform: translateX(-50%);
-  }
+    .audioIcon {
+      right: 35px;
+      bottom: 1px;
 
-  .hotspot-page-video {
-    width: 300px;
-    height: 168px;
-  }
-  .hotspot-page-img-swiper,
-  .hotspot-page-model {
-    height: 50vh;
+      img {
+        width: 48px;
+        height: 48px;
+      }
+    }
   }
 }

hotspot/views/hotspot/index.vue

@@ -51,7 +51,7 @@
       >
         <SwiperSlide v-for="item in curList" :key="item">
           <div class="hotspot-page-img">
-            <el-image :src="item" fit="contain" />
+            <el-image :src="item" fit="contain" style="width: 100%; height: 100%" />
           </div>
         </SwiperSlide>
       </Swiper>

src/views/home/components/guide/index.zgrs.scss

@@ -181,18 +181,35 @@
 }
 
 @media only screen and (max-width: 487px), (max-height: 487px) {
-  #thumb-container .thumbImg img,
-  .frame {
-    height: 77px;
+  #drawer.open {
+    height: 115px;
   }
-  .frame .slidee li {
-    width: 103px;
-  }
-  #drawer-container.drawerOpen #drawer.open.noScroll {
-    height: 94px;
-  }
-  #drawer.open.noScroll,
-  #drawer.open.noScroll.playing {
-    height: 88px;
+  .frame .slidee {
+    gap: 0;
+
+    li {
+      width: 135px;
+      height: 94px;
+
+      &.active {
+        top: -1px;
+      }
+      img {
+        width: 112px;
+        height: 64px;
+        border: none;
+      }
+      .overlay {
+        position: absolute;
+        left: 50%;
+        bottom: 15px;
+        padding: 0 2px;
+        width: 112px;
+        height: 20px;
+        line-height: 20px;
+        transform: translateX(-50%);
+        background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
+      }
+    }
   }
 }

src/views/home/components/menu/index.zgrs.scss

@@ -10,7 +10,7 @@
   }
 }
 
-#gui .pinBottom.open.noScroll.playing {
+.pinBottom.open.noScroll.playing {
   bottom: 175px;
 }
 
@@ -154,38 +154,85 @@
 }
 
 @media only screen and (max-width: 600px) {
-  .pinBottom.right,
-  .pinBottom.left {
-    bottom: 5px;
-  }
-  .pinBottom.left {
-    left: 5px;
-  }
-  .pinBottom.right .ui-icon {
-    margin-right: 5px;
-  }
-  #play,
-  #pause {
-    width: 64px;
-  }
-  #gui-modes-map > div {
-    width: 64px;
-  }
-  .viewContainer,
-  #gui-modes-map {
-    display: flex;
-    flex-direction: column;
-  }
-}
+  .pinBottom {
+    &.open {
+      bottom: 122px;
 
-@media only screen and (max-width: 487px), (max-height: 487px) {
-  .pinBottom-container.drawerOpen.duringTour {
-    bottom: 6px;
+      &.noScroll.playing {
+        bottom: 142px;
+      }
+    }
+    &.open.right {
+      bottom: 152px;
+
+      &.noScroll.playing {
+        bottom: 172px;
+      }
+    }
+    &.left {
+      width: 100%;
+      height: 55px;
+
+      .viewContainer {
+        padding-left: 15px;
+      }
+    }
+    &.right {
+      right: 13px;
+      bottom: 30px;
+
+      &.playing {
+        bottom: 50px;
+      }
+      .rightViewContainer {
+        flex-direction: column;
+
+        .helper-btn,
+        #sharing,
+        #volume,
+        .good-btn {
+          width: 47px;
+          height: 47px;
+        }
+        .good-btn {
+          &.active {
+            div {
+              background-image: url('@/assets/images/zgrs/good-active-m.png');
+            }
+          }
+          div {
+            width: 47px;
+            height: 54px;
+            background-image: url('@/assets/images/zgrs/good-m.png');
+          }
+          span {
+            top: -7px;
+          }
+        }
+        .helper-btn {
+          background-image: url('@/assets/images/zgrs/helper-m.png');
+        }
+        #sharing {
+          background-image: url('@/assets/images/zgrs/share-m.png');
+        }
+        #volume {
+          background-image: url('@/assets/images/zgrs/Volume btn_off-m.png');
+
+          &.active {
+            background-image: url('@/assets/images/zgrs/Volume btn_on-m.png');
+          }
+        }
+      }
+    }
   }
-  #gui .pinBottom.open.noScroll {
-    bottom: 93px;
+  #play img,
+  #pause img,
+  #gui-modes-map > div,
+  .hotList {
+    width: 47px;
+    height: 47px;
   }
-  .pinBottom.open.noScroll.playing {
-    bottom: 108px;
+  #gui-modes-map {
+    gap: 5px;
   }
 }

src/views/home/components/menu/index.zgrs.vue

@@ -24,6 +24,8 @@
         </div>
         <div id="gui-modes-map" class="ui-icon double active">
           <div data-original-title="导览" id="pullTab" title="导览" />
+
+          <div id="hotList" class="hidden" />
           <el-dropdown
             trigger="click"
             placement="top"
@@ -67,13 +69,8 @@
           <div />
           <span v-if="staring">{{ staringString }}</span>
         </div>
-        <div
-          id="sharing"
-          class="ui-icon wide"
-          title="{[{ SOCIAL_SHARING }]}"
-          @click="copyUrl"
-        ></div>
-        <div id="volume" class="ui-icon wide"></div>
+        <div id="sharing" class="ui-icon wide" title="分享" @click="copyUrl"></div>
+        <div id="volume" class="ui-icon wide" style="display: none"></div>
         <div id="vr" class="ui-icon wide hidden" style="display: none">
           <a>
             <i title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
@@ -157,7 +154,7 @@
   const handleKeydown = () => {
     helperVisible && closeHelper();
   };
-  const handleClick = (e: MouseEvent) => {
+  const handleClick = (e: MouseEvent | TouchEvent) => {
     const clickedElement = e.target;
     // @ts-ignore
     const modalElement = clickedElement?.closest('#interaction-modal');
@@ -197,11 +194,13 @@
 
     window.addEventListener('keydown', handleKeydown);
     window.addEventListener('click', handleClick);
+    window.addEventListener('touchmove', handleClick);
   });
 
   onUnmounted(() => {
     window.removeEventListener('keydown', handleKeydown);
     window.removeEventListener('click', handleClick);
+    window.removeEventListener('touchmove', handleClick);
   });
 </script>
 

src/views/home/components/other/index.scss

@@ -10,6 +10,16 @@
   height: 100%;
 }
 
+#call-to-action #interaction-modal.mobile {
+  height: auto;
+  width: 95%;
+  border-radius: 5px;
+}
+
+#interaction-modal.mobile img {
+  width: 100%;
+}
+
 #call-to-action #interaction-modal.fadeIn,
 #call-to-action #pause-icon.fadeIn {
   opacity: 1;

src/views/home/components/title/index.zgrs.scss

@@ -30,3 +30,20 @@
     background: url('@/assets/images/zgrs/title-down.png') no-repeat center / contain;
   }
 }
+
+@media only screen and (max-width: 600px) {
+  .scene-title {
+    width: 100%;
+    height: 36px;
+    background-image: url('@/assets/images/zgrs/title-bg-m.png');
+
+    p {
+      padding-left: 37px;
+    }
+    &::after {
+      position: relative;
+      top: -4px;
+      right: 0;
+    }
+  }
+}

src/views/home/index.zgrs.scss

@@ -88,12 +88,12 @@
 
 @media only screen and (max-width: 600px) {
   .home {
-    &_logo {
-      width: 200px;
-
-      span {
-        font-size: 14px;
-      }
+    &__back {
+      top: 12px;
+      left: 12px;
+      width: 35px;
+      height: 35px;
+      z-index: 1001;
     }
   }
 }