更新

src/App.vue

@@ -11,7 +11,7 @@
   </router-view>
   <audio
     id="bg-music"
-    src="./configMultiMedia/music/music1.mp3"
+    src="./configMultiMedia/music/music2.mp3"
   />
 </template>
 

src/views/HomeView(横向滑动).vue

@@ -186,7 +186,8 @@
     <div
       class="hotspot-wrap"
       :style="{
-        top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`
+        top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        width: summaryOpacity > 0 ? `calc(215 / 308 * 100%)`: paintingWidth == 485 ? `110%`: `${paintingWidth / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
       }"
     >
       <HotspotForHomepage
@@ -217,22 +218,24 @@
         opacity: longDescOpacity,
       }"
     >
-      <h3>作品简介：</h3>
+      <!-- <h3>作品简介：</h3> -->
       <p
         v-for="(item, index) in homepagePaintingDesc"
         :key="index"
       >
         {{ item }}
       </p>
-      <h3>作者简介：</h3>
+      <!-- <h3>作者简介：</h3>
       <p
         v-for="(item, index) in homepageAuthorDesc"
         :key="index"
       >
         {{ item }}
-      </p>
+      </p> -->
     </div>
 
+    <div class="" />
+
 
 
     <!-- stem title -->
@@ -271,27 +274,24 @@
         top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: stemGreenOpacity,
       }"
-    >
-      {{ detailDescStem }}
-    </div>
+      v-html="detailDescStem"
+    />
     <div
       class="fixed-desc detail-desc-leaf"
       :style="{
         top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: leafGreenOpacity,
       }"
-    >
-      {{ detailDescLeaf }}
-    </div>
+      v-html="leafOpacity1 > 0 ? detailDescLeaf1 :leafOpacity2> 0? detailDescLeaf2:detailDescLeaf3"
+    />
     <div
       class="fixed-desc detail-desc-stone"
       :style="{
         top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: stoneGreenOpacity,
       }"
-    >
-      {{ detailDescStone }}
-    </div>
+      v-html="detailDescStone"
+    />
     <div
       class="fixed-desc summary-desc"
       :style="{
@@ -345,9 +345,9 @@
 
     <div
       ref="scrollerEl"
-      v-touch:swipe.left="onSwipeLeft"
-      v-touch:swipe.right="onSwipeRight"
       class="scroller"
+      @touchstart="handletouchstart($event)"
+      @touchend="touchEnd($event)"
     >
       <div
         class="inner"
@@ -449,7 +449,9 @@ const {
 const homepagePaintingDesc = configText.homepagePaintingDesc
 const homepageAuthorDesc = configText.homepageAuthorDesc
 const detailDescStem = configText.homepagePaintingDetailDescStem
-const detailDescLeaf = configText.homepagePaintingDetailDescLeaf
+const detailDescLeaf1 = configText.homepagePaintingDetailDescLeaf1
+const detailDescLeaf2 = configText.homepagePaintingDetailDescLeaf2
+const detailDescLeaf3 = configText.homepagePaintingDetailDescLeaf3
 const detailDescStone = configText.homepagePaintingDetailDescStone
 const summaryDesc = configText.homepagePaintingSummary
 
@@ -521,6 +523,7 @@ const paintingTop = computed(() => {
   return ret
 })
 
+
 const paintingWidthInitial = 308
 const paintingWidthMovedUp = 250
 const paintingWidthMovedDown = 485
@@ -576,7 +579,6 @@ const longDescOpacity = computed(() => {
   return ret
 })
 watch(scrollerElScrollTop, (vNew, vOld) => {
-  console.log('scrollerElScrollTop', vNew / scrollerEl.value.scrollHeight)
   if (vNew > paintingMoveUpFinishAt) {
     // longDesc.value.scrollTop = vNew - paintingMoveUpFinishAt
   } else if (vNew < vOld && vNew <= paintingMoveUpFinishAt) {
@@ -942,8 +944,8 @@ const sizeOpacity = computed(() => {
 const isShowHotspot = computed(() => {
   let ret = null
 
-  // console.log('scrollerElScrollTop.value', scrollerElScrollTop.value <= sizeShowAt)
-  if (scrollerElScrollTop.value <= sizeShowAt && scrollerElScrollTop.value > 0) {
+  console.log('scrollerElScrollTop.value', scrollerElScrollTop.value)
+  if (scrollerElScrollTop.value >= summaryShowAt) {
     ret = true
   } else {
     return false
@@ -995,8 +997,8 @@ function smoothScrollTo(element, finalPosition, duration = 500, startTime = perf
 const curStep = ref(0)
 
 const scrollerPositionList = [0, 0.115, 0.173, 0.265, 0.346, 0.416, 0.508, 0.589, 0.658, 0.716, 0.809, 1]
-const scrollerPositionTimeRight = [12000, 12000, 12000, 12000, 12000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
-const scrollerPositionTimeLeft = [12000, 12000, 12000, 12000, 12000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
+const scrollerPositionTimeRight = [6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
+const scrollerPositionTimeLeft = [6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
 
 
 const onSwipeLeft = () => {
@@ -1018,6 +1020,34 @@ const onSwipeRight = () => {
   }
 }
 
+const lastX = ref(0)
+// 开始滑动
+const handletouchstart = (event) => {
+  lastX.value = event.changedTouches[0].pageX
+}
+
+// 监听活动
+const touchEnd = (event) => {
+  let currentX = event.changedTouches[0].pageX
+  let tx = currentX - lastX.value
+  if (tx < 0) {
+    if (curStep.value < scrollerPositionList.length - 1) {
+      curStep.value ++
+      const pp = scrollerPositionList[curStep.value]
+      const startTime = performance.now()
+      requestAnimationFrame(() => {smoothScrollTo(scrollerEl.value, pp * scrollerEl.value.scrollHeight, scrollerPositionTimeRight[curStep.value], startTime)})
+    }
+  } else if (tx > 0) {
+    if (curStep.value > 0) {
+      curStep.value --
+      const pp = scrollerPositionList[curStep.value] * scrollerEl.value.scrollHeight
+      const startTime = performance.now()
+      requestAnimationFrame(() => {smoothScrollTo(scrollerEl.value, pp, scrollerPositionTimeLeft[curStep.value], startTime)})
+    }
+  }
+}
+
+
 
 function onClickGoNextPage() {
   isShowBtnGoNextPage.value = false
@@ -1032,6 +1062,9 @@ function onClickGoNextPage() {
 </script>
 
 <style lang="less" scoped>
+*{
+  transition: all 1s;
+}
 .home {
   width: 100%;
   height: 100%;
@@ -1187,9 +1220,10 @@ function onClickGoNextPage() {
   >.hotspot-wrap {
     position: absolute;
     left: 50%;
-    transform: translate(-50%, 0);
+    top: calc(92 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
+    transform: translate(-46%, 0);
     width: calc(264 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(434 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(517 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     z-index: 7;
     pointer-events: none;
 
@@ -1222,7 +1256,7 @@ function onClickGoNextPage() {
   >.long-desc {
     position: absolute;
     left: 50%;
-    bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translate(-50%, 0);
     color: white;
@@ -1271,6 +1305,18 @@ function onClickGoNextPage() {
     position:relative;
     z-index:2;
   }
+  >.detail-desc-stem{
+    display: block;
+    margin-top: 10%;
+  }
+  >.detail-desc-leaf{
+    display: block;
+    margin-top: 6%;
+  }
+  >.detail-desc-stone{
+    display: block;
+    margin-top: 8%;
+  }
 
 
 
@@ -1391,4 +1437,4 @@ function onClickGoNextPage() {
     transform: translate(-50%, 0);
   }
 }
-</style>
+</style>

src/views/HomeView.vue

@@ -81,13 +81,13 @@
       >
       <img
         class="painting-stem"
-        src="@/assets/images/home-painting.jpg"
+        src="@/assets/images/home-painting1.jpg"
         alt=""
         draggable="false"
       >
       <img
         class="painting-stem"
-        src="@/assets/images/home-painting.jpg"
+        src="@/assets/images/home-painting2.jpg"
         alt=""
         draggable="false"
       >
@@ -121,12 +121,12 @@
         draggable="false"
       >
       <img
-        class="painting-leaf"
+        class="painting-leaf-hight"
         :style="{
           opacity: leafOpacity,
           zIndex: 2,
         }"
-        src="@/assets/images/home-2.jpg"
+        src="@/assets/images/img_zhujie-min.jpg"
         alt=""
         draggable="false"
       >
@@ -218,20 +218,56 @@
         opacity: longDescOpacity,
       }"
     >
-      <h3>作品简介：</h3>
+      <!-- <h3>作品简介：</h3> -->
       <p
         v-for="(item, index) in homepagePaintingDesc"
         :key="index"
       >
         {{ item }}
       </p>
-      <h3>作者简介：</h3>
+      <!-- <h3>作者简介：</h3>
       <p
         v-for="(item, index) in homepageAuthorDesc"
         :key="index"
       >
         {{ item }}
-      </p>
+      </p> -->
+    </div>
+
+    <!-- 展开作者简介 -->
+
+    <div
+      class="up-icon"
+      :style="{
+        top: `${(paintingTop + paintingHeight + 300) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        opacity: longDescOpacity,
+      }"
+      @click="isShowAuthorDesc = true"
+    >
+      <img src="@/assets/images/icon_up.png">
+    </div>
+    <div
+      v-show="isShowAuthorDesc"
+      class="author-box"
+    >
+      <img
+        class="top-icon"
+        src="@/assets/images/img_author.png"
+        alt=""
+      >
+      <div class="author-desc">
+        <p
+          v-for="(item, index) in homepageAuthorDesc"
+          :key="index"
+        >
+          {{ item }}
+        </p>
+      </div>
+      <img
+        class="down-icon"
+        src="@/assets/images/icon_down.png"
+        @click="isShowAuthorDesc = false"
+      >
     </div>
 
 
@@ -242,6 +278,7 @@
       :style="{
         top: `${( stemOpacity1 > 0 || stemOpacity2 >0? paintingTop + 670 : paintingTop + 750 ) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: stemTextOpacity,
+
       }"
     >
       三竿修竹
@@ -257,7 +294,7 @@
       卧石
     </div>
 
-    <div
+    <!-- <div
       class="fixed-desc detail-title-stem"
       :style="{
         top: `${( leafOpacity1 > 0 || leafOpacity2 >0 || leafOpacity3 >0? paintingTop + 330 : paintingTop + 410 ) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
@@ -265,7 +302,7 @@
       }"
     >
       竹叶
-    </div>
+    </div> -->
     <div
       class="fixed-desc detail-desc-stem"
       :style="{
@@ -343,9 +380,9 @@
 
     <div
       ref="scrollerEl"
-      v-touch:swipe.left="onSwipeLeft"
-      v-touch:swipe.right="onSwipeRight"
       class="scroller"
+      @touchstart="handletouchstart($event)"
+      @touchend="touchEnd($event)"
     >
       <div
         class="inner"
@@ -444,6 +481,12 @@ const {
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
+const isShowAuthorDesc = ref(false)
+
+// 竹叶放大过程
+const shartBigAt = 0.408 * scrollerEl.value.scrollHeight
+// const startEndAt =
+
 const homepagePaintingDesc = configText.homepagePaintingDesc
 const homepageAuthorDesc = configText.homepageAuthorDesc
 const detailDescStem = configText.homepagePaintingDetailDescStem
@@ -457,6 +500,7 @@ const scrollerEl = ref(null)
 const scrollerElScrollTop = ref(0)
 function onScroll() {
   scrollerElScrollTop.value = scrollerEl.value.scrollTop
+  console.log('当前滚动比例', scrollerEl.value.scrollTop / scrollerEl.value.scrollHeight)
 }
 onMounted(() => {
   scrollerEl.value.addEventListener('scroll', onScroll)
@@ -541,6 +585,9 @@ const paintingWidth = computed(() => {
   return ret
 })
 
+// 叶子细节放大
+// const painting
+
 const paintingHeightInitial = 523
 const paintingHeightMovedUp = 425
 let paintingHeightMovedDown = 758
@@ -587,18 +634,20 @@ watch(scrollerElScrollTop, (vNew, vOld) => {
 
 // 第一页
 const stemShowAt = longDescHideFinishAt + window.innerHeight * 0
-const stemShowFinishAt = stemShowAt + window.innerHeight * 0.25
-const stemHideAt = stemShowFinishAt + window.innerHeight * 0.3
+const stemShowFinishAt = stemShowAt + window.innerHeight * 0.45
+const stemHideAt = stemShowFinishAt + window.innerHeight * 0.1
 const stemHideFisishAt = stemHideAt + window.innerHeight * 0.25
 const stemOpacity = computed(() => {
   let ret = null
   if (scrollerElScrollTop.value <= stemShowAt) {
     ret = 0
   } else if (scrollerElScrollTop.value > stemShowAt && scrollerElScrollTop.value < stemShowFinishAt) {
-    ret = (scrollerElScrollTop.value - stemShowAt) / (stemShowFinishAt - stemShowAt)
+    // ret = (scrollerElScrollTop.value - stemShowAt) / (stemShowFinishAt - stemShowAt)
+    ret = 0
   } else if (scrollerElScrollTop.value >= stemShowFinishAt && scrollerElScrollTop.value <= stemHideAt) {
     ret = 1
-  } else if (scrollerElScrollTop.value > stemHideAt && scrollerElScrollTop.value < stemHideFisishAt) {
+  // } else if (scrollerElScrollTop.value > stemHideAt && scrollerElScrollTop.value < stemHideFisishAt) {
+  } else if (scrollerElScrollTop.value > stemHideAt) {
     ret = 1 - (scrollerElScrollTop.value - stemHideAt) / (stemHideFisishAt - stemHideAt)
   } else {
     ret = 0
@@ -653,7 +702,7 @@ const stemOpacity2 = computed(() => {
 const stemShowText = stemShowAt
 const stemShowTextFinishAt = stemShowFinishAt
 const stemTextHideAt = stemHideAt2
-const stemHideTextFisishAt = stemHideFisishAt2
+const stemHideTextFisishAt = stemHideFisishAt2 + 220
 const stemTextOpacity = computed(() => {
   let ret = null
   if (scrollerElScrollTop.value <= stemShowText) {
@@ -942,7 +991,6 @@ const sizeOpacity = computed(() => {
 const isShowHotspot = computed(() => {
   let ret = null
 
-  console.log('scrollerElScrollTop.value', scrollerElScrollTop.value)
   if (scrollerElScrollTop.value >= summaryShowAt) {
     ret = true
   } else {
@@ -994,9 +1042,9 @@ function smoothScrollTo(element, finalPosition, duration = 500, startTime = perf
 
 const curStep = ref(0)
 
-const scrollerPositionList = [0, 0.115, 0.173, 0.265, 0.346, 0.416, 0.508, 0.589, 0.658, 0.716, 0.809, 1]
-const scrollerPositionTimeRight = [12000, 12000, 12000, 12000, 12000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
-const scrollerPositionTimeLeft = [12000, 12000, 12000, 12000, 12000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
+const scrollerPositionList = [0, 0.115, 0.210, 0.265, 0.346, 0.416, 0.508, 0.589, 0.658, 0.716, 0.809, 1]
+const scrollerPositionTimeRight = [6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
+const scrollerPositionTimeLeft = [6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
 
 
 const onSwipeLeft = () => {
@@ -1018,6 +1066,34 @@ const onSwipeRight = () => {
   }
 }
 
+const lastX = ref(0)
+// 开始滑动
+const handletouchstart = (event) => {
+  lastX.value = event.changedTouches[0].pageX
+}
+
+// 监听活动
+const touchEnd = (event) => {
+  let currentX = event.changedTouches[0].pageX
+  let tx = currentX - lastX.value
+  if (tx < 0) {
+    if (curStep.value < scrollerPositionList.length - 1) {
+      curStep.value ++
+      const pp = scrollerPositionList[curStep.value]
+      const startTime = performance.now()
+      requestAnimationFrame(() => {smoothScrollTo(scrollerEl.value, pp * scrollerEl.value.scrollHeight, scrollerPositionTimeRight[curStep.value], startTime)})
+    }
+  } else if (tx > 0) {
+    if (curStep.value > 0) {
+      curStep.value --
+      const pp = scrollerPositionList[curStep.value] * scrollerEl.value.scrollHeight
+      const startTime = performance.now()
+      requestAnimationFrame(() => {smoothScrollTo(scrollerEl.value, pp, scrollerPositionTimeLeft[curStep.value], startTime)})
+    }
+  }
+}
+
+
 
 function onClickGoNextPage() {
   isShowBtnGoNextPage.value = false
@@ -1032,6 +1108,9 @@ function onClickGoNextPage() {
 </script>
 
 <style lang="less" scoped>
+*{
+  transition: all 1s;
+}
 .home {
   width: 100%;
   height: 100%;
@@ -1181,6 +1260,15 @@ function onClickGoNextPage() {
       transform: translate(-50%, -50%);
       width: calc(225 / 308 * 100%);
     }
+    >.painting-leaf-hight{
+      opacity: 0 !important;
+      z-index: 2;
+      width: 100%;
+      transform: translate(0px,0px);
+      left: 0;
+      top:0;
+      position: fixed;
+    }
 
   }
 
@@ -1223,15 +1311,15 @@ function onClickGoNextPage() {
   >.long-desc {
     position: absolute;
     left: 50%;
-    bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translate(-50%, 0);
     color: white;
-    overflow: auto;
+    overflow: hidden;
     font-family: KaiTi, KaiTi;
     color: #FFFFFF;
     animation: none;
-    z-index: 10;
+
 
     >h3 {
       font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -1248,6 +1336,60 @@ function onClickGoNextPage() {
     }
   }
 
+  >.up-icon{
+      position: absolute;
+      transform: translateX(-50%);
+      left: 50%;
+      z-index: 12;
+      >img{
+        width: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+
+    >.author-box{
+      width: 100%;
+      height: 100%;
+      background: rgba(85,116,83,0.8);
+      position: fixed;
+      top: 0;
+      left: 0;
+      padding: 0 10%;
+      z-index: 12;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      >.top-icon{
+        width: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        position: absolute;
+        top: 10%;
+        transform: translateX(-50%);
+        left: 50%;
+        margin-bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+      }
+      >.author-desc{
+        width: 100%;
+        color: white;
+        overflow: auto;
+        font-family: KaiTi, KaiTi;
+        color: #FFFFFF;
+        animation: none;
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+      }
+
+      >.down-icon{
+        position: absolute;
+        transform: translateX(-50%);
+        left: 50%;
+        bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        width: calc(35 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+
   >.fixed-desc {
     position: absolute;
     left: 50%;
@@ -1275,6 +1417,7 @@ function onClickGoNextPage() {
   >.detail-desc-stem{
     display: block;
     margin-top: 10%;
+    transition: all 0.5s;
   }
   >.detail-desc-leaf{
     display: block;
@@ -1369,7 +1512,7 @@ function onClickGoNextPage() {
     top: 0;
     width: 100%;
     height: 100%;
-    overflow: hidden;
+    overflow: auto;
     transition: transform 2s ease;
     z-index:3;