1 year ago · e5b0542508
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -16,6 +16,7 @@ module.exports = {
 
				     parser: '@babel/eslint-parser'
			
 
				   },
			
 
				   rules: {
			
 
				+    'vue/multi-word-component-names': 'off',
			
 
				     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
			
 
				     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
			
 
				     'semi': ['error', 'never'],
			
--- a/mobile/index.html
+++ b/mobile/index.html
@@ -0,0 +1,33 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
			
 
				+    <link rel="icon" href="<%= BASE_URL %>logo.ico">
			
 
				+    <title>无尽藏</title>
			
 
				+    <style>
			
 
				+      .scroller{
			
 
				+        touch-action: manipulation;
			
 
				+      }
			
 
				+      html,body,#app,.home{
			
 
				+        touch-action: none;
			
 
				+      }
			
 
				+      .home{
			
 
				+        position: relative;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> -->
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				+    </noscript>
			
 
				+    <div id="app"></div>
			
 
				+    <!-- built files will be auto injected -->
			
 
				+
			
 
				+    <script>
			
 
				+      // new VConsole()
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/mobile/main.js
+++ b/mobile/main.js
@@ -0,0 +1,8 @@
 
				+import { createApp } from 'vue'

			
 
				+import App from './views/MobileView.vue'

			
 
				+import "@/assets/style/reset.css"

			
 
				+import "@/assets/style/my-reset.css"

			
 
				+

			
 
				+const app = createApp(App)

			
 
				+

			
 
				+app.mount('#app')

			
--- a/mobile/views/MobileView.vue
+++ b/mobile/views/MobileView.vue
@@ -0,0 +1,17 @@
 
				+<template>

			
 
				+  <iframe

			
 
				+    class="mobile-view"

			
 
				+    src="/"

			
 
				+  />

			
 
				+</template>

			
 
				+

			
 
				+<style lang="less" setup>

			
 
				+.mobile-view {

			
 
				+  position: absolute;

			
 
				+  top: 0;

			
 
				+  left: 50%;

			
 
				+  width: 500px;

			
 
				+  height: 100%;

			
 
				+  transform: translateX(-50%);

			
 
				+}

			
 
				+</style>
			
--- a/public/configMultiMedia/music/music2.mp3
+++ b/public/configMultiMedia/music/music2.mp3
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,7 @@
 
				   </router-view>
			
 
				   <audio
			
 
				     id="bg-music"
			
 
				-    src="./configMultiMedia/music/music1.mp3"
			
 
				+    src="./configMultiMedia/music/music2.mp3"
			
 
				   />
			
 
				 </template>
			
 
				 
			
--- a/src/assets/images/home-painting1.jpg
+++ b/src/assets/images/home-painting1.jpg
--- a/src/assets/images/home-painting2.jpg
+++ b/src/assets/images/home-painting2.jpg
--- a/src/assets/images/icon_down.png
+++ b/src/assets/images/icon_down.png
--- a/src/assets/images/icon_up.png
+++ b/src/assets/images/icon_up.png
--- a/src/assets/images/img_author.png
+++ b/src/assets/images/img_author.png
--- a/src/assets/images/img_zhujie-min.jpg
+++ b/src/assets/images/img_zhujie-min.jpg
--- a/src/main.js
+++ b/src/main.js
@@ -50,6 +50,8 @@ if (uaInfo.browser && uaInfo.browser.name === 'Safari') {
 
				 }

			
 
				 if (uaInfo.device.type === 'mobile') {

			
 
				   app.provide('$isMobile', true)

			
 
				+} else if (process.env.NODE_ENV === 'production') {

			
 
				+  window.location.href = '/mobile.html'

			
 
				 }

			
 
				 

			
 
				 // 处理resize事件

			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@ import PaintingList from '../views/PaintingList.vue'
 
				 import PaintingDetailList from '../views/PaintingDetailList.vue'
			
 
				 import GameView from '../views/GameView.vue'
			
 
				 import BambooBookView from '../views/BambooBookView.vue'
			
 
				-import BambooHotView from '../views/BambooHotView.vue'
			
 
				+import BambooHotView from '../views/BambooHotView2/index.vue'
			
 
				 import ShuanggouDetail from '../views/ShuangGouSheSeDetail.vue'
			
 
				 import ShuanggouPaintingDetail from '../views/ShuanggouPaintingDetail.vue'
			
 
				 import OnlineSceneView from '../views/OnlineSceneView.vue'
			
--- a/src/views/BambooHotView2/images/bamboo1.png
+++ b/src/views/BambooHotView2/images/bamboo1.png
--- a/src/views/BambooHotView2/images/bamboo10.png
+++ b/src/views/BambooHotView2/images/bamboo10.png
--- a/src/views/BambooHotView2/images/bamboo11.png
+++ b/src/views/BambooHotView2/images/bamboo11.png
--- a/src/views/BambooHotView2/images/bamboo12.png
+++ b/src/views/BambooHotView2/images/bamboo12.png
--- a/src/views/BambooHotView2/images/bamboo13.png
+++ b/src/views/BambooHotView2/images/bamboo13.png
--- a/src/views/BambooHotView2/images/bamboo14.png
+++ b/src/views/BambooHotView2/images/bamboo14.png
--- a/src/views/BambooHotView2/images/bamboo2.png
+++ b/src/views/BambooHotView2/images/bamboo2.png
--- a/src/views/BambooHotView2/images/bamboo3.png
+++ b/src/views/BambooHotView2/images/bamboo3.png
--- a/src/views/BambooHotView2/images/bamboo4.png
+++ b/src/views/BambooHotView2/images/bamboo4.png
--- a/src/views/BambooHotView2/images/bamboo5.png
+++ b/src/views/BambooHotView2/images/bamboo5.png
--- a/src/views/BambooHotView2/images/bamboo6.png
+++ b/src/views/BambooHotView2/images/bamboo6.png
--- a/src/views/BambooHotView2/images/bamboo7.png
+++ b/src/views/BambooHotView2/images/bamboo7.png
--- a/src/views/BambooHotView2/images/bamboo8.png
+++ b/src/views/BambooHotView2/images/bamboo8.png
--- a/src/views/BambooHotView2/images/bamboo9.png
+++ b/src/views/BambooHotView2/images/bamboo9.png
--- a/src/views/BambooHotView2/images/bg.png
+++ b/src/views/BambooHotView2/images/bg.png
--- a/src/views/BambooHotView2/images/btn_start-min.png
+++ b/src/views/BambooHotView2/images/btn_start-min.png
--- a/src/views/BambooHotView2/images/grass.png
+++ b/src/views/BambooHotView2/images/grass.png
--- a/src/views/BambooHotView2/images/hot.png
+++ b/src/views/BambooHotView2/images/hot.png
--- a/src/views/BambooHotView2/images/leaf.png
+++ b/src/views/BambooHotView2/images/leaf.png
--- a/src/views/BambooHotView2/images/leaf2.png
+++ b/src/views/BambooHotView2/images/leaf2.png
--- a/src/views/BambooHotView2/index.vue
+++ b/src/views/BambooHotView2/index.vue
@@ -0,0 +1,592 @@
 
				+<template>

			
 
				+  <div style="height: 100%">

			
 
				+    <div

			
 
				+      v-if="hotVisible"

			
 
				+      class="bamboo-hot2-hot"

			
 
				+    >

			
 
				+      <div class="bamboo-hot2-hot__title">

			
 
				+        {{ ITEM_INFO_MAP[checkedHotId].label }}

			
 
				+      </div>

			
 
				+

			
 
				+      <div

			
 
				+        class="bamboo-hot2-hot__inner"

			
 
				+        v-html="ITEM_INFO_MAP[checkedHotId].info"

			
 
				+      />

			
 
				+    </div>

			
 
				+

			
 
				+    <div

			
 
				+      ref="bambooWrap"

			
 
				+      class="bamboo-hot2"

			
 
				+      :class="{

			
 
				+        'wrap-hide': hotVisible

			
 
				+      }"

			
 
				+      @touchstart="handleTouchstart"

			
 
				+      @touchmove="handleTouchmove"

			
 
				+      @touchend="handleTouchend"

			
 
				+    >

			
 
				+      <div

			
 
				+        class="bamboo-hot2-b1"

			
 
				+        :class="{

			
 
				+          hide: hotVisible && checkedHotId !== 1

			
 
				+        }"

			
 
				+      >

			
 
				+        <img src="./images/bamboo1.png">

			
 
				+

			
 
				+        <div

			
 
				+          class="bamboo-hot2__hot"

			
 
				+          :class="{

			
 
				+            hide: hotVisible

			
 
				+          }"

			
 
				+          @click="handleHot(1)"

			
 
				+        >

			
 
				+          <p>水竹</p>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+

			
 
				+      <div

			
 
				+        class="bamboo-hot2-b2"

			
 
				+        :class="{

			
 
				+          hide: hotVisible && checkedHotId !== 2

			
 
				+        }"

			
 
				+      >

			
 
				+        <img src="./images/bamboo2.png">

			
 
				+      </div>

			
 
				+      <div

			
 
				+        class="bamboo-hot2__hot b2"

			
 
				+        :class="{

			
 
				+          hide: hotVisible

			
 
				+        }"

			
 
				+        @click="handleHot(2)"

			
 
				+      >

			
 
				+        <p>紫竹</p>

			
 
				+      </div>

			
 
				+

			
 
				+      <div

			
 
				+        class="bamboo-hot2-b3"

			
 
				+        :class="{

			
 
				+          hide: hotVisible && checkedHotId !== 3

			
 
				+        }"

			
 
				+      >

			
 
				+        <img src="./images/bamboo3.png">

			
 
				+

			
 
				+        <div

			
 
				+          class="bamboo-hot2__hot"

			
 
				+          :class="{

			
 
				+            hide: hotVisible

			
 
				+          }"

			
 
				+          @click="handleHot(3)"

			
 
				+        >

			
 
				+          <p>梅鹿竹</p>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+

			
 
				+      <div

			
 
				+        class="bamboo-hot2-b4"

			
 
				+        :class="{

			
 
				+          hide: hotVisible && checkedHotId !== 4

			
 
				+        }"

			
 
				+      >

			
 
				+        <img src="./images/bamboo4.png">

			
 
				+

			
 
				+        <div

			
 
				+          class="bamboo-hot2__hot"

			
 
				+          :class="{

			
 
				+            hide: hotVisible

			
 
				+          }"

			
 
				+          @click="handleHot(4)"

			
 
				+        >

			
 
				+          <p>楠竹</p>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+

			
 
				+      <div

			
 
				+        class="bamboo-hot2-b5"

			
 
				+        :class="{

			
 
				+          hide: hotVisible

			
 
				+        }"

			
 
				+      >

			
 
				+        <img src="./images/bamboo5.png">

			
 
				+      </div>

			
 
				+

			
 
				+      <div

			
 
				+        class="bamboo-hot2-b6"

			
 
				+        :class="{

			
 
				+          hide: hotVisible

			
 
				+        }"

			
 
				+      >

			
 
				+        <img src="./images/bamboo6.png">

			
 
				+      </div>

			
 
				+

			
 
				+      <div

			
 
				+        class="bamboo-hot2-b7"

			
 
				+        :class="{

			
 
				+          hide: hotVisible

			
 
				+        }"

			
 
				+      >

			
 
				+        <img src="./images/bamboo7.png">

			
 
				+      </div>

			
 
				+

			
 
				+      <div

			
 
				+        class="bamboo-hot2-b8"

			
 
				+        :class="{

			
 
				+          hide: hotVisible && checkedHotId !== 8

			
 
				+        }"

			
 
				+      >

			
 
				+        <img src="./images/bamboo8.png">

			
 
				+

			
 
				+        <div

			
 
				+          class="bamboo-hot2__hot"

			
 
				+          :class="{

			
 
				+            hide: hotVisible

			
 
				+          }"

			
 
				+          @click="handleHot(8)"

			
 
				+        >

			
 
				+          <p>单竹</p>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+

			
 
				+      <div

			
 
				+        class="bamboo-hot2-b9"

			
 
				+        :class="{

			
 
				+          hide: hotVisible

			
 
				+        }"

			
 
				+      >

			
 
				+        <img src="./images/bamboo9.png">

			
 
				+      </div>

			
 
				+      <div

			
 
				+        class="bamboo-hot2-b10"

			
 
				+        :class="{

			
 
				+          hide: hotVisible

			
 
				+        }"

			
 
				+      >

			
 
				+        <img src="./images/bamboo10.png">

			
 
				+      </div>

			
 
				+      <div

			
 
				+        class="bamboo-hot2-b11"

			
 
				+        :class="{

			
 
				+          hide: hotVisible

			
 
				+        }"

			
 
				+      >

			
 
				+        <img src="./images/bamboo11.png">

			
 
				+      </div>

			
 
				+      <div

			
 
				+        class="bamboo-hot2-b12"

			
 
				+        :class="{

			
 
				+          hide: hotVisible

			
 
				+        }"

			
 
				+      >

			
 
				+        <img src="./images/bamboo12.png">

			
 
				+      </div>

			
 
				+      <div

			
 
				+        class="bamboo-hot2-b13"

			
 
				+        :class="{

			
 
				+          hide: hotVisible

			
 
				+        }"

			
 
				+      >

			
 
				+        <img src="./images/bamboo13.png">

			
 
				+      </div>

			
 
				+      <div

			
 
				+        class="bamboo-hot2-b14"

			
 
				+        :class="{

			
 
				+          hide: hotVisible

			
 
				+        }"

			
 
				+      >

			
 
				+        <img src="./images/bamboo14.png">

			
 
				+      </div>

			
 
				+

			
 
				+      <div

			
 
				+        ref="bambooWrapBg"

			
 
				+        class="bamboo-hot2-bg-wrap"

			
 
				+      >

			
 
				+        <img

			
 
				+          class="bamboo-hot2__grass"

			
 
				+          :class="{

			
 
				+            hide: hotVisible

			
 
				+          }"

			
 
				+          src="./images/grass.png"

			
 
				+        >

			
 
				+

			
 
				+        <img

			
 
				+          class="bamboo-hot2__bg"

			
 
				+          src="./images/bg.png"

			
 
				+        >

			
 
				+      </div>

			
 
				+    </div>

			
 
				+

			
 
				+    <div class="system-btns">

			
 
				+      <BtnBack @click="goBack" />

			
 
				+      <OperationTip

			
 
				+        id="operationH"

			
 
				+        class="operation-h"

			
 
				+        text=""

			
 
				+        direction="h"

			
 
				+      />

			
 
				+    </div>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script setup>

			
 
				+import { ref } from 'vue'

			
 
				+import { useRouter } from 'vue-router'

			
 
				+import useSizeAdapt from "@/useFunctions/useSizeAdapt"

			
 
				+

			
 
				+const ITEM_SCROLL_MAP = {

			
 
				+  1: 10,

			
 
				+  2: 166,

			
 
				+  3: 231,

			
 
				+  4: 420,

			
 
				+  8: 958

			
 
				+}

			
 
				+const ITEM_INFO_MAP = {

			
 
				+  1: {

			
 
				+    label: '水竹',

			
 
				+    info: `

			
 
				+      <p>篷耳小，形状为卵形或长椭圆形。</p>

			
 
				+      <p>锋舌边缘生有短白纤毛。</p>

			
 
				+      <p>筝片直立，呈三角形至狭长三角形。</p>

			
 
				+    `

			
 
				+  },

			
 
				+  2: {

			
 
				+    label: '紫竹',

			
 
				+    info: `

			
 
				+      <p>紫竹幼竿绿色，覆盖细柔毛和白粉，</p>

			
 
				+      <p>幕环有毛，籍鞘背面红褐色或绿色加深。</p>

			
 
				+      <p>叶片小而薄，窄披针形。</p>

			
 
				+    `

			
 
				+  },

			
 
				+  3: {

			
 
				+    label: '梅鹿竹',

			
 
				+    info: `

			
 
				+      <p>梅鹿竹斑纹相连，圆形，</p>

			
 
				+      <p>外轮廓深色，斑心发白。</p>

			
 
				+      <p>竹地上有兽斑状斑痕，酷似梅花鹿的花纹。</p>

			
 
				+    `

			
 
				+  },

			
 
				+  4: {

			
 
				+    label: '楠竹',

			
 
				+    info: `

			
 
				+      <p>单轴散生型常绿乔木状竹类植物，</p>

			
 
				+      <p>呈直立状，</p>

			
 
				+      <p>竹叶深绿，</p>

			
 
				+      <p>呈披针形</p>

			
 
				+    `

			
 
				+  },

			
 
				+  8: {

			
 
				+    label: '单竹',

			
 
				+    info: `

			
 
				+      <p>竹质细腻，纤维韧性极强，</p>

			
 
				+      <p>可制成薄如蝉翼的竹篾丝，</p>

			
 
				+      <p>编织成绸似、绢似的精美竹编工艺品。</p>

			
 
				+    `

			
 
				+  },

			
 
				+}

			
 
				+

			
 
				+const {

			
 
				+  windowSizeInCssForRef,

			
 
				+  windowSizeWhenDesignForRef,

			
 
				+} = useSizeAdapt()

			
 
				+const router = useRouter()

			
 
				+let startX = 0

			
 
				+let lastStartX = 0

			
 
				+const bambooWrap = ref()

			
 
				+const bambooWrapBg = ref()

			
 
				+

			
 
				+const hotVisible = ref(false)

			
 
				+const checkedHotId = ref(0)

			
 
				+

			
 
				+const handleHot = (id) => {

			
 
				+  checkedHotId.value = id

			
 
				+  hotVisible.value = true

			
 
				+

			
 
				+  bambooWrap.value.scrollTo({

			
 
				+    left: ITEM_SCROLL_MAP[id],

			
 
				+    behavior: 'smooth'

			
 
				+  })

			
 
				+

			
 
				+  lastStartX = ITEM_SCROLL_MAP[id]

			
 
				+}

			
 
				+

			
 
				+const handleTouchstart = (v) => {

			
 
				+  if (hotVisible.value) return

			
 
				+

			
 
				+  startX = v.changedTouches[0].pageX

			
 
				+}

			
 
				+const handleTouchmove = (v) => {

			
 
				+  v.preventDefault()

			
 
				+  if (hotVisible.value) return

			
 
				+

			
 
				+  const wrapWidth = bambooWrapBg.value.scrollWidth - window.innerWidth

			
 
				+  const moveX = startX - v.changedTouches[0].pageX

			
 
				+

			
 
				+  bambooWrap.value.scrollTo({

			
 
				+    left: Math.min(moveX + lastStartX, wrapWidth),

			
 
				+    behavior: 'instant'

			
 
				+  })

			
 
				+}

			
 
				+const handleTouchend = (v) => {

			
 
				+  if (hotVisible.value) return

			
 
				+

			
 
				+  const wrapWidth = bambooWrapBg.value.scrollWidth - window.innerWidth

			
 
				+  lastStartX = Math.min(Math.max(startX - v.changedTouches[0].pageX + lastStartX, 0), wrapWidth)

			
 
				+}

			
 
				+

			
 
				+const goBack = () => {

			
 
				+  if (hotVisible.value) {

			
 
				+    hotVisible.value = false

			
 
				+    checkedHotId.value = 0

			
 
				+    return

			
 
				+  }

			
 
				+

			
 
				+  router.push({

			
 
				+    name: 'MoreContent',

			
 
				+    query: {

			
 
				+      anchorIdx: 0,

			
 
				+    }

			
 
				+  })

			
 
				+}

			
 
				+</script>

			
 
				+

			
 
				+<style lang="less" scoped>

			
 
				+::-webkit-scrollbar {

			
 
				+  display: none;

			
 
				+}

			
 
				+

			
 
				+img {

			
 
				+  pointer-events: none;

			
 
				+}

			
 
				+

			
 
				+.hide {

			
 
				+  opacity: 0 !important;

			
 
				+}

			
 
				+

			
 
				+[class^="bamboo-hot2-b"] {

			
 
				+  position: absolute;

			
 
				+  top: 0;

			
 
				+  height: 100%;

			
 
				+  z-index: 3;

			
 
				+

			
 
				+  img {

			
 
				+    height: 100%;

			
 
				+  }

			
 
				+}

			
 
				+

			
 
				+.bamboo-hot2-hot {

			
 
				+  display: flex;

			
 
				+  position: fixed;

			
 
				+  top: 50%;

			
 
				+  right: calc(70 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+  transform: translateY(-50%);

			
 
				+  color: white;

			
 
				+  font-family: KaiTi;

			
 
				+  writing-mode: vertical-rl;

			
 
				+  white-space: nowrap;

			
 
				+  z-index: 999;

			
 
				+

			
 
				+  &__title {

			
 
				+    position: relative;

			
 
				+    margin-bottom: calc(90 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    font-weight: bold;

			
 
				+    letter-spacing: 5px;

			
 
				+    font-size: calc(38 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+

			
 
				+    &::before {

			
 
				+      content: '';

			
 
				+      position: absolute;

			
 
				+      top: calc(-2 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+      right: calc(25 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+      width: calc(15 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+      height: calc(15 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+      border-radius: 50%;

			
 
				+      border: 1px solid #F8DD86;

			
 
				+      z-index: -1;

			
 
				+    }

			
 
				+  }

			
 
				+  &__inner {

			
 
				+    letter-spacing: 3px;

			
 
				+    line-height: calc(40 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    font-size: calc(20 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+  }

			
 
				+}

			
 
				+

			
 
				+.bamboo-hot2 {

			
 
				+  position: relative;

			
 
				+  width: 100%;

			
 
				+  height: 100%;

			
 
				+  perspective: calc(100 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+  transform-style: preserve-3d;

			
 
				+  overflow-x: auto;

			
 
				+

			
 
				+  > * {

			
 
				+    opacity: 1;

			
 
				+    transition: all linear .2s;

			
 
				+  }

			
 
				+  &__hot {

			
 
				+    display: flex;

			
 
				+    align-items: center;

			
 
				+    justify-content: center;

			
 
				+    position: absolute;

			
 
				+    color: white;

			
 
				+    font-size: 12px;

			
 
				+    font-family: KaiTi;

			
 
				+    writing-mode: vertical-rl;

			
 
				+

			
 
				+    &::before {

			
 
				+      content: '';

			
 
				+      display: block;

			
 
				+      margin-bottom: calc(5 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+      width: 20px;

			
 
				+      height: 20px;

			
 
				+      background: url('./images/hot.png') no-repeat center / contain;

			
 
				+    }

			
 
				+  }

			
 
				+  &-b1 {

			
 
				+    left: calc(50 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateZ(10px);

			
 
				+

			
 
				+    .bamboo-hot2__hot {

			
 
				+      top: calc(340 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+      right: calc(40 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    }

			
 
				+  }

			
 
				+  &-b2 {

			
 
				+    left: calc(250 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateZ(10px);

			
 
				+    z-index: 2;

			
 
				+  }

			
 
				+  .bamboo-hot2__hot.b2 {

			
 
				+    top: calc(200 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    left: calc(305 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateZ(10px);

			
 
				+    z-index: 4;

			
 
				+  }

			
 
				+  &-b3 {

			
 
				+    left: calc(155 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateZ(5px);

			
 
				+

			
 
				+    .bamboo-hot2__hot {

			
 
				+      top: calc(300 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+      right: calc(110 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    }

			
 
				+  }

			
 
				+  &-b4 {

			
 
				+    left: calc(600 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateZ(5px);

			
 
				+

			
 
				+    .bamboo-hot2__hot {

			
 
				+      top: calc(220 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+      right: calc(14 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    }

			
 
				+  }

			
 
				+  &-b5 {

			
 
				+    left: calc(1050 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateZ(10px);

			
 
				+  }

			
 
				+  &-b6 {

			
 
				+    left: calc(1170 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateZ(15px);

			
 
				+  }

			
 
				+  &-b7 {

			
 
				+    left: calc(1050 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateZ(10px);

			
 
				+    z-index: 2;

			
 
				+  }

			
 
				+  &-b8 {

			
 
				+    left: calc(1180 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateZ(5px);

			
 
				+

			
 
				+    .bamboo-hot2__hot {

			
 
				+      top: calc(320 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+      right: calc(110 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    }

			
 
				+  }

			
 
				+  &-b9 {

			
 
				+    left: calc(1480 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateZ(10px);

			
 
				+  }

			
 
				+  &-b10 {

			
 
				+    left: calc(1810 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateZ(10px);

			
 
				+  }

			
 
				+  &-b11 {

			
 
				+    left: calc(1790 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateZ(5px);

			
 
				+    z-index: 2;

			
 
				+  }

			
 
				+  &-b12 {

			
 
				+    left: calc(1600 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateZ(15px);

			
 
				+    z-index: 2;

			
 
				+  }

			
 
				+  &-b13 {

			
 
				+    left: calc(2050 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateZ(15px);

			
 
				+    z-index: 2;

			
 
				+  }

			
 
				+  &-b14 {

			
 
				+    left: calc(2220 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transform: translateZ(10px);

			
 
				+  }

			
 
				+  &.wrap-hide {

			
 
				+    &::before,

			
 
				+    &::after {

			
 
				+      opacity: 0;

			
 
				+    }

			
 
				+  }

			
 
				+  &::before {

			
 
				+    content: '';

			
 
				+    position: absolute;

			
 
				+    top: 0;

			
 
				+    left: 0;

			
 
				+    width: calc(457 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    height: calc(330 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    background: url('./images/leaf.png') no-repeat center / contain;

			
 
				+    opacity: 1;

			
 
				+    transition: opacity linear .2s;

			
 
				+    z-index: 3;

			
 
				+  }

			
 
				+  &::after {

			
 
				+    content: '';

			
 
				+    position: absolute;

			
 
				+    top: 0;

			
 
				+    left: calc(1600 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    width: calc(689 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    height: calc(276 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    background: url('./images/leaf2.png') no-repeat center / contain;

			
 
				+    opacity: 1;

			
 
				+    transition: opacity linear .2s;

			
 
				+    z-index: 3;

			
 
				+  }

			
 
				+  &-bg-wrap {

			
 
				+    width: fit-content;

			
 
				+    height: 100%;

			
 
				+    position: relative;

			
 
				+    z-index: 1;

			
 
				+  }

			
 
				+  &__grass {

			
 
				+    position: absolute;

			
 
				+    left: 0;

			
 
				+    bottom: 0;

			
 
				+    width: 100%;

			
 
				+    z-index: 1;

			
 
				+  }

			
 
				+  &__bg {

			
 
				+    height: 100%;

			
 
				+  }

			
 
				+}

			
 
				+

			
 
				+.system-btns {

			
 
				+  width: 100%;

			
 
				+  padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));

			
 
				+  display: flex;

			
 
				+  // flex-direction: column;

			
 
				+  justify-content: flex-end;

			
 
				+  position: absolute;

			
 
				+  bottom: calc(60 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));

			
 
				+  z-index: 2;

			
 
				+

			
 
				+  .operation-h {

			
 
				+    width: calc(36 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

			
 
				+    transition: opacity 0.5s ease-in-out;

			
 
				+  }

			
 
				+}

			
 
				+</style>

			
--- a/src/views/HomeView(横向滑动).vue
+++ b/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>
			
--- a/src/views/HomeView.vue
+++ b/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;

			
 
				 

			
--- a/vue.config.js
+++ b/vue.config.js
@@ -8,6 +8,18 @@ const time = dayjs().format('YYYY-M-D HH:mm:ss')
 
				 process.env.VUE_APP_UPDATE_TIME = time
			
 
				 
			
 
				 module.exports = defineConfig({
			
 
				+  pages: {
			
 
				+    mobile: {
			
 
				+      template: 'mobile/index.html',
			
 
				+      entry: 'mobile/main.js',
			
 
				+      filename: 'mobile.html'
			
 
				+    },
			
 
				+    index: {
			
 
				+      template: 'public/index.html',
			
 
				+      entry: 'src/main.js',
			
 
				+      filename: 'index.html'
			
 
				+    }
			
 
				+  },
			
 
				   publicPath: process.env.PUBLIC_PATH,
			
 
				   productionSourceMap: process.env.VUE_APP_CLI_MODE === 'prod' ? false : true,
			
 
				   // transpileDependencies: true, // 默认false，表示babel-loader 会忽略所有 node_modules 中的文件