update

web/public/static/js/main_2020_show.js

@@ -71,7 +71,6 @@ var initMenu = function(){
     var renderer2 = new THREE.CSS3DRenderer();
     renderer2.setSize( window.innerWidth, window.innerHeight );
     renderer2.domElement.id =  'menudiv' 
-    renderer2.domElement.html = 'tsts'
     $("#gui-parent")[0].appendChild(renderer2.domElement)
     menuDiv.renderer2 = renderer2
 
@@ -80,7 +79,14 @@ var initMenu = function(){
     var scene2 = new THREE.Scene();
     menuDiv.objects.forEach(info=>{
         var element = document.createElement( 'div' );
+
+        var txt = document.createTextNode("CLICK ME");
+
         element.id = info.id 
+
+        element.innerHtml = '<div>element</div>'
+
+        element.appendChild(txt)
         
         var object = new THREE.CSS3DObject( element );
         
@@ -100,7 +106,6 @@ var initMenu = function(){
     
     
     menuDiv.scene2 = scene2 
-    
 } 
 
  

web/src/components/hotspot/audio.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="images" :style="{backgroundImage:`url(${require('@/assets/images/project/hotspot_bg.jpg')})`}">
+    <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="">
+      <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>
+      </ul>
+    </div>
+
+    <div class="desc" v-html="hotspot.content">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props:['hotspot'],
+  data(){
+    return {
+      active:0
+    }
+  },
+  methods:{
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.noshow{
+  opacity: 0!important;;
+  pointer-events: none!important;;
+}
+
+.images{
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  text-align: center;
+  .title{
+    padding: 0 80px;
+    display: inline-block;
+    color: #DBA761;
+    font-weight: bold;
+    font-size: 36px;
+    height: 70px;
+    line-height: 70px;
+    background: #BC1515;
+    border-radius: 60px;
+    margin: 45px auto;
+  }
+  .img-con{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: relative;
+    padding-bottom: 40px;
+    >span{
+      display: inline-block;
+      padding: 0 30px;
+      box-sizing: content-box;
+      font-size: 20px;
+      height: 50px;
+      line-height: 50px;
+      background: rgba(188, 21, 21, 0.9);
+      border: 2px solid #DBA761;
+      border-radius: 37px;
+      cursor: pointer;
+      &:hover,&.active{
+        color: #DBA761;
+      }
+    }
+    >img{
+      max-width: 1000px;
+      border: 10px solid #BC1515;
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+      max-height: 600px;
+    }
+    .pagna{
+      position: absolute;
+      bottom: 0;
+      text-align: center;
+      z-index: 999;
+      >li{
+        width: 60px;
+        height: 6px;
+        background: #BC1515;
+        display: inline-block;
+        margin: 0 4px;
+        &.active{
+          background: #DBA761;
+        }
+      }
+    }
+  }
+  .desc{
+    max-width: 1000px;
+    margin: 20px auto 0;
+    color: #DBA761;
+    text-align: left;
+    line-height: 2;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+}
+</style>

web/src/components/hotspot/image.vue

@@ -24,12 +24,6 @@ export default {
     }
   },
   methods:{
-    control(type){
-      if (type=='next') {
-        
-      }
-
-    }
   }
 }
 </script>

web/src/components/hotspot/index.vue

@@ -9,18 +9,22 @@
 import audio from './audio.vue';
 import image from './image.vue';
 import video from './video.vue';
+import title from './title.vue';
+
 
 let iconArr = [
   { name: "视频", key: "video",  id: "vVideo", img: "video-icon", display: false },
   { name: "网页", key: "iframe", id: "vIframe", img: "iframe-icon", display: false },
   { name: "图片", key: "images", id: "vImage", img: "img-icon", display: false },
   { name: "模型", key: "model",  id: "vModel", img: "model-icon", display: false },
+  { name: "介绍", key: "title", id: "vTitle", img: "txt-icon", display: false }
 ];
 
 export default {
   components:{
     vAudio:audio,
     vImage:image,
+    vTitle:title,
     vVideo:video
   },
   methods:{
@@ -31,10 +35,10 @@ export default {
   mounted(){
     iconArr.forEach(item => {
       if (this.hotspot[item.key]) {
-          this.active = !this.active ? item.id : this.active;
-        }
+        this.active = !this.active ? item.id : this.active;
+      }
     });
-    console.log(this.active);
+    !this.active && (this.active = 'vTitle')
   },
   data(){
     return {

web/src/components/hotspot/title.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="images" :style="{backgroundImage:`url(${require('@/assets/images/project/video_bg.jpg')})`}">
+    <div class="img-con">
+      <div class="title">{{hotspot.title}}</div>
+      <div class="desc" v-html="hotspot.content">
+    </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props:['hotspot'],
+  data(){
+    return {
+      active:0
+    }
+  },
+  methods:{
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.noshow{
+  opacity: 0!important;;
+  pointer-events: none!important;;
+}
+
+.images{
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  text-align: center;
+  
+  .img-con{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+    position: relative;
+    padding-bottom: 40px;
+    position: fixed;
+    top: 12%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    .title{
+      padding: 0 80px;
+      display: inline-block;
+      color: #DBA761;
+      font-weight: bold;
+      font-size: 36px;
+      height: 70px;
+      line-height: 70px;
+      background: #BC1515;
+      border-radius: 60px;
+      margin: 45px auto;
+    }
+    .desc{
+      max-width: 1000px;
+      letter-spacing: 2px;
+      margin: 20px auto 0;
+      text-align: justify;
+      line-height: 2;
+      max-height: 400px;
+      padding: 0 10px;
+      overflow-y: auto;
+      font-size: 24px;
+      line-height: 48px;
+      color: #BC1515;
+    }
+  }
+
+}
+</style>

web/src/components/hotspot/video.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="images" :style="{backgroundImage:`url(${require('@/assets/images/project/video_bg.jpg')})`}">
+    <div class="title">{{hotspot.title}}</div>
+    <div class="img-con">
+      <span @click="active-=1" :class="{noshow:active<=0}">上一张</span>
+      <video controls autoplay>
+        <source :src="hotspot.video[active].url" type="video/mp4">
+      </video> 
+      <span @click="active+=1" :class="{noshow:active>=hotspot.video.length - 1}">下一张</span>
+      <ul class="pagna">
+        <li v-for="(item,i) in hotspot.video" :class="{active:i==active}" :key="i"></li>
+      </ul>
+    </div>
+
+    <div class="desc" v-html="hotspot.content">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props:['hotspot'],
+  data(){
+    return {
+      active:0
+    }
+  },
+  methods:{
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.noshow{
+  opacity: 0!important;;
+  pointer-events: none!important;;
+}
+
+.images{
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  text-align: center;
+  .title{
+    padding: 0 80px;
+    display: inline-block;
+    color: #DBA761;
+    font-weight: bold;
+    font-size: 36px;
+    height: 70px;
+    line-height: 70px;
+    background: #BC1515;
+    border-radius: 60px;
+    margin: 45px auto;
+  }
+  .img-con{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: relative;
+    padding-bottom: 40px;
+    >span{
+      display: inline-block;
+      padding: 0 30px;
+      box-sizing: content-box;
+      font-size: 20px;
+      height: 50px;
+      line-height: 50px;
+      background: rgba(188, 21, 21, 0.9);
+      border: 2px solid #DBA761;
+      border-radius: 37px;
+      cursor: pointer;
+      &:hover,&.active{
+        color: #DBA761;
+      }
+    }
+    >video{
+      max-width: 1000px;
+      // border: 10px solid #BC1515;
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+      max-height: 600px;
+      object-fit: fill;
+    }
+    .pagna{
+      position: absolute;
+      bottom: 0;
+      text-align: center;
+      z-index: 999;
+      >li{
+        width: 60px;
+        height: 6px;
+        background: #BC1515;
+        display: inline-block;
+        margin: 0 4px;
+        &.active{
+          background: #DBA761;
+        }
+      }
+    }
+  }
+  .desc{
+    max-width: 1000px;
+    margin: 20px auto 0;
+    color: #DBA761;
+    text-align: left;
+    line-height: 2;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+}
+</style>

web/src/components/huiyi/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    会议
+  </div>
+</template>

web/src/pages/Home.vue

@@ -63,6 +63,8 @@
 </template>
 
 <script>
+import Vue from 'vue'
+
 import popup from '@/views/popup';
 import guiLoading from '@/views/gui/loading';
 import hotspotList from '@/views/gui/hotspotlist';
@@ -76,6 +78,12 @@ import vrCon from '@/views/gui/vrcon';
 import vOther from '@/views/gui/other';
 import welcome from '@/components/welcome';
 
+import UIHuiyi from '@/components/huiyi';
+
+
+const HuiYi = Vue.extend(UIHuiyi)
+
+
 
 export default {
   name: 'Home',
@@ -121,9 +129,10 @@ export default {
         window.evt =  document.createEvent('HTMLEvents')
         window.evt.initEvent('loadfinish',false,false)
         window.addEventListener('loadfinish',  ()=> {
+            let huiyi = new HuiYi().$mount()
+            window.initMenu(huiyi)
             this.getHotSpotList()
             window.player.on("openHotspot", (data)=> {
-                console.log(this.hotspots[data],'==========');
                 this.$showHotspot({
                     hotspot:this.hotspots[data]
                 })