|
|
@@ -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"
|
|
|
@@ -81,56 +80,135 @@
|
|
|
>
|
|
|
<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"
|
|
|
>
|
|
|
+
|
|
|
<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-leaf"
|
|
|
+ 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-stem"
|
|
|
+ src="@/assets/images/img_zhuye-min.png"
|
|
|
+ alt=""
|
|
|
:style="{
|
|
|
opacity: leafOpacity,
|
|
|
zIndex: 2,
|
|
|
}"
|
|
|
- src="@/assets/images/home-2.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
|
|
|
@@ -234,16 +336,51 @@
|
|
|
</p> -->
|
|
|
</div>
|
|
|
|
|
|
- <div class="" />
|
|
|
+ <!-- 展开作者简介 -->
|
|
|
+
|
|
|
+ <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>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 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 ,
|
|
|
}"
|
|
|
>
|
|
|
三竿修竹
|
|
|
@@ -252,14 +389,24 @@
|
|
|
<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
|
|
|
+ <!-- <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`,
|
|
|
@@ -267,31 +414,33 @@
|
|
|
}"
|
|
|
>
|
|
|
竹叶
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div
|
|
|
class="fixed-desc detail-desc-stem"
|
|
|
: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="{
|
|
|
@@ -305,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"
|
|
|
@@ -447,9 +599,15 @@ const {
|
|
|
windowSizeWhenDesignForRef,
|
|
|
} = useSizeAdapt()
|
|
|
|
|
|
+const isShowAuthorDesc = ref(false)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
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
|
|
|
@@ -460,6 +618,7 @@ const scrollerEl = ref(null)
|
|
|
const scrollerElScrollTop = ref(0)
|
|
|
function onScroll() {
|
|
|
scrollerElScrollTop.value = scrollerEl.value.scrollTop
|
|
|
+ console.log('当前滚动比例', scrollerElScrollTop.value / summaryHideAt, scrollerEl.value.scrollTop / scrollerEl.value.scrollHeight)
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
scrollerEl.value.addEventListener('scroll', onScroll)
|
|
|
@@ -544,6 +703,7 @@ const paintingWidth = computed(() => {
|
|
|
return ret
|
|
|
})
|
|
|
|
|
|
+
|
|
|
const paintingHeightInitial = 523
|
|
|
const paintingHeightMovedUp = 425
|
|
|
let paintingHeightMovedDown = 758
|
|
|
@@ -590,18 +750,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,10 +815,11 @@ const stemOpacity2 = computed(() => {
|
|
|
return ret
|
|
|
})
|
|
|
|
|
|
+
|
|
|
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) {
|
|
|
@@ -673,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
|
|
|
@@ -713,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)
|
|
|
@@ -782,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) {
|
|
|
@@ -860,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
|
|
|
@@ -880,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
|
|
|
@@ -902,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
|
|
|
@@ -945,7 +1207,6 @@ const sizeOpacity = computed(() => {
|
|
|
const isShowHotspot = computed(() => {
|
|
|
let ret = null
|
|
|
|
|
|
- console.log('scrollerElScrollTop.value', scrollerElScrollTop.value)
|
|
|
if (scrollerElScrollTop.value >= summaryShowAt) {
|
|
|
ret = true
|
|
|
} else {
|
|
|
@@ -997,27 +1258,27 @@ 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 = [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) })
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1033,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) })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -1063,9 +1324,10 @@ function onClickGoNextPage() {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-*{
|
|
|
+* {
|
|
|
transition: all 1s;
|
|
|
}
|
|
|
+
|
|
|
.home {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -1134,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);
|
|
|
@@ -1213,9 +1475,11 @@ function onClickGoNextPage() {
|
|
|
left: 50%;
|
|
|
top: 54%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
- width: calc(225 / 308 * 100%);
|
|
|
+ // width: calc(225 / 308 * 100%);
|
|
|
+ height: 70%;
|
|
|
}
|
|
|
|
|
|
+
|
|
|
}
|
|
|
|
|
|
>.hotspot-wrap {
|
|
|
@@ -1254,6 +1518,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%;
|
|
|
@@ -1261,11 +1562,11 @@ function onClickGoNextPage() {
|
|
|
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'));
|
|
|
@@ -1282,6 +1583,63 @@ 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%;
|
|
|
@@ -1294,27 +1652,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%;
|
|
|
}
|
|
|
@@ -1333,7 +1696,7 @@ function onClickGoNextPage() {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
- right: 10px;
|
|
|
+ // right: 10px;
|
|
|
height: 3px;
|
|
|
background-color: #A9D185;
|
|
|
}
|
|
|
@@ -1403,9 +1766,9 @@ function onClickGoNextPage() {
|
|
|
top: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- overflow: hidden;
|
|
|
+ overflow: auto;
|
|
|
transition: transform 2s ease;
|
|
|
- z-index:3;
|
|
|
+ z-index: 3;
|
|
|
|
|
|
>.inner {
|
|
|
width: 100%;
|
aamin
