feat: --

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

@@ -0,0 +1,215 @@
+#drawer-container {
+  position: absolute;
+  left: 0;
+  bottom: 0px;
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  pointer-events: none;
+  transition-property: bottom, opacity;
+  transition-duration: 0.5s;
+  z-index: var(--z-index-normal);
+
+  #drawer.playing {
+    bottom: 20px;
+  }
+}
+
+#drawer {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  color: #fff;
+  pointer-events: all;
+  transition-duration: 0.5s;
+  transition-property: height, bottom;
+
+  &.open {
+    height: 150px;
+  }
+}
+
+#drawer.open.fadeOut {
+  pointer-events: none;
+}
+
+.fullWidth .frame-container {
+  width: 100%;
+}
+.frame-container {
+  display: flex;
+  align-items: center;
+  width: calc(100% - 58px);
+  height: 100%;
+  background: rgba(27, 27, 28, 0.6);
+}
+
+.frame {
+  margin: 0 10px;
+  width: calc(100% - 20px);
+}
+
+.frame.noScroll {
+  margin: 17px 10px;
+}
+
+.frame .slidee {
+  display: flex;
+  height: 100%;
+  list-style: none;
+}
+
+.frame .slidee li {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  justify-content: center;
+  width: 186px;
+  height: 130px;
+  cursor: pointer;
+}
+
+.frame .slidee li .overlay {
+  margin-top: 5px;
+  color: #fff;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  text-align: center;
+}
+
+.frame .slidee li .mark360View,
+.frame .slidee li .markInsideView {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 50px;
+  max-height: 25px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 1);
+  z-index: 100;
+  transform: translate3d(0, 0, 0);
+}
+
+.frame .slidee li img {
+  width: 144px;
+  height: 83px;
+  object-fit: cover;
+  border-radius: 5px;
+  overflow: hidden;
+  border: 3px solid #c39f6b;
+}
+
+.frame .slidee li.thumbImg.active {
+  position: relative;
+  top: -5px;
+
+  > img {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    mask: url('@/assets/images/zgrs/active-menu.png') no-repeat center / contain;
+  }
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('@/assets/images/zgrs/active-menu-2.png') no-repeat center / contain;
+    z-index: 1;
+  }
+  .overlay {
+    display: none;
+  }
+}
+
+#playHead {
+  display: table;
+  position: absolute;
+  bottom: -20px;
+  left: 0;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  transition-property: bottom;
+  transition-duration: 0.5s;
+  background-color: #000;
+
+  &.playing {
+    bottom: 0;
+  }
+}
+
+#status {
+  width: 65px;
+  color: #fff;
+  font-family: OpenSans, 'Helvetica Neue', Arial, sans-serif;
+  font-weight: 700;
+  font-size: 11px;
+  padding-left: 10px;
+}
+
+#progressBar {
+  padding: 0 10px;
+  flex: 1;
+  pointer-events: all;
+
+  .step {
+    height: 6px;
+    float: left;
+
+    &::before {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: #575757;
+    }
+    &.active::before {
+      background-color: #00b4ed;
+    }
+  }
+}
+
+@media only screen and (max-width: 487px), (max-height: 487px) {
+  #drawer.open {
+    height: 115px;
+  }
+  .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/guide/index.syjy.tsx

@@ -0,0 +1,26 @@
+import { defineComponent } from 'vue';
+import './index.zgrs.scss';
+
+export default defineComponent({
+  name: 'HomeGuide',
+  render() {
+    return (
+      <div id="drawer-container">
+        <div id="drawer" class="fullWidth">
+          <div class="frame-container">
+            <div id="scrollFrame" class="frame">
+              <ul id="thumb-container" class="slidee"></ul>
+            </div>
+          </div>
+        </div>
+        <div id="playHead">
+          <div id="status">
+            <span class="curIdx">1</span>
+            of <span class="totalSteps"></span>
+          </div>
+          <div id="progressBar"></div>
+        </div>
+      </div>
+    );
+  },
+});

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

@@ -1,6 +1,6 @@
 .pinBottom-container {
   position: absolute;
-  bottom: 0px;
+  bottom: 25px;
   width: 100%;
   transition: all 0.5s;
   z-index: var(--z-index-top);
@@ -22,13 +22,9 @@
 
   &.left {
     left: 0;
-    width: 450px;
-    height: 67px;
-    background: url('@/assets/images/zgrs/Subtract-min.png') no-repeat center right / contain;
   }
   &.right {
-    right: 40px;
-    bottom: 10px;
+    right: 30px;
   }
   &.open {
     bottom: 155px;
@@ -44,12 +40,12 @@
 #gui-modes-map {
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 15px;
   height: 100%;
 }
 
 .viewContainer {
-  padding-left: 35px;
+  padding-left: 30px;
 }
 
 #play,
@@ -57,13 +53,12 @@
   cursor: pointer;
 
   img {
-    width: 57px;
-    height: 57px;
+    width: 50px;
+    height: 50px;
   }
 }
 
 #pullTab,
-.helper-btn,
 .good-btn,
 .hotList,
 #gui-modes-dollhouse,
@@ -71,82 +66,53 @@
 #volume,
 #sharing {
   display: block;
-  width: 57px;
-  height: 57px;
+  width: 50px;
+  height: 50px;
   cursor: pointer;
 }
 
 #pullTab {
-  background: url('@/assets/images/zgrs/auto-suspend.png') no-repeat center / contain;
+  background: url('@/assets/images/syjy/icon-daolan-min.png') no-repeat center / contain;
 
   &.opened {
-    background-image: url('@/assets/images/zgrs/auto.png');
+    background-image: url('@/assets/images/syjy/icon-daolan-1-min.png');
   }
 }
 
 .hotList {
-  background: url('@/assets/images/zgrs/hotlist.png') no-repeat center / contain;
+  background: url('@/assets/images/syjy/icon-redian-min.png') no-repeat center / contain;
 
   &.active {
-    background-image: url('@/assets/images/zgrs/hotlist-active.png');
+    background-image: url('@/assets/images/syjy/icon-redian-1-min.png');
   }
 }
 
 #gui-modes-dollhouse {
-  background: url('@/assets/images/zgrs/dollhouse.png') no-repeat center / contain;
+  background: url('@/assets/images/syjy/icon-dingbu-min.png') no-repeat center / contain;
 
   &.active {
-    background-image: url('@/assets/images/zgrs/dollhouse-active.png');
+    background-image: url('@/assets/images/syjy/icon-dingbu-1-min.png');
   }
 }
 
 #gui-modes-floorplan {
-  background: url('@/assets/images/zgrs/floor.png') no-repeat center / contain;
+  background: url('@/assets/images/syjy/icon-mini-min.png') no-repeat center / contain;
 
   &.active {
-    background-image: url('@/assets/images/zgrs/floor-active.png');
+    background-image: url('@/assets/images/syjy/icon-mini-1-min.png');
   }
 }
 
 #volume {
-  background: url('@/assets/images/zgrs/Volume btn_off.png') no-repeat center / contain;
+  background: url('@/assets/images/syjy/icon-shengyin-min.png') no-repeat center / contain;
 
   &.active {
-    background-image: url('@/assets/images/zgrs/Volume btn_on.png');
+    background-image: url('@/assets/images/syjy/icon-shengyin-1-min.png');
   }
 }
 
 #sharing {
-  background: url('@/assets/images/zgrs/share.png') no-repeat center / contain;
-}
-
-.helper-btn {
-  background: url('@/assets/images/zgrs/helper.png') no-repeat center / contain;
-}
-
-.good-btn {
-  position: relative;
-
-  &.active div {
-    background-image: url('@/assets/images/zgrs/good-active.png');
-  }
-  div {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 58px;
-    height: 67px;
-    transition: background-image 0.3s ease-in-out;
-    background: url('@/assets/images/zgrs/good.png') no-repeat center / contain;
-  }
-  span {
-    position: absolute;
-    top: -9px;
-    left: 50%;
-    font-size: 12px;
-    color: white;
-    transform: translateX(-50%);
-  }
+  background: url('@/assets/images/syjy/icon-share-min.png') no-repeat center / contain;
 }
 
 .terms2 {
@@ -187,41 +153,12 @@
       .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');
-          }
-        }
       }
     }
   }

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

@@ -64,11 +64,6 @@
     </div>
     <div class="pinBottom right hideTarget">
       <div class="rightViewContainer clearfix">
-        <div class="helper-btn" title="指引" @click="openHelper"></div>
-        <div class="good-btn" title="点赞" :class="{ active: staring }" @click="handleStar">
-          <div />
-          <span v-if="staring">{{ staringString }}</span>
-        </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">
@@ -105,27 +100,16 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, onMounted, onUnmounted, ref } from 'vue';
+  import { onMounted, onUnmounted, ref } from 'vue';
   import clipboard from 'clipboard';
-  import PlayIcon from '@/assets/images/zgrs/play.png';
-  import PauseIcon from '@/assets/images/zgrs/pause.png';
+  import PauseIcon from '@/assets/images/syjy/icon-manyou-1-min.png';
+  import PlayIcon from '@/assets/images/syjy/icon-manyou-min.png';
   import { homeApi } from '@/api';
   import HotSpotList from '../hot-spot-list';
 
   let helperVisible = false;
   const hotspotActive = ref(false);
   const starSum = ref(0);
-  const staring = ref(false);
-  const staringString = computed(() => {
-    const value = starSum.value;
-    if (value >= 10000) {
-      return `${Math.floor(value / 10000)}w+`;
-    } else if (value >= 1000) {
-      return `${Math.floor(value / 1000)}k+`;
-    } else {
-      return value.toString();
-    }
-  });
 
   const copyUrl = () => {
     clipboard.copy(window.location.href);
@@ -138,14 +122,6 @@
     });
   };
 
-  const openHelper = () => {
-    window
-      .$('#interaction-modal')
-      // @ts-ignore
-      .addClass(`fadeIn ${window.browser.isMobile() ? 'mobile' : 'desktop'}`);
-    helperVisible = true;
-  };
-
   const closeHelper = () => {
     window.$('#interaction-modal').removeClass('fadeIn');
     helperVisible = false;
@@ -172,23 +148,6 @@
     starSum.value = data.starSum;
   };
 
-  const handleStar = async () => {
-    if (staring.value) return;
-
-    staring.value = true;
-    starSum.value++;
-
-    try {
-      await homeApi.saveStar(window.number);
-
-      setTimeout(() => {
-        staring.value = false;
-      }, 1000);
-    } catch (err) {
-      starSum.value--;
-    }
-  };
-
   onMounted(() => {
     getDetail();
 
@@ -205,5 +164,5 @@
 </script>
 
 <style lang="scss" scoped>
-  @import './index.zgrs.scss';
+  @import './index.syjy.scss';
 </style>

src/views/home/index.syjy.tsx

@@ -8,13 +8,13 @@ import Vrcon from './components/vrcon';
 import Menu from './components/menu';
 import GuiLoading from './components/gui-loading';
 import Popup from './components/popup';
-import BackIcon from '@/assets/images/zgrs/back.png';
-import './index.zgrs.scss';
+import BackIcon from '@/assets/images/syjy/icon-back-min.png';
+import './index.syjy.scss';
 
 // @ts-ignore
 window.hoticon = {
-  default: '/images/zgrs/point.png',
-  higt: '/images/zgrs/point2.png',
+  default: '/images/syjy/icon-hot-min.png',
+  higt: '/images/syjy/icon-hot-min.png',
 };
 
 export default defineComponent({