fix

src/views/Home.vue

@@ -1,58 +1,60 @@
 <template>
   <div class="home">
     <div class="main">
-      <div class="myTitle">{{ myTitle }}</div>
+      <div class="myTitle is-mobile">{{ myTitle }}</div>
+
       <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="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>
+
+          <div class="swiper-pagination"></div>
         </div>
       </div>
 
-      <!-- 下面的文字介绍 -->
-      <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
-        <div class="flooTxtBox">
-          <!-- <div class="myTitle">{{ myTitle }}</div> -->
-          <!-- 视频的介绍 -->
-          <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]" v-html="videoTxt[myInd]">
-          </div>
-          <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]" v-html="imgTxt[myInd]">
+      <div class="main-info">
+        <div class="myTitle is-pc">{{ myTitle }}</div>
+        <!-- 下面的文字介绍 -->
+        <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
+          <div class="flooTxtBox">
+            <!-- <div class="myTitle">{{ myTitle }}</div> -->
+            <!-- 视频的介绍 -->
+            <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]" v-html="videoTxt[myInd]">
+            </div>
+            <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]" v-html="imgTxt[myInd]">
+            </div>
+            <div class="myTxt" v-html="myTxt"></div>
           </div>
-          <div class="myTxt" v-html="myTxt"></div>
         </div>
       </div>
     </div>
@@ -88,6 +90,9 @@
 </template>
 
 <script>
+import Swiper from "swiper"
+import "swiper/css/swiper.min.css"
+
 export default {
   name: "Home",
   data() {
@@ -232,6 +237,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 +268,28 @@ export default {
   background-size: 100% 100%;
   border-radius: 10px;
   color: #F7E7DC;
+  .swiper-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    bottom: 10px;
+    height: 4px;
+  }
+  :deep(.swiper-pagination-bullet-active) {
+    background: #91714E !important;
+  }
+  :deep(.swiper-pagination-bullet) {
+    width: 26px;
+    height: 4px;
+    border-radius: 2px;
+    background: #FFFFFF;
+    opacity: 1;
+  }
   .viewerCla img {
     display: none;
   }
-  position: relative;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 60%;
-  height: 65%;
+  width: 100%;
+  height: 100%;
   position: relative;
   #myAudio {
     z-index: 11;
@@ -269,26 +301,33 @@ export default {
     height: 60px;
   }
   .main {
-    width: 1100px;
+    width: 100%;
     margin: 0 auto;
     height: 100%;
-    padding: 30px 0 20px 0;
+    padding: 30px 50px 20px;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
+    &-info {
+      flex: 1;
+    }
     .myTitle {
-      font-size: 22px;
-      font-weight: 700;
-      margin-bottom: 20px;
+      font-size: 24px;
+      margin-bottom: 25px;
       text-align: center;
+
+      &.is-mobile {
+        display: none;
+      }
     }
     .mainCon {
       position: relative;
       border-radius: 6px;
       overflow: hidden;
-      width: 100%;
-      height: calc(100% - 200px);
+      width: 47%;
+      max-width: 420px;
+      height: 320px;
+      margin: 0 26px 0 0;
       .oneTabNum {
         z-index: 10;
         position: absolute;
@@ -306,12 +345,6 @@ export default {
       .contenBox {
         width: 100%;
         height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        opacity: 0;
-        pointer-events: none;
-        transition: all 0.5s;
 
         .modelBox,
         .videoBox,
@@ -333,7 +366,6 @@ export default {
           }
         }
         .imgBox {
-          padding: 0px 50px;
           .smImgBox {
             width: 100%;
             height: 100%;
@@ -344,6 +376,9 @@ export default {
               height: 100%;
               object-fit: contain;
             }
+            img[lazy='loading'] {
+              object-fit: cover;
+            }
           }
         }
       }
@@ -376,22 +411,19 @@ export default {
       }
     }
     .flooTxt {
-      margin: 0 auto;
-      margin-top: 20px;
-      width: 70%;
-      max-height: 120px;
       .flooTxtBox {
         width: 100%;
         height: 100%;
+        max-height: 300px;
         overflow-y: auto;
         //隐藏滚动条
         &::-webkit-scrollbar {
           display: none;
         }
         .myTxt {
-          font-size: 16px;
+          font-size: 18px;
           color: #F7E7DC;
-          line-height: 24px;
+          line-height: 26px;
         }
         &::-webkit-scrollbar {
           /*滚动条整体样式*/
@@ -453,11 +485,8 @@ export default {
   }
 }
 // 移动端
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: 800px) {
   .home {
-    width: 90%;
-    height: 55%;
-    transform: translate(-50%, -65%);
     #myAudio {
       width: 90vw;
       max-width: 500px;
@@ -467,11 +496,28 @@ export default {
       height: 100%;
       padding: 0;
       position: absolute;
+      flex-direction: column;
+      &-info {
+        margin-top: -5px;
+        width: 100%;
+        padding: 10px 15px 0px 15px;
+        max-height: 98px;
+      }
       .myTitle {
         font-size: 16px;
+        margin-bottom: 20px;
+
+        &.is-pc {
+          display: none;
+        }
+        &.is-mobile {
+          display: block;
+        }
       }
       .mainCon {
         border-radius: 0;
+        margin: 0;
+        width: 100%;
         height: calc(100% - 195px);
         .contenBox {
           .videoBox {
@@ -509,11 +555,9 @@ export default {
         }
       }
       .flooTxt {
-        margin-top: -5px;
         width: 100%;
-        padding: 10px 15px 0px 15px;
-        max-height: 98px;
-
+        height: 100%;
+        overflow-y: auto;
         .flooTxtBox {
           .myTxt {
             font-size: 14px;