775 lines
24 KiB
Vue
775 lines
24 KiB
Vue
<template>
|
||
<div class="AppLuckyDraw">
|
||
<div class="header-bg">
|
||
<img src="./img/header-bg.png" alt="" class="header-bg-img">
|
||
<div class="share-btn" @click="share">分享活动</div>
|
||
</div>
|
||
<div class="box-content">
|
||
<div class="title">
|
||
<img src="./img/title-bg.png" alt="">
|
||
<p>打卡活动</p>
|
||
</div>
|
||
<p class=" text-line mar-b0">新年伊始，为进一步鼓励全盟各级各单位干部职工积极使用企业微信（政务版）进行办公，盟委网信办携企业微信团队开展“新年送福利、活跃抽大奖”活动。</p>
|
||
</div>
|
||
<div class="box-content pad-lf18">
|
||
<div class="title">
|
||
<img src="./img/title-bg.png" alt="">
|
||
<p>打卡进度</p>
|
||
</div>
|
||
<p class="count-text">当前已打卡<span>{{activeInfo.clockCount}}</span>天</p>
|
||
<div class="flex-img">
|
||
<div class="flex-img-item">
|
||
<div v-if="activeInfo.clockCount >= 1">抽奖<br/>1次</div>
|
||
<div v-else>解锁<br/>抽奖</div>
|
||
</div>
|
||
<div class="flex-img-item">
|
||
<div v-if="activeInfo.clockCount >= 5">抽奖<br/>1次</div>
|
||
<div v-else>解锁<br/>抽奖</div>
|
||
</div>
|
||
<div class="flex-img-item">
|
||
<div v-if="activeInfo.clockCount >= 10">抽奖<br/>1次</div>
|
||
<div v-else>解锁<br/>抽奖</div>
|
||
</div>
|
||
<div class="flex-img-item">
|
||
<div v-if="activeInfo.clockCount >= 15">抽奖<br/>1次</div>
|
||
<div v-else>解锁<br/>抽奖</div>
|
||
</div>
|
||
<div class="flex-img-item">
|
||
<div v-if="activeInfo.clockCount >= 20">抽奖<br/>1次</div>
|
||
<div v-else>解锁<br/>抽奖</div>
|
||
</div>
|
||
</div>
|
||
<div class="count-line">
|
||
<div class="line-item" v-for="(item, index) in 20" :key="index" :class="activeInfo.clockCount > index ? 'active' : ''"></div>
|
||
</div>
|
||
<div class="flex-day">
|
||
<div>1天</div>
|
||
<div>5天</div>
|
||
<div>10天</div>
|
||
<div>15天</div>
|
||
<div>20天</div>
|
||
</div>
|
||
</div>
|
||
<div class="box-content" :class="{'pad-b48' : !awardedList.length , 'pad-b144' : awardedList.length >= 3 , 'pad-b112' : awardedList.length == 2 , 'pad-b80' : awardedList.length == 1}">
|
||
<div class="title">
|
||
<img src="./img/title-bg.png" alt="">
|
||
<p>大转盘</p>
|
||
</div>
|
||
<div class="turntable-content">
|
||
<view :animation="animationData" class="turntable">
|
||
<view v-for="(item, index) in activeInfo.prizes" :key="index" class="sector-item">
|
||
<view class="sector" :style=" 'transform: rotate(' + (index * (360 / activeInfo.prizes.length) - 0.5 * (360 / activeInfo.prizes.length)) + 'deg)'">
|
||
<view class="inner" :style=" 'transform: rotate(' + 360 / activeInfo.prizes.length +'deg)'"></view>
|
||
</view>
|
||
<div :style=" 'transform: rotate(' + index * (360 / activeInfo.prizes.length) + 'deg) ;' " class="cell">
|
||
<p>{{ item.name }}</p>
|
||
<p v-if="item.belongRound > activeInfo.roundNumber">未开启</p>
|
||
<img :src="item.picture" alt="" class="cell-img" :class="item.belongRound > activeInfo.roundNumber ? 'clock-active' : ''" />
|
||
<img src="https://cdn.cunwuyun.cn/xlgl/lock.png" alt="" class="clock-img" v-if="item.belongRound > activeInfo.roundNumber">
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<img src="./img/pointer.png" alt="" class="point-img">
|
||
<div class="turntable-btn" @click="raffle">立即抽奖</div>
|
||
<p class="turntable-count">剩余<span> {{activeInfo.allowRaffle ? 1 : 0}} </span>次抽奖机会</p>
|
||
</div>
|
||
<div class="lucky-list" v-if="awardedList.length">
|
||
<u-notice-bar mode="vertical" :is-circular="false" :list="luckyList" :volume-icon="false" bg-color="#FFDEAC" padding="0rpx 0rpx" border-radius="60rpx"></u-notice-bar>
|
||
<u-notice-bar mode="vertical" :is-circular="false" :list="luckyList2" :volume-icon="false" bg-color="#FFDEAC" padding="0rpx 0rpx" border-radius="60rpx" v-if="luckyList2"></u-notice-bar>
|
||
<u-notice-bar mode="vertical" :is-circular="false" :list="luckyList3" :volume-icon="false" bg-color="#FFDEAC" padding="0rpx 0rpx" border-radius="60rpx" v-if="luckyList3"></u-notice-bar>
|
||
</div>
|
||
</div>
|
||
<div class="box-content">
|
||
<div class="title">
|
||
<img src="./img/title-bg.png" alt="">
|
||
<p>活动时间</p>
|
||
</div>
|
||
<div class="text-line mar-b0">
|
||
<p>活动时间：2023年2月7日~2023年3月8日 </p>
|
||
<p>兑换时间：预计3月9日起</p>
|
||
</div>
|
||
</div>
|
||
<div class="box-content">
|
||
<div class="title">
|
||
<img src="./img/title-bg.png" alt="">
|
||
<p>活动规则</p>
|
||
</div>
|
||
<div class="title-text">奖品内容</div>
|
||
<div class="text-line">
|
||
<p>企业微信笔记本礼盒，腾讯Q宠公仔，腾讯Q宠手办盲盒，终极大奖(华为P50手机，华为matePad11平板电脑，华为watch GT3智能手表)。</p>
|
||
</div>
|
||
<div class="title-text">参与方式</div>
|
||
<div class="text-line">
|
||
<p>
|
||
打开企业微信工作台“抽奖活动”应用,进入活动主页点击右下角立即参与按钮,选择多样打卡方式(每日至少2种),
|
||
满足打卡条件即可获取抽奖机会,首次分享活动给企业微信内三位同事,同事打开链接,即可获取额外一次抽奖机会。
|
||
每日打卡状态在次日16:30通知。
|
||
</p>
|
||
</div>
|
||
<div class="title-text">打卡方式</div>
|
||
<div class="text-line">
|
||
<p>每天使用企业微信与同事沟通交流，经常打开并使用工作台中的各种应用。</p>
|
||
<p>①每日与3位同事互相发消息并至少在1个群聊中发言。</p>
|
||
<p>②阅读【党政云助手】应用中的文章，学习企业微信使用相关技巧。</p>
|
||
<p>③阅读【行业资讯】应用中的文章，超过10分钟。</p>
|
||
<p>④点击工作台中任意应用如会议，公告，审批，汇报等应用进入使用。</p>
|
||
</div>
|
||
<div class="title-text">抽奖规则</div>
|
||
<div class="text-line">
|
||
<img src="./img/content-img.png" alt="">
|
||
<p>注：终极大奖(华为P50手机，华为matePad11平板电脑，华为watch GT3智能手表)仅对<span style="color:#DC0000;font-weight:500;">活跃满20天</span>的用户开放。抽奖机会要在下一次活跃达标之前使用，否则将会被作废。</p>
|
||
</div>
|
||
<div class="title-text">领取方式</div>
|
||
<div class="text-line mar-b0">
|
||
<p>2023年3月9日起根据活动方通知地点领取，一切解释权属企业微信团队，有任何疑问请联系“锡林郭勒盟党政云平台”内“技术支持”分组的工作人员。</p>
|
||
</div>
|
||
</div>
|
||
<div class="box-content mar-b48">
|
||
<div class="title">
|
||
<img src="./img/title-bg.png" alt="">
|
||
<p>助攻小插件</p>
|
||
</div>
|
||
<img :src="activeInfo.wxQrcode" alt="" class="qrcode-img">
|
||
<div class="text-line mar-b0">
|
||
<p class="text-center">长按上方二维码保存至手机，打开微信扫一扫，关注微信插件，以免忘记打卡，仅用于接收提醒，不计入打卡。</p>
|
||
</div>
|
||
</div>
|
||
<div class="share-bottom-btn" @click="share">分享活动</div>
|
||
<img src="./img/sign-btn.png" alt="" class="sign-btn" v-if="!activeInfo.signupTime" @click="signUp">
|
||
|
||
<u-modal v-model="showPhoneMask" ref="uModal" :show-cancel-button="true" :async-close="true" @confirm="bindPhoneConfirm" @cancel="cancel" class="phone-mask">
|
||
<div class="item">
|
||
<span class="label"><span class="tips">*</span>手机号</span>
|
||
<div class="value">
|
||
<u-input type="tel" placeholder="请填写手机号" v-model="phone" input-align="right" placeholder-style="color:#999;font-size:15px;" height="42" :maxlength="11" :clearable="false" />
|
||
</div>
|
||
</div>
|
||
</u-modal>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {mapActions, mapState} from 'vuex'
|
||
export default {
|
||
name: "AppLuckyDraw",
|
||
appName: "幸运抽奖",
|
||
computed: {
|
||
...mapState(['user']),
|
||
},
|
||
data() {
|
||
return {
|
||
deg: 0, // 初始化角度
|
||
duration: 2000, //动画时长
|
||
awardNumber: 1, // 中奖区域 从1开始
|
||
isStart: false, //防止多次触发动画
|
||
animationData: {}, //动画对象
|
||
showPhoneMask: false,
|
||
phone: '',
|
||
activityId: '',
|
||
friendId: '',
|
||
activeInfo: {},
|
||
awardedList: [],
|
||
luckyList: [],
|
||
luckyList2: [],
|
||
luckyList3: [],
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
this.animation = uni.createAnimation({
|
||
duration: this.duration,
|
||
timingFunction: "ease-in-out", //旋转模式
|
||
});
|
||
this.activityId = option.activityId
|
||
this.friendId = option.friendId || ''
|
||
// this.activityId = '75a4c4493de54f9fb63868817079c89c'
|
||
this.getDetail()
|
||
this.getAwardedList()
|
||
},
|
||
onShow() {
|
||
wx.hideOptionMenu();
|
||
},
|
||
methods: {
|
||
...mapActions(['injectJWeixin', 'wxInvoke', 'agentSign']),
|
||
//封装动画旋转整数圈的方法，只需接受（角度，时间）即可开始旋转动画
|
||
rotate(deg) {
|
||
this.animation.rotate(deg).step().rotate((this.awardNumber - 1) * -(360 / this.activeInfo.prizes.length)).step({
|
||
duration: 0,
|
||
timingFunction: "linear",
|
||
});
|
||
this.animationData = this.animation.export();
|
||
},
|
||
//开始旋转
|
||
onStart() {
|
||
//提前将要转的角度算好，再传入要转的时长即可转到自己想要的角度
|
||
this.rotate( 360 + (360 - (this.awardNumber - 1) * (360 / this.activeInfo.prizes.length)),this.duration);
|
||
},
|
||
bindPhoneConfirm() {
|
||
this.$refs.uModal.clearLoading()
|
||
if(!this.phone) {
|
||
return this.$u.toast('请输入手机号')
|
||
}
|
||
let regTel = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
|
||
if (!regTel.test(this.phone)) {
|
||
return this.$u.toast('请输入正确的手机号')
|
||
}
|
||
|
||
this.$http.post(`/app/appmarketingactivityinfo/bindPhone?phone=${this.phone}`).then((res) => {
|
||
if (res.code == 0) {
|
||
this.showPhoneMask = false
|
||
this.getDetail()
|
||
this.$u.toast('绑定成功')
|
||
this.$http.post(`/app/appmarketingactivityinfo/signup?activityId=${this.activityId}`).then((res) => {
|
||
if (res.code == 0) {
|
||
this.$u.toast('活动报名成功！')
|
||
this.getDetail()
|
||
}
|
||
}).catch((err) => {
|
||
this.$u.toast(err)
|
||
})
|
||
}
|
||
}).catch((err) => {
|
||
this.$u.toast(err)
|
||
})
|
||
},
|
||
cancel() {
|
||
this.phone = ''
|
||
this.showPhoneMask = false
|
||
},
|
||
getDetail() {
|
||
this.$http.post(`/app/appmarketingactivityinfo/queryDetailByIdWXCP?activityId=${this.activityId}&friendId=${this.friendId}`, null, {alwaysReturn: true}).then((res) => {
|
||
if (res.code == 0) {
|
||
this.activeInfo = {...res.data}
|
||
}else if(res.code == 401) {
|
||
this.$confirm('您尚未登录，请重新登录').then(() => {
|
||
this.$store.commit('goAuth')
|
||
})
|
||
}
|
||
}).catch((err) => {
|
||
this.$u.toast(err)
|
||
})
|
||
},
|
||
//抽奖
|
||
raffle() {
|
||
if(!this.activeInfo.vaildPhone) {
|
||
return this.showPhoneMask = true
|
||
}
|
||
if (this.isStart) return
|
||
this.isStart = true
|
||
|
||
this.$http.post(`/app/appmarketingactivityinfo/raffle?activityId=${this.activityId}`).then((res) => {
|
||
if (res.code == 0) {
|
||
console.log(456)
|
||
this.awardNumber = res.data
|
||
this.onStart()
|
||
setTimeout(() => {
|
||
this.$u.toast(this.activeInfo.prizes[this.awardNumber-1].defaultPrize == 1 ? `很遗憾您抽中了${this.activeInfo.prizes[this.awardNumber-1].name}` : `恭喜抽中${this.activeInfo.prizes[this.awardNumber-1].name}!`)
|
||
this.getDetail()
|
||
this.getAwardedList()
|
||
this.isStart = false
|
||
}, 2000)
|
||
}
|
||
if (res.code == 1) {
|
||
this.isStart = false
|
||
this.$u.toast(res.msg)
|
||
}
|
||
}).catch((err) => {
|
||
this.isStart = false
|
||
this.$u.toast(err)
|
||
})
|
||
},
|
||
//活动报名
|
||
signUp() {
|
||
if(!this.activeInfo.vaildPhone) {
|
||
return this.showPhoneMask = true
|
||
}
|
||
this.$http.post(`/app/appmarketingactivityinfo/signup?activityId=${this.activityId}`).then((res) => {
|
||
if (res.code == 0) {
|
||
this.$u.toast('活动报名成功！')
|
||
this.getDetail()
|
||
}
|
||
}).catch((err) => {
|
||
this.$u.toast(err)
|
||
})
|
||
},
|
||
getAwardedList() {
|
||
this.awardedList = []
|
||
this.$http.post(`/app/appmarketingactivityinfo/awardedList?activityId=${this.activityId}`).then((res) => {
|
||
if (res.code == 0) {
|
||
if(res.data.length) {
|
||
var textList = []
|
||
res.data.map((item, index) => {
|
||
textList[index] = `${res.data[index].name} ${this.geTel(res.data[index].phone)}获得${res.data[index].prizeName}`
|
||
})
|
||
if(textList.length > 2) {
|
||
var num = Math.floor(textList.length/3)
|
||
this.luckyList = textList.slice(0, num)
|
||
this.luckyList2 = textList.slice(num, num*2)
|
||
this.luckyList3 = textList.slice(num*2, num*3)
|
||
}else {
|
||
this.luckyList = textList
|
||
}
|
||
this.awardedList = textList
|
||
}
|
||
}
|
||
})
|
||
},
|
||
geTel(tel){
|
||
var reg = /^(\d{3})\d{4}(\d{4})$/;
|
||
return tel.replace(reg, "$1****$2");
|
||
},
|
||
share() {
|
||
this.agentSign().then((res) => {
|
||
this.injectJWeixin(['shareAppMessage', 'shareWechatMessage']).then(() => {
|
||
wx.invoke("shareAppMessage", {
|
||
title: '幸运抽奖',
|
||
desc: '新年伊始，企业微信团队为创建安全和谐的网络办公环境，诚邀大家使用企业微信参与打卡活动！',
|
||
link: location.origin+`/apps/AppLuckyDraw/AppLuckyDraw?activityId=${this.activityId}&friendId=${this.user.id}`,
|
||
imgUrl: 'https://cdn.cunwuyun.cn/xlgl/header-bg.png',
|
||
}, function(res) {
|
||
});
|
||
})
|
||
})
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang='scss'>
|
||
.AppLuckyDraw {
|
||
// position: relative;
|
||
width: 100%;
|
||
background-color: #F30000;
|
||
padding-bottom: 64px;
|
||
// overflow: hidden;
|
||
.header-bg {
|
||
width: 100%;
|
||
position: relative;
|
||
margin-bottom: 44px;
|
||
.header-bg-img {
|
||
width: 100%;
|
||
}
|
||
.share-btn {
|
||
width: 200px;
|
||
padding-left: 64px;
|
||
height: 56px;
|
||
line-height: 56px;
|
||
font-family: PingFangSC-SNaNpxibold;
|
||
font-weight: 600;
|
||
font-size: 28px;
|
||
color: #FFE6C3;
|
||
text-shadow: 0 2px 4px rgba(173,0,0,0.80);
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
top: 32px;
|
||
right: 0;
|
||
background-image: url('./img/share-btn.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
cursor: pointer;
|
||
}
|
||
.box-content {
|
||
width: 706px;
|
||
background: #FFE9C7;
|
||
border: 4px solid #FFEBA0;
|
||
box-shadow: inset 0 0 14px 4px rgba(255,113,20,0.60);
|
||
border-radius: 44px;
|
||
box-sizing: border-box;
|
||
margin: 0 0 44px 22px;
|
||
position: relative;
|
||
}
|
||
}
|
||
.box-content {
|
||
width: calc(100% - 48px);
|
||
padding: 64px 32px 48px;
|
||
background: #FFE9C7;
|
||
border: 4px solid #FFEBA0;
|
||
box-shadow: inset 0 0 16px 4px rgba(255,113,20,0.60);
|
||
border-radius: 48px;
|
||
margin: 0 0 80px 24px;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
background: #FFE9C7;
|
||
.title {
|
||
width: 240px;
|
||
height: 100px;
|
||
position: absolute;
|
||
top: -50px;
|
||
left: 50%;
|
||
margin-left: -120px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
p {
|
||
width: 240px;
|
||
line-height: 80px;
|
||
text-align: center;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
font-family: PingFangSC-SNaNpxibold;
|
||
font-weight: 600;
|
||
font-size: 32px;
|
||
color: #FFE6C3;
|
||
text-shadow: 0 2px 4px rgba(173,0,0,0.80);
|
||
}
|
||
}
|
||
.text-line {
|
||
width: 100%;
|
||
font-family: PingFangSC-Regular;
|
||
font-weight: 400;
|
||
font-size: 28px;
|
||
color: #E55500;
|
||
margin-bottom: 32px;
|
||
p{
|
||
line-height: 44px;
|
||
word-break: break-all;
|
||
}
|
||
img {
|
||
width: 636px;
|
||
}
|
||
.text-center {
|
||
text-align: center;
|
||
}
|
||
}
|
||
.title-text {
|
||
line-height: 48px;
|
||
font-family: PingFangSC-SNaNpxibold;
|
||
font-weight: 600;
|
||
font-size: 34px;
|
||
color: #DC0000;
|
||
margin-bottom: 16px;
|
||
}
|
||
.qrcode-img {
|
||
display: inherit;
|
||
width: 240px;
|
||
height: 240px;
|
||
margin: 0 auto 32px;
|
||
}
|
||
.count-text {
|
||
line-height: 40px;
|
||
font-family: PingFangSC-Regular;
|
||
font-weight: 400;
|
||
font-size: 28px;
|
||
color: #E55500;
|
||
text-align: center;
|
||
margin-bottom: 24px;
|
||
span {
|
||
color: #1BAFB3;
|
||
margin: 0 8px;
|
||
}
|
||
}
|
||
.flex-img {
|
||
padding: 0 0 20px;
|
||
height: 88px;
|
||
position: relative;
|
||
.flex-img-item {
|
||
div {
|
||
display: inline-block;
|
||
width: 80px;
|
||
height: 88px;
|
||
text-align: center;
|
||
line-height: 28px;
|
||
padding-top: 8px;
|
||
background-image: url('./img/count-bg.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
font-family: PingFangSC-Medium;
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 500;
|
||
font-size: 24px;
|
||
color: #FF7311;
|
||
}
|
||
}
|
||
.flex-img-item:nth-of-type(1) {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.flex-img-item:nth-of-type(2) {
|
||
position: absolute;
|
||
top: 0;
|
||
left: calc(25% - 64px);
|
||
}
|
||
.flex-img-item:nth-of-type(3) {
|
||
position: absolute;
|
||
top: 0;
|
||
left: calc(50% - 64px);
|
||
}
|
||
.flex-img-item:nth-of-type(4) {
|
||
position: absolute;
|
||
top: 0;
|
||
left: calc(75% - 64px);
|
||
}
|
||
.flex-img-item:nth-of-type(5) {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
.count-line {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
.line-item {
|
||
flex: 1;
|
||
height: 24px;
|
||
background-color: #F5BE7B;
|
||
margin-right: 2px;
|
||
}
|
||
.line-item:nth-of-type(1){
|
||
border-radius: 12px 0 0 12px;
|
||
}
|
||
.line-item:nth-last-of-type(1) {
|
||
border-radius: 0 12px 12px 0;
|
||
}
|
||
.active {
|
||
background-image: linear-gradient(179deg, #FF961F 0%, #FF320F 100%);
|
||
}
|
||
}
|
||
.flex-day {
|
||
position: relative;
|
||
padding: 0 16px;
|
||
div {
|
||
width: 140px;
|
||
line-height: 36px;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 26px;
|
||
color: #E55500;
|
||
}
|
||
|
||
div:nth-of-type(1) {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
div:nth-of-type(2) {
|
||
position: absolute;
|
||
top: 0;
|
||
left: calc(25% - 64px);
|
||
}
|
||
div:nth-of-type(3) {
|
||
position: absolute;
|
||
top: 0;
|
||
left: calc(50% - 64px);
|
||
}
|
||
div:nth-of-type(4) {
|
||
position: absolute;
|
||
top: 0;
|
||
left: calc(75% - 64px);
|
||
}
|
||
div:nth-of-type(5) {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
text-align: right;
|
||
}
|
||
}
|
||
.turntable-content {
|
||
width: 696px;
|
||
height: 1020px;
|
||
background-image: url('./img/turntable-bg.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
.turntable-btn {
|
||
width: 296px;
|
||
height: 118px;
|
||
line-height: 100px;
|
||
text-align: center;
|
||
background-image: url('./img/active-btn-bg.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
font-family: PingFangSC-SNaNpxibold;
|
||
font-weight: 600;
|
||
font-size: 40px;
|
||
color: #DC0000;
|
||
position: absolute;
|
||
bottom: 228px;
|
||
left: 50%;
|
||
margin-left: -148px;
|
||
cursor: pointer;
|
||
}
|
||
.turntable-count {
|
||
position: absolute;
|
||
bottom: 182px;
|
||
left: 50%;
|
||
margin-left: -148px;
|
||
width: 296px;
|
||
text-align: center;
|
||
color: rgba(255, 246, 240, 1);
|
||
font-size: 28px;
|
||
font-weight: 400;
|
||
span {
|
||
color: #43FFE7;
|
||
}
|
||
}
|
||
.turntable-btn:active{
|
||
transform: scale(0.95);
|
||
}
|
||
.turntable {
|
||
position: relative;
|
||
top: 73px;
|
||
margin: 0 auto;
|
||
background: #fff;
|
||
height: 538px;
|
||
width: 538px;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
.cell {
|
||
position: absolute;
|
||
width: 120px;
|
||
text-align: center;
|
||
height: 50px;
|
||
top: 0;
|
||
left: 50%;
|
||
margin: 0 0 0 -60px;
|
||
transform-origin: 60px 269px;
|
||
font-size: 20px;
|
||
padding-top: 22px;
|
||
box-sizing: border-box;
|
||
color: #E55500;
|
||
}
|
||
.cell-img {
|
||
width: 80px;
|
||
margin-top: 10px;
|
||
}
|
||
.clock-active {
|
||
opacity: .3;
|
||
}
|
||
.clock-img {
|
||
width: 80px;
|
||
position: absolute;
|
||
top: 80px;
|
||
left: 50%;
|
||
margin-left: -40px;
|
||
}
|
||
.sector {
|
||
width: 538px;
|
||
height: 538px;
|
||
position: absolute;
|
||
clip: rect(0 538px 538px 269px);
|
||
overflow: hidden;
|
||
}
|
||
.inner {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
clip: rect(0 269px 538px 0);
|
||
transform: rotate(60deg);
|
||
border-radius: 50%;
|
||
background-color: #FFE3B8;
|
||
border: 20px solid #FE221A;
|
||
}
|
||
.sector-item:nth-of-type(2n) .inner{
|
||
background-color: #FFF5E2;
|
||
border: 20px solid #F7BB86;
|
||
}
|
||
}
|
||
.point-img {
|
||
position: absolute;
|
||
width: 120px;
|
||
top: 250px;
|
||
left: 50%;
|
||
margin-left: -56px;
|
||
}
|
||
}
|
||
.lucky-list {
|
||
width: calc(100% - 64px);
|
||
background: #FFDEAC;
|
||
border: 2px solid #FFAE32;
|
||
border-radius: 28px;
|
||
padding: 22px;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
top: 986px;
|
||
left: 32px;
|
||
z-index: 99;
|
||
}
|
||
.mar-b0 {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
.mar-b48 {
|
||
margin-bottom: 48px;
|
||
}
|
||
.pad-lf18 {
|
||
padding: 64px 18px 48px;
|
||
}
|
||
.pad-b144 {
|
||
padding: 24px 0 144px;
|
||
}
|
||
.pad-b112 {
|
||
padding: 24px 0 112px;
|
||
}
|
||
.pad-b80 {
|
||
padding: 24px 0 80px;
|
||
}
|
||
.pad-b48{
|
||
padding: 24px 0 48px;
|
||
}
|
||
.share-bottom-btn {
|
||
width: calc(100% - 24px);
|
||
margin-left: 12px;
|
||
height: 120px;
|
||
line-height: 100px;
|
||
text-align: center;
|
||
font-family: PingFangSC-SNaNpxibold;
|
||
font-weight: 600;
|
||
font-size: 40px;
|
||
color: #DC0000;
|
||
background-image: url('./img/share-btn-bg.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.sign-btn {
|
||
position: fixed;
|
||
bottom: 200px;
|
||
right: 24px;
|
||
width: 160px;
|
||
z-index: 999;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.phone-mask {
|
||
.item{
|
||
width: calc(100% - 32px);
|
||
padding: 20px 32px 32px 16px;
|
||
background: #FFFFFF;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 30px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #666;
|
||
line-height: 48px;
|
||
box-sizing: border-box;
|
||
margin: 0 0 0 16px;
|
||
.label {
|
||
width: 150px;
|
||
}
|
||
.color-999{
|
||
color: #999;
|
||
}
|
||
.value{
|
||
color: #333;
|
||
.u-icon{
|
||
margin-left: 16px;
|
||
}
|
||
}
|
||
.tips{
|
||
display: inline-block;
|
||
width: 16px;
|
||
font-size: 32px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: #FF4466;
|
||
line-height: 44px;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
</style> |