fix:更新

public/configText.js

@@ -9,7 +9,9 @@ var configText = {
     `李衎喜欢在绢上作画，尤其是晚期作品，因其身为官场显贵，有财力购买好绢，与南方文人好用纸大异其趣；又因绢质能增画面清贵感，符合其地位。此外，绢画是唐宋传统，可以增加古意。`,
     // `李衎早期竹图受金代王庭筠影响，如《竹梧兰石四清图》；晚期以文同笔墨写“真竹”，竹子的造型多源于他对竹子生态的研究。他的创作理念始终以“清”为指导原则，特别重视清润，这是他最根本的美学理念，并通过画作表达出一套伦理道德观念，因此他的画有强烈的象征主义特征。"`,
   ],
-  homepagePaintingDetailDescStem: '<span>坡石一隅的三竿修竹，两竿近，一竿远，近低</span><span style="font-size:1.3em">远高</span><span>，近开</span><span style="font-size:1.3em">远合</span><span>，两竿向右，一竿向左，</span><span style="font-size:1.3em">一聚</span><span>一分，构图稳定，法度森严。</span>',
+  homepagePaintingDetailDescStem2: '<span>坡石一隅的三竿修竹，两竿近，一竿远，近低</span><span style="font-size:1.3em">远高</span><span>，近开</span><span style="font-size:1.3em">远合</span><span>，两竿向右，一竿向左，</span><span style="font-size:1.3em">一聚</span><span>一分，构图稳定，法度森严。</span>',
+  homepagePaintingDetailDescStem1: '<span>坡石一隅的三竿修竹，两竿近，一竿远，</span><span style="font-size:1.3em">近低</span><span>远高，</span><span style="font-size:1.3em">近开</span><span>远合，两竿向右，一竿向左，一聚</span><span style="font-size:1.3em">一分</span><span>，构图稳定，法度森严。</span>',
+
   homepagePaintingDetailDescLeaf1: '<span>竹叶的画法以</span><span style="font-size:1.3em" >“个”</span><span>“介"“分”\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
   homepagePaintingDetailDescLeaf2: '<span>竹叶的画法以“个”</span><span style="font-size:1.3em">“介"</span><span>“分”\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
   homepagePaintingDetailDescLeaf3: '<span>竹叶的画法以“个”“介"</span><span style="font-size:1.3em" >“分”</span><span>\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',

src/App.vue

@@ -12,6 +12,7 @@
   <audio
     id="bg-music"
     src="./configMultiMedia/music/music2.mp3"
+    style="opacity: 0;"
   />
 </template>
 

src/views/BambooBookView.vue

@@ -48,7 +48,6 @@ const isChange = ref(false)
 const onSlideRight = () => {
   curIndex.value = 1
   isChange.value = true
-  console.log('滑动变化了，通知第二个页面开始倒计时', isChange.value)
 }
 const onSlideLeft = () => {
   isStart.value = false

src/views/HomeView copy.vue

@@ -285,6 +285,7 @@
         class="fade-to-next-page"
         src="@/assets/videos/fade-from-home-to-more-content.mp4"
         playsinline
+        muted
         webkit-playsinline="true"
         x5-video-player-type="h5"
         @ended="router.push({

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

@@ -399,6 +399,7 @@
         playsinline
         webkit-playsinline="true"
         x5-video-player-type="h5"
+        muted
         @ended="router.push({
           name: 'MoreContentChange',
         })"

src/views/HomeView.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-
-    class="home"
-  >
+  <div class="home">
     <div class="bg-mask" />
     <Transition name="fade-out">
       <Startup
@@ -36,8 +33,10 @@
       class="painting-wrap"
       :style="{
         top: summaryOpacity > 0 ? `${90 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px` : `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        width: summaryOpacity > 0 ? `calc(225 / 308 * 100%)`: paintingWidth == 485 ? `110%`: `${paintingWidth / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        height: summaryOpacity > 0 ? `${523 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px` :`${paintingHeight / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        width: summaryOpacity > 0 ? `calc(225 / 308 * 100%)` : paintingWidth == 485 ? `110%` : `${paintingWidth / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        height: summaryOpacity > 0 ? `${523 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px` : `${paintingHeight / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        transform: `${currentPosition}`,
+        transition: currentPosition != '' ? `all 1.5s` : ``
       }"
     >
       <div
@@ -71,7 +70,7 @@
       <!-- 绿色幕布层 -->
       <div
         class="green-box"
-        :style="{opacity: stemGreenOpacity || leafGreenOpacity || stoneGreenOpacity}"
+        :style="{ opacity: stemGreenOpacity }"
       />
       <img
         class="painting-border"
@@ -91,46 +90,125 @@
         alt=""
         draggable="false"
       >
+
       <img
         class="painting-stem"
+        src="@/assets/images/img_fen-min.png"
         :style="{
-          opacity: stemOpacity,
+          opacity: leafOpacity3,
+          zIndex: 2,
         }"
-        src="@/assets/images/home-1.jpg"
         alt=""
         draggable="false"
       >
+
       <img
         class="painting-stem"
+        src="@/assets/images/img_ge-min.png"
         :style="{
-          opacity: stemOpacity1,
+          opacity: leafOpacity1,
           zIndex: 2,
         }"
-        src="@/assets/images/home-1-1.jpg"
         alt=""
         draggable="false"
       >
+
+
+
       <img
         class="painting-stem"
+        src="@/assets/images/img_guanmu-min.png"
         :style="{
-          opacity: stemOpacity2,
+          opacity: stoneOpacity1,
+        }"
+        alt=""
+        draggable="false"
+      >
+
+      <img
+        class="painting-stem"
+        src="@/assets/images/img_jie-min.png"
+        alt=""
+        :style="{
+          opacity: leafOpacity2,
           zIndex: 2,
         }"
-        src="@/assets/images/home-1-2.jpg"
+        draggable="false"
+      >
+
+
+      <img
+        class="painting-stem"
+        src="@/assets/images/img_kumu-min.png"
+        :style="{
+          opacity: stoneOpacity2,
+        }"
+        alt=""
+        draggable="false"
+      >
+
+      <img
+        class="painting-stem"
+        src="@/assets/images/img_stone_all-min.png"
+        :style="{
+          opacity: stoneOpacity3,
+        }"
+        alt=""
+        draggable="false"
+      >
+
+      <img
+        class="painting-stem"
+        src="@/assets/images/img_stone-min.png"
+        :style="{
+          opacity: stoneOpacity,
+        }"
         alt=""
         draggable="false"
       >
+
       <img
-        class="painting-leaf-hight"
+        class="painting-stem"
+        src="@/assets/images/img_zhuye-min.png"
+        alt=""
         :style="{
           opacity: leafOpacity,
           zIndex: 2,
         }"
-        src="@/assets/images/img_zhujie-min.jpg"
+        draggable="false"
+      >
+      <img
+        class="painting-stem"
+        :style="{
+          opacity: stemOpacity,
+        }"
+        src="@/assets/images/home-1.jpg"
+        alt=""
+        draggable="false"
+      >
+      <img
+        class="painting-stem"
+        :style="{
+          opacity: stemOpacity1,
+          zIndex: 2,
+        }"
+        src="@/assets/images/home-1-1.jpg"
         alt=""
         draggable="false"
       >
       <img
+        class="painting-stem"
+        :style="{
+          opacity: stemOpacity2,
+          zIndex: 2,
+        }"
+        src="@/assets/images/home-1-2.jpg"
+        alt=""
+        draggable="false"
+      >
+
+
+      <!-- <img
         class="painting-leaf"
         :style="{
           opacity: leafOpacity1,
@@ -139,9 +217,9 @@
         src="@/assets/images/home-2-1.jpg"
         alt=""
         draggable="false"
-      >
+      > -->
 
-      <img
+      <!-- <img
         class="painting-leaf"
         :style="{
           opacity: leafOpacity2,
@@ -160,8 +238,8 @@
         src="@/assets/images/home-2-3.jpg"
         alt=""
         draggable="false"
-      >
-      <img
+      > -->
+      <!-- <img
         class="painting-stone"
         :style="{
           opacity: stoneOpacity,
@@ -169,8 +247,8 @@
         src="@/assets/images/home-3.jpg"
         alt=""
         draggable="false"
-      >
-      <img
+      > -->
+      <!-- <img
         class="painting-stone"
         :style="{
           opacity: stoneOpacity1,
@@ -179,15 +257,39 @@
         src="@/assets/images/home-3-1.jpg"
         alt=""
         draggable="false"
+      > -->
+    </div>
+
+    <!-- 叶子底部渐变层 -->
+    <div
+      v-show="leafOpacity1 > 0 || leafOpacity2 > 0 || leafOpacity3 > 0"
+      :style="{
+        opacity: leafTextOpacity,
+      }"
+      class="jianbian"
+    />
+
+    <!-- 石头文字层 -->
+
+    <div
+      class="stone-text-box"
+      :style="{
+        opacity: stoneOpacity3,
+      }"
+    >
+      <img
+        class="stone-text"
+        src="@/assets/images/stone-text-min.png"
       >
     </div>
 
+
     <!-- 热点层 -->
     <div
       class="hotspot-wrap"
       :style="{
         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`,
+        width: summaryOpacity > 0 ? `calc(215 / 308 * 100%)` : paintingWidth == 485 ? `110%` : `${paintingWidth / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
       }"
     >
       <HotspotForHomepage
@@ -273,12 +375,12 @@
 
 
     <!-- stem title -->
+    <!-- 上面 -->
     <div
       class="fixed-desc detail-title-stem"
       :style="{
-        top: `${( stemOpacity1 > 0 || stemOpacity2 >0? paintingTop + 670 : paintingTop + 750 ) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        opacity: stemTextOpacity,
-
+        top: `${paintingTop + 750 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        opacity:stemOpacity ,
       }"
     >
       三竿修竹
@@ -287,12 +389,22 @@
     <div
       class="fixed-desc detail-title-stem"
       :style="{
+        top: `${paintingTop + 500 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        opacity: stemTextOpacity2,
+      }"
+    >
+      三竿修竹
+    </div>
+
+    <!-- <div
+      class="fixed-desc detail-title-stem"
+      :style="{
         top: `${( stoneOpacity1 > 0 ? paintingTop + 500 : paintingTop + 580 ) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: stoneTextOpacity,
       }"
     >
       卧石
-    </div>
+    </div> -->
 
     <!-- <div
       class="fixed-desc detail-title-stem"
@@ -308,25 +420,27 @@
       :style="{
         top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: stemGreenOpacity,
+
       }"
-      v-html="detailDescStem"
+      v-html="stemOpacity1 > 0 ? detailDescStem1 : detailDescStem2 "
     />
     <div
       class="fixed-desc detail-desc-leaf"
       :style="{
         top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: leafGreenOpacity,
+        zIndex: 4,
       }"
-      v-html="leafOpacity1 > 0 ? detailDescLeaf1 :leafOpacity2> 0? detailDescLeaf2:detailDescLeaf3"
+      v-html="leafOpacity1 > 0 ? detailDescLeaf1 : leafOpacity2 > 0 ? detailDescLeaf2 : detailDescLeaf3"
     />
-    <div
+    <!-- <div
       class="fixed-desc detail-desc-stone"
       :style="{
         top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: stoneGreenOpacity,
       }"
       v-html="detailDescStone"
-    />
+    /> -->
     <div
       class="fixed-desc summary-desc"
       :style="{
@@ -340,35 +454,38 @@
     <div class="progress-bar">
       <div
         class="bar-artwork-desc"
+        :style="{
+          width: `${scrollerElScrollTop / summaryHideAt * 100}%`,
+        }"
       />
-      <img
+      <!-- <img
         class="progress-bar-node-1"
         src="@/assets/images/progress-bar-node-1.png"
+        v-show="scrollerElScrollTop / summaryHideAt > 0.10"
         alt=""
         draggable="false"
-      >
-      <div class="bar-author-desc" />
-      <img
+      > -->
+      <!-- <div class="bar-author-desc" /> -->
+      <!-- <img
         class="progress-bar-node-2"
         src="@/assets/images/progress-bar-node-2.png"
         alt=""
         draggable="false"
       >
-      <div class="bar-artwork-enjoy" />
       <img
         class="progress-bar-node-3"
         src="@/assets/images/progress-bar-node-3.png"
         alt=""
         draggable="false"
-      >
+      > -->
 
-      <div
+      <!-- <div
         class="mask"
         :style="{
           width: `${(1 - scrollerElScrollTop / summaryHideAt) * 100}%`,
           backgroundColor:stemGreenOpacity > 0 || leafGreenOpacity > 0 || stoneGreenOpacity > 0?'rgba(85,116,83,0.8)':''
         }"
-      />
+      /> -->
     </div>
     <OperationTip
       v-if="isStartupOver"
@@ -434,6 +551,7 @@
         playsinline
         webkit-playsinline="true"
         x5-video-player-type="h5"
+        muted
         @ended="router.push({
           name: 'MoreContentChange',
         })"
@@ -483,13 +601,13 @@ const {
 
 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
+const detailDescStem1 = configText.homepagePaintingDetailDescStem1
+const detailDescStem2 = configText.homepagePaintingDetailDescStem2
 const detailDescLeaf1 = configText.homepagePaintingDetailDescLeaf1
 const detailDescLeaf2 = configText.homepagePaintingDetailDescLeaf2
 const detailDescLeaf3 = configText.homepagePaintingDetailDescLeaf3
@@ -500,7 +618,7 @@ const scrollerEl = ref(null)
 const scrollerElScrollTop = ref(0)
 function onScroll() {
   scrollerElScrollTop.value = scrollerEl.value.scrollTop
-  console.log('当前滚动比例', scrollerEl.value.scrollTop / scrollerEl.value.scrollHeight)
+  console.log('当前滚动比例', scrollerElScrollTop.value / summaryHideAt, scrollerEl.value.scrollTop / scrollerEl.value.scrollHeight)
 }
 onMounted(() => {
   scrollerEl.value.addEventListener('scroll', onScroll)
@@ -585,8 +703,6 @@ const paintingWidth = computed(() => {
   return ret
 })
 
-// 叶子细节放大
-// const painting
 
 const paintingHeightInitial = 523
 const paintingHeightMovedUp = 425
@@ -646,7 +762,7 @@ const stemOpacity = computed(() => {
     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 {
@@ -699,6 +815,7 @@ const stemOpacity2 = computed(() => {
   return ret
 })
 
+
 const stemShowText = stemShowAt
 const stemShowTextFinishAt = stemShowFinishAt
 const stemTextHideAt = stemHideAt2
@@ -719,6 +836,27 @@ const stemTextOpacity = computed(() => {
   return ret
 })
 
+const stemShowText2 = stemShowAt1
+const stemShowTextFinishAt2 = stemShowFinishAt1
+const stemTextHideAt2 = stemHideAt2
+const stemHideTextFisishAt2 = stemHideFisishAt2 + 220
+const stemTextOpacity2 = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= stemShowText2) {
+    ret = 0
+  } else if (scrollerElScrollTop.value > stemShowText2 && scrollerElScrollTop.value < stemShowTextFinishAt2) {
+    ret = (scrollerElScrollTop.value - stemShowText2) / (stemShowTextFinishAt2 - stemShowText2)
+  } else if (scrollerElScrollTop.value >= stemShowTextFinishAt2 && scrollerElScrollTop.value <= stemTextHideAt2) {
+    ret = 1
+  } else if (scrollerElScrollTop.value > stemTextHideAt2 && scrollerElScrollTop.value < stemHideTextFisishAt2) {
+    ret = 1 - (scrollerElScrollTop.value - stemTextHideAt2) / (stemHideTextFisishAt2 - stemTextHideAt2)
+  } else {
+    ret = 0
+  }
+  return ret
+})
+
+
 const stemShowGreen = stemShowAt1
 const stemShowGreenFinishAt = stemShowFinishAt1
 const stemGreenHideAt = stemHideAt2
@@ -759,6 +897,8 @@ const leafOpacity = computed(() => {
   return ret
 })
 
+
+
 const leafShowAt1 = leafHideFisishAt + (0 * window.innerHeight)
 const leafShowFinishAt1 = leafShowAt1 + (0.25 * window.innerHeight)
 const leafHideAt1 = leafShowFinishAt1 + (0.3 * window.innerHeight)
@@ -828,7 +968,7 @@ const leafTextOpacity = computed(() => {
   if (scrollerElScrollTop.value <= leafShowText) {
     ret = 0
   } else if (scrollerElScrollTop.value > leafShowText && scrollerElScrollTop.value < leafShowTextFinishAt) {
-    ret = (scrollerElScrollTop.value - leafShowText) / (leafShowTextFinishAt - leafShowText)
+    ret = 1 - (scrollerElScrollTop.value - leafShowText) / (leafShowTextFinishAt - leafShowText)
   } else if (scrollerElScrollTop.value >= leafShowTextFinishAt && scrollerElScrollTop.value <= leafTextHideAt) {
     ret = 1
   } else if (scrollerElScrollTop.value > leafTextHideAt && scrollerElScrollTop.value < leafHideTextFisishAt) {
@@ -906,6 +1046,48 @@ const stoneOpacity1 = computed(() => {
   return ret
 })
 
+
+const stoneShowAt2 = stoneHideFinishAt1 + (0 * window.innerHeight)
+const stoneShowFinishAt2 = stoneShowAt2 + (0.25 * window.innerHeight)
+const stoneHideAt2 = stoneShowFinishAt2 + (0.3 * window.innerHeight)
+const stoneHideFinishAt2 = stoneHideAt2 + (0.25 * window.innerHeight)
+const stoneOpacity2 = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= stoneShowAt2) {
+    ret = 0
+  } else if (scrollerElScrollTop.value > stoneShowAt2 && scrollerElScrollTop.value < stoneShowFinishAt2) {
+    ret = (scrollerElScrollTop.value - stoneShowAt2) / (stoneShowFinishAt2 - stoneShowAt2)
+  } else if (scrollerElScrollTop.value >= stoneShowFinishAt2 && scrollerElScrollTop.value <= stoneHideAt2) {
+    ret = 1
+  } else if (scrollerElScrollTop.value > stoneHideAt2 && scrollerElScrollTop.value < stoneHideFinishAt2) {
+    ret = 1 - (scrollerElScrollTop.value - stoneHideAt2) / (stoneHideFinishAt2 - stoneHideAt2)
+  } else {
+    ret = 0
+  }
+  return ret
+})
+
+
+const stoneShowAt3 = stoneHideFinishAt2 + (0 * window.innerHeight)
+const stoneShowFinishAt3 = stoneShowAt3 + (0.25 * window.innerHeight)
+const stoneHideAt3 = stoneShowFinishAt3 + (0.3 * window.innerHeight)
+const stoneHideFinishAt3 = stoneHideAt3 + (0.25 * window.innerHeight)
+const stoneOpacity3 = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= stoneShowAt3) {
+    ret = 0
+  } else if (scrollerElScrollTop.value > stoneShowAt3 && scrollerElScrollTop.value < stoneShowFinishAt3) {
+    ret = (scrollerElScrollTop.value - stoneShowAt3) / (stoneShowFinishAt3 - stoneShowAt3)
+  } else if (scrollerElScrollTop.value >= stoneShowFinishAt3 && scrollerElScrollTop.value <= stoneHideAt3) {
+    ret = 1
+  } else if (scrollerElScrollTop.value > stoneHideAt3 && scrollerElScrollTop.value < stoneHideFinishAt3) {
+    ret = 1 - (scrollerElScrollTop.value - stoneHideAt3) / (stoneHideFinishAt3 - stoneHideAt3)
+  } else {
+    ret = 0
+  }
+  return ret
+})
+
 const stoneShowGreen = stoneShowAt1
 const stoneShowGreenFinishAt = stoneShowFinishAt1
 const stoneGreenHideAt = stoneHideAt1
@@ -926,6 +1108,40 @@ const stoneGreenOpacity = computed(() => {
   return ret
 })
 
+const currentPosition = computed(() => {
+  if (leafOpacity.value > 0) {
+    return `translate(-57%, -40%) scale(3.7)`
+  }
+  if (leafOpacity1.value > 0) {
+    return `translate(-57%, -40%) scale(3.7)`
+  }
+  if (leafOpacity2.value > 0) {
+    return `translate(-57%, -40%) scale(3.7)`
+  }
+  if (leafOpacity3.value > 0) {
+    return `translate(-57%, -40%) scale(3.7)`
+  }
+  if (stoneOpacity.value > 0) {
+    return `translate(-25%, -6%) scale(2.2)`
+  }
+  if (stoneOpacity1.value > 0) {
+    return `translate(-25%, -6%) scale(2.2)`
+  }
+  if (stoneOpacity2.value > 0) {
+    return `translate(-25%, -6%) scale(2.2)`
+  }
+  if (stoneOpacity3.value > 0) {
+    return `translate(-25%, -6%) scale(2.2)`
+  }
+  // if (leafOpacity.value > 0 || leafOpacity1.value > 0 || leafOpacity2.value > 0 || leafOpacity3.value > 0) {
+  //   return `translate(-57%, -40%) scale(3.7)`
+  // }
+  // if (stoneOpacity3.value > 0 || stoneOpacity2.value > 0 || stoneOpacity1.value > 0 || stoneOpacity.value > 0) {
+  //   return `translate(-57%, -40%) scale(4.65)`
+  // }
+  return ''
+})
+
 
 
 const stoneShowText = stoneShowAt
@@ -948,7 +1164,7 @@ const stoneTextOpacity = computed(() => {
   return ret
 })
 
-const summaryShowAt = stoneHideFinishAt1 + window.innerHeight * 0
+const summaryShowAt = stoneHideFinishAt3 + window.innerHeight * 0
 const summaryShowFinishAt = summaryShowAt + window.innerHeight * 0.25
 const summaryHideAt = summaryShowFinishAt + window.innerHeight * 0.3
 const summaryHideFisishAt = summaryHideAt + window.innerHeight * 0.25
@@ -1042,27 +1258,27 @@ function smoothScrollTo(element, finalPosition, duration = 500, startTime = perf
 
 const curStep = ref(0)
 
-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 scrollerPositionList = [0, 0.078, 0.166, 0.228, 0.290, 0.353, 0.436, 0.509, 0.561, 0.644, 0.706, 0.769, 0.831, 1]
+const scrollerPositionTimeRight = [500, 300, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
+const scrollerPositionTimeLeft = [500, 300, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
 
 
 const onSwipeLeft = () => {
   if (curStep.value < scrollerPositionList.length - 1) {
-    curStep.value ++
+    curStep.value++
     const pp = scrollerPositionList[curStep.value]
     const startTime = performance.now()
-    requestAnimationFrame(() => {smoothScrollTo(scrollerEl.value, pp * scrollerEl.value.scrollHeight, scrollerPositionTimeRight[curStep.value], startTime)})
+    requestAnimationFrame(() => { smoothScrollTo(scrollerEl.value, pp * scrollerEl.value.scrollHeight, scrollerPositionTimeRight[curStep.value], startTime) })
   }
 
 }
 
 const onSwipeRight = () => {
   if (curStep.value > 0) {
-    curStep.value --
+    curStep.value--
     const pp = scrollerPositionList[curStep.value] * scrollerEl.value.scrollHeight
     const startTime = performance.now()
-    requestAnimationFrame(() => {smoothScrollTo(scrollerEl.value, pp, scrollerPositionTimeLeft[curStep.value], startTime)})
+    requestAnimationFrame(() => { smoothScrollTo(scrollerEl.value, pp, scrollerPositionTimeLeft[curStep.value], startTime) })
   }
 }
 
@@ -1078,17 +1294,17 @@ const touchEnd = (event) => {
   let tx = currentX - lastX.value
   if (tx < 0) {
     if (curStep.value < scrollerPositionList.length - 1) {
-      curStep.value ++
+      curStep.value++
       const pp = scrollerPositionList[curStep.value]
       const startTime = performance.now()
-      requestAnimationFrame(() => {smoothScrollTo(scrollerEl.value, pp * scrollerEl.value.scrollHeight, scrollerPositionTimeRight[curStep.value], startTime)})
+      requestAnimationFrame(() => { smoothScrollTo(scrollerEl.value, pp * scrollerEl.value.scrollHeight, scrollerPositionTimeRight[curStep.value], startTime) })
     }
   } else if (tx > 0) {
     if (curStep.value > 0) {
-      curStep.value --
+      curStep.value--
       const pp = scrollerPositionList[curStep.value] * scrollerEl.value.scrollHeight
       const startTime = performance.now()
-      requestAnimationFrame(() => {smoothScrollTo(scrollerEl.value, pp, scrollerPositionTimeLeft[curStep.value], startTime)})
+      requestAnimationFrame(() => { smoothScrollTo(scrollerEl.value, pp, scrollerPositionTimeLeft[curStep.value], startTime) })
     }
   }
 }
@@ -1108,9 +1324,10 @@ function onClickGoNextPage() {
 </script>
 
 <style lang="less" scoped>
-*{
+* {
   transition: all 1s;
 }
+
 .home {
   width: 100%;
   height: 100%;
@@ -1179,7 +1396,7 @@ function onClickGoNextPage() {
     transform: translate(-50%, 0);
     z-index: 1;
 
-    >.green-box{
+    >.green-box {
       width: 200vw;
       height: 200vh;
       background: rgba(85, 116, 83, 0.8);
@@ -1260,15 +1477,7 @@ 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;
-    }
+
 
   }
 
@@ -1308,6 +1517,43 @@ function onClickGoNextPage() {
     }
   }
 
+  >.stone-text-box {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 3;
+    width: calc(224 / var(--9ea40744-windowSizeWhenDesignForRef)* var(--9ea40744-windowSizeInCssForRef));
+    background: linear-gradient(78deg, rgba(0, 0, 0, 0) 38%, #00000045 75%);
+    height: 100%;
+
+    >.stone-text {
+      position: fixed;
+      top: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      z-index: 3;
+      width: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+
+  >.jianbian {
+    width: 100%;
+    position: fixed;
+    height: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #00000082 100%);
+    z-index: 3;
+
+  }
+
+  >.painting-leaf-hight {
+    position: fixed;
+    z-index: 2;
+    width: 100%;
+    transform: translate(0px, 0px);
+    left: 0;
+    top: 0;
+  }
+
   >.long-desc {
     position: absolute;
     left: 50%;
@@ -1336,59 +1582,62 @@ function onClickGoNextPage() {
     }
   }
 
-  >.up-icon{
+  >.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%;
-      z-index: 12;
-      >img{
-        width: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      }
+      margin-bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
     }
 
-    >.author-box{
+    >.author-desc {
       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'));
+      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'));
-      }
+    >.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;
@@ -1402,28 +1651,32 @@ function onClickGoNextPage() {
     font-family: KaiTi, KaiTi;
     color: #FFFFFF;
     font-weight: 400;
-    font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     text-align: justify;
-    z-index:2;
+    z-index: 2;
   }
-  >.detail-title-stem{
+
+  >.detail-title-stem {
     font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     letter-spacing: 2px;
     transition: top 1s ease;
-    position:relative;
-    z-index:2;
+    position: relative;
+    z-index: 2;
   }
-  >.detail-desc-stem{
+
+  >.detail-desc-stem {
     display: block;
     margin-top: 10%;
     transition: all 0.5s;
   }
-  >.detail-desc-leaf{
+
+  >.detail-desc-leaf {
     display: block;
     margin-top: 6%;
   }
-  >.detail-desc-stone{
+
+  >.detail-desc-stone {
     display: block;
     margin-top: 8%;
   }
@@ -1442,7 +1695,7 @@ function onClickGoNextPage() {
       position: absolute;
       left: 0;
       bottom: 0;
-      right: 10px;
+      // right: 10px;
       height: 3px;
       background-color: #A9D185;
     }
@@ -1512,9 +1765,9 @@ function onClickGoNextPage() {
     top: 0;
     width: 100%;
     height: 100%;
-    overflow: auto;
+    overflow: hidden;
     transition: transform 2s ease;
-    z-index:3;
+    z-index: 3;
 
     >.inner {
       width: 100%;

src/views/HotspotDetail3.vue

@@ -1,8 +1,24 @@
 <template>
-  <div
-    class="hotspot-detail-3"
-    :style="{background: `url(${state == 1 ? hots3StateBg1 : state == 2 ? hots3StateBg2 : hots3StateBg3})`,backgroundSize:'cover'}"
-  >
+  <div class="hotspot-detail-3">
+    <img
+      v-show="state === 1"
+      class="bg-img"
+      src="@/assets/images/hots-detail-bg-state1.png"
+      alt=""
+    >
+    <img
+      v-show="state === 2"
+      class="bg-img"
+      src="@/assets/images/hots-detail-bg-state1.png"
+      alt=""
+    >
+    <img
+      v-show="state === 3"
+      class="bg-img"
+      src="@/assets/images/hots-detail-bg-state1.png"
+      alt=""
+    >
+
     <!-- 阴影 -->
     <img
       class="shadow-box"
@@ -148,6 +164,17 @@ const goState2 = () => {
   justify-content: space-evenly;
   z-index: 3;
 
+  .bg-img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: top left;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+
   .shadow-box {
     position: absolute;
     bottom: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -164,20 +191,20 @@ const goState2 = () => {
     bottom: calc(130 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
 
-  .content2{
+  .content2 {
     width: 100%;
     background-position: left top;
     overflow: auto;
-    img{
+
+    img {
       // height: 50vh;
       width: 990px;
     }
   }
-  .content3{
 
-  }
+  .content3 {}
 
-  .operation-tip{
+  .operation-tip {
     position: fixed;
     bottom: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     left: 50%;

src/views/MoreContent.vue

@@ -200,12 +200,12 @@
           })"
         />
         <div class="shuang-gou-she-se-group">
-          <button
+          <div
             class="watch-detail animation-show-long-hide"
             @click="onClickShuangGouEntry"
           >
             查看详情
-          </button>
+          </div>
           <div class="group-title">
             双钩设色
             <img
@@ -224,24 +224,24 @@
         >
         <div class="mo-zhu-group">
           <div class="button-group">
-            <button
+            <div
               class="poem animation-show-long-hide"
               @click="onClickEntryAtMoZhu('PoemList')"
             >
               人文
-            </button>
-            <button
+            </div>
+            <div
               class="animation-show-long-hide"
               @click="onClickEntryAtMoZhu('PaintingList')"
             >
               画作
-            </button>
-            <button
+            </div>
+            <div
               class="animation-show-long-hide"
               @click="onClickEntryAtMoZhu('BambooBook')"
             >
               竹谱
-            </button>
+            </div>
           </div>
           <div class="group-title">
             墨竹
@@ -320,6 +320,7 @@
         playsinline
         webkit-playsinline="true"
         x5-video-player-type="h5"
+        muted
         @ended="router.push({
           name: 'ShuanggouDetail',
         })"
@@ -332,6 +333,7 @@
         class="fade-to-other-page"
         src="@/assets/videos/fade-at-mo-zhu.mp4"
         playsinline
+        muted
         webkit-playsinline="true"
         x5-video-player-type="h5"
       />
@@ -343,6 +345,7 @@
         class="fade-to-other-page"
         src="@/assets/videos/fade-from-more-content-to-game.mp4"
         playsinline
+        muted
         webkit-playsinline="true"
         x5-video-player-type="h5"
       />
@@ -490,8 +493,6 @@ const saveTitle = () => {
 }
 
 
-
-
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -503,16 +504,26 @@ const windowHeightDesign = 844
 const scrollTarget = ref(null)
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 
-
 const maxTranslateLength = computed(() => {
   return windowHeight.value * windowWidthDesign / windowHeightDesign
 })
+
+
+
+const x = ref(0)
+
+const positionNumInit = computed(() => {
+  console.log('x=', x.value)
+  return x.value > 0.5 ? 236 : 216
+})
+
+
 const { onSwipeLeft, onswipeRight, haveSwipedThisTime, translateLength, currentAnchorIdx, goingToAnchorIdx } = useSmoothSwipe({
   scrollTargetRef: scrollTarget,
   maxTranslateLength,
   viewportWidth: windowWidth,
   anchorPosList: [
-    maxTranslateLength.value * 236 / windowWidthDesign - windowWidth.value / 2,
+    maxTranslateLength.value * positionNumInit.value / windowWidthDesign - windowWidth.value / 2,
     maxTranslateLength.value * 967 / windowWidthDesign - windowWidth.value / 2,
     maxTranslateLength.value * 1840 / windowWidthDesign - windowWidth.value / 2,
     // maxTranslateLength.value - windowWidth.value
@@ -630,6 +641,7 @@ watch(goingToAnchorIdx, (v) => {
 
 const isReady = ref(false)
 
+
 onBeforeMount(() => {
   window.addEventListener('resize', () => {
     window.setTimeout(() => {
@@ -638,10 +650,11 @@ onBeforeMount(() => {
       if (dom && document.documentElement.clientWidth < 1000) {
         windowWidth.value = document.documentElement.clientWidth
         windowHeight.value = document.documentElement.clientHeight
+        x.value = windowWidth.value / windowHeight.value
+        console.log('x=', windowWidth.value / windowHeight.value)
       }
     }, 100)
   })
-
   setTimeout(() => {
     isReady.value = true
   }, 500)
@@ -908,9 +921,9 @@ onMounted(() => {
         top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         left: calc(216px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
 
-        >button.watch-detail {
+        >.watch-detail {
           position: absolute;
-          top: calc(182px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+          top: calc(132px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
           left: 0;
           background-image: url(@/assets/images/fade-chapter-btn-bg-big.png);
           background-size: contain;
@@ -957,7 +970,7 @@ onMounted(() => {
           flex-direction: column;
           gap: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
 
-          >button {
+          >div {
             .button-common-style();
             background-image: url(@/assets/images/fade-chapter-btn-bg-small.png);
             background-size: contain;

src/views/StartupView.vue

@@ -43,7 +43,7 @@
 
     <Transition name="fade-in">
       <video
-        v-if="isShowVideo"
+        v-show="isShowVideo"
         ref="videoEl"
         class="transition-video"
         src="@/assets/videos/startup.mp4"