Commit d7947ea5 authored by 华国豪's avatar 华国豪 🙄

抽奖

parent d0c1a56e
...@@ -161,7 +161,7 @@ export default { ...@@ -161,7 +161,7 @@ export default {
</script> </script>
<style> <style>
@import url("//at.alicdn.com/t/font_1574056_jsd5ri47jy.css"); @import url("//at.alicdn.com/t/font_1574056_9kor82kqrdl.css");
@import "./assets/css/init.css"; @import "./assets/css/init.css";
@import "./assets/css/animate.css"; @import "./assets/css/animate.css";
#app { #app {
......
...@@ -97,17 +97,17 @@ ...@@ -97,17 +97,17 @@
width: 100%; width: 100%;
} }
.choujiang-btn div{ .choujiang-btn div{
height: 100px; height: 80px;
width: 184px; width: 170px;
background: url(/static/image/draw/btn_bg.png); background: url(/static/image/draw/btn_bg.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin: 24px auto 0 auto; margin: 60px auto 0 auto;
color: #ffff72; color: #ffff72;
text-shadow: #ff7a4d 1px 1px 10px, #ff7a4d 0 1px 10px, #ff7a4d 1px 0 10px, #ff7a4d 1px 1px 10px; text-shadow: #ff7a4d 1px 1px 10px, #ff7a4d 0 1px 10px, #ff7a4d 1px 0 10px, #ff7a4d 1px 1px 10px;
font-size: 3rem; font-size: 3rem;
text-align: center; text-align: center;
line-height: 100px; line-height: 80px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
...@@ -119,32 +119,111 @@ ...@@ -119,32 +119,111 @@
height: 100%; height: 100%;
background: url(/static/image/draw/2.png); background: url(/static/image/draw/2.png);
display: block; display: block;
-webkit-animation: lightMove .5s 4s infinite ease; -webkit-animation: lightMove 4s infinite ease;
animation: lightMove .2s 4s infinite ease; animation: lightMove 4s infinite ease;
} }
@keyframes lightMove { @keyframes lightMove {
12.5% { 0%,75% {
opacity: 0;
background: url(/static/image/draw/2.png); background: url(/static/image/draw/2.png);
} }
25% { 76.5% {
opacity: 1;
background: url(/static/image/draw/2.png);
}
78.5% {
opacity: 1;
background: url(/static/image/draw/3.png); background: url(/static/image/draw/3.png);
} }
37.5% { 82% {
opacity: 1;
background: url(/static/image/draw/4.png); background: url(/static/image/draw/4.png);
} }
50% { 85.5% {
opacity: 1;
background: url(/static/image/draw/5.png); background: url(/static/image/draw/5.png);
} }
62.5% { 89% {
opacity: 1;
background: url(/static/image/draw/6.png); background: url(/static/image/draw/6.png);
} }
75% { 92.5% {
opacity: 1;
background: url(/static/image/draw/7.png); background: url(/static/image/draw/7.png);
} }
87.5% { 96% {
opacity: 1;
background: url(/static/image/draw/8.png); background: url(/static/image/draw/8.png);
} }
100% { 100% {
opacity: 1;
background: url(/static/image/draw/9.png); background: url(/static/image/draw/9.png);
} }
}
.award-ctrl{
position: absolute;
bottom: 1rem;
left: 1rem;
color: #6a6a6a;
}
.award-ctrl .iconfont{
cursor: pointer;
}
.w60{
width: 60px;
}
.award-in{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.head1{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scaleY(1.5);
width: 10px;
height: 10px;
border-radius: 50%;
transition: all linear 1.5s;
background-color: red;
}
.head_move1{
top: 300%;
width: 150px;
height: 150px;
}
.head_move2{
left: 300%;
width: 150px;
height: 150px;
}
.head_move3{
left: 300%;
top: 60%;
width: 150px;
height: 150px;
}
.head_move4{
left: initial;
right: 300%;
top: 60%;
width: 150px;
height: 150px;
}
.head_move5{
left: initial;
right: 300%;
top: 50%;
width: 150px;
height: 150px;
}
.head_move6{
left: initial;
right: 300%;
top: 70%;
width: 150px;
height: 150px;
} }
\ No newline at end of file
...@@ -7,11 +7,26 @@ const leftNavMenu = [ ...@@ -7,11 +7,26 @@ const leftNavMenu = [
bgm: '/static/audio/bg_m_000.mp3', bgm: '/static/audio/bg_m_000.mp3',
}, },
{ {
Class: 'iconfont iconqiandao', Class: 'iconfont iconjiemu',
Name: '签到', Name: '开场',
Url: 'SignIn', Url: '',
children: [], children: [
bgm: '/static/audio/signIn.mp3', {
Class: 'iconfont icondaojishi',
Name: '倒计时',
Url: 'CountDown',
children: [],
bgm: '',
},
{
Class: 'iconfont iconqiandao',
Name: '签到',
Url: 'SignIn',
children: [],
bgm: '/static/audio/game_mouse_bg.mp3',
},
],
bgm: '',
}, },
{ {
Class: 'iconfont iconyouxi', Class: 'iconfont iconyouxi',
...@@ -49,11 +64,11 @@ const leftNavMenu = [ ...@@ -49,11 +64,11 @@ const leftNavMenu = [
bgm: '/static/audio/choujiang.mp3', bgm: '/static/audio/choujiang.mp3',
}, },
{ {
Class: 'iconfont iconzu', Class: 'iconfont iconstart',
Name: '投票', Name: '节目单',
Url: '', Url: '',
children: [], children: [],
bgm: '/static/audio/toupiao.mp3', bgm: '',
}, },
{ {
Class: 'iconfont iconpaihangbang', Class: 'iconfont iconpaihangbang',
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
</div> </div>
</div> </div>
<!-- 投票 --> <!-- 投票 -->
<div v-else class="PerformRanking"> <div v-if="dataObj.type!==0 && ProgramEnd" class="PerformRanking">
<img class="logo" src="/static/image/jiemu/logo.png" alt=""> <img class="logo" src="/static/image/jiemu/logo.png" alt="">
<div class="tit-box"> <div class="tit-box">
<p class="tit yinxiang2020"> <p class="tit yinxiang2020">
...@@ -137,6 +137,9 @@ export default { ...@@ -137,6 +137,9 @@ export default {
this.ProgramEnd = true this.ProgramEnd = true
if (this.$refs.homeBGvideo) this.$refs.homeBGvideo.pause() if (this.$refs.homeBGvideo) this.$refs.homeBGvideo.pause()
} }
if (this.dataObj.type === 0){
this.ProgramEnd = true
}
}, },
// 节目重置 // 节目重置
Reset: function () { Reset: function () {
......
...@@ -55,9 +55,6 @@ export default { ...@@ -55,9 +55,6 @@ export default {
this.windowResize() this.windowResize()
}, },
mounted () { mounted () {
this.MsgBus.$on('inceptMessage', (msg) => {
console.log(msg)
})
const that = this const that = this
window.onresize = () => { window.onresize = () => {
return (() => { return (() => {
......
...@@ -72,9 +72,9 @@ export default { ...@@ -72,9 +72,9 @@ export default {
$this.nextMusic() $this.nextMusic()
}) })
setTimeout(()=>{ setTimeout(()=>{
$this.$PROXY.invoke("SendVoteProgarm", 1).done(m=>{ $this.$PROXY.invoke("SendVoteProgarm", 1, "").done(m=>{
leftNavMenu.map(x=>{ $this.leftNavMenu.map(x=>{
if (x.Name === '投票') { if (x.Name === '节目单') {
let list = [] let list = []
m.map(y=>{ m.map(y=>{
let obj = { let obj = {
...@@ -84,6 +84,7 @@ export default { ...@@ -84,6 +84,7 @@ export default {
mv: y.m, mv: y.m,
brc: y.b, brc: y.b,
pp: y.p, pp: y.p,
type: y.type,
Url: 'PerformRanking' Url: 'PerformRanking'
} }
list.push(obj) list.push(obj)
...@@ -172,8 +173,7 @@ export default { ...@@ -172,8 +173,7 @@ export default {
} }
}, },
goPage: function (obj) { goPage: function (obj) {
this.MsgBus.$emit('inceptMessage', '666') if (obj.Name === '签到' && !obj.Id) {
if (obj.Name === '签到') {
window.open('http://activity.oytour.com/html/SignIn/signin.html') window.open('http://activity.oytour.com/html/SignIn/signin.html')
return return
} }
...@@ -184,7 +184,11 @@ export default { ...@@ -184,7 +184,11 @@ export default {
}) })
return return
} }
this.MsgBus.$emit('changeBGM', obj.bgm) if(obj.bgm) {
this.MsgBus.$emit('changeBGM', obj.bgm)
} else {
this.MsgBus.$emit('audioPlay', 1)
}
if (!obj.children.length && this.$route.name !== obj.Url) { if (!obj.children.length && this.$route.name !== obj.Url) {
this.$router.push({ this.$router.push({
name: obj.Url name: obj.Url
......
...@@ -5,7 +5,8 @@ ...@@ -5,7 +5,8 @@
<video src="/static/video/cjbj1.mp4" autoplay="autoplay" muted="muted" loop="loop" ref="homeBGvideo"></video> <video src="/static/video/cjbj1.mp4" autoplay="autoplay" muted="muted" loop="loop" ref="homeBGvideo"></video>
</div> </div>
<div class="container"> <div class="container">
<div class="box"> <!-- 未开始 -->
<div class="box" v-if="awardData[awardIndex].nameList.length === 0 && awardNo">
<div class="jinbian"></div> <div class="jinbian"></div>
<p class="title">幸运抽奖</p> <p class="title">幸运抽奖</p>
<div class="join-total-box"> <div class="join-total-box">
...@@ -13,23 +14,44 @@ ...@@ -13,23 +14,44 @@
<span>中奖人数:</span>{{awardData[awardIndex].nameList.length}} <span>中奖人数:</span>{{awardData[awardIndex].nameList.length}}
</div> </div>
<div> <div>
<span>参与人数:</span>{{awardData[awardIndex].nameList.length}} <span>参与人数:</span>{{dataList2.length}}
</div> </div>
</div> </div>
<div class="jiangpin-box" v-if="awardData[awardIndex].nameList.length === 0">
<div class="jiangpin-box" >
<p>{{awardData[awardIndex].name}}</p> <p>{{awardData[awardIndex].name}}</p>
<div class="img-box"> <div class="img-box">
<img :src="awardData[awardIndex].img" alt=""> <img :src="awardData[awardIndex].img" alt="">
</div> </div>
<p>{{awardData[awardIndex].proName}}</p> <p>{{awardData[awardIndex].proName}}</p>
</div> </div>
<div v-else> <div class="award-ctrl">
<span class="iconfont iconzuosanjiaoxing" @click="awardIndex === 0 ? '' : switchAward(1)"></span>
<span>一次抽取</span>&nbsp;&nbsp;
<el-select v-model="awardPP" class="w60">
<el-option
v-for="item in awardData[awardIndex].options"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
&nbsp;&nbsp;
<span></span>
<span class="iconfont iconyousanjiaoxing" @click="awardIndex === awardData.length-1 ? '' : switchAward(2)"></span>
</div> </div>
<div class="choujiang-btn"> <div class="choujiang-btn">
<div><span class="btn-light"></span>开始抽奖</div> <div @click="awardGo()"><span class="btn-light"></span>开始抽奖</div>
</div> </div>
</div> </div>
<!-- 抽奖中 -->
<div v-if="awardIn" class="award-in">
<img v-for="item in dataList2" :class="item.class" :src="item.photo" alt="">
</div>
<!-- 抽奖后 -->
<div v-if="awardOut">
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -52,33 +74,53 @@ export default { ...@@ -52,33 +74,53 @@ export default {
transformScale1: 0, transformScale1: 0,
transformScale2: 0 transformScale2: 0
}, },
awardPP: 1,
awardIndex: 0, awardIndex: 0,
awardData: [ awardData: [
{ {
name: '一等奖', name: '一等奖',
maxNum: 1, maxNum: 10,
proName: '电话1', proName: '电话1',
id: 1, id: 1,
img: 'https://paimgcdn.baidu.com/6A033253EF5FBFE0?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F2018218531.jpg&rz=bxt_2_968_600&v=0', img: 'https://paimgcdn.baidu.com/6A033253EF5FBFE0?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F2018218531.jpg&rz=bxt_2_968_600&v=0',
nameList: [] nameList: [],
options: [1,2,3,4,5,6,7,8,9,10]
}, },
{ {
name: '二等奖', name: '二等奖',
maxNum: 10, maxNum: 20,
proName: '电话2', proName: '电话2',
id: 2, id: 2,
img: 'https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=2834960552,2586725046&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=a34f2bae0cfaecb2150ca2d8d67442e2', img: 'https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=2834960552,2586725046&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=a34f2bae0cfaecb2150ca2d8d67442e2',
nameList: [] nameList: [],
options: [1,2,3,4,5,10,20]
}, },
{ {
name: '三等奖', name: '三等奖',
maxNum: 20, maxNum: 30,
proName: '耳机', proName: '耳机',
id: 3, id: 3,
img: 'https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1939050805.jpg', img: 'https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1939050805.jpg',
nameList: [] nameList: [],
options: [1,2,3,4,5,10,20,30]
} }
] ],
dataList2: [
{
img: 'https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=2988564731,2262824079&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=ad5118c4e0fe7df400c0ebba337753b7',
class: 'head1'
},
{
img: 'https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1559282698,742202892&fm=58',
class: 'head1'
}
],
awardNo: true,
awardIn: false,
awardOut: false,
testValue: 666,
moveIndex: 0,
classIndex: 1
} }
}, },
created () { created () {
...@@ -91,8 +133,49 @@ export default { ...@@ -91,8 +133,49 @@ export default {
that.windowResize() that.windowResize()
})() })()
} }
setTimeout(()=>{
that.$PROXY.invoke("SendSignins", '1').done(data => {
let i = 0
data.map(x=>{
i++
x.class = `head1`
if (i > 11) {
i = 0
}
})
that.dataList2 = data
});
}, 2000)
}, },
methods: { methods: {
headMove: function () {
let $this = this
setTimeout(x=>{
$this.dataList2[$this.moveIndex].class = `head1 head_move${$this.classIndex}`
$this.classIndex++
if ($this.classIndex > 6 ){
$this.classIndex = 1
}
if ($this.moveIndex!==0) {
$this.dataList2[$this.moveIndex-1].class = `head1`
}
$this.moveIndex++
$this.headMove()
}, 500)
},
// 启动抽奖
awardGo: function () {
this.awardNo = false
this.awardIn = true
this.headMove()
},
switchAward: function (type) {
if (type === 1) {
this.awardIndex--
} else {
this.awardIndex++
}
},
windowResize: function () { windowResize: function () {
let WindowW = window.innerWidth let WindowW = window.innerWidth
let WindowH = window.innerHeight let WindowH = window.innerHeight
......
...@@ -4,7 +4,7 @@ let PROXY = null; ...@@ -4,7 +4,7 @@ let PROXY = null;
let HUB = null; let HUB = null;
const HUB_API = 'http://192.168.2.66:7838/signalr'; const HUB_API = 'http://192.168.2.65:7838/signalr';
// 建立连接 // 建立连接
export function startConnection() { export function startConnection() {
......
...@@ -9,6 +9,7 @@ import PerformRanking2 from '@/components/PerformRanking2' ...@@ -9,6 +9,7 @@ import PerformRanking2 from '@/components/PerformRanking2'
import Answer from '@/components/playGame/Answer' import Answer from '@/components/playGame/Answer'
import SignIn from '@/components/SignIn' import SignIn from '@/components/SignIn'
import PerformRanking from '@/components/PerformRanking' import PerformRanking from '@/components/PerformRanking'
import CountDown from '@/components/CountDown'
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
routes: [ routes: [
...@@ -28,6 +29,14 @@ export default new Router({ ...@@ -28,6 +29,14 @@ export default new Router({
title: '首页', title: '首页',
keepAlive: true keepAlive: true
} }
}, {
path: '/CountDown',
name: 'CountDown',
component: CountDown,
meta: {
title: '倒计时',
keepAlive: false
}
}, { }, {
path: '/Mouse', path: '/Mouse',
name: 'Mouse', name: 'Mouse',
......
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