Skip to content

N
NEWYEARPARTY
Commit af7ccf83 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

1

parent f8407767
Hide whitespace changes
Inline Side-by-side
Showing with 197 additions and 22 deletions
src/App.vue
View file @ af7ccf83
......@@ -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 0 → 100644
View file @ af7ccf83
.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
View file @ af7ccf83
......@@ -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
View file @ af7ccf83
......@@ -47,6 +47,12 @@ const leftNavMenu = [
Name: '投票',
Url: 'Vote',
children: []
},
{
Class: 'iconfont iconpaihangbang',
Name: '排行榜',
Url: 'PerformRanking',
children: []
}
]
const controlMenu = [
......
src/components/PerformRanking.vue 0 → 100644
View file @ af7ccf83
<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
View file @ af7ccf83
......@@ -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 0 → 100644
View file @ af7ccf83
<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
View file @ af7ccf83
......@@ -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
View file @ af7ccf83
......@@ -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',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment