update

web/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "swiper": "^6.7.5",
+    "v-viewer": "^1.6.4",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
     "vue-router": "^3.2.0"

web/public/static/js/main_2020_show.js

@@ -18060,6 +18060,7 @@ window.Modernizr = function(n, e, t) {
                 
                 var video = a.material.map.image
                 video.addEventListener('ended', ()=>{
+                    window.player.emit("videoEnded")
                     console.log( " ended!!!") 
                     if(video.src != a.originVideoSrc){//播放完之后换为原来的视频
                         video.src = a.originVideoSrc

web/src/components/hotspot/image.vue

@@ -3,7 +3,7 @@
       <div class="title">{{hotspot.title}}</div>
       <div class="img-con">
         <span @click="active-=1" :class="{noshow:active<=0}">上一张</span>
-        <img :src="hotspot.images[active]" alt="">
+        <img v-viewer :src="hotspot.images[active]" alt="">
         <span @click="active+=1" :class="{noshow:active>=hotspot.images.length - 1}">下一张</span>
         <ul class="pagna">
           <li v-for="(item,i) in hotspot.images" :class="{active:i==active}" :key="i"></li>
@@ -14,10 +14,10 @@
     </div>
     <div v-else class="mbimages" :style="{backgroundImage:`url(${require('@/assets/images/project/mb_hostpot.jpg')})`}">
       <div class="title">{{hotspot.title}}</div>
-      <swiper ref="listSwiper" class="swiper-wrapper swiper-wrapper-n" :options="swiperOption">
+      <swiper class="swiper-wrapper swiper-wrapper-n" :options="swiperOption">
         <swiper-slide  class="swiper-slide" v-for="(item,index) in hotspot.images" :key="index">
           <div class="sl-item">
-            <img :src="item">
+            <img v-viewer :src="item">
           </div>
         </swiper-slide>
       </swiper>

web/src/components/hotspot/video.vue

@@ -17,9 +17,18 @@
   </div>
   <div v-else class="mbimages" :style="{backgroundImage:`url(${require('@/assets/images/project/mb_hostpot.jpg')})`}">
       <div class="title">{{hotspot.title}}</div>
-      
-
-      
+      <swiper class="swiper-wrapper swiper-wrapper-n" :options="swiperOption">
+        <swiper-slide  class="swiper-slide" v-for="(item,index) in hotspot.video" :key="index">
+          <div class="sl-item">
+            <video controls autoplay>
+              <source :src="item.url" type="video/mp4">
+            </video> 
+          </div>
+        </swiper-slide>
+      </swiper>
+      <ul class="pagna">
+        <li v-for="(item,i) in hotspot.video" :class="{active: i == mbactive}" :key="i"></li>
+      </ul>
       <div v-if="hotspot.content" class="desc">
         <p>简介：</p>
         <div v-html="hotspot.content"></div>
@@ -27,16 +36,39 @@
     </div>
 </template>
 
+
 <script>
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import 'swiper/swiper-bundle.css'
+
 export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
   props:['hotspot'],
   data(){
     return {
-      active:0
+      active:0,
+      mbactive:0
     }
   },
-  methods:{
-    
+  computed:{
+    swiperOption() {
+      let that = this
+      return {
+        slidesPerView: 'auto',
+        autoplay: false,
+        centeredSlides: true,
+        watchSlidesProgress: true,
+        loop: false,
+        on:{
+          slideChangeTransitionEnd:function () {
+            that.mbactive = this.realIndex
+          }
+        }
+      }
+    }
   }
 }
 </script>
@@ -139,21 +171,50 @@ export default {
     border-radius: 60px;
     margin: 20px auto;
   }
-  
-  .videocon{
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    position: relative;
-    padding-bottom: 40px;
-    >video{
-      max-width: 1000px;
-      border: 10px solid #BC1515;
-      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-      max-height: 600px;
+  .swiper-wrapper {
+    height: 250px;
+    padding: 0;
+    .swiper-slide  {
+      width: 85%;
+      transform-style: preserve-3d;
+      position: relative;
+      height: 100%;
+      margin: 0 10px;
+      .sl-item{
+        position: absolute;
+        top: 0;
+        left: 50%;
+        height: 100%;
+        transform: translateX(-50%);
+        width: 100%;
+        overflow: hidden;
+        border: 4px solid #BC1515;
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+        background-color: #757477;
+        >video{
+          object-fit: fill;
+          height: 100%;
+          transform: translateX(-50%);
+          position: absolute;
+          left: 50%;
+        }
+      }
+    }
+  }
+  .pagna{
+    text-align: center;
+    z-index: 999;
+    >li{
+      width: 40px;
+      height: 4px;
+      background: #BC1515;
+      display: inline-block;
+      margin: 0 4px;
+      &.active{
+        background: #DBA761;
+      }
     }
   }
-
   .desc{
     color: #DBA761;
     text-align: left;

web/src/components/huiyi/index.vue

@@ -40,6 +40,12 @@ export default {
       }]
     }
   },
+  mounted(){
+    window.player.on("videoEnded", ()=> {
+        this.showBg = true
+        this.active = ''
+    })
+  },
   methods:{
     hideBg(){
       this.showBg = false

web/src/main.js

@@ -2,7 +2,15 @@ import Vue from 'vue'
 import App from './App.vue'
 import '@/mixins'
 import router from './router'
-
+import 'viewerjs/dist/viewer.css'
+import Viewer from 'v-viewer'
+Vue.use(Viewer,{
+  defaultOptions: {
+    navbar:false,
+    button:false,
+    maxZoomRatio:2
+  }
+})
 
 
 Vue.config.productionTip = false

web/src/pages/Home.vue

@@ -105,7 +105,7 @@ export default {
  
   data(){
       return {
-          showWelcome: false,
+          showWelcome: true,
           hotspots:''
       }
   },