|
@@ -36,11 +36,11 @@
|
|
|
:swipe-options="{ direction: 'horizontal' }"
|
|
|
class="HD1_3AcMove"
|
|
|
>
|
|
|
+ <!-- :text="`${pageLev===11?'向右':pageLev===13?'向左':'左右'}滑动`" -->
|
|
|
<OperationTip
|
|
|
v-if="isShowOperationTip"
|
|
|
class="operation-tip"
|
|
|
:direction="'h'"
|
|
|
- :text="'左右滑动'"
|
|
|
:is-show="isShowOperationTip"
|
|
|
color="green"
|
|
|
/>
|
|
@@ -65,6 +65,11 @@
|
|
|
<p>{{ txtShow.desc }}</p>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 滑动限位提示语 -->
|
|
|
+ <div :class="`HD1_5 ${txtTit ? 'HD1_5Show' : ''}`">
|
|
|
+ 暂无更多内容
|
|
|
+ </div>
|
|
|
+
|
|
|
<BtnBack
|
|
|
color="green"
|
|
|
@click="backBtnFu"
|
|
@@ -73,7 +78,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, onMounted } from "vue"
|
|
|
+import { ref } from "vue"
|
|
|
|
|
|
const emit = defineEmits(["close"])
|
|
|
|
|
@@ -114,11 +119,11 @@ const backBtnFu = () => {
|
|
|
|
|
|
// 点击查看自动消失
|
|
|
const isLookImg = ref(true)
|
|
|
-onMounted(() => {
|
|
|
- setTimeout(() => {
|
|
|
- isLookImg.value = false
|
|
|
- }, 3000)
|
|
|
-})
|
|
|
+// onMounted(() => {
|
|
|
+// setTimeout(() => {
|
|
|
+// isLookImg.value = false
|
|
|
+// }, 3000)
|
|
|
+// })
|
|
|
|
|
|
// 页面展示的文字
|
|
|
const txtShow = ref({
|
|
@@ -146,10 +151,32 @@ const ImgClick = (item) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// 底部文字提示显示和隐藏
|
|
|
+const txtTit = ref(false)
|
|
|
+
|
|
|
const swChange = ref(true)
|
|
|
|
|
|
// 左滑右滑
|
|
|
const onSwipeChange = (num, index) => {
|
|
|
+
|
|
|
+ if (index === 0 && num === -1) {
|
|
|
+ // 第一 还向左滑
|
|
|
+ // newItem = imgList[imgList.length - 1]
|
|
|
+ txtTit.value = true
|
|
|
+ setTimeout(() => {
|
|
|
+ txtTit.value = false
|
|
|
+ }, 1000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (index === imgList.length - 1 && num === 1) {
|
|
|
+ // newItem = imgList[0]
|
|
|
+ txtTit.value = true
|
|
|
+ setTimeout(() => {
|
|
|
+ txtTit.value = false
|
|
|
+ }, 1000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
if (swChange.value) {
|
|
|
swChange.value = false
|
|
|
setTimeout(() => {
|
|
@@ -158,8 +185,7 @@ const onSwipeChange = (num, index) => {
|
|
|
}
|
|
|
|
|
|
let newItem = imgList[index + num]
|
|
|
- if (index === 0 && num === -1) newItem = imgList[imgList.length - 1]
|
|
|
- if (index === imgList.length - 1 && num === 1) newItem = imgList[0]
|
|
|
+
|
|
|
pageLev.value = newItem.id
|
|
|
|
|
|
setTimeout(() => {
|
|
@@ -196,7 +222,7 @@ const onSwipeChange = (num, index) => {
|
|
|
.HD1_2 {
|
|
|
position: absolute;
|
|
|
z-index: 11;
|
|
|
- top: 48%;
|
|
|
+ top: 45%;
|
|
|
left: 40%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
width: 30px;
|
|
@@ -250,7 +276,6 @@ const onSwipeChange = (num, index) => {
|
|
|
.HD1_3Ac {
|
|
|
bottom: -5px;
|
|
|
right: 0;
|
|
|
- left: 0;
|
|
|
.HD1_3AcMove {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
@@ -319,6 +344,25 @@ const onSwipeChange = (num, index) => {
|
|
|
opacity: 1;
|
|
|
top: 8%;
|
|
|
}
|
|
|
+
|
|
|
+ .HD1_5 {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 30;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #92a47f;
|
|
|
+ letter-spacing: 4px;
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.5s;
|
|
|
+ pointer-events: none;
|
|
|
+ font-family: KingHwa_OldSong, KingHwa_OldSong;
|
|
|
+ }
|
|
|
+ .HD1_5Show {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
.hotspot-detail-2 {
|
|
|
background-image: url("../assets/images/HD1/bg_paper.jpg");
|