Преглед на файлове

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

aamin преди 1 година
родител
ревизия
19d3bbc441
променени са 3 файла, в които са добавени 41 реда и са изтрити 75 реда
  1. 26 64
      src/views/HotspotDetail1.vue
  2. 6 4
      src/views/MoreContent.vue
  3. 9 7
      src/views/PoemList.vue

+ 26 - 64
src/views/HotspotDetail1.vue

@@ -23,7 +23,7 @@
       :key="item.id"
       :class="`HD1_3 HD1_3_${index + 1} ${
         pageLev === item.id ? 'HD1_3Ac' : ''
-      } ${imgBottomLoc(pageLev,item.id)} ${pageShow ? 'HD1_3AcBottom' : ''}
+      } ${imgBottomLoc(pageLev, item.id)} ${pageShow ? 'HD1_3AcBottom' : ''}
       `"
       @click="ImgClick(item)"
     >
@@ -46,9 +46,9 @@
 
       <img
         :src="
-          require(`@/assets/images/HD1/img${
-            pageShow ? '' : '_list'
-          }_${item.imgName}.png`)
+          require(`@/assets/images/HD1/img${pageShow ? '' : '_list'}_${
+            item.imgName
+          }.png`)
         "
         alt=""
       >
@@ -63,11 +63,6 @@
       <p>{{ txtShow.desc }}</p>
     </div>
 
-    <!-- 滑动限位提示语 -->
-    <div :class="`HD1_5 ${txtTit ? 'HD1_5Show' : ''}`">
-      暂无更多内容
-    </div>
-
     <BtnBack
       color="green"
       @click="backBtnFu"
@@ -103,6 +98,21 @@ const imgList = [
   },
 ]
 
+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)
@@ -149,9 +159,6 @@ const ImgClick = (item) => {
   }
 }
 
-// 底部文字提示显示和隐藏
-const txtTit = ref(false)
-
 const swChange = ref(true)
 
 // 左滑右滑
@@ -162,18 +169,10 @@ 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
   }
 
@@ -184,8 +183,6 @@ const onSwipeChange = (num, index) => {
     }, 600)
   }
 
-
-
   pageLev.value = newItem.id
 
   setTimeout(() => {
@@ -197,30 +194,14 @@ const onSwipeChange = (num, index) => {
 }
 
 // 判断画轴的位置 在 左边还是右边
-const imgBottomLoc = (nowId, itemId)=>{
-  // nowId:当前id
+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在左边
-  const obj = {
-    11: {
-      12: 'HD1_3HideRight',
-      13: 'HD1_3HideLeft'
-    },
-    12: {
-      13: 'HD1_3HideRight',
-      11: 'HD1_3HideLeft'
-    },
-    13: {
-      11: 'HD1_3HideRight',
-      12: 'HD1_3HideLeft'
-    },
-  }
-  return pageShow.value ? obj[nowId][itemId] : ''
-
+  return pageShow.value ? imgListLocObj[nowId][itemId] : ""
 }
-
 </script>
 
 <style lang="less" scoped>
@@ -279,7 +260,7 @@ const imgBottomLoc = (nowId, itemId)=>{
   .HD1_3 {
     position: absolute;
     z-index: 10;
-    transition: all 1s;
+    transition: bottom 1s;
     width: 100%;
     & > img {
       width: 100%;
@@ -303,6 +284,7 @@ const imgBottomLoc = (nowId, itemId)=>{
   .HD1_3Ac {
     bottom: -5px;
     right: 0;
+    opacity: 1;
     .HD1_3AcMove {
       position: absolute;
       bottom: 0;
@@ -317,14 +299,12 @@ const imgBottomLoc = (nowId, itemId)=>{
   }
 
   .HD1_3HideLeft {
-    left: -100%;
-    right: auto;
+    right: 100%;
     bottom: -8%;
     opacity: 0;
     pointer-events: none;
   }
   .HD1_3HideRight {
-    left: auto;
     right: -100%;
     bottom: -8%;
     opacity: 0;
@@ -332,6 +312,7 @@ const imgBottomLoc = (nowId, itemId)=>{
   }
   .HD1_3AcBottom {
     bottom: -50px;
+    transition: right 1s, opacity 0.8s;
   }
 
   .HD1_4 {
@@ -371,25 +352,6 @@ const imgBottomLoc = (nowId, itemId)=>{
     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");

+ 6 - 4
src/views/MoreContent.vue

@@ -347,7 +347,6 @@
       >
         <video
           ref="videoFadeAtMoZhuEl"
-          class="fade-to-other-page"
           src="@/assets/videos/fade-at-mo-zhu.mp4"
           playsinline
           muted
@@ -654,7 +653,7 @@ const isShowVideoFadeAtMoZhu = ref(false)
 function onClickEntryAtMoZhu(pathName) {
   isShowVideoFadeAtMoZhu.value = true
   nextTick(() => {
-    videoFadeAtMoZhuEl.value.addEventListener('ended', () => {
+    videoFadeAtMoZhuEl.value.addEventListener("ended", () => {
       router.push({
         name: pathName,
       })
@@ -1315,8 +1314,11 @@ onMounted(() => {
       width: 18%;
       position: absolute;
       z-index: 10;
-      top:32%;
-      left:44%;
+      top: 32%;
+      left: 44%;
+    }
+    & > video {
+      width: 100%;
     }
   }
 

+ 9 - 7
src/views/PoemList.vue

@@ -2,7 +2,9 @@
   <div class="poem-list-page">
     <div
       class="RWbox"
-      :style="`width: ${domWidth}px; left:-${indexAc * pageWidth}px`"
+      :style="`width: ${domWidth}px; left:-${
+        baseRWboxLeft ? 500 : indexAc * pageWidth
+      }px`"
     >
       <div
         v-for="(item1, index1) in listRes"
@@ -177,13 +179,13 @@ const pageWidth = ref(0)
 // 当前选中索引
 const indexAc = ref(0)
 
+const baseRWboxLeft = ref(true)
 
-// 待完善
-// onMounted(()=>{
-//   setTimeout(()=>{
-//     indexAc.value = 0
-//   }, 300)
-// })
+onMounted(() => {
+  setTimeout(() => {
+    baseRWboxLeft.value = false
+  }, 500)
+})
 
 // 底部文字提示显示和隐藏
 const txtTit = ref(false)