update

web/public/static/css/main.css

@@ -7091,6 +7091,6 @@ a.hasHover.tag-link:hover {
     font-size:50px;
     
 }
-#menudiv>div>div li{
-    pointer-events:auto;
+#menudiv>div>div{
+    pointer-events:none;
 }  

web/public/static/js/main_2020_show.js

@@ -135,6 +135,11 @@ window.switchVideoSrc = function(src){
     player.overlayGroup.children.forEach(e=>{
         if(e.sid == '1626674966708' || e.sid == '1626675083157'){
             e.plane.material.map.image.src = src
+            e.plane.material.map.image.loop = false
+            e.plane.material.map.image.autoplay = true
+
+
+            console.log(e.plane.material.map.image)
         }
     }) 
 }

web/src/components/huiyi/index.vue

@@ -1,12 +1,18 @@
 <template>
   <div id="huiyi" class="huiyi" :style="{backgroundImage:`url(${require('@/assets/images/project/cards-bg.png')})`}">
-    <img v-if="showBg" class="bg" @click="showBg = false" :src="require('@/assets/images/project/index-bg.png')" alt="">
-    <ul>
-      <li @click="changeVideo" :class="{active:item.id==active}" v-for="(item,i) in people" :key="i">
+
+    <div class="single-active" v-if="active">
+        <img :src="require(`@/assets/images/project/${active.img}`)" alt="">
+        <span :style="{backgroundImage:`url(${require('@/assets/images/project/select.png')})`}">{{active.name}}</span>
+        <div class="tips">请待视频播放完毕再操作</div>
+    </div>
+    <ul v-else>
+      <li @click="changeVideo(item)" :class="{active:item.id==active.id}" v-for="(item,i) in people" :key="i">
         <img :src="require(`@/assets/images/project/${item.img}`)" alt="">
-        <span :style="{backgroundImage:item.id==active?`url(${require('@/assets/images/project/select.png')})`:'none'}">{{item.name}}</span>
+        <span :style="{backgroundImage:item.id==active.id?`url(${require('@/assets/images/project/select.png')})`:'none'}">{{item.name}}</span>
       </li>
     </ul>
+    <img v-if="showBg" class="bg" @click="hideBg" :src="require('@/assets/images/project/index-bg.png')" alt="">
   </div>
 </template>
 
@@ -14,26 +20,34 @@
 export default {
   data(){
     return {
-      active:'chen',
+      active:'',
       showBg:true,
       people:[{
         name:'陈独秀',
         id:'chen',
-        img:'cdx.jpg'
+        img:'cdx.jpg',
+        src:'chen.mp4'
       },{
         name:'李大钊',
         id:'li',
-        img:'ldz.jpg'
+        img:'ldz.jpg',
+        src:'li.mp4'
       },{
         name:'毛泽东',
         id:'mao',
-        img:'mzd.jpg'
+        img:'mzd.jpg',
+        src:'mao.mp4'
       }]
     }
   },
   methods:{
+    hideBg(){
+      this.showBg = false
+    },
     changeVideo(item){
-      this.active = item.id
+      console.log(item);
+      this.active = item
+      window.switchVideoSrc(require(`@/assets/videos/${item.src}`))
     }
   }
 }
@@ -48,7 +62,9 @@ export default {
   text-align: center;
   background-size: 100% 100%;
   position: relative;
+  pointer-events: auto;
   .bg{
+    cursor: pointer;
     width: 100%;
     height: 100%;
     position: absolute;
@@ -80,7 +96,7 @@ export default {
     }
     .active{
       >img{
-        border: 18px solid #DFB057;
+        border: 16px solid #DFB057;
       }
       >span{
         background-repeat: no-repeat;
@@ -89,5 +105,35 @@ export default {
       }
     }
   }
+
+  .single-active{
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    width: 24%;
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    >img{
+      width: 100%;
+      margin-bottom: 20px;
+    }
+    >span{
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      color: #DFB057;
+      font-size: 38px;
+      padding: 0 60px 20px;
+    }
+    .tips{
+      font-size: 20px;
+      font-weight: bold;
+      color: #DFB057;
+      min-width: 300px;
+      padding: 40px 0;
+    }
+  }
 }
 </style>

web/src/components/kangri/index.vue

@@ -1,12 +1,10 @@
 <template>
-  <div id="kangri" class="kangri" :style="{backgroundImage:`url(${require('@/assets/images/project/cards-bg.png')})`}">
-    <img v-if="showBg" class="bg" @click="showBg = false" :src="require('@/assets/images/project/index-bg.png')" alt="">
-    <ul>
-      <li @click="changeVideo" :class="{active:item.id==active}" v-for="(item,i) in people" :key="i">
-        <img :src="require(`@/assets/images/project/${item.img}`)" alt="">
-        <span :style="{backgroundImage:item.id==active?`url(${require('@/assets/images/project/select.png')})`:'none'}">{{item.name}}</span>
-      </li>
-    </ul>
+  <div id="kangri" class="kangri">
+    <div class="kangricon">
+      <span @click="active-=1" :class="{noshow:active<=0}">上一张</span>
+      <img :src="require('@/assets/images/project/cards-bg.png')" alt="">
+      <span @click="active+=1" :class="{noshow:active>=2}">下一张</span>
+    </div>
   </div>
 </template>
 
@@ -14,21 +12,7 @@
 export default {
   data(){
     return {
-      active:'chen',
-      showBg:true,
-      people:[{
-        name:'陈独秀',
-        id:'chen',
-        img:'cdx.jpg'
-      },{
-        name:'李大钊',
-        id:'li',
-        img:'ldz.jpg'
-      },{
-        name:'毛泽东',
-        id:'mao',
-        img:'mzd.jpg'
-      }]
+      active:''
     }
   },
   methods:{
@@ -41,53 +25,41 @@ export default {
 
 <style lang="less" scoped>
 .kangri{
-  color:#000;
   width: 100%;
   height: 100%;
-  background-repeat: no-repeat;
   text-align: center;
-  background-size: 100% 100%;
   position: relative;
-  .bg{
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-    top: 0;
-    left: 0;
-  }
-  >ul{
-    display: flex;
-    justify-content: space-between;
-    width: 80%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-    >li{
+   pointer-events: none!important;
+
+ .kangricon{
+  height: 100%;
+  width: 100%;
+   color: #fff;
+   display: flex;
+   justify-content: center;
+   pointer-events: none!important;
+   align-items: center;
+   >img{
+     width: 50%;
+     height: 100%;
+   }
+   >span{
+      pointer-events: auto;
+      display: inline-block;
+      padding: 20px 60px;
+      box-sizing: content-box;
+      font-size: 40px;
+      height: 50px;
+      line-height: 50px;
+      background: rgba(188, 21, 21, 0.9);
+      border: 2px solid #DBA761;
+      border-radius: 77px;
       cursor: pointer;
-      &:not(:last-of-type){
-        margin-right: 40px;
-      }
-      >img{
-        width: 100%;
-      }
-      >span{
-        font-size: 38px;
-        padding: 0 60px 20px;
-        background: none;
+      margin: 0 100px;
+      &:hover,&.active{
+        color: #DBA761;
       }
     }
-    .active{
-      >img{
-        border: 18px solid #DFB057;
-      }
-      >span{
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        color: #DFB057;
-      }
-    }
-  }
+ }
 }
 </style>