|
|
@@ -0,0 +1,361 @@
|
|
|
+<template>
|
|
|
+ <div :class="`hotspot-detail-1 ${pageLev === 1 ? '' : 'hotspot-detail-2'}`">
|
|
|
+ <!-- 左上角 -->
|
|
|
+ <img
|
|
|
+ class="HD1_1"
|
|
|
+ :src="require(`@/assets/images/HD1/img_title.png`)"
|
|
|
+ :style="`opacity:${pageLev === 1 ? '1' : '0'}`"
|
|
|
+ >
|
|
|
+ <!-- 中间--点击查看 -->
|
|
|
+ <div :class="`HD1_2 ${isLookImg ? '' : 'HD1_2Hide'}`">
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ :src="require(`@/assets/images/icon-click-tip.png`)"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <div>点 击 查 看</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右边三个画 -->
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in imgList"
|
|
|
+ :key="item.id"
|
|
|
+ :class="`HD1_3 HD1_3_${index + 1} ${
|
|
|
+ pageLev === item.id ? 'HD1_3Ac' : ''
|
|
|
+ } ${imgBottomLoc(pageLev, item.id)} ${pageShow ? 'HD1_3AcBottom' : ''}
|
|
|
+ `"
|
|
|
+ @click="ImgClick(item)"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-show="pageLev === item.id"
|
|
|
+ v-touch:swipe.left="() => onSwipeChange(1, index)"
|
|
|
+ v-touch:swipe.right="() => onSwipeChange(-1, index)"
|
|
|
+ :swipe-options="{ direction: 'horizontal' }"
|
|
|
+ class="HD1_3AcMove"
|
|
|
+ >
|
|
|
+ <!-- :text="`${pageLev===11?'向右':pageLev===13?'向左':'左右'}滑动`" -->
|
|
|
+ <OperationTip
|
|
|
+ v-if="isShowOperationTip"
|
|
|
+ class="operation-tip"
|
|
|
+ :direction="'h'"
|
|
|
+ :is-show="isShowOperationTip"
|
|
|
+ color="green"
|
|
|
+ text="左右滑动"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ require(`@/assets/images/HD1/img${pageShow ? '' : '_list'}_${
|
|
|
+ item.imgName
|
|
|
+ }.png`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 顶部文字 -->
|
|
|
+ <div
|
|
|
+ :class="`HD1_4 ${pageShow ? 'HD1_4Ac' : ''}`"
|
|
|
+ :style="`opacity:${swChange && pageShow ? '1' : '0'}`"
|
|
|
+ >
|
|
|
+ <h3>{{ txtShow.title }}</h3>
|
|
|
+ <p>{{ txtShow.desc }}</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <BtnBack
|
|
|
+ color="green"
|
|
|
+ @click="backBtnFu"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from "vue"
|
|
|
+
|
|
|
+const emit = defineEmits(["close"])
|
|
|
+
|
|
|
+const craftInfo = configText.craft
|
|
|
+
|
|
|
+const imgList = [
|
|
|
+ {
|
|
|
+ id: 11,
|
|
|
+ imgName: "juan",
|
|
|
+ title: craftInfo[3].title,
|
|
|
+ desc: craftInfo[3].desc,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 12,
|
|
|
+ imgName: "ling",
|
|
|
+ title: craftInfo[5].title,
|
|
|
+ desc: craftInfo[5].desc,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 13,
|
|
|
+ imgName: "paper",
|
|
|
+ title: craftInfo[4].title,
|
|
|
+ desc: craftInfo[4].desc,
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+const imgListLocObj = {
|
|
|
+ 11: {
|
|
|
+ 12: "HD1_3HideRight",
|
|
|
+ 13: "HD1_3HideLeft",
|
|
|
+ },
|
|
|
+ 12: {
|
|
|
+ 13: "HD1_3HideRight",
|
|
|
+ 11: "HD1_3HideLeft",
|
|
|
+ },
|
|
|
+ 13: {
|
|
|
+ 11: "HD1_3HideRight",
|
|
|
+ 12: "HD1_3HideLeft",
|
|
|
+ },
|
|
|
+}
|
|
|
+
|
|
|
+// 当前页面 层级
|
|
|
+const pageLev = ref(1)
|
|
|
+const pageShow = ref(false)
|
|
|
+
|
|
|
+// 点击返回按钮
|
|
|
+const backBtnFu = () => {
|
|
|
+ if (pageLev.value !== 1) {
|
|
|
+ // 点击查看回复
|
|
|
+ isLookImg.value = true
|
|
|
+
|
|
|
+
|
|
|
+ pageShow.value = false
|
|
|
+ pageLev.value = 1
|
|
|
+ } else emit("close")
|
|
|
+}
|
|
|
+
|
|
|
+// 点击查看自动消失
|
|
|
+const isLookImg = ref(true)
|
|
|
+// onMounted(() => {
|
|
|
+// setTimeout(() => {
|
|
|
+// isLookImg.value = false
|
|
|
+// }, 3000)
|
|
|
+// })
|
|
|
+
|
|
|
+// 页面展示的文字
|
|
|
+const txtShow = ref({
|
|
|
+ title: "",
|
|
|
+ desc: "",
|
|
|
+})
|
|
|
+const isShowOperationTip = ref(false)
|
|
|
+
|
|
|
+// 点击图片
|
|
|
+const ImgClick = (item) => {
|
|
|
+ if (!isShowOperationTip.value) {
|
|
|
+ isShowOperationTip.value = true
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ pageShow.value = true
|
|
|
+ isLookImg.value = false
|
|
|
+ pageLev.value = item.id
|
|
|
+ txtShow.value = {
|
|
|
+ title: item.title,
|
|
|
+ desc: item.desc,
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const swChange = ref(true)
|
|
|
+
|
|
|
+// 左滑右滑
|
|
|
+const onSwipeChange = (num, index) => {
|
|
|
+ isShowOperationTip.value = false
|
|
|
+ let newItem = imgList[index + num]
|
|
|
+
|
|
|
+ if (index === 0 && num === -1) {
|
|
|
+ // 第一 还向左滑
|
|
|
+ newItem = imgList[imgList.length - 1]
|
|
|
+ // return
|
|
|
+ }
|
|
|
+ if (index === imgList.length - 1 && num === 1) {
|
|
|
+ newItem = imgList[0]
|
|
|
+ // return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (swChange.value) {
|
|
|
+ swChange.value = false
|
|
|
+ setTimeout(() => {
|
|
|
+ swChange.value = true
|
|
|
+ }, 600)
|
|
|
+ }
|
|
|
+
|
|
|
+ pageLev.value = newItem.id
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ txtShow.value = {
|
|
|
+ title: newItem.title,
|
|
|
+ desc: newItem.desc,
|
|
|
+ }
|
|
|
+ }, 500)
|
|
|
+}
|
|
|
+
|
|
|
+// 判断画轴的位置 在 左边还是右边
|
|
|
+const imgBottomLoc = (nowId, itemId) => {
|
|
|
+ // nowId:当前选中的id
|
|
|
+ // itemId 11 12 13
|
|
|
+ // nowId 11的时候 itemId 12在右边 itemId 13在左边
|
|
|
+ // nowId 12的时候 itemId 11在左边 itemId 13在右边
|
|
|
+ // nowId 13的时候 itemId 11在右边 itemId 12在左边
|
|
|
+ return pageShow.value ? imgListLocObj[nowId][itemId] : ""
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.hotspot-detail-1 {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url("../assets/images/HD1/bg_caizhi.jpg");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-color: #b6bfb3;
|
|
|
+ transition: all 1s;
|
|
|
+ .btn-back {
|
|
|
+ z-index: 20;
|
|
|
+ }
|
|
|
+ .HD1_1 {
|
|
|
+ transition: all 1s;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10;
|
|
|
+ top: 60px;
|
|
|
+ left: 30px;
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .HD1_2 {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 11;
|
|
|
+ top: 45%;
|
|
|
+ left: 40%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 30px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: opacity 1s;
|
|
|
+ opacity: 1;
|
|
|
+ & > img {
|
|
|
+ width: 40px;
|
|
|
+ }
|
|
|
+ & > div {
|
|
|
+ margin-top: 10px;
|
|
|
+ position: relative;
|
|
|
+ line-height: 20px;
|
|
|
+ left: 9px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-family: KaiTi;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .HD1_2Hide {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .HD1_3 {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10;
|
|
|
+ transition: bottom 1s;
|
|
|
+ width: 100%;
|
|
|
+ & > img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .HD1_3_1 {
|
|
|
+ right: -60%;
|
|
|
+ z-index: 1;
|
|
|
+ bottom: 8%;
|
|
|
+ }
|
|
|
+ .HD1_3_2 {
|
|
|
+ right: -50%;
|
|
|
+ z-index: 2;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ .HD1_3_3 {
|
|
|
+ right: -40%;
|
|
|
+ z-index: 3;
|
|
|
+ bottom: -8%;
|
|
|
+ }
|
|
|
+ .HD1_3Ac {
|
|
|
+ bottom: -5px;
|
|
|
+ right: 0;
|
|
|
+ opacity: 1;
|
|
|
+ .HD1_3AcMove {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 30%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .HD1_3HideLeft {
|
|
|
+ right: 100%;
|
|
|
+ bottom: -8%;
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+ .HD1_3HideRight {
|
|
|
+ right: -100%;
|
|
|
+ bottom: -8%;
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+ .HD1_3AcBottom {
|
|
|
+ bottom: -50px;
|
|
|
+ transition: right 1s, opacity 0.8s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .HD1_4 {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 11;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 100%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ font-family: KaiTi;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #5e715d;
|
|
|
+ width: 70%;
|
|
|
+ height: 26%;
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: bottom 1s, opacity 0.5s;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: 16px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ letter-spacing: 2px;
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ writing-mode: vertical-rl;
|
|
|
+ line-height: 120%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .HD1_4Ac {
|
|
|
+ opacity: 1;
|
|
|
+ bottom: 65%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.hotspot-detail-2 {
|
|
|
+ background-image: url("../assets/images/HD1/bg_paper.jpg");
|
|
|
+}
|
|
|
+</style>
|
aamin
