```之前分享过一个html+css的抽奖转盘，可以去我主页里查看。```
这个是公司需求写在了vue项目里的一个抽奖，里面都是和后台接口的交互包括抽奖次数，中奖信息轮播，中奖奖品列表，还有兑奖信息，算的上是一个比较完善的抽奖活动了。这一套代码复制下去可以直接用，具体可以根据自己公司需求再进行调整，也可以改成9格的抽奖，有什么问题可以简书私聊问我。
<template>
<div class="apps">
<div class="main_container">
<img src="https://img01.wanfangche.com/public/upload/202006/17/5ee9d4a9980ee.png" class="head-img" alt="">
<p class="notice">
<i class="icon"></i> <span class="first-marquee" v-html="prizeTxt">{{prizeTxt}}</span>
</p>
<div class="turntable_box">
<!-- 活动结束遮罩 -->
<div class="no-text" v-if="data && data.status === 2">
本次活动已结束<br>感谢参与
</div>
<!-- 奖金信息 -->
<ul id="rotary_table">
<li v-for="(item, index) in awards" :key="index" :class="['award' + index, { active: index == current }]" class="award">
<img :src="item.poster" alt />
</li>
<li class="addbox" v-show="isMask"></li>
<li class="start-btn" @click="start"></li>
</ul>
</div>
<!-- 剩余次数 -->
<p class="num"><i class="icon"></i>今日剩余次数<b>{{num}}</b>
<span>
<i>报名展会得抽奖次数</i>
<i>APP下载打开得抽奖次数</i>
</span>
</p>
<!-- 广告图 -->
<div class="notice-img" v-if="data">
<a :href="data.other[1].url">
<img :src="data.other[1].poster" alt="">
</a>
</div>
<!-- 中奖奖品列表 -->
<div class="prize-list">
<div class="prize-title">
我的奖品
</div>
<div class="prize-min" v-for="item in myprizeList" :key="item.id" v-if="myprizeList.length > 0" @click="openPrize(item)">
<div class="poster">
<img :src="item.option.poster" alt="">
</div>
<div class="prize-name">
<p>{{item.option.title}}</p>
<p>中奖时间：{{item.created_at}}</p>
</div>
<div class="prize-yes" v-show="item.status === 1">
<img src="https://img01.wanfangche.com/public/upload/202006/16/5ee859ea50afc.png" alt="">
</div>
<i class="icon"></i>
</div>
<!-- 未中奖显示 -->
<div class="no-prize" v-if="myprizeList.length === 0">
目前还没有中奖哦，祝您好运！
</div>
</div>
<!-- 活动说明 -->
<div class="explain" v-if="data">
<div class="explain-tit">
活动说明
</div>
<div class="" v-html="data.description">
{{data.description}}
</div>
</div>
<div class="awards">
<div class="awards-tit">
奖项设置
</div>
<div class="awards-min" v-for="item in awards" :key="item.id" v-show="item.is_prizes === 1">
<div class="left">
<img :src="item.poster" alt="">
</div>
<div class="middle">
<p>{{item.title}}</p>
<p>{{item.title2}}</p>
</div>
<div class="right">
<p>{{item.total}}{{item.unit}}</p>
<p> </p>
</div>
</div>
</div>
<div class="explain" v-if="data">
<div class="explain-tit">
领奖办法
</div>
<div class="" v-html="data.desc">
{{data.desc}}
</div>
</div>
<p class="statement">声明：本活动最终解释权归北京露营者科技有限公司所有</p>
</div>
<div class="mask" v-show="isWin || isOut || isPrize"></div>
<!-- 兑奖弹层 -->
<div class="prize-body" v-if="isPrize">
<div class="prize-head">
<div class="img">
<img :src="prizeData.option.poster" alt="">
</div>
<div class="title">
<p>{{prizeData.option.title}}</p>
<p>中奖时间:{{prizeData.created_at}}</p>
</div>
</div>
<div class="code-img" :class="{'active': prizeData.status === 1 || prizeData.status === 2}">
<img src="https://img01.wanfangche.com/public/upload/202006/23/5ef1a5ec802d3.png" alt="" v-if="prizeData.status === 1"
class="imgs">
<img src="https://img01.wanfangche.com/public/upload/202007/09/5f06e48d335e5.png" alt="" v-if="prizeData.status === 2"
class="imgs">
<img :src="prizeData.qrpath" alt="">
</div>
<div class="code-txt">
<p>兑奖码</p>
<p>{{prizeData.code}}</p>
</div>
<div class="code-message">
<p>兑奖截止时间：{{prizeData.prizes_end_at}}</p>
<p>兑奖地点：{{prizeData.prizes_place}}</p>
</div>
<div class="code-close">
<i @click="closeMask"></i>
</div>
<div class="code-hint">
<p>温馨提示：</p>
<p>兑奖时请提前打开此二维码，</p>
<p>由工作人员扫码确认后，发放奖品。</p>
<p>此码仅可使用一次，</p>
<p>截图或转发代领兑奖均有可能导致此码失效，</p>
<p>建议中奖本人亲自到场兑换奖品。</p>
</div>
</div>
<!-- 中奖弹层 -->
<div class="mask-min" v-if="isWin">
<img src="https://img01.wanfangche.com/public/upload/202006/16/5ee87a7720096.png" alt="">
<img src="https://img01.wanfangche.com/public/upload/202006/16/5ee87b1be194b.png" alt="" class="bg">
<img src="https://img01.wanfangche.com/public/upload/202006/16/5ee87b1be3f2e.png" alt="" class="bg2">
<div class="mask-prize">
<img :src="awardsData.option.poster" alt="">
<p>{{awardsData.option.title}}</p>
</div>
<div class="mask-btn">
<button type="button" name="button" @click="closeMask(0)">收下</button>
<button type="button" name="button" @click="closeMask(1)" v-show="num > 0">再抽一次</button>
</div>
</div>
<!-- 未中奖弹层 -->
<div class="mask-min" v-if="isOut">
<img src="https://img01.wanfangche.com/public/upload/202006/17/5ee9d6b5169e2.png" alt="" v-show="num > 0">
<img src="https://img01.wanfangche.com/public/upload/202007/23/5f1952f88b9b6.png" alt="" v-show="num <= 0">
<div class="mask-btn">
<button type="button" name="button" @click="closeMask(0)" class="no" v-show="num > 0">不玩了</button>
<button type="button" name="button" @click="closeMask(0)" class="no" v-show="num <= 0">好的</button>
<button type="button" name="button" @click="closeMask(1)" v-show="num > 0">再抽一次</button>
</div>
</div>
</div>
</template>?
中奖样式是有css动效代码的我没有截图可以自己复制下去后自己看。
这个是兑奖弹层里面包含过期及已兑换状态，状态信息具体在代码里看，配合这个抽奖我们做了一个验证抽奖码的小程序，也可以用后台系统直接根据兑奖兑换。
<script>
import AwardService from '@/service/award.js'
export default {
data() {
return {
awards: [],
current: 0, // 当前索引值
speed: 300, // 时间->速度
diff: 15, // 基数
award: {}, // 抽中的奖品
awardsData: {},
time: 0, // 当前时间戳
timer: null, // 定时器,
isMask: false,
logins: false,
isWin: false,
isOut: false,
isPrize: false,
num: 0,
myprizeList: [],
searchData: {
lottery_id: this.$route.query.id,
is_app: 1
},
prizeTxt: '',
prizeData: {},
data: null
}
},
created() {
this.init()
this.getNum()
this.getPrizeList()
this.getPrizeTxt()
},
methods: {
// 获取活动信息
init() {
AwardService.getInfo(this.searchData).then(res => {
if (res.code === 1) {
this.awards = res.data.options
this.data = res.data
this.getAppToken()
}
})
},
// 获取可抽奖次数
getNum() {
AwardService.getNum(this.searchData).then(res => {
if (res.code === 1) {
this.num = res.data.left
}
})
},
// 获取中奖列表
getPrizeList() {
AwardService.getMyprize(this.searchData).then(res => {
if (res.code === 1) {
this.myprizeList = res.data.list
}
})
},
// 初始化顶部中奖信息轮播内容 这里我是和接口定好一次返回10条数据
getPrizeTxt() {
const query = {
size: 10,
...this.searchData
}
AwardService.getPrizeList(query).then(res => {
if (res.code === 1) {
res.data.list.forEach(item => {
this.prizeTxt += '<i style="display:inline-block;width:10%;font-style:normal;">恭喜“' + item.user.nickname +
'”抽中“' + item.option.title + '”</i>'
})
}
})
},
start() {
// 开始抽奖
if (!this.isLoggedin) {
console.log('未登录')
} else {
// 判断用户是否已经登录 然后再判断是否有剩余抽奖次数
if (this.num > 0) {
this.getLottery() // 开始抽奖
this.isMask = true // 这里防止二次点击及为了美观的抽奖遮罩显示
this.time = Date.now()
this.speed = 200
this.diff = 12
} else {
this.isOut = true // 已经没有抽奖次数提示显示
}
}
},
// 我这里将再抽一次和关闭写在了一起,通过type判断 1 为再抽一次其他为直接关闭中奖弹层
closeMask(type) {
this.isWin = false
this.isOut = false
this.isPrize = false
if (type === 1) {
this.start()
}
},
// 兑奖信息弹层
openPrize(item) {
this.isPrize = true
this.prizeData = item
},
// 调接口获取奖品
getLottery() {
AwardService.start(this.searchData).then(res => {
if (res.code === 1) {
this.award.name = res.data.option.title
this.award.id = res.data.option.id
this.awardsData = res.data
this.num--
}
})
this.move()
},
// 开始转动
move() {
this.timer = setTimeout(() => {
this.current++
if (this.current > 11) {
this.current = 0
}
// 若抽中的奖品id存在，则开始减速转动
if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
this.speed += this.diff // 转动减速
// 若转动时间超过4秒，并且奖品id等于小格子的奖品id，则停下来
if ((Date.now() - this.time) / 1000 > 4 && this.award.id == this.awards[this.current].id) {
clearTimeout(this.timer)
const self = this
if (this.awardsData.is_prizes === 0) {
setTimeout(function() {
self.isOut = true
self.isMask = false
}, 1000)
} else {
this.getPrizeList()
setTimeout(function() {
self.isWin = true
self.isMask = false
}, 200)
}
return
}
} else {
// 若抽中的奖品不存在，则加速转动
this.speed -= this.diff
}
this.move()
}, this.speed)
}
}
}
</script>
样式代码我没有做注释
<style scoped>
.apps {
width: 100%;
height: 100%;
background: url('https://img01.wanfangche.com/public/upload/202006/23/5ef1ac30f3a3a.png') no-repeat;
background-size: 100% auto;
min-height: 100%;
box-sizing: border-box;
display: flex;
max-width: 750px;
margin: 0 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.head-img {
width: 90%;
margin-left: 5%;
margin-top: 53px;
}
.notice {
width: calc(100% - 56px);
margin: 0 auto;
height: 30px;
background: rgba(245, 166, 35, 1);
border-radius: 15px;
font-size: 12px;
color: rgba(255, 255, 255, 1);
line-height: 30px;
box-sizing: border-box;
padding: 0 12px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
position: relative;
padding-left: 32px;
}
.notice .icon {
background: rgba(245, 166, 35, 1);
position: absolute;
width: 32px;
height: 20px;
left: 0;
top: 4px;
z-index: 3;
border-radius: 15px;
}
.notice .icon::after {
width: 20px;
height: 20px;
content: "";
background: url('https://img01.wanfangche.com/public/upload/202006/17/5ee9cb250a770.png') no-repeat;
background-size: 100% 100%;
position: absolute;
left: 10px;
top: 0;
}
.notice span {
position: absolute;
top: 0;
left: 100%;
height: 100%;
width: 1000%;
}
.first-marquee {
-webkit-animation: 40s first-marquee linear infinite normal;
animation: 40s first-marquee linear infinite normal;
padding-right: 70%;
}
@keyframes first-marquee {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* 向左移动 */
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
display: none;
}
}
.main_container {
width: 100%;
min-height: 100%;
font-size: 26px;
}
.main_container.prohibit {
width: 100%;
height: 100%;
overflow: hidden;
}
.main_container input::-webkit-input-placeholder {
color: #a4a5a6;
font-size: 26px;
}
.main_container .turntable_box {
margin: 0 auto;
width: 319px;
height: 319px;
background: linear-gradient(180deg, rgba(251, 73, 73, 1) 0%, rgba(245, 166, 35, 1) 100%);
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 1);
margin-top: 11px;
position: relative;
}
.main_container .turntable_box .no-text {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
left: 0;
top: 0;
z-index: 10;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 36px;
text-align: center;
}
.main_container .turntable_box #rotary_table {
width: 100%;
height: 100%;
position: relative;
margin-left: 0;
}
.main_container .turntable_box #rotary_table .award {
width: 70px;
height: 70px;
background: rgba(53, 53, 53, 1);
border-radius: 4px;
text-align: center;
position: absolute;
overflow: hidden;
box-sizing: border-box;
background: #fff;
}
.main_container .turntable_box #rotary_table .award img {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.main_container .turntable_box .addbox {
position: absolute;
list-style: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
left: 0;
top: 0;
z-index: 1;
border-radius: 14px;
opacity: 1;
}
.main_container .turntable_box #rotary_table .award.active {
z-index: 2;
}
.main_container .turntable_box #rotary_table .award.award0 {
top: 8px;
left: 8px;
}
.main_container .turntable_box #rotary_table .award.award1 {
top: 8px;
left: 86px;
}
.main_container .turntable_box #rotary_table .award.award2 {
top: 8px;
right: 86px;
}
.main_container .turntable_box #rotary_table .award.award3 {
top: 8px;
right: 8px;
}
.main_container .turntable_box #rotary_table .award.award11 {
top: 86px;
left: 8px;
}
.main_container .turntable_box #rotary_table .award.award4 {
top: 86px;
right: 8px;
}
.main_container .turntable_box #rotary_table .award.award10 {
top: 163px;
left: 8px;
}
.main_container .turntable_box #rotary_table .award.award5 {
top: 163px;
right: 8px;
}
.main_container .turntable_box #rotary_table .award.award9 {
bottom: 8px;
left: 8px;
}
.main_container .turntable_box #rotary_table .award.award8 {
bottom: 8px;
left: 86px;
}
.main_container .turntable_box #rotary_table .award.award7 {
bottom: 8px;
right: 86px;
}
.main_container .turntable_box #rotary_table .award.award6 {
bottom: 8px;
right: 8px;
}
.main_container .turntable_box #rotary_table .start-btn {
list-style: none;
position: absolute;
width: 127px;
height: 131px;
top: 91px;
left: 93px;
z-index: 0;
text-align: center;
background: url("https://img01.wanfangche.com/public/upload/202006/15/5ee7412310994.png") no-repeat center / 100%;
}
.num {
width: calc(100% - 56px);
margin: 0 auto;
height: 30px;
font-size: 12px;
color: rgba(0, 0, 0, 1);
background: rgba(255, 255, 255, 1);
border-radius: 15px;
margin-top: 14px;
padding-left: 30px;
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
overflow-y: hidden;
}
.num .icon {
position: absolute;
background: url('https://img01.wanfangche.com/public/upload/202006/15/5ee74bdb40f1f.png') no-repeat;
background-size: 100% 100%;
width: 16px;
height: 16px;
left: 12px;
top: 4px;
}
.num b {
font-size: 16px;
font-family: Futura-Medium, Futura;
font-weight: 500;
padding-left: 7px;
flex: 1;
}
.num span i {
width: 146px;
height: 26px;
line-height: 26px;
display: block;
position: absolute;
font-style: normal;
}
.num span {
width: 146px;
height: 52px;
overflow-y: hidden;
border-radius: 13px;
float: right;
margin: 2px;
text-align: center;
line-height: 26px;
cursor: pointer;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(74, 74, 74, 1);
position: absolute;
right: 0;
top: 0;
}
@keyframes anim1 {
0% {
top: 0;
opacity: 1
}
45% {
top: 0;
opacity: 1
}
50% {
top: -100%;
opacity: 0
}
51% {
top: 100%;
opacity: 0
}
95% {
top: 100%;
opacity: 1
}
96% {
opacity: 1
}
100% {
top: 0;
opacity: 1
}
}
@keyframes anim2 {
0% {
top: 100%;
opacity: 0
}
45% {
top: 100%;
opacity: 0
}
50% {
top: 0;
opacity: 1
}
95% {
top: 0;
opacity: 1
}
100% {
top: -100%;
opacity: 0
}
}
.num span i:nth-child(1) {
animation: anim1 7s linear infinite;
}
.num span i:nth-child(2) {
top: 26px;
animation: anim2 7s linear infinite;
}
.notice-img {
width: 100%;
padding: 0 28px;
box-sizing: border-box;
margin-top: 8px;
}
.notice-img a {
width: 100%;
height: auto;
}
.notice-img img {
width: 100%;
}
.prize-list {
width: calc(100% - 56px);
margin: 0 auto;
background: rgba(215, 181, 125, 0.4);
border-radius: 10px;
height: auto;
box-sizing: border-box;
padding: 11px 22px 14px 22px;
}
.prize-min {
width: 100%;
height: auto;
background: rgba(255, 255, 255, 1);
border-radius: 5px;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 1px 0;
padding-left: 7px;
position: relative;
margin-bottom: 10px;
}
.prize-min .poster {
width: 50px;
height: 50px;
}
.prize-min .poster img {
width: 100%;
height: 100%;
}
.prize-min .prize-name {
flex: 1;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(74, 74, 74, 1);
line-height: 17px;
padding-left: 12px;
}
.prize-min .prize-name p:last-child {
font-size: 9px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(155, 155, 155, 1);
line-height: 13px;
margin-top: 1px;
}
.prize-min .prize-yes {
position: absolute;
width: 40px;
height: 40px;
right: 20px;
top: 5px;
}
.prize-title {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
width: 100%;
text-align: center;
margin-bottom: 12px;
}
.prize-min .icon {
position: absolute;
width: 12px;
height: 12px;
right: 11px;
background: url('https://img01.wanfangche.com/public/upload/202006/16/5ee859ea4d3cb.png') no-repeat;
background-size: 100% 100%;
}
.explain {
width: calc(100% - 56px);
margin: 0 auto;
margin-top: 39px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 17px;
box-sizing: border-box;
padding: 0 12px;
}
.explain-tit {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
margin-bottom: 12px;
}
.awards {
width: calc(100% - 56px);
margin: 0 auto;
box-sizing: border-box;
padding: 0 12px;
margin-top: 48px;
}
.awards-tit {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
margin-bottom: 6px;
}
.awards-min {
width: 100%;
height: auto;
display: flex;
align-items: center;
margin-bottom: 20px;
}
.awards-min .left {
width: 42px;
height: 42px;
border-radius: 4px;
overflow: hidden;
}
.awards-min .middle {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 17px;
padding-left: 14px;
}
.awards-min .right {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 17px;
text-align: right;
flex: 1;
}
.statement {
width: 100%;
text-align: center;
margin: 65px 0 22px 0;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
.mask {
position: fixed;
width: 100%;
height: 100%;
background: rgba(74, 74, 74, .8);
z-index: 12;
}
.mask-min {
position: fixed;
width: 200px;
height: 200px;
left: 0;
top: -173px;
right: 0;
bottom: 0;
margin: auto;
z-index: 13;
}
.bg {
-webkit-animation: haha1 3s linear infinite;
position: absolute;
left: -150px;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: -1;
width: 500px;
height: 500px;
}
.bg2 {
-webkit-animation: haha2 3s linear infinite;
position: absolute;
left: -250px;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: -1;
width: 700px;
height: 700px;
opacity: .8;
}
@-webkit-keyframes haha1 {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes haha2 {
0% {
-webkit-transform: rotate(360deg);
}
25% {
-webkit-transform: rotate(270deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(90deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
.mask-prize {
width: 100%;
text-align: center;
position: absolute;
top: 107px;
}
.mask-prize img {
width: 100px;
border-radius: 4px;
}
.mask-prize p {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 22px;
margin-top: 13px;
}
.mask-btn {
width: 160%;
text-align: center;
margin-top: 96px;
margin-left: -30%;
}
.mask-btn button {
width: 107px;
height: 35px;
background: rgba(208, 2, 27, 1);
border-radius: 18px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
margin: 0 5px;
border: none;
}
.mask-btn button.no {
background: rgba(234, 234, 234, 1);
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(155, 155, 155, 1);
}
.no-prize {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
text-align: center;
}
.prize-body {
width: 86vw;
position: fixed;
height: auto;
background: #fff;
left: 7vw;
top: 21vw;
z-index: 13;
padding: 19px;
box-sizing: border-box;
border-radius: 10px;
}
.prize-head {
width: 100%;
height: auto;
display: flex;
}
.prize-head .img {
width: 60px;
float: left;
}
.prize-head .title {
padding-top: 25px;
padding-left: 20px;
font-size: 9px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(155, 155, 155, 1);
line-height: 13px;
}
.prize-head div p:first-child {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(74, 74, 74, 1);
line-height: 22px;
}
.code-img {
width: 200px;
margin: 0 auto;
margin-top: 15px;
}
.code-txt {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(74, 74, 74, 1);
line-height: 17px;
margin-top: 14px;
width: 100%;
text-align: center;
}
.code-message {
font-size: 10px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(155, 155, 155, 1);
line-height: 14px;
margin-top: 25px;
width: 100%;
text-align: center;
}
.code-txt p:last-child {
font-size: 12px;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: rgba(74, 74, 74, 1);
line-height: 15px;
}
.code-close {
position: absolute;
width: 100%;
height: 30px;
bottom: -42px;
left: 0;
margin: 0 auto;
text-align: center;
}
.code-close i {
width: 30px;
height: 30px;
display: inline-block;
background: url('https://img01.wanfangche.com/public/upload/202006/17/5ee9ecff44ab8.png') no-repeat;
background-size: 100% 100%;
z-index: 6;
}
.code-hint {
left: 0px;
width: 100%;
text-align: center;
font-size: 10px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 14px;
position: absolute;
bottom: -150px;
}
.code-img.active {
position: relative;
}
.code-img.active::after {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
content: "";
background: rgba(255, 255, 255, .8);
z-index: 2;
}
.code-img.active .imgs {
width: 90px;
height: 90px;
position: absolute;
z-index: 3;
right: 0;
top: 0;
}
</style>
