fix

src/App.vue

@@ -1,16 +1,16 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <style lang="less">
-html,body{
+html, body {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-*{
+* {
   margin: 0;
   padding: 0;
 }
@@ -18,5 +18,4 @@ html,body{
   width: 100%;
   height: 100%;
 }
-
 </style>

src/views/Home.vue

@@ -5,44 +5,50 @@
       <div class="mainCon" v-show="!oneTxt">
         <audio id="myAudio" v-if="audio" v-show="isOneAduio" :src="urlToFitFu(audio)" controls></audio>
         <!-- 如果只有一个模块 -->
-        <div class="oneTabNum" v-if="
+        <!-- <div class="oneTabNum" v-if="
           flooTab.length === 1 &&
           data[myType] &&
           data[myType].length &&
           data[myType].length > 1
         ">
           {{ myInd + 1 }} / {{ data[myType].length }}
-        </div>
+        </div> -->
 
         <!-- 主要内容 -->
 
-        <div class="contenBoxMain">
-          <div class="contenBox" :class="{ contenBoxAc: index === myInd }" v-for="(item, index) in data[myType]"
-            :key="myType === 'video' ? item.url : item">
-            <!-- 模型页面 -->
-            <div class="modelBox" v-if="myType === 'model'">
-              <iframe :src="urlToFitFu(item)" frameborder="0" v-if="index === myInd"></iframe>
-            </div>
-            <!-- 视频页面 -->
-            <div class="videoBox" v-else-if="myType === 'video'">
-              <video controls controlslist="nodownload" :src="urlToFitFu(item.url)" v-if="index === myInd"></video>
-            </div>
-            <!-- 图片页面 -->
-            <div class="imgBox" v-else-if="myType === 'img'">
-              <div class="smImgBox" @click="lookImg(urlToFitFu(item))">
-                <img v-lazy="urlToFitFu(item)" alt="" />
+        <div class="contenBoxMain swiper-container">
+          <div class="swiper-wrapper">
+            <div class="contenBox swiper-slide" v-for="(item, index) in data[myType]"
+              :key="myType === 'video' ? item.url : item">
+              <!-- 模型页面 -->
+              <div class="modelBox" v-if="myType === 'model'">
+                <iframe :src="urlToFitFu(item)" frameborder="0" v-if="index === myInd"></iframe>
+              </div>
+              <!-- 视频页面 -->
+              <div class="videoBox" v-else-if="myType === 'video'">
+                <video controls controlslist="nodownload" :src="urlToFitFu(item.url)" v-if="index === myInd"></video>
+              </div>
+              <!-- 图片页面 -->
+              <div class="imgBox" v-else-if="myType === 'img'">
+                <div class="smImgBox">
+                  <img v-lazy="urlToFitFu(item)" alt="" @click="lookImg(urlToFitFu(item))" />
+                </div>
               </div>
             </div>
           </div>
           <!-- 左右箭头 -->
-          <div @click="cutMyInd(-1, myInd === 0)" class="leftJJ awccJJ" :class="{ noClick: myInd === 0 }"
-            v-if="data[myType] && data[myType].length > 1"></div>
-          <div @click="cutMyInd(1, myInd === data[myType].length - 1)" class="rightJJ awccJJ"
-            :class="{ noClick: myInd === data[myType].length - 1 }" v-if="data[myType] && data[myType].length > 1">
-          </div>
+          <template v-if="!isMobile">
+            <div @click="cutMyInd(-1, myInd === 0)" class="leftJJ awccJJ" :class="{ noClick: myInd === 0 }"
+              v-if="data[myType] && data[myType].length > 1"></div>
+            <div @click="cutMyInd(1, myInd === data[myType].length - 1)" class="rightJJ awccJJ"
+              :class="{ noClick: myInd === data[myType].length - 1 }" v-if="data[myType] && data[myType].length > 1">
+            </div>
+          </template>
         </div>
       </div>
 
+      <div class="swiper-pagination"></div>
+
       <!-- 下面的文字介绍 -->
       <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
         <div class="flooTxtBox">
@@ -88,10 +94,16 @@
 </template>
 
 <script>
+import Swiper from "swiper"
+import "swiper/css/swiper.min.css"
+
 export default {
   name: "Home",
+  components: {
+  },
   data() {
     return {
+      isMobile: /iPhone|iPad|iPod|Android/i.test(navigator.userAgent),
       m: this.$route.query.m,
       id: this.$route.query.id,
       // 音频地址
@@ -150,7 +162,6 @@ export default {
     },
   },
   computed: {},
-  components: {},
   methods: {
     // 本地化 url 适配
     urlToFitFu(url) {
@@ -164,9 +175,14 @@ export default {
     },
 
     // 点击左右箭头
-    cutMyInd(num, flag) {
-      if (flag) return
-      this.myInd += num
+    cutMyInd(num) {
+      console.log(num, this.swiper)
+      if (!this.swiper) return
+      if (num > 0) {
+        this.swiper.slideNext()
+      } else {
+        this.swiper.slidePrev()
+      }
     },
     // 点击查看大图
     lookImg(url) {
@@ -233,6 +249,20 @@ export default {
         if (!obj.model && !obj.video && !obj.img && !resData.backgroundMusic) {
           this.oneTxt = true
         }
+
+        this.$nextTick(() => {
+          const _this = this
+          this.swiper = new Swiper('.contenBoxMain', {
+            on: {
+              slideChange() {
+                _this.myInd = this.activeIndex
+              }
+            },
+            pagination: {
+              el: '.swiper-pagination',
+            }
+          })
+        })
       }
     },
   },
@@ -249,15 +279,31 @@ export default {
   background-size: 100% 100%;
   border-radius: 10px;
   color: rgba(80, 61, 42, 0.9);
+  .swiper-pagination {
+    margin: 10px 0 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    width: 100%;
+
+    :deep(.swiper-pagination-bullet) {
+      width: 24px;
+      height: 4px;
+      border-radius: 2px;
+      background: white;
+      opacity: 1;
+
+      &.swiper-pagination-bullet-active {
+        background: #603C23;
+      }
+    }
+  }
   .viewerCla img {
     display: none;
   }
-  position: relative;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 60%;
-  height: 65%;
+  height: 100%;
   position: relative;
   #myAudio {
     z-index: 11;
@@ -304,15 +350,6 @@ export default {
         height: 100%;
       }
       .contenBox {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        opacity: 0;
-        pointer-events: none;
-        transition: all 0.5s;
-
         .modelBox,
         .videoBox,
         .imgBox {
@@ -339,7 +376,6 @@ export default {
             height: 100%;
             // cursor: zoom-in;
             & > img {
-              pointer-events: none;
               width: 100%;
               height: 100%;
               object-fit: contain;
@@ -347,27 +383,24 @@ export default {
           }
         }
       }
-      .contenBoxAc {
-        opacity: 1;
-        pointer-events: auto;
-      }
       .awccJJ {
         cursor: pointer;
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-        left: 10px;
-        width: 30px;
-        height: 40px;
+        left: 30px;
+        width: 16px;
+        height: 30px;
         background-image: url("../assets/images/pc/left.png");
         background-size: 100% 100%;
+        z-index: 1;
         &:focus {
           outline: none;
         }
       }
       .rightJJ {
         left: auto;
-        right: 10px;
+        right: 30px;
         background-image: url("../assets/images/pc/right.png");
       }
       .noClick {
@@ -377,7 +410,7 @@ export default {
     }
     .flooTxt {
       margin: 0 auto;
-      margin-top: 20px;
+      margin-top: 10px;
       width: 70%;
       max-height: 120px;
       .flooTxtBox {
@@ -453,11 +486,17 @@ export default {
 // 移动端
 @media screen and (max-width: 1000px) {
   .home {
-    width: 90%;
-    height: 55%;
     background: url("../assets/images/pc/hot_bg_M.png") no-repeat center center;
     background-size: cover !important;
-    transform: translate(-50%, -65%);
+    .swiper-pagination {
+      margin: 10px 0 0;
+      gap: 4px;
+
+      :deep(.swiper-pagination-bullet) {
+        width: 15px;
+        height: 3px;
+      }
+    }
     #myAudio {
       width: 90vw;
       max-width: 500px;
@@ -515,6 +554,7 @@ export default {
         max-height: 98px;
 
         .flooTxtBox {
+          padding: 0;
           .myTxt {
             font-size: 14px;
             line-height: 22px;