重写竹林

src/views/MoreContent.vue

@@ -1,41 +1,36 @@
 <template>
   <div class="ZMoveBox">
-    <div class="aaaa">
-      <div @click="onSwipeChange(1)">
-        +++++
-      </div>
-      <div @click="onSwipeChange(-1)">
-        -----
-      </div>
-    </div>
-
-    <!-- 热点 -->
-    <HotspotComp
-      v-show="indexAc === 0"
-      class="hotspot"
-      @click="
-        router.replace({
-          name: 'BambooHot',
-        })
-      "
-    />
     <div
       class="ZMbox"
       :style="`width: ${pageWidth * pageNum}px; left:-${indexAc * pageWidth}px`"
     >
-      <!-- <div
+      <div
         v-for="(item1, index1) in listArr"
         :key="index1"
         :class="`ROW ${item1.classWai}`"
         :style="`width:${pageWidth}px; opacity:${
-          index1 === indexAc ? '1' : '0'
+          index1 === indexAc ? '1' : isOpcMove ? '0' : ''
         }`"
       >
+        <!-- 热点 -->
+        <HotspotComp
+          v-if="index1 === 0"
+          class="hotspot"
+          @click="
+            router.replace({
+              name: 'BambooHot',
+            })
+          "
+        />
+
         <div
           class="ROWtxt"
           :class="`${txtShow ? 'ROWtxtShow' : ''}`"
         >
-          <div class="ROWtxtTabBox">
+          <div
+            v-if="item1.nameArr"
+            class="ROWtxtTabBox"
+          >
             <div
               v-for="(item2, index2) in item1.nameArr"
               :key="index2"
@@ -46,7 +41,37 @@
             </div>
           </div>
 
-          <div class="ROWtxtIcon">
+          <div
+            v-else
+            class="ROWlast"
+          >
+            <img
+              src="@/assets/images/wu-jing-cang.png"
+              alt=""
+            >
+            <div
+              class="game-box"
+              @click="OpenScene()"
+            >
+              线上展厅
+            </div>
+            <div
+              class="online-box"
+              @click="
+                () => {
+                  store.state.haveShownStartup = false;
+                  router.replace('/?back=1');
+                }
+              "
+            >
+              重新开始
+            </div>
+          </div>
+
+          <div
+            v-if="item1.nameArr"
+            class="ROWtxtIcon"
+          >
             {{ item1.name }}
             <img
               class="deco"
@@ -67,36 +92,17 @@
           :style="`transform: translateX(${isMoveFu(index1, item3.num)}px);`"
           alt=""
         >
-      </div> -->
-
-      <!-- 第一个页面 -->
-      <div
-        class="ROW"
-        :style="`width:${pageWidth}px; opacity:${0 === indexAc ? '1' : '0'}`"
-      >
-        <img
-          class="ROW4_1"
-          :src="require(`@/assets/images/fade-chapter-wood/4_08.webp`)"
-          alt=""
-        >
-        <img
-          class="ROW4_2"
-          :src="require(`@/assets/images/fade-chapter-wood/4_09.webp`)"
-          alt=""
-        >
-        <img
-          class="ROW4_3"
-          :src="require(`@/assets/images/fade-chapter-wood/4_10.webp`)"
-          alt=""
-        >
-        <img
-          class="ROW4_4"
-          :src="require(`@/assets/images/fade-chapter-wood/4_12.webp`)"
-          alt=""
-        >
       </div>
     </div>
 
+    <!-- 左右滑动盒子 -->
+    <div
+      v-touch:swipe.left="() => onSwipeChange(1)"
+      v-touch:swipe.right="() => onSwipeChange(-1)"
+      class="ROWmove"
+      :swipe-options="{ direction: 'horizontal' }"
+    />
+
     <!-- 指示器 -->
     <ProgressBar
       class="pagination"
@@ -105,21 +111,24 @@
       :cur-percentage="indexAc"
       color-ac="#7B916B"
       color="#7B916B60"
+      @go-to-slide="clickSonIndFu"
     />
     <!-- 返回按钮 -->
     <BtnBack
       style="z-index: 200"
-      color="green"
       @click="router.replace('/?back=1')"
     />
 
     <!-- 提示语 -->
-    <OperationTip
-      class="operation-tip"
-      :direction="'h'"
-      :text="'下一章'"
-      :color="'green'"
-    />
+    <div :class="`operation-tip ${titShow?'':'operation-tipHide'}`">
+      左右滑动
+      <img
+        class=""
+        :src="require(`@/assets/images/icon_operation_h_green.png`)"
+        alt=""
+        draggable="false"
+      >
+    </div>
 
     <!-- 跳转的视频 -->
 
@@ -159,13 +168,9 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onBeforeMount, nextTick, onMounted } from "vue"
+import { ref, onBeforeMount, nextTick, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
-import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
-import { useWindowSize } from "@vueuse/core"
-import OperationTip from "@/components/OperationTip.vue"
-import useSizeAdapt from "@/useFunctions/useSizeAdapt.js"
 
 const listArr = [
   {
@@ -229,9 +234,9 @@ const listArr = [
       {
         txt: "开始体验",
         fu: () => {
-          router.replace('/game')
+          router.replace("/game")
         },
-      }
+      },
     ],
     classWai: "ROW3",
     imgArr: [
@@ -248,6 +253,22 @@ const listArr = [
       { className: "ROW3_11", imgName: "1_01", num: 100 },
     ],
   },
+  {
+    name: "最后一页",
+    classWai: "ROW4",
+    imgArr: [
+      { className: "ROW4_1", imgName: "4_08", num: 120 },
+      { className: "ROW4_2", imgName: "4_09", num: 40 },
+      { className: "ROW4_3", imgName: "4_10", num: 40 },
+      { className: "ROW4_4", imgName: "4_12", num: 40 },
+      { className: "ROW4_5", imgName: "3_03", num: 60 },
+      { className: "ROW4_6", imgName: "3_04", num: 80 },
+      { className: "ROW4_7", imgName: "2_04", num: 80 },
+      { className: "ROW4_8", imgName: "2_04-1", num: 80 },
+      { className: "ROW4_9", imgName: "1_05", num: 100 },
+      { className: "ROW4_10", imgName: "2_05", num: 100 },
+    ],
+  },
 ]
 
 // 文字错位问题
@@ -262,6 +283,9 @@ const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
+// 点击指示器移动透明的问题
+const isOpcMove = ref(true)
+
 // 点击线上展厅
 const OpenScene = () => {
   const musicDom = document.getElementById("bg-music")
@@ -269,6 +293,9 @@ const OpenScene = () => {
   router.replace("/scene")
 }
 
+// 提示语的显示隐藏
+const titShow = ref(true)
+
 // 向右是-1
 // 向左是 1
 const indexFlag = ref(0)
@@ -279,17 +306,35 @@ const onSwipeChange = (val) => {
 
   let indexFlagTemp = -val
 
-  // if (val === -1 && indexAc.value === 0) {
-  //   return
-  // }
-  // if (val === 1 && indexAc.value === listArr.length - 1) {
-  //   return
-  // }
+  if (val === -1 && indexAc.value === 0) {
+    return
+  }
+  if (val === 1 && indexAc.value === listArr.length - 1) {
+    return
+  }
+
+  titShow.value = false
+
   indexAc.value = numResTemp
 
   indexFlag.value = indexFlagTemp
 }
 
+// 点击底部的指示器 改变 indexAc
+const clickSonIndFu = (index)=>{
+  if (index === indexAc.value) return
+
+  titShow.value = false
+
+  isOpcMove.value = false
+
+  setTimeout(() => {
+    isOpcMove.value = true
+  }, 500)
+
+  indexAc.value = index
+}
+
 // 是否触发移动的逻辑
 const isMoveFu = (index, num) => {
   let numRes
@@ -342,19 +387,6 @@ const playVideoFu = (val, flag) => {
   height: 100%;
   background-color: #f5f5f3;
   position: relative;
-  .aaaa {
-    position: absolute;
-    bottom: 50px;
-    left: 50px;
-    z-index: 999;
-  }
-
-  .hotspot {
-    position: absolute;
-    top: 46%;
-    left: 15%;
-    z-index: 20;
-  }
 
   .ZMbox {
     width: 1000px;
@@ -370,6 +402,13 @@ const playVideoFu = (val, flag) => {
       position: relative;
       transition: opacity 1.2s;
 
+      .hotspot {
+        position: absolute;
+        top: 46%;
+        left: 15%;
+        z-index: 20;
+      }
+
       .ROWtxt {
         z-index: 100;
         position: relative;
@@ -453,11 +492,11 @@ const playVideoFu = (val, flag) => {
       }
       .ROW1_6 {
         height: 35%;
-        left: 3%;
+        left: -5%;
       }
       .ROW1_7 {
         height: 45%;
-        left: 25%;
+        left: 20%;
       }
       .ROW2_1 {
         z-index: 5;
@@ -490,59 +529,83 @@ const playVideoFu = (val, flag) => {
       .ROW2_8 {
         left: 0%;
       }
-      .ROW3_1{
+      .ROW3_1 {
         left: -24%;
       }
-      .ROW3_2{
+      .ROW3_2 {
         height: 30%;
-        right:-14%;
+        right: -14%;
       }
-      .ROW3_3{
-        right:-14%
+      .ROW3_3 {
+        right: -14%;
       }
-      .ROW3_4{
-        right:-24%
+      .ROW3_4 {
+        right: -24%;
       }
-      .ROW3_5{
-        right:-36%
+      .ROW3_5 {
+        right: -36%;
       }
-      .ROW3_6{
+      .ROW3_6 {
         z-index: 3;
-        right:-3%
+        right: -3%;
       }
-      .ROW3_7{
+      .ROW3_7 {
         z-index: 4;
-        left:-48%
+        left: -48%;
       }
-      .ROW3_8{
+      .ROW3_8 {
         z-index: 4;
-        right:-20%
+        right: -20%;
       }
-      .ROW3_9{
+      .ROW3_9 {
         z-index: 4;
-        right:-37%
+        right: -37%;
       }
-      .ROW3_10{
+      .ROW3_10 {
         z-index: 5;
-        right:-3%;
+        right: -3%;
       }
-      .ROW3_11{
+      .ROW3_11 {
         z-index: 5;
-        left:-15%;
+        left: -15%;
       }
-      .ROW4_1{
+      .ROW4_1 {
         z-index: 5;
-        left:2%;
-        height: 30%;
+        left: 2%;
+        height: 40%;
+      }
+      .ROW4_2 {
+        left: -26%;
       }
-      .ROW4_2{
-        left:2%
+      .ROW4_3 {
+        left: -13%;
       }
-      .ROW4_3{
-        left:2%
+      .ROW4_4 {
+        left: -28%;
       }
-      .ROW4_4{
-        left:2%
+      .ROW4_5 {
+        z-index: 3;
+        right: 8%;
+      }
+      .ROW4_6 {
+        z-index: 3;
+        left: -30%;
+      }
+      .ROW4_7 {
+        z-index: 4;
+        left: -70%;
+      }
+      .ROW4_8 {
+        z-index: 4;
+        right: -5%;
+      }
+      .ROW4_9 {
+        z-index: 5;
+        right: -5%;
+      }
+      .ROW4_10 {
+        z-index: 4;
+        left: -60%;
       }
     }
 
@@ -556,6 +619,49 @@ const playVideoFu = (val, flag) => {
         }
       }
     }
+
+    // 最后一页的文字
+    .ROW4 {
+      .ROWtxt {
+        top: 20%;
+        left: 37%;
+      }
+    }
+    .ROWlast {
+      font-family: "KingHwa_OldSong";
+      color: white;
+      z-index: 20;
+      width: 20%;
+      & > img {
+        width: 118px;
+      }
+      .game-box {
+        width: 198%;
+        background: url(@/assets/images/game-bg.png);
+        background-size: 100% 100%;
+        padding: 75%;
+        white-space: nowrap;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 62%;
+        margin-left: -25%;
+        font-size: 18px;
+      }
+
+      .online-box {
+        font-weight: 700;
+        color: #768c77;
+        width: 50%;
+        white-space: nowrap;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        margin-left: 54%;
+        font-size: 18px;
+      }
+    }
   }
 
   // 视频盒子
@@ -580,16 +686,45 @@ const playVideoFu = (val, flag) => {
   // 指示器
   .pagination {
     position: absolute;
+    z-index: 20;
     left: 50%;
     transform: translateX(-50%);
     bottom: 2%;
   }
-  .operation-tip{
+
+  // 提示语
+  .operation-tip {
     position: absolute;
     z-index: 30;
-    left:50%;
-    bottom:7%;
+    left: 50%;
+    bottom: 7%;
     transform: translateX(-50%);
+    color: #7f9470;
+    font-size: 12px;
+    letter-spacing: 3px;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    opacity: 1;
+    transition: opacity 1s;
+
+    img {
+      width: 30px;
+    }
+  }
+
+  .operation-tipHide{
+    opacity: 0;
+  }
+
+  // 左右滑动盒子
+  .ROWmove {
+    position: absolute;
+    z-index: 19;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
   }
 }
 </style>

src/views/PoemList.vue

@@ -51,12 +51,15 @@
     </div>
 
     <!-- 操作提示 -->
-    <OperationTip
-      class="operation-tip"
-      :direction="'h'"
-      :text="'下一章'"
-      color="green"
-    />
+    <div :class="`operation-tip ${titShow?'':'operation-tipHide'}`">
+      下一章
+      <img
+        class=""
+        :src="require(`@/assets/images/icon_operation_h_green.png`)"
+        alt=""
+        draggable="false"
+      >
+    </div>
 
     <!-- 返场视频 -->
     <div :class="`backVideo ${backVideoFlag ? 'backVideoShow' : ''}`">
@@ -146,6 +149,9 @@ function getTypesettingIdx(poemType) {
   }
 }
 
+// 提示语的显示隐藏
+const titShow = ref(true)
+
 const router = useRouter()
 // 返场视频ref
 const backVideoRef = ref("")
@@ -206,7 +212,9 @@ const ageFlga = ref(false)
 const cutAgeFu = (val) => {
   const index = listRes.value.findIndex((v) => v["朝代"] === val)
 
-  if (isOpcMove.value === index) return
+  if (indexAc.value === index) return
+
+  titShow.value = false
 
   isOpcMove.value = false
 
@@ -261,13 +269,7 @@ const onSwipeChange = (val) => {
 
   if (val === -1 && indexAc.value === 0) {
     // 第一个页面左滑
-    // numResTemp = listRes.value.length - 1
-    // indexFlagTemp = -indexFlagTemp
-    // isOpcMove.value = false
 
-    // setTimeout(() => {
-    //   isOpcMove.value = true
-    // }, 500)
     txtTit.value = true
     setTimeout(() => {
       txtTit.value = false
@@ -276,19 +278,16 @@ const onSwipeChange = (val) => {
   }
   if (val === 1 && indexAc.value === listRes.value.length - 1) {
     // numResTemp = 0
-    // indexFlagTemp = -indexFlagTemp
-    // isOpcMove.value = false
 
-    // setTimeout(() => {
-    //   isOpcMove.value = true
-    // }, 500)
     txtTit.value = true
     setTimeout(() => {
       txtTit.value = false
     }, 1000)
     return
-    // return
   }
+
+  titShow.value = false
+
   indexAc.value = numResTemp
 
   indexFlag.value = indexFlagTemp
@@ -697,13 +696,26 @@ const isMoveFu = (index, num) => {
   // 操作提示
   .operation-tip {
     position: absolute;
+    z-index: 30;
     left: 50%;
-    bottom: calc(
-      17 / v-bind("windowSizeWhenDesignForRef") *
-        v-bind("windowSizeInCssForRef")
-    );
+    bottom: 7%;
     transform: translateX(-50%);
-    z-index: 10;
+    color: #7f9470;
+    font-size: 12px;
+    letter-spacing: 3px;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    opacity: 1;
+    transition: opacity 1s;
+
+    img {
+      width: 30px;
+    }
+  }
+
+  .operation-tipHide{
+    opacity: 0;
   }
   // 返场视频
   .backVideo {