update

web/src/assets/style/public.less

@@ -145,6 +145,17 @@ html,body{
 }
 
 
+@keyframes rotate360 {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(-360deg);
+
+  }
+}
+
 
 @media screen and (max-width: 1700px) {
   *{

web/src/components/exhibition/index.vue

@@ -8,7 +8,7 @@
       </div>
 
       <div class="ptright">
-        <span> {{current.name}}</span>
+        <span> {{current.name.split(' ')[0]}}</span>
       </div>
    
     </div>
@@ -183,7 +183,8 @@ export default {
         background: rgba(80, 80, 80, .7);
         >span{
           display: inline-block;
-          margin-left: 70px;
+          width: 50%;
+          margin-left: 80px;
         }
       }
     }

web/src/components/hotspot/audio.vue

@@ -12,7 +12,7 @@
       <img :src="require(`@/assets/images/icon/star.png`)" alt="" />
     </div>
     <div class="audiotu">
-      <img class="cd" :src="require(`@/assets/images/project/CD.png`)" alt="" />
+      <img class="cd" :class="{cdactive:isPlay}" :src="require(`@/assets/images/project/CD.png`)" alt="" />
       <img
         class="hk"
         @click="bofang"
@@ -261,6 +261,7 @@ export default {
     position: relative;
     .cd {
       width: 70%;
+      transition: 0.3s ease all;
     }
     .hk {
       position: absolute;
@@ -275,6 +276,10 @@ export default {
     .hkactive {
       transform: rotate(-30deg);
     }
+
+    .cdactive{
+      animation: rotate360 5s linear infinite;
+    }
   }
   .img-con {
     display: flex;

web/src/components/hotspot/iframe.vue

@@ -31,7 +31,7 @@ export default {
 
 .images{
   width: 1410px;
-  height: 760px;
+  height: 800px;
   text-align: center;
   margin: 0 auto;
   position: fixed;
@@ -54,16 +54,17 @@ export default {
   }
   .title {
     font-weight: bold;
-    font-size: 24px;
+    font-size: 30px;
     width: 100%;
     padding: 0 50px;
+    text-align: center;
     margin-bottom: 10px;
   }
   .desc{
-    margin: 0 auto 0;
-    width: 100%;
+    margin: 0 auto;
+    width: 70%;
     color: #fff;
-    text-align: left;
+    text-align: center;
     line-height: 1.5;
     max-height: 250px;
     overflow-y: auto;

web/src/components/hotspot/image.vue

@@ -145,19 +145,20 @@ export default {
       }
     }
   }
-   .title {
+  .title {
     font-weight: bold;
-    font-size: 24px;
+    font-size: 30px;
     width: 100%;
     padding: 0 50px;
     margin-bottom: 10px;
+    text-align: center;
   }
 .desc{
-    margin: 0 auto 0;
-    width: 100%;
+    margin: 0 auto;
+    width: 70%;
     color: #fff;
-    text-align: left;
-    line-height: 1.5;
+    text-align: center;
+    line-height: 1.8;
     max-height: 250px;
     overflow-y: auto;
     font-size: 16px;

web/src/components/hotspot/video.vue

@@ -133,17 +133,18 @@ export default {
   }
 .title {
     font-weight: bold;
-    font-size: 24px;
+    font-size: 30px;
+    text-align: center;
     width: 100%;
     padding: 0 50px;
     margin-bottom: 10px;
   }
   .desc{
-    margin: 0 auto 0;
-    width: 100%;
+    margin: 0 auto;
+    width: 70%;
     color: #fff;
-    text-align: left;
-    line-height: 1.5;
+    text-align: center;
+    line-height: 1.8;
     max-height: 250px;
     overflow-y: auto;
     font-size: 16px;

web/src/newcomponents/hovercom/commentator/index.vue

@@ -6,8 +6,8 @@
     </div>
     <div class="comment">
       <ul>
-        <li v-for="(item, i) in commentalist"  :key="i"  >
-          <img @click="active=item" :src="require(`@/assets/images/project/commentator/${item.id}${item.id == active.id?'_active':''}.png`)" alt="" />
+        <li :class="{active:item.id==active.id}" v-for="(item, i) in commentalist"  :key="i"  >
+          <img @click="handleItem(item)" :src="require(`@/assets/images/project/commentator/${item.id}${item.id == active.id?'_active':''}.png`)" alt="" />
         </li>
       </ul>
     </div>
@@ -25,35 +25,42 @@
 </template>
 
 <script>
+let list = [
+    {
+      id:'female_2',
+      name:'军绿英姿'
+    },
+    {
+      id:'female_1',
+      name:'迷彩飒爽'
+    },
+    {
+      id:'male',
+      name:'圣洁白衣'
+    },
+  ]
+
 
 export default {
   data() {
     return {
-      active:{
-          id:'female_1',
-          name:'女兵1'
-        },
-      commentalist:[
-        {
-          id:'female_1',
-          name:'女兵1'
-        },
-        {
-          id:'female_2',
-          name:'女兵2'
-        },
-        {
-          id:'male',
-          name:'男医生'
-        },
-      ]
+      active: list[0],
+      commentalist:list
     };
   },
  
   methods: {
-    
+    handleItem(item){
+      localStorage.setItem('xunirole',item.id)
+      this.active=item
+      this.$bus.$emit('xunirole',item)
+    }
+  },
+  mounted() {
+    let id = localStorage.getItem('xunirole')
+    let active = list.find(item=>item.id==id)
+    this.active = active || list[0]
   },
-  mounted() {},
 };
 </script>
 
@@ -116,6 +123,11 @@ export default {
         >img{
           width: 100%;
         }
+        &.active{
+          background: #fff;
+          box-shadow: 0px 0px 30px rgba(138,106,72,1);
+          border: 1px solid rgba(0, 0, 0, 0.2);
+        }
       }
     }
 

web/src/newcomponents/hovercom/dati/index.vue

@@ -200,7 +200,7 @@ export default {
     .success{
       position: relative;
       width: 235px;
-      margin: 20px auto;
+      margin: -10px auto 0;
       >img{
         width: 100%;
       }

web/src/newcomponents/xunirenwu/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="jugong">
+    <div
+      class="jubox " 
+      :class="{jugongone:isShow}"
+      :style="{
+        backgroundImage: `url(${require(`@/assets/images/project/commentator/xuliezhen/${active}.png`)})`,
+      }"
+    ></div>
+  </div>
+</template>
+
+<script>
+let id = localStorage.getItem('xunirole')
+
+export default {
+
+  data(){
+    return {
+      active:id || 'female_2',
+      isShow: true
+    }
+  },
+  mounted() {
+    this.$bus.$on('xunirole',data=>{
+      this.active = data.id
+      this.isShow = false
+      setTimeout(() => {
+        this.isShow = true
+      }, 100);
+    })
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.jugong {
+  width: 500px;
+  height: 500px;
+  overflow: hidden;
+  position: absolute;
+  right: -100px;
+  bottom: -20px;
+  pointer-events: none;
+  .jubox {
+    position: absolute;
+    left: 0;
+    width: 36000px;
+    height: 500px;
+    background-size: 100% 100%;
+  }
+  .jugongone {
+    animation: jugone 2.4s steps(72) 1;
+  }
+}
+
+@keyframes jugone {
+  100% {
+    left: -36000px;
+  }
+
+}
+</style>

web/src/views/expert/index.vue

@@ -42,20 +42,17 @@
       </div>
     </div>
 
-    <div class="back">
-      <span @click="$router.push({ path: '/' })">
-        <img :src="require(`@/assets/images/jiantou.png`)" alt="" />
-        返回</span
-      >
-      <div class="line"></div>
-      <div class="view">
-        <p>欢迎您的到来，您是第721443位游客！</p>
-        <div>
-          <img :src="require(`@/assets/images/project/renqi@2x.png`)" alt="" />
-          <span>721443</span><span>浏览量</span>
+      <div class="back">
+        <img @click="$router.push({path:'/'})" :src="require(`@/assets/images/project/logo@2x.png`)" alt="">
+        <div class="line"></div>
+        <div class="view">
+          <p>欢迎您的到来，您是第721443位参观者！</p>
+          <div>
+            <img :src="require(`@/assets/images/project/renqi@2x.png`)" alt="">
+            <span>721443</span><span>浏览量</span>
+          </div>
         </div>
       </div>
-    </div>
   </div>
 </template>
 
@@ -229,72 +226,43 @@ export default {
     }
   }
 }
-.back {
+.back{
   position: fixed;
   left: 30px;
   top: 30px;
   color: #fff;
   display: flex;
   align-items: center;
-  > span {
-    display: inline-block;
-    width: 80px;
-    height: 42px;
-    line-height: 42px;
-    background: linear-gradient(
-      360deg,
-      rgba(0, 0, 0, 0.36) 0%,
-      rgba(0, 0, 0, 0.21) 100%
-    );
-    border-radius: 26px;
-    padding-left: 4px;
+  z-index: 99;
+  >img{
+    width: 126px;
     cursor: pointer;
-    position: relative;
-    > img {
-      width: 8px;
-      position: absolute;
-      top: 52%;
-      transform: translateY(-50%);
-      left: 10px;
-    }
   }
-
-  .view {
+  .line{
+    display: inline-block;
+    width: 1px;
+    height: 43px;
+    background: linear-gradient(180deg, rgba(234, 219, 198, 0) 0%, #E3D5C0 49%, rgba(233, 218, 197, 0) 100%);
+    border-radius: 0px;
+    margin-left: 22px;
+    margin-right: 20px;
+  }
+  .view{
     text-align: left;
-    > div {
-      > img {
+    >div{
+      >img{
         width: 21px;
-        margin-top: 14px;
+        margin-top: 10px;
         margin-right: 10px;
       }
-      > span {
-        &:first-of-type {
+      >span{
+        &:first-of-type{
           font-weight: bold;
         }
       }
     }
   }
 }
-.home {
-  position: fixed;
-  left: 30px;
-  top: 24%;
-  transform: translateY(-50%);
-  z-index: 999;
-  cursor: pointer;
-  width: 70px;
-  > ul {
-    > li {
-      background: rgba(9, 31, 48, 0.5);
-      border-radius: 50%;
-      margin: 20px 0;
-      padding: 7px;
-      width: 50px;
-      height: 50px;
-    }
-  }
-}
-
   .line {
     display: inline-block;
     width: 2px;

web/src/views/index/index.vue

@@ -2,7 +2,7 @@
   <div class="index">
     <video ref="bgv" class="bgvideo" loop muted :src="require('@/assets/video/bg.mp4')"></video>
     <div class="index_con" v-if="isshowall">
-      <div class="i_left" :class="isshow?'animate__animated animate__bounceInDown':''">
+      <div class="i_left" :class="isshow?'animate__animated animate__zoomIn':''">
         <div class="i_top brightnessW" >
           <img :src="require('@/assets/images/logo@2x.png')" alt="" />
         </div>
@@ -31,7 +31,7 @@
       </div>
       <ul class="shiguan">
         <li 
-        :class="isshow?`animate__animated animate__bounceInDown animate__delay-${(i+1)*1}s`:'hoverli'"
+        :class="isshow?`animate__animated animate__zoomIn animate__delay-${(i+1)*1}s`:'hoverli'"
          v-for="(item, i) in data" :key="i" @click="handleItem(item)">
           <div class="gezi gezi1"></div>
           <div class="gezi gezi2"></div>
@@ -128,7 +128,7 @@ export default {
       else{
         if (this.$refs.startv) {
           this.$refs.startv.addEventListener("timeupdate", () => {
-            if (parseInt(this.$refs.startv.currentTime) >= 18 && !this.lockUpdate) {
+            if (parseInt(this.$refs.startv.currentTime) >= 21 && !this.lockUpdate) {
                 this.lockUpdate = true
               // this.bfshipin()
                   this.isshow = true

web/src/views/scene/gui/menu.vue

@@ -203,8 +203,11 @@
 
     <div class="pinBottom right hideTarget">
       <div class="rightViewContainer clearfix">
+
+        <!-- <xunirenwu :active="xunirenwu"/> -->
+
         <div class="commentator">
-          <img class="icon" @click="clickItem({ id: 5, img: 'commentator'})" :src="require('@/assets/images/icon/bigscene/change.png')" />
+          <img class="icon" @click="clickItem({ id: 5, current: xunirenwu, img: 'commentator'})" :src="require('@/assets/images/icon/bigscene/change.png')" />
         </div>
         <div class="gui-floor">
           <div class="gui-floor-title"></div>
@@ -265,9 +268,11 @@
 
 <script>
 import Danmaku from "@/components/Danmaku";
+import xunirenwu from "@/newcomponents/xunirenwu";
+
 
 export default {
-  components: {Danmaku},
+  components: {Danmaku,xunirenwu},
   data() {
     return {
       isShowList:false,
@@ -303,6 +308,7 @@ export default {
           img: "Q&A",
         }],
       subActive:'',
+      xunirenwu:'male',
       quotes:[
         "我是光荣的白衣天使，在春风里绽放笑容",
         "救死扶伤的行列里，我们是排头兵",
@@ -338,7 +344,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@wh: 54px;
+@wh: 47px;
 @margin: 0px;
 #play,
 #pause {
@@ -370,11 +376,16 @@ export default {
   }
 }
 
+#gui-modes-map>div[rel], #play, #pause{
+  width: auto;
+  margin: 0 12px;
+}
+
 .commentator{
   width: @wh!important;
-  margin-right: 20px;
   height: @wh!important;
-  margin-bottom: 0;
+  margin-bottom: 40px;
+  
   >img{
     width: 100%;
     height: 100%;
@@ -385,7 +396,7 @@ export default {
   width: @wh!important;
   height: @wh!important;
   border-radius: 50%;
-  margin-right: 20px;
+  margin-right: 0;
   margin-bottom: 0;
   position: relative;
   background: linear-gradient(359deg, rgba(26, 14, 10, 0.6) 0%, rgba(112, 80, 73, .6) 100%);
@@ -437,6 +448,9 @@ export default {
 .rightViewContainer {
   display: flex;
   align-items: flex-end;
+  flex-direction: column;
+  justify-content: flex-end;
+  margin-bottom: 10px;
 }
 
 .bgandshare {
@@ -444,8 +458,10 @@ export default {
   justify-content: center;
   align-items: center;
   > div {
+    margin-top: 10px;
     background: none !important;
     cursor: pointer;
+    margin-right: 0!important;
     img {
       width: @wh!important;
     }
@@ -511,7 +527,7 @@ export default {
   margin-right: 20px;
   position: absolute;
   left: 0;
-  bottom: 6px;
+  bottom: 4px;
 }
 
 </style>

web/src/views/scene/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="scene-body">
-    <iframe ref="ifr" :src="`scene.html?m=${sceneCode}`" allowfullscreen="true" frameborder="0"></iframe>
+    <iframe v-show="canshow" ref="ifr" :src="`scene.html?m=${sceneCode}&qust=1`" allowfullscreen="true" frameborder="0"></iframe>
    
     <template v-if="!isShowHP">
        <div class="back">
@@ -16,6 +16,9 @@
       </div>
 
     </template>
+
+    <video class="flyin animate__animated" :class="{ animate__fadeOut: fadevideo,delaycls:delaytime}" ref="flyin" muted :src="require('@/assets/video/feilou.mp4')"></video>
+
   </div>
 </template>
 
@@ -25,7 +28,10 @@ export default {
   data(){
     return {
       sceneCode:this.$route.params.id,
-      isShowHP:false
+      isShowHP:false,
+      canshow:false,
+      delaytime:false,
+      fadevideo:false
     }
   },
   methods:{
@@ -48,7 +54,17 @@ export default {
           if (res.data.source === "hovershowType") {
             this.clickItem(data.item)
           }
-          
+
+          if (res.data.source === "loadfinish") {
+            this.$refs.flyin.play()
+            this.$refs.flyin.addEventListener('ended',()=>{
+              this.canshow = true
+              this.fadevideo = true
+              setTimeout(() => {
+                this.delaytime = true
+              }, 1000);
+            })
+          }
         }
       });
   }
@@ -75,6 +91,7 @@ export default {
   color: #fff;
   display: flex;
   align-items: center;
+  z-index: 99;
   >img{
     width: 126px;
     cursor: pointer;
@@ -105,4 +122,15 @@ export default {
   }
 }
 
+.flyin{
+  position: fixed;
+  width: 100%;
+  z-index: 98;
+  top: 0;
+  left: 0;
+}
+
+.delaycls{
+  display: none;
+}
 </style>

web/src/views/scene/scene.vue

@@ -62,6 +62,10 @@
     <exhibition class="exhibition"/>
     <hovercom @close="handlepopClose" :showType="showType"/>
     <huizhang @close="()=>{showhuizhang = false}" :showhuizhang="showhuizhang"/>
+
+
+    
+
   </div>
 </template>
 
@@ -117,6 +121,15 @@ export default {
       window.addEventListener("loadfinish", ()=>{
         this.loading=false
         this.getHotSpotList();
+
+         window.parent.postMessage(
+            {
+              source: "loadfinish",
+              data: true,
+            },
+            "*"
+          );
+
         window.player.on("openTips", () => {
           this.$showTips()
         });
@@ -223,4 +236,5 @@ export default {
   z-index: 99;
 }
 
+
 </style>