解决冲突

src/App.vue

@@ -33,7 +33,7 @@ export default {
       proxy: {},
       currentId: 0,
       url: "/static/audio/bg_m_000.mp3",
-      AudioPlayType: 1,
+      AudioPlayType: 1
     }
   },
   mounted () {
@@ -44,6 +44,24 @@ export default {
         $this.MsgBus.$emit('nextMusic')
       }
     }, false);
+    // 游戏准备321的音乐
+    this.MsgBus.$on('daojishiMp3', function (type) {
+      if (type === 1) { // 倒计时
+        $this.url = '/static/audio/ready321go.mp3'
+      } else if (2){ // 开始
+        $this.url = '/static/audio/game_running.mp3'
+      }
+      setTimeout(()=>{
+        $this.setAudioPlay(0)
+      }, 50)
+    })
+    // 更换背景音乐
+    this.MsgBus.$on('changeBGM', function (url) {
+      $this.url = url
+      setTimeout(()=>{
+        $this.setAudioPlay(0)
+      }, 50)
+    })
     //$this.connectServer()
     this.MsgBus.$on('setBarrageShow', function (type) {
       $this.barrageIsShow = type
@@ -110,6 +128,9 @@ export default {
       $this.$PROXY.invoke("SendBarrage", '0.0 让我康康是谁在说我坏话？').done(msg => {
           console.log(msg)
       });
+      $this.$PROXY.invoke("JoinGame", 'Mouse').done(msg => {
+        console.log(msg)
+      });
     },
     getMsg () {
       var $this = this;
@@ -133,7 +154,7 @@ export default {
 </script>
 
 <style>
-@import url("//at.alicdn.com/t/font_1574056_qf60my177p.css");
+@import url("//at.alicdn.com/t/font_1574056_jsd5ri47jy.css");
 @import "./assets/css/init.css";
 @import "./assets/css/animate.css";
 #app {

src/assets/css/GameRanking.css

+.Ranking{
+    width: 100%;
+    height: 100%;
+    background: url(/static/image/gamerank/bg.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 10009;
+}
+.Ranking .logo{
+    position: relative;
+    left: 4rem;
+    top: 2rem;
+}
+.Ranking p.tit{
+    text-align: center;
+    font-size: 4rem;
+    color: white;
+    position: relative;
+    top: -20px;
+}
+.Ranking .rank-box{
+    width: 80%;
+    margin: 0 auto;
+    display: flex;
+    padding-top: 4rem;
+}
+.Ranking .rank-box .item {
+    width: 9rem;
+}
+.Ranking .rank-box .item .head{
+    position: relative;
+    width: 7rem;
+    height: 7rem;
+    border-radius: 50%;
+    background:linear-gradient(0deg,rgba(247,213,23,1),rgba(255,171,2,1));
+    padding: .4rem;
+    margin: 0 auto;
+}
+.Ranking .rank-box .item .head .maozi{
+    position: absolute;
+    left: -12px;
+    top: -20px;
+    box-sizing: border-box;
+}
+.Ranking .rank-box .item .head .user-img{
+    width: 7rem;
+    height: 7rem;
+    border-radius: 50%;
+}
+.Ranking .rank-box .item .body{
+    background: url(/static/image/gamerank/tiao.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 60px;
+    margin: 0 auto;
+    height: 292px;
+    position: relative;
+} 
+.Ranking .rank-box .item .body .color{
+    position: absolute;
+    left: 5%;
+    bottom: 0;
+    width: 89%;
+    background:linear-gradient(90deg,rgba(186,76,11,1),rgba(233,154,53,1),rgba(253,244,139,1),rgba(209,151,25,1));
+    border-radius:0px 0px 30px 30px;
+}
+.Ranking .rank-box .item .name{
+    text-align: center;
+    font-family: 'PingFangR';
+    font-size: 2.4rem;
+    color: white;
+}
+.Ranking .rank-box .item .name p:nth-child(1) {
+    padding: .4rem;
+}
\ No newline at end of file

src/assets/css/PerformRanking.css

+.PerformRanking{
+    width: 100%;
+    height: 100%;
+    background: url(/static/image/jiemu/bg.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+}
+.PerformRanking .logo{
+    position: relative;
+    left: 4rem;
+    top: 2rem;
+}
+.PerformRanking .tit{
+    text-align: center;
+    font-size: 7rem;
+    color: white;
+}
+.PerformRanking .tit span{
+    -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;
+}
+.rank-box{
+    background-color: wheat;
+    height: 65%;
+    box-sizing: border-box;
+}

src/assets/css/bierede.css

@@ -122,26 +122,26 @@
 
 .container .countdown .countdown_left,.container .countdown .countdown_right {
 	width: 80px;
-	height: 540px;
+	height: 500px;
 	position: fixed;
 	z-index: 3;
 	display: flex
 }
 
 .container .countdown .countdown_left {
-	top: 20%;
+	top: 10%;
 	left: 5%
 }
 
 .container .countdown .countdown_right {
-	top: 20%;
+	top: 10%;
 	right: 5%
 }
 
 .container .countdown .countdown_left .axis,.container .countdown .countdown_right .axis {
 	position: absolute;
 	top: 0;
-	left: 28%;
+	left: 24%;
 	width: 36px;
 	height: 486px;
 	border-radius: 20px;
@@ -152,7 +152,7 @@
 }
 
 .container .countdown .countdown_left .axis .user,.container .countdown .countdown_right .axis .user {
-	margin-top: 150%;
+	margin-top: 64%;
 	width: 100%;
 	position: relative;
 	top: 0;
@@ -821,7 +821,7 @@
     right: .5%;
     z-index: 1000;
     width: 160px;
-    height: 80px;
+    height: 85px;
     border-radius: 8px;
     background: url(../../../static/image/shuqian/g_footer_bg2.png) no-repeat;
     background-size: 100% 100%;
@@ -830,6 +830,12 @@
     justify-content: center;
     align-items: center;
 }
+.dalaoshu .z_index10010{
+	z-index: 10010 !important;
+}
+.dalaoshu .hd-game-btn-container.hd-game-btn-container2{
+    width: 120px;
+}
 .dalaoshu .hd-game-btn-container .hd-game-btn {
     min-width: 70px;
     max-width: 100px;
@@ -920,8 +926,8 @@
     height: 70px;
 }
 .dalaoshu .prompt_img span {
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-left: 8px;
+    margin-right: 8px;
     width: 70px;
     height: 70px;
     display: inline-block;

src/assets/css/pageNav.css

@@ -20,7 +20,7 @@
   position: relative;
   opacity: 0.1;
   transition: opacity linear 4s;
-  padding-right: 20rem;
+  padding-right: 16rem;
   box-sizing: border-box;
 }
 .pageNav .left_nav:hover{
@@ -33,7 +33,7 @@
   width: 8rem;
   height: 5.16rem;
   border-radius: 5px;
-  margin-left: 5px;
+  margin-right: 1rem;
   background: rgba(35,35,45,.7);
   text-align: center;
   cursor: pointer;
@@ -80,7 +80,7 @@
 }
 .control_btn{
   position: absolute;
-  right: 12rem;
+  right: 16rem;
 }
 .music_box{
   position: absolute;
@@ -96,7 +96,7 @@
   color: #e9d5ab !important;
   border: none;
   width: 100px;
-  padding-right: 0 !important;
+  padding: 0 !important;
   text-align: center; 
 }
 .music-select .el-input__suffix{
@@ -108,4 +108,5 @@
 .music_box .iconfont{
   font-size: 2.8rem;
   cursor: pointer;
+  margin-right: .8rem;
 }
\ No newline at end of file

src/assets/js/menuJson.js

@@ -3,13 +3,15 @@ const leftNavMenu = [
     Class: 'iconfont iconshouye',
     Name: '首页',
     Url: 'index',
-    children: []
+    children: [],
+    bgm: '/static/audio/bg_m_000.mp3',
   },
   {
     Class: 'iconfont iconqiandao',
     Name: '签到',
     Url: 'SignIn',
-    children: []
+    children: [],
+    bgm: '/static/audio/signIn.mp3',
   },
   {
     Class: 'iconfont iconyouxi',
@@ -20,19 +22,22 @@ const leftNavMenu = [
         Class: 'iconfont icon-laoshu',
         Name: '瑞鼠迎福',
         Url: 'Mouse',
-        children: []
+        children: [],
+        bgm: '/static/audio/game_mouse_bg.mp3',
       },
       {
         Class: 'iconfont iconqian',
         Name: '疯狂数钞票',
         Url: 'Money',
-        children: []
+        children: [],
+        bgm: '/static/audio/game_money_bg.mp3',
       },
       {
         Class: 'iconfont icondatiqia',
         Name: '答题',
         Url: 'Answer',
-        children: []
+        children: [],
+        bgm: '/static/audio/toupiao.mp3',
       }
     ]
   },
@@ -40,13 +45,22 @@ const leftNavMenu = [
     Class: 'iconfont iconchoujiang',
     Name: '抽奖',
     Url: 'LuckDraw',
-    children: []
+    children: [],
+    bgm: '/static/audio/choujiang.mp3',
   },
   {
     Class: 'iconfont iconzu',
     Name: '投票',
     Url: 'Vote',
-    children: []
+    children: [],
+    bgm: '/static/audio/toupiao.mp3',
+  },
+  {
+    Class: 'iconfont iconpaihangbang',
+    Name: '排行榜',
+    Url: 'PerformRanking',
+    children: [],
+    bgm: '/static/audio/choujiang.mp3',
   }
 ]
 const controlMenu = [

src/components/PerformRanking.vue

+<template>
+  <div class="PerformRanking">
+    <img class="logo" src="/static/image/jiemu/logo.png" alt="">
+    <div>
+      <p class="tit yinxiang2020">
+        <span v-for="(item, index) in tit" :key="index">{{item}}</span>
+      </p>
+      <p class="tit yinxiang2020">
+        <span v-for="(item, index) in tit2" :key="index">{{item}}</span>
+      </p>
+    </div>
+    <div class="rank-box">
+      
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PerformRanking',
+  data () {
+    return {
+      tit: '和平印象2019年年会',
+      tit2: '节目评选结果'
+    }
+  },
+  activated () {},
+  created () {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+@import "../assets/css/PerformRanking.css";
+</style>

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="left_nav_item" @click.stop="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}`" >
+            <div class="children_item" @click.stop="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>
@@ -110,7 +110,8 @@ export default {
         this.MsgBus.$emit('setBarrageShow', this.controlMenu[index].state)
       } else if (Name === '声音') {
         console.log('sy')
-        this.mutePage(this.controlMenu[index].state)
+        let type = this.controlMenu[index].state ? 0 : 1
+        this.changeAudioState(type)
       } else if (Name === '全屏') {
         console.log('qp')
         if (!this.controlMenu[index].state) {
@@ -125,9 +126,6 @@ export default {
       elem.muted = t
       elem.pause()
     },
-    mutePage: function (t) {
-      document.querySelectorAll('audio').forEach(audio => this.setMute(audio, !t))
-    },
     fullScreen: function () { // 全屏
       let element = document.documentElement
       if (element.requestFullscreen) {
@@ -157,6 +155,8 @@ export default {
         window.open('http://activity.oytour.com/html/SignIn/signin.html')
         return
       }
+      console.log(obj)
+      this.MsgBus.$emit('changeBGM', obj.bgm)
       if (!obj.children.length && this.$route.name !== obj.Url) {
         this.$router.push({
           name: obj.Url

src/components/playGame/GameRanking.vue

+<template>
+  <div class="Ranking">
+    <img class="logo" src="/static/image/jiemu/logo.png" alt="">
+    <p class="tit"><span>排</span> <span>行</span> <span>榜</span></p>
+    <div class="rank-box">
+      <div class="item" v-for="(item, index) in rankingList">
+        <div class="head">
+          <img v-if="index < 3" class="maozi" :src="`/static/image/gamerank/maozi_${index+1}.png`" alt="">
+          <img class="user-img" :src="item.photo" alt="">
+        </div>
+        <div class="body">
+          <div class="color" :style="{'height': (item.height * 20) + 'px'}"></div>
+        </div>
+        <div class="name">
+          <p>{{item.name}}</p>
+          <p>{{item.rank}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Ranking',
+  props: {
+    rankingList: {
+      type: Array,
+      default: []
+    }
+  },
+  data () {
+    return {
+      
+    }
+  },
+  activated () {},
+  created () {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+@import "../../assets/css/GameRanking.css";
+</style>

src/components/playGame/Money.vue

@@ -164,7 +164,7 @@
   right: 0.5%;
   z-index: 1000;
   width: 160px;
-  height: 80px;
+  height: 85px;
   border-radius: 8px;
   background: url(../../../static/image/shuqian/g_footer_bg2.png) no-repeat;
   background-size: 100% 100%;
@@ -173,6 +173,9 @@
   justify-content: center;
   align-items: center;
 }
+.shuchaopiao .hd-game-btn-container.hd-game-btn-container2{
+    width: 120px;
+}
 .shuchaopiao .hd-game-btn-container .hd-game-btn {
   min-width: 70px;
   max-width: 100px;
@@ -912,7 +915,7 @@
           <img class="winnerRipple move" src="../../../static/image/shuqian/winner-quan1.png" alt />
         </div>
         <!-- 按钮 -->
-        <div class="hd-game-btn-container">
+        <div class="hd-game-btn-container hd-game-btn-container2">
           <div class="hd-game-btn" @click="getReady()" v-show="status==0">
             <i class="iconfont icon-go"></i>
             <span>准备</span>
@@ -1184,6 +1187,7 @@ export default {
         }
         let imgPath1 = num.split("")[0];
         let imgPath2 = num.split("")[1];
+        console.log(imgPath2)
         let countHtml = `<img class="img-num imgNumberImg" src='../../../static/image/shuqian/${imgPath1}.png'/>
                        <img class="img-num imgNumberImg2" src='../../../static/image/shuqian/${imgPath2}.png'/>`;
         this.$refs.countBox.innerHTML = countHtml;

src/plugin/signalr.js

@@ -4,7 +4,7 @@ let PROXY = null;
 
 let HUB = null;
 
-const HUB_API = 'http://localhost:7838/signalr';
+const HUB_API = 'http://192.168.2.66:7838/signalr';
 
 // 建立连接
 export function startConnection() {

src/router/index.js

@@ -8,6 +8,7 @@ import LuckDraw from '@/components/playGame/LuckDraw'
 import Vote from '@/components/playGame/Vote'
 import Answer from '@/components/playGame/Answer'
 import SignIn from '@/components/SignIn'
+import PerformRanking from '@/components/PerformRanking'
 Vue.use(Router)
 export default new Router({
   routes: [
@@ -59,6 +60,14 @@ export default new Router({
         title: '投票',
         keepAlive: false
       }
+    }, {
+      path: '/PerformRanking',
+      name: 'PerformRanking',
+      component: PerformRanking,
+      meta: {
+        title: '排行榜',
+        keepAlive: false
+      }
     }, {
       path: '/Answer',
       name: 'Answer',