1

src/App.vue

@@ -11,9 +11,9 @@
       :loop="barrageLoop"
       >
     </vue-baberrage>
-    <div style="position: absolute;left: 0;top: 0;padding: 2%;background-color: red;z-index: 10086;" @click="sendMsg()">sendMsg</div>
+    <!-- <div style="position: absolute;left: 0;top: 0;padding: 2%;background-color: red;z-index: 10086;" @click="sendMsg()">sendMsg</div> -->
     <!-- style="position: absolute; top: 20%;z-index: 20199"  -->
-    <audio style="position: absolute; top: -20%;z-index: -1"  ref="homeAudio" :loop="AudioPlayType ? true : false"  :src="url" controls></audio>
+    <audio style="position: absolute; top: -20%;z-index: -1" ref="homeAudio" :loop="AudioPlayType ? true : false"  :src="url" controls></audio>
   </div>
 </template>
 
@@ -33,7 +33,7 @@ export default {
       proxy: {},
       currentId: 0,
       url: "/static/audio/bg_m_000.mp3",
-      AudioPlayType: 1,
+      AudioPlayType: 1
     }
   },
   mounted () {
@@ -147,7 +147,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/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%;
+}

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;

src/assets/js/menuJson.js

@@ -47,6 +47,12 @@ const leftNavMenu = [
     Name: '投票',
     Url: 'Vote',
     children: []
+  },
+  {
+    Class: 'iconfont iconpaihangbang',
+    Name: '排行榜',
+    Url: 'PerformRanking',
+    children: []
   }
 ]
 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

@@ -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) {

src/components/playGame/GameRanking.vue

+<template>
+  <div class="Ranking">
+    
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Ranking',
+  props: ['RankingList'],
+  data () {
+    return {
+      
+    }
+  },
+  activated () {},
+  created () {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+@import "../../assets/css/GameRanking.css";
+</style>

src/components/playGame/Mouse.vue

@@ -57,7 +57,7 @@
         </div>
         <div class="prompt_imgdiv">
           <div class="prompt_img">
-            <span class="waiting-box"  v-for="item in RoomAllUser">
+            <span class="waiting-box"  v-for="(item, index) in RoomAllUser" :key="index" v-if="index < 9">
               <img :src="item.photo" alt="">
             </span>
           </div>
@@ -89,13 +89,61 @@
         <img class="img-num imgNumberImg" src='../../../static/image/shuqian/3.png'/>
         <img class="img-num imgNumberImg2" src='../../../static/image/shuqian/0.png'/>
       </div>
+      <!-- 两边排行榜 -->
+      <div class="countdown">
+        <div class="countdown_left">
+          <div class="axis">
+            <div class="user" v-if="rankingListNow.length && index <= 4" v-for="(item, index) in rankingListNow" :key="index">
+              <div class="texts">
+                <p class="name">{{item.name}}</p>
+                <p class="score">{{item.rank}}</p>
+              </div>
+              <img class="head_img" :src="item.photo">
+              <div class="avatar">
+                <img src="/static/image/dalaoshu/ranking_bg.png">
+                <div class="ranking">{{index+1}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="time" :class="{'num-scale-bg': totalTime2 < 30}"></div>
+          <div class="text" :class="{'num-scale-bg': totalTime2 < 30}">
+            <p>倒计时</p>
+            <h1>{{totalTime2}}</h1>
+          </div>
+        </div>
+        <div class="countdown_right">
+          <div class="axis">
+            <div class="user" v-if="rankingListNow.length && index > 4" v-for="(item, index) in rankingListNow" :key="index">
+              <div class="texts">
+                <p class="name">{{item.name}}</p>
+                <p class="score">{{item.rank}}</p>
+              </div>
+              <img class="head_img" :src="item.photo">
+              <div class="avatar">
+                <img  src="/static/image/dalaoshu/ranking_bg.png">
+                <div class="ranking">{{index+1}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="time" :class="{'num-scale-bg': totalTime2 < 30}"></div>
+          <div class="text" :class="{'num-scale-bg': totalTime2 < 30}">
+              <p>倒计时</p>
+              <h1>{{totalTime2}}</h1>
+          </div>
+        </div>
+        <rank-list :rankingList="rankingList" v-show="rankingShow"></rank-list>
+      </div>
     </div>     
   </div>
 </template>
 
 <script>
+import RankingListPage from './GameRanking'
 export default {
   name: 'Mouse',
+  components: {
+    'rank-list': RankingListPage
+  },
   data () {
     return {
       noReady: true,
@@ -177,6 +225,9 @@ export default {
       Code: 'Mouse',
       RoomAllUser: [],
       gameOverState: false,
+      rankingShow: false,
+      rankingList: [],
+      rankingListNow: []
     }
   },
   activated () {
@@ -200,7 +251,7 @@ export default {
     })
     // 监听加入者
     this.$PROXY.on("notifyNewMouseGamerUser", data => {
-      console.log(data)
+      console.log(data.n + '加入了游戏~~~')
       $this.RoomAllUser.push({
         name: data.n,
         photo: data.p
@@ -209,16 +260,34 @@ 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.$PROXY.on("notifyeMouseGamerRank", data => {
+      console.log(data)
+      $this.rankingListNow = [];
+      if (data.length) {
+        $this.rankingShow = true
+        data.map(x=>{
+          $this.rankingListNow.push({
+            name: x.n,
+            photo: x.p,
+            rank: x.s
+          })
+        })
+      }
     })
   },
   methods: {
-    // 游戏结束获取排行版
-    GetGameResult: function () {
-      let $this = this
-      this.$PROXY.invoke("GetGameResult", $this.Code).done(msg => {
-        console.log('初始化游戏。。。')
-      });
-    },
     // 游戏结束后处理的东西
     gameOver: function () {
       this.gameOverState = true
@@ -235,10 +304,12 @@ export default {
       this.noReady = true
       this.showPeople = false
       this.dataIndex = 0
+      this.totalTime2 = 30
     },
     // 获取当前加入的人
     GetRoomAllUser: function () {
       let $this = this
+      $this.RoomAllUser = []
       this.$PROXY.invoke("GetRoomAllUser", $this.Code).done(data => {
         data.map(x=>{
           $this.RoomAllUser.push({

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',