update1040

src/main.js

@@ -4,17 +4,20 @@ import router from './router'
 import axios from 'axios'
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
- 
+// 图片懒加载
+import VueLazyLoad from 'vue-lazyload'
+Vue.use(VueLazyLoad, {
+  error: require('@/assets/images/IMGerror.png'),
+  loading: require('@/assets/images/loading.gif')
+})
+
 Vue.config.productionTip = false
 Vue.prototype.$http = axios
 
-Vue.use(Viewer,{
-  defaultOptions: {
-    title:false
-  }
-})
+Vue.use(Viewer)
 
+import './assets/base.css'
 new Vue({
   router,
   render: h => h(App)
-}).$mount('#app')
+}).$mount('#app')

src/views/Home.vue

@@ -1,80 +1,122 @@
 <template>
-  <div class="home" @click="autoplay" @touchstart="autoplay">
+  <!-- @click="autoplay" @touchstart="autoplay" -->
+  <div class="home">
     <audio
       v-if="audio"
       class="audio"
       id="audio1"
       :src="audio"
       preload
-      autoplay
-      loop
       ref="musicBg"
+      @ended="overAudio"
     ></audio>
     <div
       class="content"
-      v-if="fixIcon.length > 0"
-      :style="{ height: isMobile ? '100%' : '80%' }"
+      v-if="(!audio && fixIcon.length > 0) || (audio && fixIcon.length > 1)"
+      :class="{ isMobileCon: isMobile }"
     >
       <div
-        v-if="!isMobile"
+        v-if="!isMobile && lengthShow"
         @click="slideto('slidePrev')"
         class="swiper-button-prev"
       ></div>
-      <div class="mb-intro" v-if="active === 'title' && isMobile">
+      <div class="mb-intro" v-show="active === 'title' && isMobile">
         <p v-html="data.title"></p>
         <p v-html="data.content"></p>
+        <p
+          v-html="data.imagesDesc[myInd]"
+          v-if="
+            data.imagesDesc && data.imagesDesc[myInd] && active === 'images'
+          "
+        ></p>
+        <p
+          v-html="data.videosDesc[myInd]"
+          v-if="data.videosDesc && data.videosDesc[myInd] && active === 'video'"
+        ></p>
       </div>
-      <swiper v-else class="warpper" ref="mySwiper" :options="swiperOptions">
+      <!-- 查看图片 -->
+      <viewer class="viewerCla" ref="viewer" :images="lookPics">
+        <img :src="lookPics[0]" alt="" />
+      </viewer>
+
+      <swiper
+        v-show="active !== 'title'"
+        class="warpper"
+        ref="mySwiper"
+        :options="swiperOptions"
+      >
         <swiper-slide v-for="(item, i) in data[active]" :key="i">
           <div class="slide">
             <img
               style="cursor: pointer"
-              v-viewer
               v-if="active === 'images'"
-              :src="fixUrl(item)"
+              v-lazy="fixUrl(item)"
+              @click="lookImg(fixUrl(item))"
               alt=""
             />
             <video
               v-else-if="active === 'video'"
               :src="fixUrl(item.url)"
-              controlsList="nodownload"
-              disablePictureInPicture
               controls
+              autoplay
+              muted
             ></video>
             <iframe
               @click="colseParent(item)"
-              v-else
+              v-else-if="active === 'model' || active === 'iframe'"
               :src="fixUrl(item)"
               frameborder="0"
             ></iframe>
           </div>
         </swiper-slide>
-        <div class="swiper-pagination" slot="pagination"></div>
+        <div
+          class="swiper-pagination"
+          slot="pagination"
+          v-show="lengthShow"
+        ></div>
       </swiper>
       <div
-        v-if="!isMobile"
+        v-if="!isMobile && lengthShow"
         @click="slideto('slideNext')"
         class="swiper-button-next"
       ></div>
     </div>
-    <ul class="iconarr" v-if="fixIcon.length > 1">
+    <ul
+      class="iconarr"
+      v-if="fixIcon.length > 0"
+      :class="{ oneChuMusic: fixIcon.length === 1 && !audio }"
+    >
       <li
-        :class="{ active: item.id === active }"
-        @click="active = item.id"
+        :class="{
+          active: item.id === active || item.audioAc,
+          onlyTxt: audio && fixIcon.length === 2 && i !== 0,
+        }"
+        @click="changeActive(item.id, item.audioAc)"
         v-for="(item, i) in fixIcon"
         :key="i"
       >
         <img :src="require(`@/assets/images/${item.img}.png`)" alt="" />
-        <!-- <span>{{ item.name }}</span> -->
+        <span>{{ item.name }}</span>
       </li>
     </ul>
     <div
       class="intro"
-      :class="{ ismtop: fixIcon.length <= 0 }"
+      :class="{
+        ismtop:
+          (!audio && fixIcon.length === 0) || (audio && fixIcon.length === 1),
+      }"
       v-if="!isMobile || (isMobile && fixIcon.length <= 0)"
     >
       <h3 v-html="data.title"></h3>
       <p v-html="data.content"></p>
+      <p
+        v-html="data.imagesDesc[myInd]"
+        v-if="data.imagesDesc && data.imagesDesc[myInd] && active === 'images'"
+      ></p>
+      <p
+        v-html="data.videosDesc[myInd]"
+        v-if="data.videosDesc && data.videosDesc[myInd] && active === 'video'"
+      ></p>
     </div>
   </div>
 </template>
@@ -85,6 +127,13 @@ import "swiper/css/swiper.css";
 import browser from "@/utils/browser";
 
 let iconArr = [
+  {
+    name: "音频",
+    id: "audio",
+    img: "audio-icon",
+    display: false,
+    audioAc: false,
+  },
   { name: "图片", id: "images", img: "img-icon", display: false },
   { name: "视频", id: "video", img: "video-icon", display: false },
   { name: "网页", id: "iframe", img: "iframe-icon", display: false },
@@ -94,16 +143,19 @@ let iconArr = [
 browser.mobile &&
   iconArr.push({ name: "介绍", id: "title", img: "txt-icon", display: false });
 
+  
 let tt =  window.location.href.split('/hot_online1')[0] 
-// let tt = 'http://192.168.0.198:8080/code/'
-
 
 export default {
   name: "Home",
   data() {
     return {
+      lookPics: [],
+
+      // 图片描述的索引
       myInd: 0,
-      loadAuto: false,
+      lengthShow: false,
+      //  看看是不是只有一张图，一个视频或irm，只有一张图的时候隐藏左右按钮和小圆点
       audio: "",
       m: this.$route.query.m,
       id: this.$route.query.id,
@@ -145,39 +197,28 @@ export default {
     };
   },
   watch: {
-    myInd: {
-      handler(val) {
-        this.$nextTick(() => {
-          setTimeout(() => {
-            let domAll = document.querySelectorAll("video");
-            if (domAll && domAll.length && domAll.length > 0) {
-              domAll.forEach((v, i) => {
-                if (i === val) v.play();
-                else v.pause();
-              });
-            }
-          }, 100);
-        });
-      },
-      immediate: true,
-    },
-
     active(newVal) {
+      let AcDataLength = this.data[newVal].length-1
+      if(this.myInd>AcDataLength) this.myInd = AcDataLength
+
+      // 判断是否只有一张图片或者视频，ifrm   lengthShow
+      let tempType = this.data[newVal];
+      if (tempType && tempType.length && tempType.length > 1)
+        this.lengthShow = true;
+      else this.lengthShow = false;
       if (!newVal) {
         return;
       }
       if (!this.$refs.musicBg) {
         return;
       }
+      // 如果点击的是音频
       setTimeout(() => {
         if (newVal == "video") {
+          this.audioAc(false);
           if (!this.$refs.musicBg.paused) {
             this.$refs.musicBg.pause();
           }
-        } else {
-          if (this.$refs.musicBg.paused) {
-            this.$refs.musicBg.play(); // 暂停
-          }
         }
       }, 500);
     },
@@ -196,31 +237,45 @@ export default {
     SwiperSlide,
   },
   methods: {
-    autoplay() {
-      if (this.loadAuto) {
-        return;
-      }
-      try {
+    // 点击查看大图
+    lookImg(url) {
+      let dom = this.$refs.viewer.$viewer;
+      this.lookPics = [url];
+      dom.show();
+    },
+    // 音频播放完毕
+    overAudio() {
+      this.audioAc(false);
+    },
+    // 音频的状态
+    audioAc(flag) {
+      this.iconArr.forEach((v) => {
+        if (v.id === "audio") v.audioAc = flag;
+      });
+    },
+    // 点击切换图片--视频
+    changeActive(id, flag) {
+      if (id === "audio" && flag === false) {
+        this.audioAc(true);
         this.$refs.musicBg.play();
-        this.loadAuto = true;
-      } catch (error) {
-        error;
+        return;
+      } else if (id === "audio" && flag === true) {
+        this.audioAc(false);
+        this.$refs.musicBg.pause();
+        return;
       }
+      this.active = id;
     },
     async getData() {
-      // https://www.4dmodel.com/
-      console.log(tt);
       let url = `${tt}/data/${
         this.id
-      }/hot/js/data.js?time=${Math.random()}`;
+      }/hot/js/data.json?time=${Math.random()}`;
       let result = (await this.$http.get(url)).data;
       this.data = result[this.m];
       if (!this.data) {
         return alert("热点解析错误");
       }
-
-      this.audio = this.data["backgroundMusic"];
-
+      this.audio = this.fixUrl(this.data["backgroundMusic"]);
       if (!this.data.content && this.isMobile) {
         this.iconArr.pop();
       }
@@ -229,6 +284,8 @@ export default {
           this.active = !this.active ? item.id : this.active;
           item.display = true;
         }
+        // 如果有音频
+        if (item.id === "audio" && this.audio) item.display = true;
       });
     },
 
@@ -260,17 +317,14 @@ export default {
       },
       false
     );
-    document.oncontextmenu = function(){
-        event.returnValue = false;
-    }// 或者直接返回整个事件
-    document.oncontextmenu = function(){
-    return false;
-    }
   },
 };
 </script>
 
 <style lang="less" scoped>
+.viewerCla img {
+  display: none;
+}
 .audio {
   position: fixed;
   top: -100px;
@@ -287,14 +341,15 @@ export default {
     &:first-of-type {
       font-weight: bold;
       font-size: 20px;
+      padding-right: 40px;
     }
   }
 }
 .home {
+  background-color: rgba(0, 0, 0, 0.6);
   width: 100%;
   height: 100%;
   position: relative;
-
   .content {
     width: 100%;
     height: 80%;
@@ -306,30 +361,28 @@ export default {
         img,
         video,
         iframe {
-          max-height: 570px;
-          border-radius: 14px;
+          max-height: 70vh;
         }
 
         iframe {
-          height: 570px;
+          height: 600px;
           width: 1000px;
         }
       }
     }
   }
+  .isMobileCon {
+    height: calc(100vh - 90px);
+  }
 
   .iconarr {
-<<<<<<< HEAD
-=======
     z-index: 1999;
     position: absolute;
     right: 30px;
     bottom: calc(20vh - 20px);
->>>>>>> master
     list-style: none;
     display: flex;
     justify-content: flex-end;
-    margin-right: 30px;
     li {
       display: flex;
       align-items: center;
@@ -349,12 +402,19 @@ export default {
       }
     }
     .active {
-      background: #19bbed;
+      background: #b30a16;
       border: none;
     }
   }
+  .oneChuMusic {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .onlyTxt {
+    display: none !important;
+  }
   .intro {
-    max-height: 20vh;
+    max-height: 19vh;
     overflow: auto;
     width: 70%;
     color: #fff;
@@ -370,10 +430,13 @@ export default {
       text-indent: 32px;
     }
   }
-
   .ismtop {
-    padding-top: 40px !important;
-    max-height: unset !important;
+    max-height: 65%;
+    height: 65%;
+    padding: 50px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   }
 }
 
@@ -422,20 +485,23 @@ export default {
           }
           iframe {
             width: 100%;
-            height: 100vh;
+            height: calc(100vh - 90px);
           }
         }
       }
     }
     .iconarr {
+      display: flex;
+      flex-wrap: wrap;
       list-style: none;
       margin-right: 0px;
       position: fixed;
-      bottom: 10px;
+      bottom: 0px;
       right: 0px;
       z-index: 1999;
       li {
         width: 70px;
+        margin-bottom: 10px;
       }
     }
   }
@@ -447,6 +513,7 @@ export default {
       .warpper {
         .slide {
           width: 100%;
+          img,
           video,
           iframe {
             max-width: 70%;
@@ -455,11 +522,7 @@ export default {
           iframe {
             width: 100%;
             max-width: unset;
-            height: 100vh;
-          }
-
-          img{
-            width: auto;
+            height: calc(100vh - 90px);
           }
         }
       }
@@ -501,12 +564,13 @@ export default {
   background: rgba(0, 0, 0, 0.4);
   padding: 10px 20px;
   color: #fff !important;
+  border-radius: 50%;
 }
 .swiper-button-prev {
-  left: 0;
+  left: 16px;
 }
 .swiper-button-next {
-  right: 0;
+  right: 16px;
 }
 
 @media screen and (max-width: 500px) {