Merge branch 'master' of http://192.168.0.115:3000/renyicun/NanjingMuseumWuJinZang

README.md

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

src/store/index.js

@@ -9,7 +9,7 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    haveShownStartup: process.env.VUE_APP_CLI_MODE === 'dev' ? false : false,
+    haveShownStartup: process.env.VUE_APP_CLI_MODE === 'dev' ? true : false,
     isStartupInvisible: true,
     // loginStatus: loginStatusEnum.notLogin,
     // token: '',

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

@@ -1,50 +1,110 @@
 <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"
+      >
+
+      <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"
+          @click="router.push({
+            name: 'ShuanggouDetail',
+          })"
+        >
+          查看详情
+        </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>
+    </div>
+
+    <BtnBack
+      @click="router.go(-1)"
+    />
+
+    <OperationTip
+      class="operation-tip"
+      :direction="'h'"
+      :text="'下一章'"
+      :is-show="isShowOperationTip"
+      :color="'green'"
+    />
   </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'
+import OperationTip from "@/components/OperationTip.vue"
+import useSizeAdapt from "@/useFunctions/useSizeAdapt.js"
 
 const route = useRoute()
 const router = useRouter()
@@ -52,14 +112,145 @@ const store = useStore()
 
 const $env = inject('$env')
 
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+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 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) => {
+  shuangGouSheSeGroupLeft.value = shuangGouSheSeGroupInitialLeft - v
+})
+
+const moZhuGroupInitialLeft = 936 * windowHeight.value / windowHeightDesign
+const moZhuGroupLeft = ref(moZhuGroupInitialLeft)
+watch(translateLength, (v) => {
+  moZhuGroupLeft.value = moZhuGroupInitialLeft - v
+})
+
+const isShowOperationTip = ref(true)
+const unwatch = watch(translateLength, (v) => {
+  console.log(v)
+  isShowOperationTip.value = false
+  unwatch()
+  // if (Math.abs(v - (scrollerEl.value.scrollHeight - scrollerEl.value.clientHeight)) <= 1) {
+  //   router.push({
+  //     name: 'MoreContent',
+  //   })
+  // }
+})
 </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%;
+    }
+    >.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'));
+      >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();
+      }
+    }
+  }
+  .operation-tip{
+    position: absolute;
+    right: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(74 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
 }
 </style>

src/views/PaintingDetail.vue

@@ -174,10 +174,9 @@ onMounted(() => {
     descTextElScrollTop.value = descTextEl.value.scrollTop
   })
 })
-watch(descTextElScrollTop, (v) => {
-  if (v > 0) {
-    isShowOperationTip.value = false
-  }
+const unwatch = watch(descTextElScrollTop, (v) => {
+  isShowOperationTip.value = false
+  unwatch()
 })
 
 const isAnimating = ref(true)

src/views/PaintingList.vue

@@ -274,10 +274,9 @@ const specialDesc = configExcel['其他'][4]['修篁树石图'][1]['作品简介
 const isShowPaintingStyleDesc = ref(false)
 
 const isShowOperationTip = ref(true)
-watch(menuElScrollLeft, (v) => {
-  if (v > 0) {
-    isShowOperationTip.value = false
-  }
+const unwatch = watch(menuElScrollLeft, (v) => {
+  isShowOperationTip.value = false
+  unwatch()
 })
 
 </script>

src/views/PoemList.vue

@@ -224,11 +224,10 @@ const onSlideChange = (e) => {
  * 操作提示
  */
 const isShowOperationTip = ref(true)
-watch(currentIdx, (v) => {
-  if (isShowOperationTip.value) {
-    isShowOperationTip.value = false
-    isShowOperationTipShadow.value = false
-  }
+const unwatch = watch(currentIdx, (v) => {
+  isShowOperationTip.value = false
+  isShowOperationTipShadow.value = false
+  unwatch()
 })
 const isShowOperationTipShadow = ref(true)
 setTimeout(() => {