修复bug

SuperTwo791/css/main.css

@@ -3278,9 +3278,11 @@ a.hasHover:hover, a:active {
 /*loading*/
 
 .progressbar {
-    position: relative;
+    position: absolute;
     display: block;
-    width: 24%;
+    width: 30vw;
+    left: 50%;
+    transform: translateX(-50%);
     height: 10px;
     padding: 0px 20px;
     margin: 40px auto;

code/src/pages/tunnel/index.vue

@@ -142,9 +142,14 @@
 
     <div v-else class="mobile-swp">
       <div class="screen">
+
         <h2>留言板</h2>
         <div class="s-scroll">
           <ul class="content mb-content">
+          <div class="hint" v-if="!message.length">
+                暂无留言
+          </div>
+
             <li v-for="(item, i) in message" :key="i">
               <div class="info">
                 <span class="name">{{ item.nickName || "-" }}</span>
@@ -852,6 +857,12 @@ h2 {
   }
 
   .mobile-swp {
+    .hint{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+    }
     width: 100%;
     height: 100%;
     background: #4f0506;

hotspot/src/views/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home" @click="autoplay" @touchstart="autoplay">
+  <div class="home" @click="autoplay" @touchstart="autoplay" @touchend='huadong'>
     <audio
       v-if="audio"
       class="audio"
@@ -43,10 +43,12 @@
               controls
               autoplay
             ></video>
+
+            <!-- :src="fixUrl(item)" -->
             <iframe
               @click="colseParent()"
               v-else
-              :src="fixUrl(item)"
+              :src="fixUrl(myFim[i])"
               frameborder="0"
             ></iframe>
           </div>
@@ -102,6 +104,7 @@ export default {
   name: "Home",
   data() {
     return {
+      myFim:[],
       videoLength:true,
       loadAuto: false,
       audio: "",
@@ -165,6 +168,21 @@ export default {
     SwiperSlide,
   },
   methods: {
+    huadong(){
+      // console.log(666);
+            //点击的时候才加载，防止一次运行过多iframe标签导致页面崩溃
+      let myFim =document.querySelectorAll('.swiper-wrapper .swiper-slide')
+      let myFimCente =document.querySelectorAll('.swiper-wrapper .swiper-slide-active iframe')
+      myFim.forEach((v,i)=>{
+        //拿到当前在屏幕中间的iframe
+        if(v.className.includes('swiper-slide-active') && i>1) {
+          // console.log(myFimCente[0].src);
+          if(myFimCente[0].src){
+            myFimCente[0].src =this.fixUrl(this.data.model[i])
+          }
+          }
+      })
+    },
     autoplay() {
       if (this.loadAuto) {
         return;
@@ -178,11 +196,22 @@ export default {
     },
     async getData() {
       // http://192.168.0.44:8110
-      let url = `http://192.168.0.44:8110/data/${
+      let url = `http://192.168.0.44:8110/data//${
         this.id
       }/hot/js/data.js?time=${Math.random()}`;
       let result = (await this.$http.get(url)).data;
       this.data = result[this.m];
+
+
+    //进页面只让iframe加载2个
+      // console.log(9999999,this.data.model);
+      if(this.data.model){
+        this.myFim[0]=this.data.model[0]
+        this.myFim[1]=this.data.model[1]
+      }
+      // this.myFim=this.data.model
+
+
       if (!this.data) {
         return alert("热点解析错误");
       }
@@ -206,10 +235,24 @@ export default {
       }
     },
     fixUrl(item) {
-      return 'http://192.168.0.44:8110/'+item;
+      return 'http://192.168.0.44:8110'+item;
     },
     slideto(action) {
       this.swiper[action]();
+
+      
+      //点击的时候才加载，防止一次运行过多iframe标签导致页面崩溃
+      let myFim =document.querySelectorAll('.swiper-wrapper .swiper-slide')
+      let myFimCente =document.querySelectorAll('.swiper-wrapper .swiper-slide-active iframe')
+      myFim.forEach((v,i)=>{
+        //拿到当前在屏幕中间的iframe
+        if(v.className.includes('swiper-slide-active') && i>1) {
+          // console.log(myFimCente[0].src);
+          if(myFimCente[0].src){
+            myFimCente[0].src =this.fixUrl(this.data.model[i])
+          }
+          }
+      })
     },
   },
   mounted() {
@@ -217,7 +260,7 @@ export default {
     setTimeout(() => {
       let videos =document.querySelectorAll('.slide video')
       let Imgs =document.querySelectorAll('.slide img')
-      console.log(11111,Imgs.length);
+      // console.log(11111,Imgs.length);
       if(videos.length===1 || Imgs.length===1) this.videoLength = false
       
     }, 100);
@@ -376,6 +419,9 @@ export default {
 }
 
 @media screen and (max-width: 1000px) {
+  .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
+    bottom: 240px;
+  }
   .home {
     background: url('../assets/images/Mbac.png') no-repeat center;
     background-size: cover;
@@ -400,7 +446,7 @@ export default {
           }
           iframe {
             width: 100%;
-            height: 100vh;
+            height: 55vh;
           }
         }
       }