导航菜单以及页面新增

package.json

 {
-  "name": "印象之旅",
+  "name": "newyear",
   "version": "1.0.0",
   "description": "A Vue.js project",
   "author": "",
@@ -16,7 +16,9 @@
   "dependencies": {
     "element-ui": "^2.13.0",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vue-socket.io": "^3.0.4",
+    "socket.io-client": "^2.2.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/App.vue

@@ -19,7 +19,9 @@ export default {
 </script>
 
 <style>
+@import url("//at.alicdn.com/t/font_1574056_wu2f2wryiyk.css");
 @import "./assets/css/init.css";
+@import "./assets/css/animate.css";
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

src/assets/css/index.css

-.bg_box{
-  position: absolute;
-}
 .bg_box .bg_video_box{
   position: absolute;
   background-color: rgb(94, 19, 107);
@@ -16,20 +13,27 @@
 }
 .home_tit{
   position: absolute;
+  padding: 10px;
+  width: 62%;
+  padding: 10px;
+  left: 50%;
+  top: 45%;
+  transform: translate(-50%, -50%);
+  padding-left: 4%;
+}
+.home_tit .yinxiang2020{
   -webkit-background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-image: url(../../../static/image/fongt-bg.png);
   background-position: left top;
   background-repeat: repeat;
-  display: inline-block;
   word-break: break-all;
   transform-origin: 0px 0px 0px;
-  padding: 10px;
-  width: calc(100vw);
 }
 .home_tit>._en p,.home_tit_sub{
-  font-size: 4rem;
+  font-size: 5rem;
+  color: rgb(253, 229, 170);
 }
 ._cn>p span:nth-child(1){
   font-size: 15rem;
@@ -39,4 +43,8 @@
 }
 ._cn>p span:nth-child(3){
   font-size: 30rem;
-}
\ No newline at end of file
+}
+.home_tit_sub p{
+  text-align: center;
+  margin-top: 1rem;
+}

src/assets/css/init.css

@@ -47,3 +47,6 @@ html {
 	overflow: hidden;
 	font-size: 62.5%
 }
+.ce9{
+  color: #e9d5ab !important;
+}
\ No newline at end of file

src/assets/css/pageNav.css

+.pageNav{
+  position: absolute;
+  width: 98%;
+  z-index: 900;
+  bottom: .5rem;
+  left: 1rem;
+  box-sizing: border-box;
+}
+.pageNav .left_nav{
+  padding: 1rem;
+  background: url(../../../static/image/nav-bg.png) no-repeat;
+  background-size: 100% 100%;
+  border-radius: 10px;
+  width: 90%;
+  display: flex;
+  align-items: center;
+  float: left;
+  position: relative;
+  opacity: 0.1;
+  transition: opacity linear 4s;
+}
+.pageNav .left_nav:hover{
+  opacity: 1;
+  transition: opacity linear .5s;
+}
+.pageNav .left_nav .left_nav_item{
+  position: relative;
+  float: left;
+  width: 8rem;
+  height: 5.16rem;
+  border-radius: 5px;
+  margin-left: 5px;
+  background: rgba(35,35,45,.7);
+  text-align: center;
+  cursor: pointer;
+  transition: all .5s;
+  -webkit-transition: all .5s;
+  -moz-transition: all .5s;
+  -ms-transition: all .5s;
+  -o-transition: all .5s;
+  font-size: 12px;
+}
+.pageNav .left_nav .left_nav_item:hover{
+  background-color: rgba(201,201,201,0.3);
+}
+.pageNav .left_nav .left_nav_item .f1 .iconfont{
+  font-size: 2.8rem;
+  font-family: 'PingFangR';
+  margin-top: .5rem;
+  display: inline-block;
+}
+.pageNav .left_nav .left_nav_item .item_name{
+  padding-top: .3rem;
+}
+.left_nav_item_children{
+  position: absolute;
+  bottom: 55px;
+  width: 100%;
+  padding-bottom: 20px;
+}
+.left_nav_item_children .children_item{
+  padding: .8rem 0 .8rem .4rem;
+  background: rgba(35,35,45,.7);
+  margin-bottom: 10px;
+  border-radius: 4px;
+  text-align: left;
+  display: flex;
+  align-items: center;
+}
+.left_nav_item_children .children_item i{
+  display: inline-block;
+  margin-right: .4rem;
+}
+.left_nav_item_children .children_item:hover span{
+  color: #e1830a !important;
+}
+.control_btn{
+  position: absolute;
+  right: 1rem;
+}

src/assets/js/menuJson.js

+const leftNavMenu = [
+  {
+    Class: 'iconfont iconshouye',
+    Name: '首页',
+    Url: 'index',
+    children: []
+  },
+  {
+    Class: 'iconfont iconqiandao',
+    Name: '签到',
+    Url: 'SignIn',
+    children: []
+  },
+  {
+    Class: 'iconfont iconyouxi',
+    Name: '游戏',
+    Url: '',
+    children: [
+      {
+        Class: 'iconfont icon-laoshu',
+        Name: '瑞鼠迎福',
+        Url: 'Mouse',
+        children: []
+      },
+      {
+        Class: 'iconfont iconqian',
+        Name: '疯狂数钞票',
+        Url: 'Money',
+        children: []
+      },
+      {
+        Class: 'iconfont icondatiqia',
+        Name: '答题',
+        Url: 'Answer',
+        children: []
+      }
+    ]
+  },
+  {
+    Class: 'iconfont iconchoujiang',
+    Name: '抽奖',
+    Url: 'LuckDraw',
+    children: []
+  },
+  {
+    Class: 'iconfont iconzu',
+    Name: '投票',
+    Url: 'Vote',
+    children: []
+  }
+]
+const controlMenu = [
+  {
+    Name: '弹幕',
+    Class: {
+      on: 'iconfont iconbofangqi-danmukai',
+      off: 'iconfont iconbofangqi-danmuguan'
+    },
+    state: false
+  },
+  {
+    Name: '声音',
+    Class: {
+      on: 'iconfont iconmn_shengyin_fill',
+      off: 'iconfont iconmn_shengyinwu_fill'
+    },
+    state: false
+  },
+  {
+    Name: '全屏',
+    Class: {
+      on: 'iconfont iconweibiaoti-1',
+      off: 'iconfont iconweibiaoti-'
+    },
+    state: false
+  }
+]
+module.exports = {
+  leftNavMenu: leftNavMenu,
+  controlMenu: controlMenu
+}

src/components/SignIn.vue

+<template>
+  <div>
+    <div>{{msg}}</div>
+    <router-link to="/index">返回</router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SignIn',
+  data () {
+    return {
+      msg: '签到'
+    }
+  },
+  activated () {
+    this.msg = new Date() + '呵呵'
+  }
+}
+</script>
+
+<style>
+</style>

src/components/index.vue

 <template>
-  <div class="bg_box" :style="{position: 'relative',  height: `${videInfo.height}px`, left: `${videInfo.offsetX}px`, top: `${videInfo.offsetY}px`, transform: `scale(${videInfo.transformScale1}, ${videInfo.transformScale2})`}">
+  <div class="bg_box" :style="{position: 'relative', width: `${videInfo.width}px`, height: `${videInfo.height}px`, left: `${videInfo.offsetX}px`, top: `${videInfo.offsetY}px`, transform: `scale(${videInfo.transformScale1}, ${videInfo.transformScale2})`}">
     <div class="bg_video_box">
       <video src="/static/video/yxbg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
     </div>
@@ -20,7 +20,7 @@
           <p>印象之旅2020年会</p>
         </div>
         <div class="_cn">
-          OYTOUR & VIITTO
+          <p>OYTOUR & VIITTO</p>
         </div>
       </div>
     </div>

src/components/pageNav.vue

 <template>
   <div class="pageNav">
-    我是导航
+    <div class="left_nav ce9">
+      <div class="left_nav_item" @click="goPage(item)" @mouseover="mouseOver(index)" @mouseleave="mouseLeave" v-for="(item, index) in leftNavMenu" :key="index" :index="index">
+        <div class="f1">
+          <i :class="item.Class"></i>
+        </div>
+        <template v-if="item.children.length">
+          <p class="item_name">{{item.Name}}</p>
+          <div class="left_nav_item_children" :class="animateClass" v-if="mouseIndex === index">
+            <div class="children_item" @click="goPage(children)" v-for="(children, childrenIndex) in item.children" :key="childrenIndex" :index="`${index}-${childrenIndex}`" >
+              <i :class="children.Class"></i><span>{{children.Name}}</span>
+            </div>
+          </div>
+        </template>
+        <p v-else class="item_name">{{item.Name}}</p>
+      </div>
+      <div class="control_btn">
+        <div class="left_nav_item" v-for="(item, index) in controlMenu" @click="changeControlState(index)" :key="index" :index="index">
+          <div class="f1">
+            <i :class="item.state ? item.Class.off : item.Class.on"></i>
+          </div>
+          <p class="item_name">{{item.Name}}</p>
+        </div>
+      </div>
+    </div>
+    <div class="right_nav">
+      aa
+    </div>
   </div>
 </template>
 
 <script>
+import {leftNavMenu, controlMenu} from '../assets/js/menuJson'
 export default {
   name: 'pageNav',
   data () {
     return {
-
+      leftNavMenu: leftNavMenu,
+      controlMenu: controlMenu,
+      activeIndex: 0,
+      mouseIndex: -1,
+      animateClass: ''
     }
   },
   created () {},
   mounted () {},
-  methods: {}
+  methods: {
+    mouseOver: function (index) {
+      this.mouseIndex = index
+      this.animateClass = 'animated rollIn'
+    },
+    mouseLeave: function (index) {
+      this.mouseIndex = -1
+      this.animateClass = 'animated rollOut'
+    },
+    changeControlState: function (index) {
+      this.controlMenu[index].state = !this.controlMenu[index].state
+    },
+    goPage: function (obj) {
+      if (!obj.children.length) {
+        this.$router.push({
+          name: obj.Url
+        })
+      }
+    }
+  }
 }
 </script>
 
 <style scoped>
-.pageNav{
-  position: absolute;
-  width: 98%;
-  padding: 2rem 1rem;
-  z-index: 900;
-  background: url(../../static/image/nav-bg.png) no-repeat;
-  background-size: 100% 100%;
-  border-radius: 10px;
-  bottom: .5rem;
-  left: 1rem;
-  box-sizing: border-box;
-}
-
+@import "//at.alicdn.com/t/font_1574056_t1y09rcq99s.css";
+@import "../assets/css/pageNav.css";
 </style>

src/components/playGame/Answer.vue

+<template>
+  <div>
+    <div>{{msg}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Answer',
+  data () {
+    return {
+      msg: '答题'
+    }
+  },
+  activated () {
+    this.msg = new Date() + '呵呵'
+  }
+}
+</script>
+
+<style>
+</style>

src/components/playGame/LuckDraw.vue

+<template>
+  <div>
+    <div>{{msg}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LuckDraw',
+  data () {
+    return {
+      msg: '抽奖'
+    }
+  },
+  activated () {
+    this.msg = new Date() + '呵呵'
+  }
+}
+</script>
+
+<style>
+</style>

src/components/playGame/Money.vue

+<template>
+  <div>
+    <div>{{msg}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Money',
+  data () {
+    return {
+      msg: '疯狂数钞票'
+    }
+  },
+  activated () {
+    this.msg = new Date() + '呵呵'
+  }
+}
+</script>
+
+<style>
+</style>

src/components/playGame/Mouse.vue

+<template>
+  <div>
+    <div>{{msg}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Mouse',
+  data () {
+    return {
+      msg: '瑞鼠迎福'
+    }
+  },
+  activated () {
+    this.msg = new Date() + '呵呵'
+  }
+}
+</script>
+
+<style>
+</style>

src/components/playGame/Vote.vue

+<template>
+  <div>
+    <div>{{msg}}</div>
+    <router-link to="/index">返回</router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Vote',
+  data () {
+    return {
+      msg: '投票'
+    }
+  },
+  activated () {
+    this.msg = new Date() + '呵呵'
+  }
+}
+</script>
+
+<style>
+</style>

src/main.js

@@ -5,9 +5,10 @@ import App from './App'
 import router from './router'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-
+import socketio from 'socket.io-client'
 Vue.config.productionTip = false
 Vue.use(ElementUI)
+Vue.prototype.$socketio = socketio
 /* 路由发生变化修改页面title */
 router.beforeEach((to, from, next) => {
   if (to.meta.title) {

src/router/index.js

@@ -2,8 +2,13 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import index from '@/components/index'
 import Home from '@/components/Home'
+import Mouse from '@/components/playGame/Mouse'
+import Money from '@/components/playGame/Money'
+import LuckDraw from '@/components/playGame/LuckDraw'
+import Vote from '@/components/playGame/Vote'
+import Answer from '@/components/playGame/Answer'
+import SignIn from '@/components/SignIn'
 Vue.use(Router)
-
 export default new Router({
   routes: [
     {
@@ -14,8 +19,7 @@ export default new Router({
         title: '印象之旅2020年会',
         keepAlive: true
       }
-    },
-    {
+    }, {
       path: '/Home',
       name: 'Home',
       component: Home,
@@ -23,8 +27,55 @@ export default new Router({
         title: '首页',
         keepAlive: true
       }
-    },
-    {
+    }, {
+      path: '/Mouse',
+      name: 'Mouse',
+      component: Mouse,
+      meta: {
+        title: '瑞鼠迎福',
+        keepAlive: false
+      }
+    }, {
+      path: '/Money',
+      name: 'Money',
+      component: Money,
+      meta: {
+        title: '疯狂数钞票',
+        keepAlive: false
+      }
+    }, {
+      path: '/LuckDraw',
+      name: 'LuckDraw',
+      component: LuckDraw,
+      meta: {
+        title: '抽奖',
+        keepAlive: false
+      }
+    }, {
+      path: '/Vote',
+      name: 'Vote',
+      component: Vote,
+      meta: {
+        title: '投票',
+        keepAlive: false
+      }
+    }, {
+      path: '/Answer',
+      name: 'Answer',
+      component: Answer,
+      meta: {
+        title: '答题',
+        keepAlive: false
+      }
+    }, {
+      path: '/SignIn',
+      name: 'SignIn',
+      component: SignIn,
+      meta: {
+        title: '签到',
+        keepAlive: false
+      }
+    }, {
       path: '/Center/:id',
       name: 'Center',
       component: resolve => require(['@/components/Center'], resolve),