Skip to content

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

节目

parent 8ced3f2e
Hide whitespace changes
Inline Side-by-side
Showing with 258 additions and 25 deletions
src/App.vue
View file @ d6494344
......@@ -130,7 +130,10 @@ export default {
sendMsg () {
var $this = this;
$this.$PROXY.invoke("SendBarrage", '0.0 让我康康是谁在说我坏话？').done(msg => {
console.log(msg)
console.log(msg)
});
$this.$PROXY.invoke("UserVoteProgarm", 1951).done(msg => {
console.log('我投票了！！！！！')
});
$this.$PROXY.invoke("JoinGame", 'Mouse').done(msg => {
console.log(msg)
......
src/assets/css/PerformRanking.css
View file @ d6494344
......@@ -6,21 +6,26 @@
background-size: 100% 100%;
position: absolute;
}
.PerformRanking .logo{
.Program-bg{
width: 100%;
height: 100%;
position: absolute;
}
.logo{
position: relative;
left: 4rem;
top: 2rem;
}
.PerformRanking .tit{
.tit{
text-align: center;
font-size: 5rem;
color: white;
}
.PerformRanking .tit-box{
.tit-box{
position: relative;
top: -2rem;
}
.PerformRanking .tit span{
.tit span{
-webkit-background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
......@@ -32,3 +37,82 @@
height: 65%;
box-sizing: border-box;
}
.hd-game-btn-container {
position: absolute;
bottom: 5px;
right: 0.5%;
z-index: 1000;
width: 160px;
height: 85px;
border-radius: 8px;
background: url(../../../static/image/shuqian/g_footer_bg2.png) no-repeat;
background-size: 100% 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.hd-game-btn-container .hd-game-btn {
min-width: 70px;
max-width: 100px;
width: 100px;
height: 62px;
border-radius: 0.3em;
background: rgba(17, 17, 17, 0.6)
url(../../../static/image/shuqian/g_game_btn_bg2.png) left no-repeat;
text-align: center;
cursor: pointer;
color: #f4d4b0;
cursor: pointer;
display: flex;
margin: 0 5px;
justify-content: center;
align-items: center;
flex-flow: column nowrap;
}
.hd-game-btn-container .icon-go {
background: url(../../../static/image/shuqian/img-begin.png?1) no-repeat;
background-size: cover;
width: 22px;
height: 22px;
}
.hd-game-btn-container .hd-game-btn span {
font-size: 1.3rem;
}
.hd-game-btn-container .hd-game-btn:nth-child(2) {
margin-left: 0;
}
.hd-game-btn-container .icon-lajitong {
background: url(../../../static/image/shuqian/icon-reset2.png) no-repeat;
background-size: cover;
width: 20px;
height: 22px;
}
.bg_video_box video{
object-fit: fill;
width: 1813px;
height: 1020px;
}
.Program-bg .tit-box{
left: 0;
top: 0;
position: absolute;
width: 100%;
padding-top: 2rem;
}
.Program-bg .logo{
left: 2rem;
top: 2rem;
position: absolute;
}
.Program-bg .img-box{
width: 100%;
height: 100%;
}
.Program-bg .img-box-other{
width: 100%;
height: 100%;
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577780802950&di=733dcaea6f38f06339d495d4e3cbb644&imgtype=0&src=http%3A%2F%2Fsource.upupoo.com%2Ftheme%2F784575347%2FpreviewFix.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
\ No newline at end of file
src/assets/js/menuJson.js
View file @ d6494344
......@@ -51,7 +51,7 @@ const leftNavMenu = [
{
Class: 'iconfont iconzu',
Name: '投票',
Url: 'PerformRanking',
Url: '',
children: [],
bgm: '/static/audio/toupiao.mp3',
},
......
src/components/PerformRanking.vue
View file @ d6494344
<template>
<div class="PerformRanking">
<img class="logo" src="/static/image/jiemu/logo.png" alt="">
<div class="tit-box">
<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 v-if="!ProgramEnd" class="Program-bg">
<template>
<div class="mv-box" v-if="dataObj.bg && dataObj.bg.indexOf('mp4') !== -1" :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="dataObj.bg" autoplay="autoplay" muted="muted" loop="loop" ref="homeBGvideo"></video>
</div>
</div>
<div class="img-box" v-else-if="dataObj.bg && !dataObj.bg.indexOf('png') !== -1" :style="{'background': 'url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578369592&di=e24fd2fc1026422a7d3018e37dce3d6f&imgtype=jpg&er=1&src=http%3A%2F%2Fshipindingzhi.com%2Fwp-content%2Fuploads%2F2016%2F08%2FTB2fNZvpXXXXXaMXXXXXXXXXXXX_381156532.jpg)','background-repeat': 'no-repeat','background-size': '100% 100%'}"></div>
<div class="img-box-other" v-else></div>
</template>
<img class="logo" src="/static/image/jiemu/logo.png" alt="">
<div class="tit-box">
<p class="tit yinxiang2020">
<span v-for="(item, index) in dataObj.Name" :key="index">{{item}}</span>
</p>
<p class="tit yinxiang2020">
<span v-for="(item, index) in dataObj.pp" :key="index">{{item}}</span>
</p>
</div>
<!-- 节目控制按钮 -->
<div class="hd-game-btn-container">
<div class="hd-game-btn" @click="StartMV()">
<i class="iconfont icon-go"></i>
<span>{{Start ? '结束' : '开始'}}</span>
</div>
<div class="hd-game-btn" @click="Reset()">
<i class="iconfont icon-lajitong"></i>
<span>重置</span>
</div>
</div>
</div>
<div class="rank-box">
<A-pillar></A-pillar>
<!-- 投票 -->
<div v-else class="PerformRanking">
<img class="logo" src="/static/image/jiemu/logo.png" alt="">
<div class="tit-box">
<p class="tit yinxiang2020">
<span v-for="(item, index) in dataObj.Name" :key="index">{{item}}</span>
</p>
<p class="tit yinxiang2020">
<span v-for="(item, index) in dataObj.pp" :key="index">{{item}}</span>
</p>
</div>
<div class="rank-box">
<A-pillar></A-pillar>
</div>
<!-- 投票控制按钮 -->
<div class="hd-game-btn-container">
<div class="hd-game-btn" @click="StartTP()">
<i class="iconfont icon-go"></i>
<span>{{tpStart ? '结束' : '开始'}}</span>
</div>
<div class="hd-game-btn" @click="ResetTP()">
<i class="iconfont icon-lajitong"></i>
<span>重置</span>
</div>
</div>
</div>
</div>
</template>
......@@ -24,18 +70,88 @@ export default {
},
data () {
return {
tit: '和平印象2019年年会',
tit2: '节目评选结果',
pillarType: 1
pillarType: 1,
dataObj: {},
Start: false,
ProgramEnd: false,
tpStart: false,
initSize: {
width: 1813,
height: 1020
},
videInfo: {
width: 1813,
height: 1020,
offsetX: 0,
offsetY: 0,
transformScale1: 0,
transformScale2: 0
}
}
},
watch: {
$route(){
this.Reset()
this.$forceUpdate()
this.dataObj = this.$route.query
}
},
activated () {},
created () {
this.windowResize()
this.pillarType = this.$route.query.type
this.MsgBus.$emit('daojishiMp3', 4)
},
mounted () {},
methods: {}
mounted () {
this.dataObj = this.$route.query
const that = this
window.onresize = () => {
return (() => {
that.windowResize()
})()
}
},
methods: {
// 以防意外重置投票
ResetTP: function () {
let $this = this
$this.tpStart = false
$this.$PROXY.invoke("ResetProgarmVote", $this.dataObj.Id).done(m=>{})
},
// 开始投票
StartTP: function () {
let $this = this
$this.tpStart = !$this.tpStart
let cmd = $this.tpStart ? "StartProgarmVote" : 'EndProgarmVote'
$this.$PROXY.invoke(cmd, $this.dataObj.Id).done(m=>{})
},
// 节目开始
StartMV: function () {
this.Start = !this.Start
if (this.Start) {
if (this.$refs.homeBGvideo) this.$refs.homeBGvideo.play()
}
if (!this.Start) {
this.ProgramEnd = true
if (this.$refs.homeBGvideo) this.$refs.homeBGvideo.pause()
}
},
// 节目重置
Reset: function () {
this.Start = false
this.ProgramEnd = false
this.tpStart = false
if (this.$refs.homeBGvideo) this.$refs.homeBGvideo.pause()
},
windowResize: function () {
let WindowW = window.innerWidth
let WindowH = window.innerHeight
this.videInfo.transformScale1 = WindowW / this.initSize.width
this.videInfo.transformScale2 = WindowH / this.initSize.height
this.videInfo.offsetX = (WindowW - this.initSize.width) * 0.5
this.videInfo.offsetY = (WindowH - this.initSize.height) * 0.5
}
}
}
</script>
......
src/components/pageNav.vue
View file @ d6494344
......@@ -71,6 +71,28 @@ export default {
this.MsgBus.$on('nextMusic', function () {
$this.nextMusic()
})
setTimeout(()=>{
$this.$PROXY.invoke("SendVoteProgarm", 1).done(m=>{
leftNavMenu.map(x=>{
if (x.Name === '投票') {
let list = []
m.map(y=>{
let obj = {
Name: y.t,
Id: y.i,
bg: y.bg,
mv: y.m,
brc: y.b,
pp: y.p,
Url: 'PerformRanking'
}
list.push(obj)
})
x.children = list
}
})
});
}, 2000)
},
methods: {
nextMusic: function () {
......@@ -155,6 +177,13 @@ export default {
window.open('http://activity.oytour.com/html/SignIn/signin.html')
return
}
if (obj.Id) {
this.$router.push({
name: obj.Url,
query: obj,
})
return
}
this.MsgBus.$emit('changeBGM', obj.bgm)
if (!obj.children.length && this.$route.name !== obj.Url) {
this.$router.push({
......
src/components/pillar/aPillar.vue
View file @ d6494344
......@@ -34,17 +34,18 @@ export default {
created () {},
mounted () {
let $this = this
setInterval(() => {
// 监听投票console.log(msg)
this.$PROXY.on("voteProgarm", data => {
if ($this.ClassIndex === 7) {
$this.ClassIndex = 0
}
$this.ClassIndex++
$this.list.push({
imgClass: 'headImg headImg_' + ($this.ClassIndex - 1),
headImg: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2491588266,1963864761&fm=26&gp=0.jpg'
headImg: data
})
$this.setClass($this.list.length-1, $this.ClassIndex)
}, 1000);
})
},
methods: {
setClass: function (index, index2) {
......
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