|
|
@@ -33,7 +33,11 @@
|
|
|
hide: hotVisible && checkedHotId !== 1
|
|
|
}"
|
|
|
>
|
|
|
- <img src="./images/bamboo1.png">
|
|
|
+ <img
|
|
|
+ v-lazy="{
|
|
|
+ src: Bamboo1Img,
|
|
|
+ }"
|
|
|
+ >
|
|
|
|
|
|
<div
|
|
|
class="bamboo-hot2__hot"
|
|
|
@@ -53,15 +57,14 @@
|
|
|
}"
|
|
|
>
|
|
|
<img
|
|
|
- src="./images/bamboo2.png"
|
|
|
- @load="handleBambooOffset(2)"
|
|
|
+ v-lazy="{
|
|
|
+ src: Bamboo2Img,
|
|
|
+ }"
|
|
|
>
|
|
|
</div>
|
|
|
<div
|
|
|
+ v-if="!hotVisible"
|
|
|
class="bamboo-hot2__hot b2"
|
|
|
- :class="{
|
|
|
- hide: hotVisible
|
|
|
- }"
|
|
|
@click="handleHot(2)"
|
|
|
>
|
|
|
<p>紫竹</p>
|
|
|
@@ -74,15 +77,14 @@
|
|
|
}"
|
|
|
>
|
|
|
<img
|
|
|
- src="./images/bamboo3.png"
|
|
|
- @load="handleBambooOffset(3)"
|
|
|
+ v-lazy="{
|
|
|
+ src: Bamboo3Img,
|
|
|
+ }"
|
|
|
>
|
|
|
</div>
|
|
|
<div
|
|
|
+ v-if="!hotVisible"
|
|
|
class="bamboo-hot2__hot b3"
|
|
|
- :class="{
|
|
|
- hide: hotVisible
|
|
|
- }"
|
|
|
@click="handleHot(3)"
|
|
|
>
|
|
|
<p>梅鹿竹</p>
|
|
|
@@ -95,8 +97,9 @@
|
|
|
}"
|
|
|
>
|
|
|
<img
|
|
|
- src="./images/bamboo4.png"
|
|
|
- @load="handleBambooOffset(4)"
|
|
|
+ v-lazy="{
|
|
|
+ src: Bamboo4Img,
|
|
|
+ }"
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
@@ -117,15 +120,14 @@
|
|
|
}"
|
|
|
>
|
|
|
<img
|
|
|
- src="./images/bamboo7.png"
|
|
|
- @load="handleBambooOffset(7)"
|
|
|
+ v-lazy="{
|
|
|
+ src: Bamboo7Img,
|
|
|
+ }"
|
|
|
>
|
|
|
</div>
|
|
|
<div
|
|
|
+ v-if="!hotVisible"
|
|
|
class="bamboo-hot2__hot b7"
|
|
|
- :class="{
|
|
|
- hide: hotVisible
|
|
|
- }"
|
|
|
@click="handleHot(7)"
|
|
|
>
|
|
|
<p>湘妃竹</p>
|
|
|
@@ -138,8 +140,9 @@
|
|
|
}"
|
|
|
>
|
|
|
<img
|
|
|
- src="./images/bamboo8.png"
|
|
|
- @load="handleBambooOffset(8)"
|
|
|
+ v-lazy="{
|
|
|
+ src: Bamboo8Img,
|
|
|
+ }"
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
@@ -155,7 +158,7 @@
|
|
|
|
|
|
<div
|
|
|
ref="bambooWrapBg"
|
|
|
- class="bamboo-hot2-bg-wrap"
|
|
|
+ class="bamboo-hot2-g-wrap"
|
|
|
>
|
|
|
<img
|
|
|
v-if="bgImgLoaded"
|
|
|
@@ -198,14 +201,26 @@
|
|
|
import { ref, watch, onBeforeUnmount } from 'vue'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
import useSizeAdapt from "@/useFunctions/useSizeAdapt"
|
|
|
+import Bamboo1Img from "./images/bamboo1.png"
|
|
|
+import Bamboo2Img from "./images/bamboo2.png"
|
|
|
+import Bamboo3Img from "./images/bamboo3.png"
|
|
|
+import Bamboo4Img from "./images/bamboo4.png"
|
|
|
+import Bamboo7Img from "./images/bamboo7.png"
|
|
|
+import Bamboo8Img from "./images/bamboo8.png"
|
|
|
|
|
|
+const {
|
|
|
+ windowSizeInCssForRef,
|
|
|
+ windowSizeWhenDesignForRef,
|
|
|
+} = useSizeAdapt()
|
|
|
+const match = windowSizeInCssForRef.value.match(/\d+/)
|
|
|
+const maxTranslateXLength = 1000 / Number(windowSizeWhenDesignForRef.value) * parseInt(match[0], 10)
|
|
|
let itemScrollMap = {
|
|
|
1: 0,
|
|
|
- 2: 0,
|
|
|
- 3: 0,
|
|
|
- 4: 450,
|
|
|
- 7: 0,
|
|
|
- 8: 1048,
|
|
|
+ 2: 230 / Number(windowSizeWhenDesignForRef.value) * parseInt(match[0], 10),
|
|
|
+ 3: 280 / Number(windowSizeWhenDesignForRef.value) * parseInt(match[0], 10),
|
|
|
+ 4: 640 / Number(windowSizeWhenDesignForRef.value) * parseInt(match[0], 10),
|
|
|
+ 7: 900 / Number(windowSizeWhenDesignForRef.value) * parseInt(match[0], 10),
|
|
|
+ 8: 840 / Number(windowSizeWhenDesignForRef.value) * parseInt(match[0], 10),
|
|
|
}
|
|
|
const ITEM_INFO_MAP = {
|
|
|
1: {
|
|
|
@@ -236,10 +251,6 @@ const ITEM_INFO_MAP = {
|
|
|
|
|
|
const titShow = ref(true)
|
|
|
const bgImgLoaded = ref(false)
|
|
|
-const {
|
|
|
- windowSizeInCssForRef,
|
|
|
- windowSizeWhenDesignForRef,
|
|
|
-} = useSizeAdapt()
|
|
|
const router = useRouter()
|
|
|
|
|
|
const bambooWrap = ref()
|
|
|
@@ -261,41 +272,11 @@ const handleHot = (id) => {
|
|
|
translateX.value = itemScrollMap[id]
|
|
|
}
|
|
|
|
|
|
-const handleBambooOffset = (target) => {
|
|
|
- let temp = 0
|
|
|
-
|
|
|
- if ([7, 8].includes(target)) {
|
|
|
- if (target === 7) {
|
|
|
- temp = window.innerWidth * 0.2
|
|
|
- } else {
|
|
|
- temp = window.innerWidth * 0.2
|
|
|
- }
|
|
|
-
|
|
|
- itemScrollMap[target] = maxTranslateXLength - temp
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- const offset = window.innerWidth / 6
|
|
|
- const left = document.getElementsByClassName(`bamboo-hot2-b${target}`)?.[0].getBoundingClientRect().left
|
|
|
-
|
|
|
- switch (target) {
|
|
|
- case 3:
|
|
|
- temp = window.innerWidth / 3
|
|
|
- break
|
|
|
- case 4:
|
|
|
- temp = -(window.innerWidth * 0.25)
|
|
|
- break
|
|
|
- }
|
|
|
- itemScrollMap[target] = left - offset + temp
|
|
|
-}
|
|
|
-
|
|
|
// 动画帧相关
|
|
|
const lastAnimationTimeStamp = ref(0)
|
|
|
const animationFrameId = ref(0)
|
|
|
const moveSpeed = ref(0)
|
|
|
const translateX = ref(0)
|
|
|
-const match = windowSizeInCssForRef.value.match(/\d+/)
|
|
|
-const maxTranslateXLength = (window.innerWidth * 3 - 150) / Number(windowSizeWhenDesignForRef.value) * parseInt(match[0], 10)
|
|
|
const lastMoveEventTimeStamp = ref(0)
|
|
|
const isMouseDown = ref(false)
|
|
|
const isMove = ref(false)
|
|
|
@@ -408,10 +389,12 @@ onBeforeUnmount(() => {
|
|
|
img {
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
+:deep([class^="bamboo-hot2-b"] img[lazy=loaded]) {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
|
|
|
.hide {
|
|
|
opacity: 0 !important;
|
|
|
- animation: none !important;
|
|
|
}
|
|
|
|
|
|
[class^="bamboo-hot2-b"] {
|
|
|
@@ -421,7 +404,9 @@ img {
|
|
|
z-index: 3;
|
|
|
|
|
|
img {
|
|
|
+ opacity: 0;
|
|
|
height: 100%;
|
|
|
+ transition: opacity linear .2s;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -496,8 +481,10 @@ img {
|
|
|
font-size: 12px;
|
|
|
font-family: KaiTi;
|
|
|
writing-mode: vertical-rl;
|
|
|
- animation: breathing linear 2s infinite;
|
|
|
|
|
|
+ &:not(.hide) {
|
|
|
+ animation: breathing linear 2s infinite;
|
|
|
+ }
|
|
|
&::before {
|
|
|
content: '';
|
|
|
display: block;
|
|
|
@@ -584,7 +571,7 @@ img {
|
|
|
transition: opacity linear .2s;
|
|
|
z-index: 3;
|
|
|
}
|
|
|
- &-bg-wrap {
|
|
|
+ &-g-wrap {
|
|
|
width: fit-content;
|
|
|
height: 100%;
|
|
|
position: relative;
|
chenlei