Skip to content

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

抽奖

parent d0c1a56e
Show whitespace changes
Inline Side-by-side
Showing with 236 additions and 46 deletions
src/App.vue
View file @ d7947ea5
......@@ -161,7 +161,7 @@ export default {
</script>
<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/animate.css";
#app {
......
src/assets/css/LuckDraw.css
View file @ d7947ea5
......@@ -97,17 +97,17 @@
width: 100%;
}
.choujiang-btn div{
height: 100px;
width: 184px;
height: 80px;
width: 170px;
background: url(/static/image/draw/btn_bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 24px auto 0 auto;
margin: 60px auto 0 auto;
color: #ffff72;
text-shadow: #ff7a4d 1px 1px 10px, #ff7a4d 0 1px 10px, #ff7a4d 1px 0 10px, #ff7a4d 1px 1px 10px;
font-size: 3rem;
text-align: center;
line-height: 100px;
line-height: 80px;
cursor: pointer;
position: relative;
}
......@@ -119,32 +119,111 @@
height: 100%;
background: url(/static/image/draw/2.png);
display: block;
-webkit-animation: lightMove .5s 4s infinite ease;
animation: lightMove .2s 4s infinite ease;
-webkit-animation: lightMove 4s infinite ease;
animation: lightMove 4s infinite ease;
}
@keyframes lightMove {
12.5% {
0%,75% {
opacity: 0;
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);
}
37.5% {
82% {
opacity: 1;
background: url(/static/image/draw/4.png);
}
50% {
85.5% {
opacity: 1;
background: url(/static/image/draw/5.png);
}
62.5% {
89% {
opacity: 1;
background: url(/static/image/draw/6.png);
}
75% {
92.5% {
opacity: 1;
background: url(/static/image/draw/7.png);
}
87.5% {
96% {
opacity: 1;
background: url(/static/image/draw/8.png);
}
100% {
opacity: 1;
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
src/assets/js/menuJson.js
View file @ d7947ea5
......@@ -6,12 +6,27 @@ const leftNavMenu = [
children: [],
bgm: '/static/audio/bg_m_000.mp3',
},
{
Class: 'iconfont iconjiemu',
Name: '开场',
Url: '',
children: [
{
Class: 'iconfont icondaojishi',
Name: '倒计时',
Url: 'CountDown',
children: [],
bgm: '',
},
{
Class: 'iconfont iconqiandao',
Name: '签到',
Url: 'SignIn',
children: [],
bgm: '/static/audio/signIn.mp3',
bgm: '/static/audio/game_mouse_bg.mp3',
},
],
bgm: '',
},
{
Class: 'iconfont iconyouxi',
......@@ -49,11 +64,11 @@ const leftNavMenu = [
bgm: '/static/audio/choujiang.mp3',
},
{
Class: 'iconfont iconzu',
Name: '投票',
Class: 'iconfont iconstart',
Name: '节目单',
Url: '',
children: [],
bgm: '/static/audio/toupiao.mp3',
bgm: '',
},
{
Class: 'iconfont iconpaihangbang',
......
src/components/PerformRanking.vue
View file @ d7947ea5
......@@ -33,7 +33,7 @@
</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="">
<div class="tit-box">
<p class="tit yinxiang2020">
......@@ -137,6 +137,9 @@ export default {
this.ProgramEnd = true
if (this.$refs.homeBGvideo) this.$refs.homeBGvideo.pause()
}
if (this.dataObj.type === 0){
this.ProgramEnd = true
}
},
// 节目重置
Reset: function () {
......
src/components/index.vue
View file @ d7947ea5
......@@ -55,9 +55,6 @@ export default {
this.windowResize()
},
mounted () {
this.MsgBus.$on('inceptMessage', (msg) => {
console.log(msg)
})
const that = this
window.onresize = () => {
return (() => {
......
src/components/pageNav.vue
View file @ d7947ea5
......@@ -72,9 +72,9 @@ export default {
$this.nextMusic()
})
setTimeout(()=>{
$this.$PROXY.invoke("SendVoteProgarm", 1).done(m=>{
leftNavMenu.map(x=>{
if (x.Name === '投票') {
$this.$PROXY.invoke("SendVoteProgarm", 1, "").done(m=>{
$this.leftNavMenu.map(x=>{
if (x.Name === '节目单') {
let list = []
m.map(y=>{
let obj = {
......@@ -84,6 +84,7 @@ export default {
mv: y.m,
brc: y.b,
pp: y.p,
type: y.type,
Url: 'PerformRanking'
}
list.push(obj)
......@@ -172,8 +173,7 @@ export default {
}
},
goPage: function (obj) {
this.MsgBus.$emit('inceptMessage', '666')
if (obj.Name === '签到') {
if (obj.Name === '签到' && !obj.Id) {
window.open('http://activity.oytour.com/html/SignIn/signin.html')
return
}
......@@ -184,7 +184,11 @@ export default {
})
return
}
if(obj.bgm) {
this.MsgBus.$emit('changeBGM', obj.bgm)
} else {
this.MsgBus.$emit('audioPlay', 1)
}
if (!obj.children.length && this.$route.name !== obj.Url) {
this.$router.push({
name: obj.Url
......
src/components/playGame/LuckDraw.vue
View file @ d7947ea5
......@@ -5,7 +5,8 @@
<video src="/static/video/cjbj1.mp4" autoplay="autoplay" muted="muted" loop="loop" ref="homeBGvideo"></video>
</div>
<div class="container">
<div class="box">
<!-- 未开始 -->
<div class="box" v-if="awardData[awardIndex].nameList.length === 0 && awardNo">
<div class="jinbian"></div>
<p class="title">幸运抽奖</p>
<div class="join-total-box">
......@@ -13,22 +14,43 @@
<span>中奖人数：</span>{{awardData[awardIndex].nameList.length}}
</div>
<div>
<span>参与人数：</span>{{awardData[awardIndex].nameList.length}}
<span>参与人数：</span>{{dataList2.length}}
</div>
</div>
<div class="jiangpin-box" v-if="awardData[awardIndex].nameList.length === 0">
<div class="jiangpin-box" >
<p>{{awardData[awardIndex].name}}</p>
<div class="img-box">
<img :src="awardData[awardIndex].img" alt="">
</div>
<p>{{awardData[awardIndex].proName}}</p>
</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 class="choujiang-btn">
<div><span class="btn-light"></span>开始抽奖</div>
<div @click="awardGo()"><span class="btn-light"></span>开始抽奖</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>
......@@ -52,33 +74,53 @@ export default {
transformScale1: 0,
transformScale2: 0
},
awardPP: 1,
awardIndex: 0,
awardData: [
{
name: '一等奖',
maxNum: 1,
maxNum: 10,
proName: '电话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',
nameList: []
nameList: [],
options: [1,2,3,4,5,6,7,8,9,10]
},
{
name: '二等奖',
maxNum: 10,
maxNum: 20,
proName: '电话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',
nameList: []
nameList: [],
options: [1,2,3,4,5,10,20]
},
{
name: '三等奖',
maxNum: 20,
maxNum: 30,
proName: '耳机',
id: 3,
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 () {
......@@ -91,8 +133,49 @@ export default {
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: {
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 () {
let WindowW = window.innerWidth
let WindowH = window.innerHeight
......
src/plugin/signalr.js
View file @ d7947ea5
......@@ -4,7 +4,7 @@ let PROXY = 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() {
......
src/router/index.js
View file @ d7947ea5
......@@ -9,6 +9,7 @@ import PerformRanking2 from '@/components/PerformRanking2'
import Answer from '@/components/playGame/Answer'
import SignIn from '@/components/SignIn'
import PerformRanking from '@/components/PerformRanking'
import CountDown from '@/components/CountDown'
Vue.use(Router)
export default new Router({
routes: [
......@@ -28,6 +29,14 @@ export default new Router({
title: '首页',
keepAlive: true
}
}, {
path: '/CountDown',
name: 'CountDown',
component: CountDown,
meta: {
title: '倒计时',
keepAlive: false
}
}, {
path: '/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