ソースを参照

Merge branch 'master' of http://192.168.0.115:3000/renyicun/NanjingMuseumWuJinZang

aamin 1 年間 前
コミット
5761a96aa0
2 ファイル変更56 行追加12 行削除
  1. 55 11
      src/views/HotspotDetail1.vue
  2. 1 1
      src/views/PoemList.vue

+ 55 - 11
src/views/HotspotDetail1.vue

@@ -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");

+ 1 - 1
src/views/PoemList.vue

@@ -391,7 +391,7 @@ const isMoveFu = (index, num) => {
     position: relative;
     display: flex;
     background-image: url("../assets/images/RW/bg_caizhi.jpg");
-    background-size: cover;
+    background-size: contain;
     transition: all 1.2s;
 
     .ROW {