Skip to content

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

1

parent 696e3edc
Hide whitespace changes
Inline Side-by-side
Showing with 141 additions and 138 deletions
src/assets/css/LuckDraw.css
View file @ 4e282d7b
......@@ -37,6 +37,7 @@
left: 50%;
top: 29%;
transform: translate(-50%, -30%);
z-index: 2;
}
.container .box .title {
background: linear-gradient(to bottom,#ffd364,#ff9,#ff8000);
......@@ -222,8 +223,8 @@
flex-wrap: wrap;
}
.pp-box .people {
width: 160px;
height: 160px;
width: 260px;
height: 260px;
overflow: hidden;
font-size: 1.4rem;
color: #dbe7f7;
......@@ -237,8 +238,8 @@
z-index: 1;
}
.pp-box .people .people-div{
width: 120px;
height: 120px;
width: 220px;
height: 220px;
margin: 0 auto;
position: relative;
text-align: center;
......@@ -306,4 +307,17 @@
bottom: auto;
letter-spacing: 1rem;
top: 2rem;
}
.big-box{
width: 90%;
margin: 4% 5%;
height: 80%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.big-box .pp-box{
height: 100%;
margin-top: 0;
}
\ No newline at end of file
src/assets/css/animate.css
View file @ 4e282d7b
......@@ -417,62 +417,62 @@
}
0% {
opacity:0;
-webkit-transform:scale3d(.3,.3,.3);
transform:scale3d(.3,.3,.3)
-webkit-transform:scale3d(.3,.3,.3) translate(-50%, -30%);
transform:scale3d(.3,.3,.3) translate(-50%, -30%)
}
20% {
-webkit-transform:scale3d(1.1,1.1,1.1);
transform:scale3d(1.1,1.1,1.1)
-webkit-transform:scale3d(1.1,1.1,1.1) translate(-50%, -30%);
transform:scale3d(1.1,1.1,1.1) translate(-50%, -30%)
}
40% {
-webkit-transform:scale3d(.9,.9,.9);
transform:scale3d(.9,.9,.9)
-webkit-transform:scale3d(.9,.9,.9) translate(-50%, -30%);
transform:scale3d(.9,.9,.9) translate(-50%, -30%)
}
60% {
opacity:1;
-webkit-transform:scale3d(1.03,1.03,1.03);
transform:scale3d(1.03,1.03,1.03)
-webkit-transform:scale3d(1.03,1.03,1.03) translate(-50%, -30%);
transform:scale3d(1.03,1.03,1.03) translate(-50%, -30%)
}
80% {
-webkit-transform:scale3d(.97,.97,.97);
transform:scale3d(.97,.97,.97)
-webkit-transform:scale3d(.97,.97,.97) translate(-50%, -30%);
transform:scale3d(.97,.97,.97) translate(-50%, -30%)
}
100% {
opacity:1;
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
-webkit-transform:scale3d(1,1,1) translate(-50%, -30%);
transform:scale3d(1,1,1) translate(-50%, -30%)
}
}@keyframes bounceIn {
0%,100%,20%,40%,60%,80% {
-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1) translate(-50%, -30%);
transition-timing-function:cubic-bezier(0.215,.61,.355,1) translate(-50%, -30%)
}
0% {
opacity:0;
-webkit-transform:scale3d(.3,.3,.3);
transform:scale3d(.3,.3,.3)
-webkit-transform:scale3d(.3,.3,.3) translate(-50%, -30%);
transform:scale3d(.3,.3,.3) translate(-50%, -30%)
}
20% {
-webkit-transform:scale3d(1.1,1.1,1.1);
transform:scale3d(1.1,1.1,1.1)
-webkit-transform:scale3d(1.1,1.1,1.1) translate(-50%, -30%);
transform:scale3d(1.1,1.1,1.1) translate(-50%, -30%)
}
40% {
-webkit-transform:scale3d(.9,.9,.9);
transform:scale3d(.9,.9,.9)
-webkit-transform:scale3d(.9,.9,.9) translate(-50%, -30%);
transform:scale3d(.9,.9,.9) translate(-50%, -30%)
}
60% {
opacity:1;
-webkit-transform:scale3d(1.03,1.03,1.03);
transform:scale3d(1.03,1.03,1.03)
-webkit-transform:scale3d(1.03,1.03,1.03) translate(-50%, -30%);
transform:scale3d(1.03,1.03,1.03) translate(-50%, -30%)
}
80% {
-webkit-transform:scale3d(.97,.97,.97);
transform:scale3d(.97,.97,.97)
-webkit-transform:scale3d(.97,.97,.97) translate(-50%, -30%);
transform:scale3d(.97,.97,.97) translate(-50%, -30%)
}
100% {
opacity:1;
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
-webkit-transform:scale3d(1,1,1) translate(-50%, -30%);
transform:scale3d(1,1,1) translate(-50%, -30%)
}
}
/* 放大加 闪现 */
......@@ -716,35 +716,35 @@
-webkit-animation-name:bounceInUp;
animation-name:bounceInUp
}
@-webkit-keyframes bounceOut {
@-webkit-keyframes bounceOut{
20% {
-webkit-transform:scale3d(.9,.9,.9);
transform:scale3d(.9,.9,.9)
-webkit-transform:scale3d(.9,.9,.9) translate(-50%, -30%);
transform:scale3d(.9,.9,.9) translate(-50%, -30%)
}
50%,55% {
opacity:1;
-webkit-transform:scale3d(1.1,1.1,1.1);
transform:scale3d(1.1,1.1,1.1)
-webkit-transform:scale3d(1.1,1.1,1.1) translate(-50%, -30%);
transform:scale3d(1.1,1.1,1.1) translate(-50%, -30%)
}
100% {
opacity:0;
-webkit-transform:scale3d(.3,.3,.3);
transform:scale3d(.3,.3,.3)
-webkit-transform:scale3d(.3,.3,.3) translate(-50%, -30%);
transform:scale3d(.3,.3,.3) translate(-50%, -30%)
}
}@keyframes bounceOut {
20% {
-webkit-transform:scale3d(.9,.9,.9);
transform:scale3d(.9,.9,.9)
-webkit-transform:scale3d(.9,.9,.9) translate(-50%, -30%);
transform:scale3d(.9,.9,.9) translate(-50%, -30%)
}
50%,55% {
opacity:1;
-webkit-transform:scale3d(1.1,1.1,1.1);
transform:scale3d(1.1,1.1,1.1)
-webkit-transform:scale3d(1.1,1.1,1.1) translate(-50%, -30%);
transform:scale3d(1.1,1.1,1.1) translate(-50%, -30%)
}
100% {
opacity:0;
-webkit-transform:scale3d(.3,.3,.3);
transform:scale3d(.3,.3,.3)
-webkit-transform:scale3d(.3,.3,.3) translate(-50%, -30%);
transform:scale3d(.3,.3,.3) translate(-50%, -30%)
}
}.bounceOut {
-webkit-animation-name:bounceOut;
......
src/assets/css/pillar.css
View file @ 4e282d7b
......@@ -12,17 +12,18 @@
}
.item .top{
width: 4.5rem;
height: 70%;
position: absolute;
bottom: 10%;
height: 80%;
position: relative;
bottom: 0;
}
.body{
background: url(/static/image/jiemu/zhuzi.png);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 80%;
position: relative;
top: 2px;
height: 1%;
position: absolute;
bottom: 4.4rem;
width: 100%;
}
.dibu{
background: url(/static/image/jiemu/dibu.png);
......@@ -31,15 +32,25 @@
width: 4.5rem;
height: 4.5rem;
text-align: center;
position: relative;
position: absolute;
z-index: 2;
}
.miao img{
bottom: 0;
}
/* .AllPillar.Apillar .miao img{
width: 114px;
position: absolute;
z-index: 3;
left: -55%;
top: -18%;
animation: huohua 2s infinite ease;
-webkit-animation: huohua 2s infinite ease;
} */
.Apillar .miao img{
width: 114px;
position: absolute;
z-index: 3;
left: -55%;
top: -15%;
top: -87px;
animation: huohua 2s infinite ease;
-webkit-animation: huohua 2s infinite ease;
}
......@@ -390,15 +401,14 @@
.AllPillar{
display: flex;
justify-content: space-between;
width: 90%;
padding: 0 5%;
width: 100%;
overflow: initial;
}
.AllPillar .item{
left: initial;
transform: initial;
position: relative;
width: 245px;
width: 11.11%;
display: flex;
justify-content: center;
transform: scale(0.9);
......@@ -411,7 +421,7 @@
font-size: 3rem;
text-align: center;
position: absolute;
bottom: -5rem;
bottom: -1rem;
z-index: 9;
color: white;
}
......
src/components/Awards/Awards0.vue
View file @ 4e282d7b
......@@ -3,7 +3,7 @@
<div class="left">
<img style="margin-bottom: 3rem" src="/static/image/banjiang/tit1.png" alt="">
<img style="margin-left: -10%;" src="/static/image/banjiang/tit2.png" alt="">
<p class="f6"><span v-for="item in tit" class="lingfont">{{item}}</span></p>
<img src="/static/image/banjiang/wenzi2.png" alt="">
</div>
<img class="jinren" src="/static/image/banjiang/jinren.png" alt="">
</div>
......
src/components/Awards/Awards5.vue
View file @ 4e282d7b
<template>
<div class="Awards3 PingFangR">
<p class="lingfont f10">2019年明星俱乐部 400万</p>
<div class="box">
<div class="box" style="margin-top: 4%;">
<div class="head">
<div class="touxiang"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
......
src/components/Awards/Awards7.vue
View file @ 4e282d7b
......@@ -4,18 +4,18 @@
<div class="box">
<div class="head" v-for="(item, index) in list" v-if="index < 6">
<div class="touxiang"></div>
<div class="name f3">
<p class="PingFangR">{{item.n}}</p>
<p class="PingFangR f2">{{item.b}}</p>
<div class="name ">
<p class="PingFangR f6">{{item.n}}</p>
<p class="PingFangR f3">{{item.b}}</p>
</div>
</div>
</div>
<div class="box">
<div class="head" v-for="(item, index) in list" v-if="index > 5">
<div class="touxiang"></div>
<div class="name f3">
<p class="PingFangR">{{item.n}}</p>
<p class="PingFangR f2">{{item.b}}</p>
<div class="name">
<p class="PingFangR f6">{{item.n}}</p>
<p class="PingFangR f3">{{item.b}}</p>
</div>
</div>
</div>
......
src/components/Awards/Awards8.vue
View file @ 4e282d7b
......@@ -34,15 +34,18 @@ export default {
.r-box{
width: 90%;
position: relative;
margin-top: 80px;
}
.r-box .bg-img{
width: 100%;
position: relative;
z-index: 2;
}
.hz-img{
position: absolute;
left: 9%;
top: 3%;
width: 82.5%;
height: 63.8%;
height: 73.8%;
}
</style>
src/components/PerformRanking.vue
View file @ 4e282d7b
......@@ -3,16 +3,16 @@
<!-- 节目背景 -->
<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="mv-box" v-if="dataObj.bg && (dataObj.bg.indexOf('mp4') !== -1 || dataObj.bg.indexOf('mov') !== -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>
<video :src="dataObj.bg" 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" 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">
<div class="tit-box" v-if="!Start">
<p class="tit PingFangR">
<span v-for="(item, index) in dataObj.Name" :key="index">{{item}}</span>
</p>
......
src/components/pageNav.vue
View file @ 4e282d7b
......@@ -80,7 +80,7 @@ export default {
let obj = {
Name: y.t,
Id: y.i,
bg: y.bg,
bg: `/static/video/jiemu1.mov`,
mv: y.m,
brc: y.b,
pp: y.p,
......
src/components/pillar/AllPillar.vue
View file @ 4e282d7b
......@@ -3,10 +3,10 @@
<div class="item" v-for="(item, index) in dataList">
<div class="top">
<div class="piaoshu">{{item.vc}}</div>
<div class="miao">
<img src="/static/image/jiemu/huohua.png" alt="">
</div>
<div class="body">
<div class="body" :style="{'height': item.height + '%'}">
<div class="miao" >
<img src="/static/image/jiemu/huohua.png" alt="">
</div>
<img v-if="index<=2" :class="`fire fire${i}`" :style="{'left': i * 10 + '%'}" v-for="(s, i) in 5" src="/static/image/jiemu/fire.png" alt="">
</div>
<div class="dibu">
......@@ -15,7 +15,6 @@
</div>
<div class="name">
<p>{{item.t}}</p>
<p>{{item.b}}</p>
</div>
</div>
</div>
......@@ -36,8 +35,12 @@ export default {
let $this = this
setTimeout(()=>{
$this.$PROXY.invoke("GetVoteProgarmResult", 1).done(m=>{
console.log(m)
$this.dataList = m
let data = m
let max = data[0].vc
data.map(x=>{
x.height = x.vc / max * 80
})
$this.dataList = data
});
}, 2000)
},
......
src/components/pillar/aPillar.vue
View file @ 4e282d7b
......@@ -3,10 +3,10 @@
<div class="item">
<div class="top">
<div class="piaoshu">{{piaoshu}}</div>
<div class="miao">
<img src="/static/image/jiemu/huohua.png" alt="">
</div>
<div class="body">
<div class="body" :style="{'height': piaoshu < 1 ? '1%' : piaoshu * 0.32 + '%'}">
<div class="miao">
<img src="/static/image/jiemu/huohua.png" alt="">
</div>
<img v-for="(item, index) in list" :class="item.imgClass" :src="item.headImg" alt="">
<img :class="`fire fire${index}`" :style="{'left': index * 10 + '%'}" v-for="(item, index) in 5" src="/static/image/jiemu/fire.png" alt="">
</div>
......@@ -34,7 +34,7 @@ export default {
created () {},
mounted () {
let $this = this
// 监听投票console.log(msg)
// 监听投票
this.$PROXY.on("voteProgarm", data => {
if ($this.ClassIndex === 7) {
$this.ClassIndex = 0
......
src/components/playGame/LuckDraw.vue
View file @ 4e282d7b
......@@ -7,7 +7,8 @@
</div>
<div class="container">
<!-- 未开始 -->
<div class="box" :class="{'box_2': awardData.length && awardData[awardIndex].nameList.length !== 0}" v-if="awardData.length && awardNo">
<!-- v-if="awardData.length && awardNo" -->
<div class="box animated" :class="{'box_2': awardData.length && awardData[awardIndex].nameList.length !== 0, 'bounceIn': awardData.length && awardNo, 'bounceOut': !awardNo}" >
<div class="jinbian"></div>
<p class="title" v-if="awardData[awardIndex].nameList.length === 0">幸运抽奖</p>
<div class="join-total-box">
......@@ -20,11 +21,10 @@
</div>
<template v-if="awardData.length && 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>
<p>{{awardData[awardIndex].name}}</p>
</div>
</template>
<template v-if="awardData.length && awardData[awardIndex].nameList.length !== 0">
......@@ -32,7 +32,6 @@
<div class="img-box">
<img :src="awardData[awardIndex].img" alt="">
</div>
<p class="f2">{{awardData[awardIndex].proName}}</p>
<p class="f2b">{{awardData[awardIndex].name}}</p>
</div>
<div class="pp-box">
......@@ -68,52 +67,17 @@
<!-- 抽奖中 -->
<div v-show="awardIn" id="lottery3d-stage"></div>
<p v-show="awardIn" class="tips">按空格键停止抽奖</p>
<!-- 抽奖后 显示中奖名单 -->
<div class="box box_2" v-if="false">
<div class="jinbian"></div>
<div class="join-total-box">
<div>
<span>中奖人数：</span>{{awardData.length && awardData[awardIndex].nameList.length}}
</div>
<div>
<span>参与人数：</span>{{dataList2.length}}
</div>
</div>
<div class="jiangpin-box" >
<div class="img-box">
<img :src="awardData[awardIndex].img" alt="">
</div>
<p class="f2">{{awardData[awardIndex].proName}}</p>
<p class="f2b">{{awardData[awardIndex].name}}</p>
</div>
<div class="big-box animated" :class="{'fadeIn': bigBoxShow, 'fadeOut': !bigBoxShow}">
<div class="pp-box">
<div class="people" v-for="item in awardData[awardIndex].nameList">
<div class="people-div">
<img :src="item.Img">
<div class="people-div-bs">
</div>
<div class="people" v-for="item in awardData[awardIndex].nowLotteryHistoryList">
<div class="people-div">
<img :src="item.img">
<div class="people-div-bs">
</div>
</div>
<p class="people-name">{{item.n}}</p>
</div>
<p class="people-name">{{item.EmpName}}</p>
</div>
</div>
<div class="award-ctrl">
<span class="iconfont iconzuosanjiaoxing" @click="switchAward(1)"></span>
<span>一次抽取</span>&nbsp;&nbsp;
<el-select v-model="awardPP" class="w60">
<el-option
v-for="item in awardData[awardIndex].maxNum"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
&nbsp;&nbsp;
<span>人</span>
<span class="iconfont iconyousanjiaoxing" @click="switchAward(2)"></span>
</div>
<div class="choujiang-btn">
<div @click="awardGo()"><span class="btn-light"></span>开始抽奖</div>
</div>
</div>
</div>
</div>
......@@ -138,7 +102,7 @@ export default {
},
awardPP: 1,
awardIndex: 0,
awardData: [],
awardData: [{nameList: []}],
dataList2: [],
awardNo: true,
awardIn: false,
......@@ -149,7 +113,8 @@ export default {
renderer: null,
speed: 50,
stageStop: false,
AwardId: ''
AwardId: '',
bigBoxShow: false
}
},
created () {
......@@ -167,6 +132,7 @@ export default {
$this.dataList2 = data
});
$this.$PROXY.invoke("GetLottery", '', '').done(data => {
$this.awardData = []
data.map(x=>{
let obj = {
name: x.n,
......@@ -179,7 +145,7 @@ export default {
$this.awardData.push(obj)
})
})
}, 2000)
}, 1000)
// 空格键结束抽奖
document.onkeydown = function(e){
var keyNum = window.event ? e.keyCode :e.which;
......@@ -195,13 +161,18 @@ export default {
proName: x.award,
id: x.i,
img: x.img,
nameList: JSON.parse(x.lotteryHistoryList)
nameList: JSON.parse(x.lotteryHistoryList),
nowLotteryHistoryList: x.nowLotteryHistoryList
}
$this.awardData.push(obj)
})
$this.awardOut = true
$this.awardIn = false
$this.awardNo = true
$this.bigBoxShow = true
setTimeout(()=>{
$this.awardOut = true
$this.awardNo = true
$this.bigBoxShow = false
}, 2000)
})
}
}
......@@ -217,7 +188,8 @@ export default {
var s;
var h = Math.sqrt(50),
u = Math.floor(h / 2);
for (var p = 0; p < 50; p++) {
var maxNum = $this.dataList2 > 30 ? 30 : $this.dataList2.length
for (var p = 0; p < maxNum; p++) {
var x = Math.floor(p / h) % h;
var j = (p % h);
if (x == u && j == u) {
......@@ -317,7 +289,8 @@ export default {
<style>
@import "../../assets/css/LuckDraw.css";
#lottery3d-stage>div{
height: calc(100vh) !important;
height: calc(100vh) !important;
top: 0;
}
.headImg{
width: 300px;
......
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