新增一些背景音乐

src/App.vue

@@ -46,15 +46,22 @@ export default {
     }, false);
     // 游戏准备321的音乐
     this.MsgBus.$on('daojishiMp3', function (type) {
-      if (type === 1) {
+      if (type === 1) { // 倒计时
         $this.url = '/static/audio/ready321go.mp3'
-      } else {
+      } 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

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

@@ -27,4 +27,5 @@
 .rank-box{
     background-color: wheat;
     height: 65%;
+    box-sizing: border-box;
 }

src/assets/css/bierede.css

@@ -830,6 +830,9 @@
     justify-content: center;
     align-items: center;
 }
+.dalaoshu .z_index10010{
+	z-index: 10010 !important;
+}
 .dalaoshu .hd-game-btn-container.hd-game-btn-container2{
     width: 120px;
 }

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,19 +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: []
+    children: [],
+    bgm: '/static/audio/choujiang.mp3',
   }
 ]
 const controlMenu = [

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>
@@ -155,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'],
+  props: {
+    rankingList: {
+      type: Array,
+      default: []
+    }
+  },
   data () {
     return {
       

src/components/playGame/Mouse.vue

@@ -70,6 +70,12 @@
           <span>准备</span>
         </div>
       </div>
+      <div class="hd-game-btn-container hd-game-btn-container2 z_index10010" v-show="rankingShow">
+        <div class="hd-game-btn" @click="RestGame()">
+          <i class="iconfont icon-go"></i>
+          <span>重置</span>
+        </div>
+      </div>
       <div class="hd-game-btn-container" v-show="!showCount && !noReady && !showThrityCount">
         <div class="hd-game-btn" @click="StartGame()">
           <i class="iconfont icon-go"></i>
@@ -131,8 +137,8 @@
               <h1>{{totalTime2}}</h1>
           </div>
         </div>
-        <rank-list :rankingList="rankingList" v-show="rankingShow"></rank-list>
       </div>
+      <rank-list :rankingList="rankingList" v-show="rankingShow"></rank-list>
     </div>     
   </div>
 </template>
@@ -260,23 +266,13 @@ export default {
     // 监听游戏结束 展示排行榜
     this.$PROXY.on("notifyMouseGamerResult", data => {
       console.log(data)
-      if (data.length) {
-        $this.rankingShow = true
-        data.map(x=>{
-          $this.rankingList.push({
-            name: x.n,
-            photo: x.p,
-            rank: x.r
-          })
-        })
-      }
+      $this.getRankList(data)
     })
     // 监听玩家分数
     this.$PROXY.on("notifyeMouseGamerRank", data => {
       console.log(data)
       $this.rankingListNow = [];
       if (data.length) {
-        $this.rankingShow = true
         data.map(x=>{
           $this.rankingListNow.push({
             name: x.n,
@@ -303,6 +299,7 @@ export default {
       });
       this.noReady = true
       this.showPeople = false
+      this.rankingShow = false
       this.dataIndex = 0
       this.totalTime2 = 30
     },
@@ -336,8 +333,8 @@ export default {
             $this.countDown()
             $this.laoshuData = JSON.parse(data.data)
             $this.StartGame()
-          } else {
-            $this.RestGame()
+          } else if (data.status === -1) {
+            $this.getRankList(data.rank)
           }
         });
       } catch (error) {
@@ -345,7 +342,19 @@ export default {
           $this.initData()
         }, 1000);
       }
-      
+    },
+    getRankList: function (data) {
+      if (data.length) {
+        data.map((x, index)=>{
+          this.rankingList.push({
+            name: x.n,
+            photo: x.p,
+            rank: x.s,
+            height: data.length - index
+          })
+        })
+        this.rankingShow = true
+      }
     },
     StartGame: function () {
       console.log('游戏开始111111·')