1644

web/public/static/js/main_2020_show.js

@@ -46,6 +46,7 @@ var menuDiv = {
             scale: {x:1.297070488891195, y: 0.735567159698789, z:1},
             rotation: [-1.9353890374834315,  -0.3429842325538349,  -2.429687526335148],
             id : 'menu',//三大会议
+            sub: '#huiyi',
             object : null,
             visi : false
         },
@@ -55,6 +56,7 @@ var menuDiv = {
             scale: {x:2.2889278023187902, y: 0.3, z:1},
             rotation: [0,  0.0009926266968507, -0],
             id : 'switchImgs',//抗日图片
+            sub: '#kangri',
             object : null,
             visi : false
         }
@@ -79,9 +81,11 @@ var initMenu = function(){
     var scene2 = new THREE.Scene();
     menuDiv.objects.forEach(info=>{
         var element = document.createElement( 'div' );
-        let huiyi = document.querySelector('#huiyi')
 
-        huiyi && element.appendChild(huiyi)
+        element.id = info.id
+        let ele = document.querySelector(info.sub)
+
+        ele && element.appendChild(ele)
         
         var object = new THREE.CSS3DObject( element );
         

web/src/components/huiyi/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <div id="huiyi" class="huiyi" :style="{backgroundImage:`url(${require('@/assets/images/project/index-bg.png')})`}">
+  <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">
         <img :src="require(`@/assets/images/project/${item.img}`)" alt="">
@@ -14,6 +15,7 @@ export default {
   data(){
     return {
       active:'chen',
+      showBg:true,
       people:[{
         name:'陈独秀',
         id:'chen',
@@ -46,6 +48,14 @@ export default {
   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;

web/src/components/kangri/index.vue

@@ -0,0 +1,93 @@
+<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>
+</template>
+
+<script>
+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'
+      }]
+    }
+  },
+  methods:{
+    changeVideo(item){
+      this.active = item.id
+    }
+  }
+}
+</script>
+
+<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{
+      cursor: pointer;
+      &:not(:last-of-type){
+        margin-right: 40px;
+      }
+      >img{
+        width: 100%;
+      }
+      >span{
+        font-size: 38px;
+        padding: 0 60px 20px;
+        background: none;
+      }
+    }
+    .active{
+      >img{
+        border: 18px solid #DFB057;
+      }
+      >span{
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        color: #DFB057;
+      }
+    }
+  }
+}
+</style>

web/src/pages/Home.vue

@@ -79,9 +79,12 @@ import vOther from '@/views/gui/other';
 import welcome from '@/components/welcome';
 
 import UIHuiyi from '@/components/huiyi';
+import UIKangri from '@/components/kangri';
+
 
 
 const HuiYi = Vue.extend(UIHuiyi)
+const KangRi = Vue.extend(UIKangri)
 
 export default {
   name: 'Home',
@@ -128,7 +131,11 @@ export default {
         window.evt.initEvent('loadfinish',false,false)
         window.addEventListener('loadfinish',  ()=> {
             let huiyi = new HuiYi().$mount()
+            let kangri = new KangRi().$mount()
+
             document.body.appendChild(huiyi.$el)
+            document.body.appendChild(kangri.$el)
+
             setTimeout(() => {
                 window.initMenu()
             }, 0);