1

README.md

@@ -10,16 +10,20 @@
 
 首页热点详情的背景色问题
 
+内容扩展页 按钮边框
+
 内容扩展页 落叶开发
 
 内容扩展页 滚动锚定效果开发
 
-### 功能
-启动页开发
+内容扩展页 回到这一页时复原
 
+### 功能
 转场视频
 
 内容扩展页开发
 
-### 成果
-保存组件：序列帧
+### 保存成果
+组件：序列帧
+
+useFunction: useSmoothSwipe.js

src/views/MoreContent.vue

@@ -1,50 +1,96 @@
 <template>
-  <div class="more-content">
-    <!-- <button>双勾设色</button> -->
-    <button
-      @click="router.push({
-        name: 'PoemList'
-      })"
+  <div
+    class="more-content"
+  >
+    <div
+      ref="scrollTarget"
+      class="scroll-target"
     >
-      人文
-    </button>
-    <button
-      @click="router.push({
-        name: 'PaintingList'
-      })"
-    >
-      画作
-    </button>
-    <button
-      @click="router.push({
-        name: 'BambooBook',
-      })"
-    >
-      竹谱
-    </button>
-    <button
-      @click="router.push({
-        name: 'BambooHot',
-      })"
-    >
-      竹子热点
-    </button>
-    <button
-      @click="router.push({
-        name: 'Game',
-      })"
-    >
-      “《无尽藏》线上展”与“《修篁树石图》画作创作”入口页
-    </button>
+      <img
+        class="temp-bg"
+        :style="{
+          left: tempBgLeft + 'px'
+        }"
+        src="@/assets/images/bg-more-content.jpg"
+        alt=""
+        draggable="false"
+      >
+
+      <div
+        class="shuang-gou-she-se-group"
+        :style="{
+          left: shuangGouSheSeGroupLeft + 'px'
+        }"
+      >
+        <button class="watch-detail">
+          查看详情
+        </button>
+        <h2 class="group-title">
+          双钩设色
+        </h2>
+      </div>
+
+      <div
+        class="mo-zhu-group"
+        :style="{
+          left: moZhuGroupLeft + 'px'
+        }"
+      >
+        <div class="button-group">
+          <button
+            class="poem"
+            @click="router.push({
+              name: 'PoemList'
+            })"
+          >
+            人文
+          </button>
+          <button
+            @click="router.push({
+              name: 'PaintingList'
+            })"
+          >
+            画作
+          </button>
+          <button
+            @click="router.push({
+              name: 'BambooBook',
+            })"
+          >
+            竹谱
+          </button>
+        </div>
+        <h2 class="group-title">
+          墨竹
+        </h2>
+      </div>
+
+      <button
+        @click="router.push({
+          name: 'BambooHot',
+        })"
+      >
+        竹子热点
+      </button>
+      <button
+        @click="router.push({
+          name: 'Game',
+        })"
+      >
+        “《无尽藏》线上展”与“《修篁树石图》画作创作”入口页
+      </button>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, inject } from "vue"
+import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import PoemList from '@/views/PoemList.vue'
 import paintingList from '@/views/PaintingList.vue'
+import useSmoothSwipe from '@/useFunctions/useSmoothSwipe.js'
+import { useWindowSize } from '@vueuse/core'
 
 const route = useRoute()
 const router = useRouter()
@@ -52,14 +98,115 @@ const store = useStore()
 
 const $env = inject('$env')
 
+const windowWidthDesign = 1560
+const windowHeightDesign = 844
+
+const scrollTarget = ref(null)
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+const maxTranslateLength = computed(() => {
+  return windowHeight.value * windowWidthDesign / windowHeightDesign
+})
+const { haveSwipedThisTime, translateLength } = useSmoothSwipe({
+  scrollTargetRef: scrollTarget,
+  maxTranslateLength,
+  viewportWidth: windowWidth,
+})
+
+const tempBgInitialLeft = 0
+const tempBgLeft = ref(tempBgInitialLeft)
+watch(translateLength, (v) => {
+  tempBgLeft.value = tempBgInitialLeft - v
+})
+
+const shuangGouSheSeGroupInitialLeft = 216 * windowHeight.value / windowHeightDesign
+const shuangGouSheSeGroupLeft = ref(shuangGouSheSeGroupInitialLeft)
+watch(translateLength, (v) => {
+  shuangGouSheSeGroupLeft.value = shuangGouSheSeGroupInitialLeft - v
+})
+
+const moZhuGroupInitialLeft = 936 * windowHeight.value / windowHeightDesign
+const moZhuGroupLeft = ref(moZhuGroupInitialLeft)
+watch(translateLength, (v) => {
+  moZhuGroupLeft.value = moZhuGroupInitialLeft - v
+})
+
+
 </script>
 
 <style lang="less" scoped>
+.button-common-style{
+  font-family: KaiTi, KaiTi;
+  font-weight: 400;
+  font-size: calc(16px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+  writing-mode: vertical-lr;
+  letter-spacing: 0.2em;
+  white-space: pre;
+}
+.group-title-common-style{
+  font-family: KingHwa_OldSong, KingHwa_OldSong;
+  font-weight: 400;
+  font-size: calc(48px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+  color: #474747;
+  writing-mode: vertical-lr;
+  letter-spacing: 0.2em;
+  white-space: pre;
+}
+
 .more-content{
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
+  user-select: none;
+  >.scroll-target{
+    height: 100%;
+    width: fit-content;
+    display: flex;
+    gap: 100px;
+    overflow: hidden;
+    >img.temp-bg{
+      position: absolute;
+      height: 100%;
+    }
+    >.shuang-gou-she-se-group{
+      position: absolute;
+      top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      >button.watch-detail{
+        position: absolute;
+        top: calc(182px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: 0;
+        color: #474747;
+        .button-common-style();
+      }
+      >h2.group-title{
+        position: absolute;
+        top: 0;
+        left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
+        .group-title-common-style();
+      }
+    }
+    >.mo-zhu-group{
+      position: absolute;
+      top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      >.button-group{
+        position: absolute;
+        top: calc(75px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        >button{
+          color: #B8AE7A;
+          .button-common-style();
+        }
+      }
+      >h2.group-title{
+        position: absolute;
+        top: 0;
+        left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
+        .group-title-common-style();
+      }
+    }
+  }
 }
 </style>