template部分代码:
<template>
<div class="container">
<div class="gameBox">
<!-- 背景图 -->
<div class="bg1"></div>
<!-- 点击开始抽奖 -->
<div @click="start">
<div class="click">点击</div>
<div class="draw">抽奖</div>
<img class="rui-pointer" src="../../assets/image/LuckyDraw/coujiangbtn.png" alt="">
</div>
<!-- 九宫格选项 -->
<ul>
<li v-for="(item,i) in list" :key="i" :class="'item' + (i+1)">
<div class="img1">
<img v-if="i==current" class="prize" src="../../assets/image/LuckyDraw/select.png" alt="">
<img v-else class="prize" src="../../assets/image/LuckyDraw/prize.png" alt="">
<div class="value">{{item.value}}</div>
<img :src="require(`../../assets/image/LuckyDraw/${item.image}`)" alt="" class="luckyimg">
</div>
</li>
</ul>
<!-- 查看中奖记录 -->
<div class="record">
<div @click="ToWinningRecord">
<div class="look">查看中奖记录</div>
</div>
<div @click="ToResultPage">
<div class="back">返回结果页</div>
</div>
</div>
</div>
<!-- 中实物弹窗 -->
<div v-if="physical" class="physical">
<img class="overlay" src="../../assets/image/LuckyDraw/img1/mengceng.png" alt="">
<img class="dialog" src="../../assets/image/LuckyDraw/img1/tanchuang.png" alt="">
<!-- 中奖物品 -->
<div class="price_in">{{ award.name }}*1</div>
<div class="receipt_information">请填写您的收货信息</div>
<div class="header">收货人姓名</div>
<input class="name" type="text" v-model="consignee_name">
<div class="game_age">联系方式</div>
<input type="text" class="game-age" v-model="consignee_phone">
<div class="address">收货地址</div>
<input type="text" class="address_input" v-model="consignee_address">
<div @click="back">
<div class="back">返回</div>
</div>
<div @click="physical_submit">
<!-- 修改 -->
<div v-if="consignee_address">
<div class="share1">确定</div>
</div>
<!-- 提交 -->
<div v-else>
<div class="share">提交</div>
</div>
</div>
</div>
<!-- 中Q币 -->
<div v-if="QqMoney" class="QqMoney">
<img class="overlay" src="../../assets/image/LuckyDraw/img1/mengceng.png" alt="">
<img class="dialog" src="../../assets/image/LuckyDraw/img1/tanchuang.png" alt="">
<!-- 中奖物品 -->
<div class="price_in">{{ award.name }}</div>
<div class="receipt_information">请填写你的充值QQ号码</div>
<div class="header">QQ号码</div>
<input class="name" v-model="qqNumber" type="text">
<div class="insert">请您填写QQ号码,我们将在活动结束后的14个工作日<br/>内进行充值。</div>
<div @click="money">
<div class="back">返回</div>
</div>
<!-- 中Q币修改 -->
<div v-if="HaveNumber" @click="saveQQNumber">
<div class="share" style="right: 21.5%;">确定</div>
</div>
<!-- 中Q币提交 -->
<div v-else @click="saveQQNumber">
<div class="share">提交</div>
</div>
</div>
<!-- 没有中奖 -->
<div v-if="NoHavePrice" class="NoHavePrice">
<img class="overlay" src="../../assets/image/LuckyDraw/img1/mengceng.png" alt="">
<img class="dialog" src="../../assets/image/LuckyDraw/img1/weizhongjiang.png" alt="">
<div class="insert">很遗憾你没能中奖</div>
<div @click="back">
<div class="back">返回</div>
</div>
<!-- 分享 -->
<div @click="ShareFriends">
<div class="share">分享</div>
</div>
<div v-if="overlay" @click="OverLay">
<img class="ShareFriendsOverlay" src="../../assets/image/WinningRecord/overlay.png" alt="">
<img class="guide" src="../../assets/image/WinningRecord/dashed.png" alt="">
<div class="ShareBox">
请点击右上角" ··· ",将它发送给指定朋友,或分享到朋友圈
</div>
</div>
</div>
<!-- 中红包 -->
<div v-if="RedEnvelope" class="RedEnvelope">
<img class="overlay" src="../../assets/image/LuckyDraw/img1/mengceng.png" alt="">
<img class="dialog" src="../../assets/image/LuckyDraw/img1/tanchuang.png" alt="">
<div class="price_in">随机红包</div>
<div class="price_num">{{ award.value }}</div>
<img class="name" src="../../assets/image/LuckyDraw/redbox.png" alt="">
<div class="insert"></div>
<div @click="back">
<div class="back">返回</div>
</div>
</div>
</div>
</template>
js部分代码:
<script>
import { KeepAddress, getTimes, getResult } from '../../api/LuckyDraw'
import { ConfigureShare } from '../../utils/share'
export default {
data () {
return {
list: [
{ value: 'T恤', image: 'T-shirt.png', id: '1' },
{ value: '50Q币', image: 'QMoney.png', id: '2' },
{ value: '4手机', image: 'phone.png', id: '3' },
{ value: '移动电源', image: 'chongdianbao.png', id: '4' },
{ value: '谢谢参与', image: 'xiaonian.png', id: '5' },
{ value: '束口袋', image: 'shukoudai.png', id: '6' },
{ value: '冰封散热背夹', image: 'sanrebeijia.png', id: '7' },
{ value: '随机现金红包', image: 'RedPack.png', id: '8' }
], // 奖品列表
current: 0, // 当前索引值
speed: 200, // 时间->速度
diff: 15, // 基数
award: {}, // 抽中的奖品
time: 0, // 当前时间戳
timer: null, // 定时器
physical: false, // 中实物
QqMoney: false, // 中q币
RedEnvelope: false, // 中红包
NoHavePrice: false, // 未中奖
consignee_name: '', // 收货人姓名
consignee_phone: '', // 收货人联系方式
consignee_address: '', // 收货人地址
qqNumber: '', // QQ号
BlackSharkFurryDoll: null, // 从中实物页跳转过来
QqNumber: null, // 从中Q币页调过来
HaveNumber: false, // 修改qq号
times: 0, // 抽奖次数
reTimes: 0,
recordId: '',
overlay: false // 分享
}
},
watch: {
times: function (value) {
if (value === 0) {
this.reTimes = 0
} else {
this.reTimes = this.times - 1
}
}
},
created () {
// 从中实物页跳转过来修改收货地址
this.consignee_name = this.$route.query.name
this.consignee_phone = this.$route.query.address
this.consignee_address = this.$route.query.phone
this.recordId = this.$route.query.recordId
this.BlackSharkFurryDoll = this.$route.query.BlackSharkFurryDoll
if (this.BlackSharkFurryDoll) {
this.physical = true
}
// 从中Q币页调过来
this.qqNumber = this.$route.query.QqNumber
const money = this.$route.query.QqMoney
this.recordId = this.$route.query.recordId
if (money) {
this.QqMoney = true
}
if (this.qqNumber) {
this.HaveNumber = true
}
this.getTimes()
const arr = {
title: '!', // 分享标题
desc: '参与互动测试哦', // 分享描述
imgUrl: '' // 分享图标
}
ConfigureShare(arr)
},
methods: {
// 分享
ShareFriends () {
this.overlay = true
},
OverLay () {
this.overlay = false
},
physical_submit () {
if (this.consignee_name === '' || this.consignee_address === '' || this.consignee_phone === '') {
this.$message.warning({
message: '请填写完整收货地址信息!',
type: 'warning',
center: true
})
} else {
KeepAddress({
id: JSON.parse(this.recordId),
receiver: this.consignee_name,
address: this.consignee_address,
phone: this.consignee_phone
}).then(res => {
this.physical = false
this.$message({
message: this.consignee_address ? '修改成功!' : '提交成功',
type: 'success',
center: true
})
}).catch(res => {
this.$message.error({
message: this.consignee_address ? '修改失败' : '提交失败',
type: 'error',
center: true
})
})
}
},
// 保存qq号
saveQQNumber () {
if (this.qqNumber === '') {
this.$message.warning({
message: '请填写您的qq号!',
type: 'warning',
center: true
})
} else {
KeepAddress({
id: JSON.parse(this.recordId),
address: this.qqNumber
}).then(res => {
this.QqMoney = false
this.$message({
message: '提交成功',
type: 'success',
center: true
})
}).catch(res => {
this.$message.error({
message: '提交失败',
type: 'error',
center: true
})
})
}
},
money () {
this.QqMoney = false
},
back () {
this.times--
this.NoHavePrice = this.QqMoney = this.RedEnvelope = this.physical = false
},
ToResultPage () {
this.$router.push('/ResultPage')
},
ToWinningRecord () {
this.$router.push('/WinningRecord')
},
start () {
if (this.times === 0) {
this.$message.warning({
message: '您的抽奖次数已用完!',
type: 'warning',
center: true
})
return
}
// 开始抽
this.getLottery()
this.time = Date.now()
this.speed = 200
this.diff = 12
},
// 调接口获取奖品
async getLottery () {
const res = await getResult()
if (res.code === 0) {
this.award = res.data
this.recordId = this.award.record_id
}
this.move()
},
// 开始转动
move () {
this.timer = setTimeout(() => {
this.current++
if (this.current > 7) {
this.current = 0
}
if (this.award.name && (Date.now() - this.time) / 1000 > 2) {
this.speed += this.diff // 转动减速
if (
(Date.now() - this.time) / 1000 > 4 &&
this.award.name === this.list[this.current].value
) {
clearTimeout(this.timer)
setTimeout(() => {
if (this.award.name === '谢谢参与') {
this.NoHavePrice = true
} else if (this.award.name === '50Q币') {
this.QqMoney = true
} else if (this.award.name === '随机现金红包') {
this.RedEnvelope = true
} else {
this.physical = true
}
}, 1000)
return
}
} else {
this.speed -= this.diff
}
this.move()
}, this.speed)
},
// 获取抽奖次数
async getTimes () {
const res = await getTimes()
if (res.code === 0) {
this.times = res.data.times
}
}
}
}
</script>
样式部分:
<style lang="less" scoped>
.container{
.gameBox {
width: 100vw;
height: 100vh;
position: relative;
.rui-pointer{
width: 20.19%;
height: 14.86%;
text-align: center;
box-sizing: border-box;
border-radius: 10px;
font-size: 30px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 54%;
left: 22%;
right: 0;
margin: auto;
transform: translate(-50%, -50%);
z-index: 1;
}
.click{
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0px 3px 6px rgba(157, 0, 43, 0.54);
text-shadow: -1px -1px 0 #C01311, 1px -1px 0 #C01311, -1px 1px 0 #C01310, 1px 1px 0 #C01311, 0px 0px 0px rgba(0,0,0,0.6);
position: absolute;
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.draw{
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0px 3px 6px rgba(157, 0, 43, 0.54);
text-shadow: -1px -1px 0 #C01311, 1px -1px 0 #C01311, -1px 1px 0 #C01310, 1px 1px 0 #C01311, 0px 0px 0px rgba(0,0,0,0.6);
position: absolute;
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
top: 56%;
left: 50%;
transform: translate(-50%, -50%);
border: none!important;
z-index: 2;
}
.bg1 {
background: url('') no-repeat center;
width: 100%;
height: 100%;
background-size:100% 100%;/*设置图片大小*/
background-repeat:no-repeat;
z-index: -10;
background-attachment:fixed;
}
ul {
width: 76vw;
height: 76vw;
max-width: 67%;
min-height: 47%;
position: absolute;
top: 31.39%;
left: 17.31%;
li {
width: 32%;
height: 32%;
text-align: center;
box-sizing: border-box;
border-radius: 10px;
font-size: 30px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
.img1 {
width: 100%;
height: 100%;
.prize{
width: 100%;
height: 94.39%;
z-index: -1;
position: relative;
}
.value{
width: 58px;
height: 9px;
font-size: 10px;
font-weight: 400;
color: #333333;
position: absolute;
bottom: 34%;
left: 0;
right: 0;
margin: auto;
}
.luckyimg{
width: 94%;
height: 94%;
position: absolute;
bottom: 11%;
left: 0;
right: 0;
margin: auto;
}
}
}
.item1 {
top: 0;
left: 0;
transform: translate(0, 0);
}
.item2 {
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
.item3 {
top: 0;
right: 0;
transform: translate(0, 0);
}
.item4 {
top: 50%;
right: 0;
transform: translate(0, -50%);
}
.item5 {
bottom: 0;
right: 0;
transform: translate(0, 0);
}
.item6 {
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
}
.item7 {
bottom: 0;
left: 0;
transform: translate(0, 0);
}
.item8 {
top: 50%;
left: 0;
transform: translate(0, -50%);
}
}
.record{
.ToLuck{
width: 36.76%;
position: absolute;
bottom: 5.16%;
left: 10.37%;
}
.look{
background-image: url();
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
font-weight: 800;
color: #FFFFFF;
text-shadow: -1px -1px 0 #C01311, 1px -1px 0 #C01311, -1px 1px 0 #C01310, 1px 1px 0 #C01311, 0px 0px 0px rgba(0,0,0,0.6);
right: 0;
margin: 0 auto;
width: 36%;
height: 8%;
position: absolute;
bottom: 4%;
left: -41%;
}
.back{
background-image: url(../../assets/image/LuckyDraw/backresult.png);
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
font-weight: 800;
color: #FFFFFF;
text-shadow: -1px -1px 0 #0279ff, 1px -1px 0 #0279ff, -1px 1px 0 #0279ff, 1px 1px 0 #0279ff, 0px 0px 0px rgba(0,0,0,0.6);
right: 0;
margin: 0 auto;
width: 36%;
height: 8%;
position: absolute;
bottom: 4%;
right: 11%;
}
}
}
// 中实物弹窗
.physical{
.dialog{
width:92.78%;
height: 92.74%;
z-index: 20;
position: absolute;
top: 0px;
left: 0px;
right: 0;
bottom: 0;
margin: auto;
}
.overlay{
width:100%;
height: 100%;
z-index: 20;
position: absolute;
top: 0px;
left: 0px;
}
.price_in{
font-size: 21px;
font-weight: bold;
color: #333333;
z-index: 21;
position: absolute;
top: 26.5%;
left: 35.74%;
}
.receipt_information{
font-size: 13px;
font-weight: 800;
color: #333333;
z-index: 21;
position: absolute;
top: 32.75%;
left: 16%;
}
.header{
position: absolute;
top: 39%;
left: 16%;
z-index: 30;
font-weight: 500;
color: #333333;
font-size: 13px;
}
.name{
height: 7%;
width: 47%;
text-indent: 4px;
border-radius: 10px;
background: #D2E1FF;
border: none;
position: absolute;
top: 37%;
left: 38%;
z-index: 30;
}
.game_age{
position: absolute;
top: 47%;
left:17%;
z-index: 30;
font-size: 13px;
font-weight: 500;
color: #333333;
}
.game-age{
height: 7%;
width: 50%;
text-indent: 4px;
border-radius: 10px;
background: #D2E1FF;
border: none;
position: absolute;
top: 45.5%;
left: 35%;
z-index: 30;
}
.address{
position: absolute;
top: 56%;
left: 16%;
z-index: 30;
font-size: 13px;
font-weight: 500;
color: #333333;
}
.address_input{
height: 7%;
width: 50%;
text-indent: 4px;
border-radius: 10px;
background: #D2E1FF;
border: none;
position: absolute;
top: 54%;
left: 35%;
z-index: 30;
}
.insert{
font-size: 10px;
font-weight: 400;
color: #333333;
position: absolute;
line-height: 19px;
top: 64%;
z-index: 30;
letter-spacing: -0.5px;
left: 0;
right: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
.back{
font-size: 22px;
font-weight: 400;
text-shadow: -1px -1px 0 #0279ff, 1px -1px 0 #0279ff, -1px 1px 0 #0279ff, 1px 1px 0 #0279ff, 0px 0px 0px rgba(0,0,0,0.6);
position: absolute;
bottom: 12%;
left: 16%;
font-style: italic;
z-index: 34;
background-image: url(../../assets/image/LuckyDraw/img1/back.png);
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
width: 33%;
height: 9%;
}
.share{
font-size: 22px;
font-weight: 400;
text-shadow: -1px -1px 0 #C01311, 1px -1px 0 #C01311, -1px 1px 0 #C01310, 1px 1px 0 #C01311, 0px 0px 0px rgba(0,0,0,0.6);
position: absolute;
bottom: 12%;
right: 16%;
font-style: italic;
z-index: 34;
background-image: url(../../assets/image/LuckyDraw/img1/submit.png);
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
width: 33%;
height: 9%;
}
.share1{
font-size: 22px;
font-weight: 400;
text-shadow: -1px -1px 0 #C01311, 1px -1px 0 #C01311, -1px 1px 0 #C01310, 1px 1px 0 #C01311, 0px 0px 0px rgba(0,0,0,0.6);
position: absolute;
bottom: 12%;
right: 16%;
font-style: italic;
z-index: 34;
background-image: url(../../assets/image/LuckyDraw/img1/submit.png);
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
width: 33%;
height: 9%;
}
}
// qq弹窗
.QqMoney{
.dialog{
width: 92.78%;
height: 71.74%;
z-index: 20;
position: absolute;
top: 1.88%;
left: 0px;
right: 0;
margin: auto;
}
.overlay{
width:100%;
height: 100%;
z-index: 20;
position: absolute;
top: 0px;
left: 0px;
}
.price_in{
font-size: 21px;
font-weight: bold;
color: #333333;
z-index: 21;
position: absolute;
top: 22%;
left: 45.74%;
}
.receipt_information{
font-size: 13px;
font-weight: 800;
color: #333333;
z-index: 21;
position: absolute;
top: 28%;
left: 17%;
}
.header{
position: absolute;
top: 35%;
left: 17%;
z-index: 30;
font-weight: 500;
color: #333333;
font-size: 13px;
}
.name{
height: 7%;
width: 50%;
text-indent: 4px;
border-radius: 10px;
background: #D2E1FF;
border: none;
position: absolute;
top: 33%;
left: 33%;
z-index: 30;
}
.insert{
font-size: 10px;
font-weight: 400;
color: #333333;
position: absolute;
line-height: 20px;
top: 46%;
left: 0;
right: 0;
margin: auto;
z-index: 30;
letter-spacing: -0.5px;
display: flex;
justify-content: center;
align-items: center;
}
.back_img{
width: 32.07%;
position: absolute;
bottom: 33%;
left: 16%;
z-index: 33;
}
.back{
font-size: 22px;
font-weight: 400;
text-shadow: -1px -1px 0 #0279ff, 1px -1px 0 #0279ff, -1px 1px 0 #0279ff, 1px 1px 0 #0279ff, 0px 0px 0px rgba(0,0,0,0.6);
position: absolute;
bottom: 33%;
left: 16%;
font-style: italic;
z-index: 34;
background-image: url(../../assets/image/LuckyDraw/img1/back.png);
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
width: 33%;
height: 9%;
}
.share{
font-size: 22px;
font-weight: 400;
text-shadow: -1px -1px 0 #C01311, 1px -1px 0 #C01311, -1px 1px 0 #C01310, 1px 1px 0 #C01311, 0px 0px 0px rgba(0,0,0,0.6);
position: absolute;
bottom: 33%;
right: 16%;
font-style: italic;
z-index: 34;
background-image: url(../../assets/image/LuckyDraw/img1/submit.png);
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
width: 33%;
height: 9%;
}
}
// 中红包
.RedEnvelope{
.dialog{
width: 92.78%;
height: 71.74%;
z-index: 20;
position: absolute;
top: 1.88%;
left: 0px;
right: 0;
margin: auto;
}
.overlay{
width:100%;
height: 100%;
z-index: 20;
position: absolute;
top: 0px;
left: 0px;
}
.price_in{
font-size: 21px;
font-weight: bold;
color: #333333;
z-index: 21;
position: absolute;
top: 22%;
left: 38%;
}
.price_num{
z-index: 40;
position: absolute;
top: 34.5%;
left: 34%;
font-size: 20px;
font-weight: 400;
color: #333333;
}
.name{
height: 7%;
width: 34%;
text-indent: 4px;
border-radius: 10px;
background: #D2E1FF;
border: none;
position: absolute;
top: 33%;
left: 32%;
z-index: 30;
}
.insert{
font-size: 10px;
font-weight: 400;
color: #333333;
position: absolute;
line-height: 20px;
top: 44%;
left: 0;
right: 0;
margin: auto;
z-index: 30;
letter-spacing: -0.5px;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
}
.back_img{
width: 32.07%;
position: absolute;
bottom: 36.5%;
left: 35%;
z-index: 33;
}
.back{
font-size: 22px;
font-weight: 400;
text-shadow: -1px -1px 0 #0279ff, 1px -1px 0 #0279ff, -1px 1px 0 #0279ff, 1px 1px 0 #0279ff, 0px 0px 0px rgba(0,0,0,0.6);
position: absolute;
bottom: 34.5%;
left: 0;
right: 0;
margin: auto;
font-style: italic;
z-index: 34;
background-image: url(../../assets/image/LuckyDraw/img1/back.png);
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
width: 33%;
height: 9%;
}
}
// 未中奖
.NoHavePrice{
// 分享好友
.ShareFriendsOverlay{
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1000000;
}
.guide{
width: 66%;
height: 22%;
position: absolute;
top: 1.6%;
right: 2.6%;
z-index: 1100000;
}
.ShareBox{
width: 72%;
height: 13%;
background: #005DD1;
border-radius: 16px;
position: absolute;
top: 24%;
right: 13%;
z-index: 1100000;
font-size: 13px;
font-weight: 500;
color: #FFFFFF;
display:flex;
display: flex;
justify-content: center;
align-items: center;
padding: 0px 26px;
box-sizing: border-box;
}
.dialog{
width: 93%;
height: 82.74%;
z-index: 20;
position: absolute;
top: 0px;
left: 0px;
right: 0;
bottom: 0;
margin: auto;
}
.overlay{
width:100%;
height: 100%;
z-index: 20;
position: absolute;
top: 0px;
left: 0px;
}
.insert{
width: 77%;
font-weight: 400;
color: #333333;
position: absolute;
top: 58%;
left: 0;
right: 0;
justify-content: center;
align-items: center;
margin: auto;
display: flex;
z-index: 30;
font-size: 11px;
letter-spacing: 1.5px;
}
.back{
font-size: 22px;
font-weight: 400;
text-shadow: -1px -1px 0 #0279ff, 1px -1px 0 #0279ff, -1px 1px 0 #0279ff, 1px 1px 0 #0279ff, 0px 0px 0px rgba(0,0,0,0.6);
position: absolute;
bottom: 13.5%;
left: 16%;
font-style: italic;
z-index: 34;
background-image: url(../../assets/image/LuckyDraw/img1/back.png);
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
width: 33%;
height: 9%;
}
.share{
font-size: 22px;
font-weight: 400;
text-shadow: -1px -1px 0 #C01311, 1px -1px 0 #C01311, -1px 1px 0 #C01310, 1px 1px 0 #C01311, 0px 0px 0px rgba(0,0,0,0.6);
position: absolute;
bottom: 13.5%;
right: 16%;
font-style: italic;
z-index: 34;
background-image: url(../../assets/image/LuckyDraw/img1/submit.png);
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
width: 33%;
height: 9%;
}
}
}
</style>