shabi

README.md

@@ -18,6 +18,8 @@
 
 内容扩展页 回到这一页时复原
 
+内容扩展页 标题装饰小圈
+
 ### 功能
 转场视频
 

src/views/HomeView.vue

@@ -278,7 +278,7 @@ onMounted(() => {
   scrollerEl.value.addEventListener('scroll', onScroll)
 })
 onBeforeUnmount(() => {
-  scrollerEl.value.addEventListener('scroll', onScroll)
+  scrollerEl.value.removeEventListener('scroll', onScroll)
 })
 
 const isShowOperationTip = ref(true)

src/views/MoreContent.vue

@@ -16,13 +16,28 @@
         draggable="false"
       >
 
+      <HotspotComp
+        class="hotspot"
+        :style="{
+          left: hotspotLeft + 'px',
+        }"
+        @click="router.push({
+          name: 'BambooHot',
+        })"
+      />
+
       <div
         class="shuang-gou-she-se-group"
         :style="{
           left: shuangGouSheSeGroupLeft + 'px'
         }"
       >
-        <button class="watch-detail">
+        <button
+          class="watch-detail"
+          @click="router.push({
+            name: 'ShuanggouDetail',
+          })"
+        >
           查看详情
         </button>
         <h2 class="group-title">
@@ -64,22 +79,11 @@
           墨竹
         </h2>
       </div>
-
-      <button
-        @click="router.push({
-          name: 'BambooHot',
-        })"
-      >
-        竹子热点
-      </button>
-      <button
-        @click="router.push({
-          name: 'Game',
-        })"
-      >
-        “《无尽藏》线上展”与“《修篁树石图》画作创作”入口页
-      </button>
     </div>
+
+    <BtnBack
+      @click="router.go(-1)"
+    />
   </div>
 </template>
 
@@ -118,6 +122,12 @@ watch(translateLength, (v) => {
   tempBgLeft.value = tempBgInitialLeft - v
 })
 
+const hotspotInitialLeft = 71 * windowHeight.value / windowHeightDesign
+const hotspotLeft = ref(hotspotInitialLeft)
+watch(translateLength, (v) => {
+  hotspotLeft.value = hotspotInitialLeft - v
+})
+
 const shuangGouSheSeGroupInitialLeft = 216 * windowHeight.value / windowHeightDesign
 const shuangGouSheSeGroupLeft = ref(shuangGouSheSeGroupInitialLeft)
 watch(translateLength, (v) => {
@@ -169,6 +179,10 @@ watch(translateLength, (v) => {
       position: absolute;
       height: 100%;
     }
+    >.hotspot{
+      position: absolute;
+      top: calc(385px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+    }
     >.shuang-gou-she-se-group{
       position: absolute;
       top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));