|
|
@@ -0,0 +1,266 @@
|
|
|
+<template>
|
|
|
+ <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-state2.png"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-show="state === 3"
|
|
|
+ class="bg-img"
|
|
|
+ src="@/assets/images/hots-detail-bg-state3.png"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+
|
|
|
+ <!-- 阴影 -->
|
|
|
+ <img
|
|
|
+ class="shadow-box"
|
|
|
+ :src="shadow"
|
|
|
+ :style="{ width: state === 1 ? '50%' : '80%' }"
|
|
|
+ >
|
|
|
+
|
|
|
+ <img
|
|
|
+ class="content1"
|
|
|
+ :src="hots3StateContent1"
|
|
|
+ :style="{
|
|
|
+ opacity: state === 1 ? 1 : 0,
|
|
|
+ }"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ id="content2"
|
|
|
+ ref="content2Dom"
|
|
|
+ :style="{
|
|
|
+ opacity: state === 2 ? 1 : 0,
|
|
|
+ }"
|
|
|
+ class="content2"
|
|
|
+ @touchmove="handleScroll"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ id="content2Img"
|
|
|
+ :src="hots3StateContent2"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ class="content3"
|
|
|
+ :style="{
|
|
|
+ opacity: state === 3 ? 1 : 0,
|
|
|
+ }"
|
|
|
+ :src="hots3StateContent3"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ <OperationTip
|
|
|
+ v-show="state == 2 && isShowOperationTip"
|
|
|
+ class="operation-tip"
|
|
|
+ text="向左划动"
|
|
|
+ direction="h"
|
|
|
+ :color="'green'"
|
|
|
+ :is-show="isShowOperationTip"
|
|
|
+ />
|
|
|
+ <div class="btns-box">
|
|
|
+ <img
|
|
|
+ :src="state == 1 ? hots3StateBtn1 : hots3StateBtn1Ac"
|
|
|
+ alt=""
|
|
|
+ @click="state = 1"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="state == 2 ? hots3StateBtn2 : hots3StateBtn2Ac"
|
|
|
+ alt=""
|
|
|
+ @click="goState2"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="state == 3 ? hots3StateBtn3 : hots3StateBtn3Ac"
|
|
|
+ alt=""
|
|
|
+ @click="state = 3"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <BtnBack @click="emit('close')" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, computed, onMounted } from "vue"
|
|
|
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
|
|
|
+
|
|
|
+const emit = defineEmits(["close"])
|
|
|
+
|
|
|
+// 三个背景图
|
|
|
+import hots3StateBg1 from "@/assets/images/hots-detail-bg-state1.png"
|
|
|
+import hots3StateBg2 from "@/assets/images/hots-detail-bg-state2.png"
|
|
|
+import hots3StateBg3 from "@/assets/images/hots-detail-bg-state3.png"
|
|
|
+
|
|
|
+// 三个按钮
|
|
|
+
|
|
|
+import hots3StateBtn1 from "@/assets/images/hots-detail-btn-state1.png"
|
|
|
+import hots3StateBtn2 from "@/assets/images/hots-detail-btn-state2.png"
|
|
|
+import hots3StateBtn3 from "@/assets/images/hots-detail-btn-state3.png"
|
|
|
+
|
|
|
+import hots3StateBtn1Ac from "@/assets/images/hots-detail-btn-state1-ac.png"
|
|
|
+import hots3StateBtn2Ac from "@/assets/images/hots-detail-btn-state2-ac.png"
|
|
|
+import hots3StateBtn3Ac from "@/assets/images/hots-detail-btn-state3-ac.png"
|
|
|
+
|
|
|
+// 三个阴影
|
|
|
+import hots3StateShadow1 from "@/assets/images/img_shadow_1.png"
|
|
|
+import hots3StateShadow2 from "@/assets/images/img_shadow_2.png"
|
|
|
+import hots3StateShadow3 from "@/assets/images/img_shadow_3.png"
|
|
|
+
|
|
|
+// 三个内容
|
|
|
+import hots3StateContent1 from "@/assets/images/hots-detail-content-state1.png"
|
|
|
+import hots3StateContent2 from "@/assets/images/hots-detail-content-state2.png"
|
|
|
+import hots3StateContent3 from "@/assets/images/hots-detail-content-state3.png"
|
|
|
+
|
|
|
+const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
|
|
|
+
|
|
|
+// 轴1 卷2 册3
|
|
|
+const state = ref(1)
|
|
|
+
|
|
|
+// const homeBg = computed(() => {
|
|
|
+// return `url(${state.value == 1 ? hots3StateBg1 : state.value == 2 ? hots3StateBg2 : hots3StateBg3})`
|
|
|
+// })
|
|
|
+
|
|
|
+const shadow = computed(() => {
|
|
|
+ return state.value == 1
|
|
|
+ ? hots3StateShadow1
|
|
|
+ : state.value == 2
|
|
|
+ ? hots3StateShadow2
|
|
|
+ : hots3StateShadow3
|
|
|
+})
|
|
|
+
|
|
|
+const content2Dom = ref(null)
|
|
|
+const isShowOperationTip = ref(true)
|
|
|
+const goState2 = () => {
|
|
|
+ state.value = 2
|
|
|
+ setTimeout(() => {
|
|
|
+ if (content2Dom.value) {
|
|
|
+ const x = 310 / 780
|
|
|
+ const allWidth = document
|
|
|
+ .getElementById("content2Img")
|
|
|
+ .getBoundingClientRect().width
|
|
|
+ content2Dom.value.scrollLeft = allWidth * x
|
|
|
+ isShowOperationTip.value = true
|
|
|
+ }
|
|
|
+ }, 5)
|
|
|
+}
|
|
|
+
|
|
|
+const handleScroll = () => {
|
|
|
+ isShowOperationTip.value = false
|
|
|
+ console.log("开始滑动")
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.hotspot-detail-3 {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // background-image: v-bind(homeBg);
|
|
|
+ // background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top left;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ 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")
|
|
|
+ );
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .content1 {
|
|
|
+ width: 90%;
|
|
|
+ max-height: 80vh;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ transition: opacity 1s ease;
|
|
|
+ bottom: calc(
|
|
|
+ 130 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ .content2 {
|
|
|
+ width: 100%;
|
|
|
+ background-position: left top;
|
|
|
+ overflow: auto;
|
|
|
+ position: absolute;
|
|
|
+ transition: opacity 1s ease;
|
|
|
+ z-index: 2;
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ // height: 50vh;
|
|
|
+ width: 990px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content3 {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ transition: opacity 1s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .operation-tip {
|
|
|
+ position: fixed;
|
|
|
+ bottom: calc(
|
|
|
+ 80 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btns-box {
|
|
|
+ width: 55%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ bottom: calc(
|
|
|
+ 35 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+
|
|
|
+ > img {
|
|
|
+ width: calc(
|
|
|
+ 35 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ width: calc(
|
|
|
+ 35 / v-bind("windowSizeWhenDesignForRef") *
|
|
|
+ v-bind("windowSizeInCssForRef")
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
aamin
