2023-02-02 09:51:46 +08:00
|
|
|
|
<template>
|
2023-02-02 18:07:16 +08:00
|
|
|
|
<div class="AppLuckyDraw">
|
|
|
|
|
|
<!-- <div @click="showPhoneMask=true">绑定手机号</div> -->
|
|
|
|
|
|
|
|
|
|
|
|
<div class="header-bg">
|
|
|
|
|
|
<img src="./img/header-bg.png" alt="" class="header-bg-img">
|
|
|
|
|
|
<img src="./img/share-btn.png" alt="" class="share-bg-img">
|
|
|
|
|
|
<div class="share-btn">分享活动</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="box-content">
|
|
|
|
|
|
<div class="title">
|
|
|
|
|
|
<img src="./img/title-bg.png" alt="">
|
|
|
|
|
|
<p>打卡活动</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p class=" text-line">新年伊始，企业微信团队为创建安全和谐的网络办公环境，诚邀大家使用企业微信参与打卡活动！活动详情如下：</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>抽奖<br/>次数</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="flex-img-item">
|
|
|
|
|
|
<div>抽奖<br/>次数</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="flex-img-item">
|
|
|
|
|
|
<div>抽奖<br/>次数</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="flex-img-item">
|
|
|
|
|
|
<div>解锁<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>20天</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="box-content">
|
|
|
|
|
|
<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">
|
|
|
|
|
|
{{ item.name }}
|
|
|
|
|
|
<img :src="item.picture" alt="" class="cell-img" />
|
|
|
|
|
|
</div>
|
2023-02-02 09:51:46 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
2023-02-02 18:07:16 +08:00
|
|
|
|
<img src="./img/pointer.png" alt="" class="point-img">
|
|
|
|
|
|
<div class="turntable-btn" v-if="!activeInfo.signupTime" @click="signUp">活动报名</div>
|
|
|
|
|
|
<div class="turntable-btn" v-else @click="raffle">立即抽奖</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="lucky-list">
|
|
|
|
|
|
<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"></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"></u-notice-bar>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="box-content">
|
|
|
|
|
|
<div class="title">
|
|
|
|
|
|
<img src="./img/title-bg.png" alt="">
|
|
|
|
|
|
<p>活动时间</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p class="text-line">活动时间：2023年2月7日~2023年3月8日 </p>
|
|
|
|
|
|
<p class="text-line">兑换时间：预计3月9日起</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="box-content">
|
|
|
|
|
|
<div class="title">
|
|
|
|
|
|
<img src="./img/title-bg.png" alt="">
|
|
|
|
|
|
<p>活动规则</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="title-text">报名方式</div>
|
|
|
|
|
|
<p class="text-line">打开企业微信，点击工作台，找到村微的应用，打开活动列表，点击参与。</p>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="title-text">打卡方式</div>
|
|
|
|
|
|
<p class="text-line">①企微内至少3个同事发消息或在至少1个群聊中发言，保持日常工作沟通习惯即可。</p>
|
|
|
|
|
|
<p class="text-line">②使用企微工作台中任意应用，有操作上的疑问请联系技术支持。</p>
|
|
|
|
|
|
<p class="text-line">③使用企微工作台点击进入宣传栏任意海报，停留进行浏览至少5分钟。</p>
|
|
|
|
|
|
<p class="text-line">④使用工作台会议进行内部办公沟通。</p>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="title-text">抽奖规则</div>
|
|
|
|
|
|
<p class="text-line">第一批2月8日，抽奖条件第一次报名即可参与抽奖，将活动分享三位给同事即可额外获得一次抽奖机会。</p>
|
|
|
|
|
|
<p class="text-line">第二批2月15日，抽奖条件要求2月7日至2月14日打卡成功5天或以上。
|
|
|
|
|
|
<p class="text-line">第三批2月23日，抽奖条件要求2月7日至2月22日打卡成功10天或以上。
|
|
|
|
|
|
<p class="text-line">第四批终极大奖3月9日，抽奖条件要求2月7日至3月8日打卡成功20天或以上。</p>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="title-text">奖品内容</div>
|
|
|
|
|
|
<p class="text-line">企业微信笔记本礼盒，腾讯Q宠公仔，腾讯Q宠手办，终极大奖（华为P50手机，华为meatpad平板电脑，华为watch GT3智能手表）。</p>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="title-text">联系方式</div>
|
|
|
|
|
|
<p class="text-line">①联系企业微信“锡林郭勒盟党政云平台”内“技术支持”分组的工作人员；</p>
|
|
|
|
|
|
<p class="text-line">②企业微信扫下方二维码联系技术支持人员。</p>
|
|
|
|
|
|
<img src="./img/qrcode-img.png" alt="" class="qrcode-img">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="title-text">领取地点</div>
|
|
|
|
|
|
<p class="text-line">2023年2月20日起根据各旗县网信办通知地点领取，一切解释权属企业微信团队，有任何疑问请联系“锡林郭勒盟党政云平台”内“技术支持”分组的工作人员。</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="share-bottom-btn">活动报名</div>
|
|
|
|
|
|
|
|
|
|
|
|
<u-modal v-model="showPhoneMask" ref="uModal" :show-cancel-button="true" :async-close="true" @confirm="bindPhoneConfirm" @cancel="cancel" class="phone-mask">
|
2023-02-02 09:51:46 +08:00
|
|
|
|
<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>
|
|
|
|
|
|
export default {
|
|
|
|
|
|
name: "AppLuckyDraw",
|
|
|
|
|
|
appName: "幸运抽奖",
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
deg: 0, // 初始化角度
|
2023-02-02 18:07:16 +08:00
|
|
|
|
duration: 2000, //动画时长
|
2023-02-02 09:51:46 +08:00
|
|
|
|
awardNumber: 2, // 中奖区域 从1开始
|
|
|
|
|
|
isStart: false, //防止多次触发动画
|
|
|
|
|
|
animationData: {}, //动画对象
|
|
|
|
|
|
showPhoneMask: false,
|
|
|
|
|
|
phone: '',
|
|
|
|
|
|
activityId: '',
|
|
|
|
|
|
friendId: '',
|
2023-02-02 18:07:16 +08:00
|
|
|
|
activeInfo: {},
|
|
|
|
|
|
luckyList: ['1用户获得限量版公仔一个', '2用户获得限量版公仔一个', '3用户获得限量版公仔一个'],
|
|
|
|
|
|
luckyList2: ['4用户获得限量版公仔一个', '5用户获得限量版公仔一个', '6用户获得限量版公仔一个'],
|
|
|
|
|
|
luckyList3: ['7用户获得限量版公仔一个', '8用户获得限量版公仔一个', '9用户获得限量版公仔一个'],
|
2023-02-02 09:51:46 +08:00
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
onLoad(option) {
|
|
|
|
|
|
// this.activityId = option.activityId
|
|
|
|
|
|
// this.friendId = option.friendId || ''
|
2023-02-02 18:07:16 +08:00
|
|
|
|
this.activityId = '75a4c4493de54f9fb63868817079c89c'
|
|
|
|
|
|
this.getDetail()
|
2023-02-02 09:51:46 +08:00
|
|
|
|
},
|
|
|
|
|
|
onShow() {
|
|
|
|
|
|
//创建对象，并将对象存放在data中以挂载在需要进行动画的元素之上
|
|
|
|
|
|
var animation = uni.createAnimation({
|
|
|
|
|
|
duration: this.duration,
|
|
|
|
|
|
timingFunction: "ease-in-out", //旋转模式
|
|
|
|
|
|
});
|
|
|
|
|
|
this.animation = animation; //挂载在vue实例上以便渲染
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
//封装动画旋转整数圈的方法，只需接受（角度，时间）即可开始旋转动画
|
|
|
|
|
|
rotate(deg, duration) {
|
|
|
|
|
|
if (this.isStart) return; //防止用户多次点击动画
|
|
|
|
|
|
this.isStart = true; //此时旋转开始，动画无法再次触发
|
|
|
|
|
|
setTimeout(
|
|
|
|
|
|
function () {
|
|
|
|
|
|
//设置定时器在动画时间后方可再次触发转盘动画
|
|
|
|
|
|
this.isStart = false;
|
|
|
|
|
|
}.bind(this),
|
|
|
|
|
|
duration
|
|
|
|
|
|
); //此时用的普通函数，存在this指向问题，需要改变this指向
|
|
|
|
|
|
this.animation
|
|
|
|
|
|
.rotate(deg)
|
|
|
|
|
|
.step()
|
|
|
|
|
|
.rotate((this.awardNumber - 1) * -(360 / this.reword.length))
|
|
|
|
|
|
.step({
|
|
|
|
|
|
duration: 0,
|
|
|
|
|
|
timingFunction: "linear",
|
|
|
|
|
|
});
|
|
|
|
|
|
this.animationData = this.animation.export();
|
|
|
|
|
|
},
|
|
|
|
|
|
//开始旋转
|
|
|
|
|
|
onStart() {
|
|
|
|
|
|
//提前将要转的角度算好，再传入要转的时长即可转到自己想要的角度
|
|
|
|
|
|
this.rotate( 360 + (360 - (this.awardNumber - 1) * (360 / this.reword.length)),this.duration);
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
bindPhoneConfirm() {
|
2023-02-02 18:07:16 +08:00
|
|
|
|
this.$refs.uModal.clearLoading()
|
2023-02-02 09:51:46 +08:00
|
|
|
|
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('请输入正确的手机号')
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2023-02-02 18:07:16 +08:00
|
|
|
|
this.$http.post(`/app/appmarketingactivityinfo/bindPhone?phone=${this.phone}`).then((res) => {
|
2023-02-02 09:51:46 +08:00
|
|
|
|
if (res.code == 0) {
|
2023-02-02 18:07:16 +08:00
|
|
|
|
this.getDetail()
|
2023-02-02 09:51:46 +08:00
|
|
|
|
this.$u.toast('绑定成功')
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
cancel() {
|
|
|
|
|
|
this.phone = ''
|
|
|
|
|
|
this.showPhoneMask = false
|
|
|
|
|
|
},
|
|
|
|
|
|
getDetail() {
|
|
|
|
|
|
this.$http.post(`/app/appmarketingactivityinfo/queryDetailByIdWXCP?activityId=${this.activityId}&friendId=${this.friendId}`).then((res) => {
|
|
|
|
|
|
if (res.code == 0) {
|
|
|
|
|
|
this.activeInfo = {...res.data}
|
2023-02-02 18:07:16 +08:00
|
|
|
|
// arr = arr.slice(0,4)
|
2023-02-02 09:51:46 +08:00
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
//抽奖
|
|
|
|
|
|
raffle() {
|
2023-02-02 18:07:16 +08:00
|
|
|
|
if(!this.activeInfo.vaildPhone) {
|
|
|
|
|
|
return this.showPhoneMask = true
|
|
|
|
|
|
}
|
|
|
|
|
|
this.$http.post(`/app/appmarketingactivityinfo/raffle?activityId=${this.activityId}`).then((res) => {
|
2023-02-02 09:51:46 +08:00
|
|
|
|
if (res.code == 0) {
|
2023-02-02 18:07:16 +08:00
|
|
|
|
this.awardNumber = res.data
|
2023-02-02 09:51:46 +08:00
|
|
|
|
this.onStart()
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
2023-02-02 18:07:16 +08:00
|
|
|
|
//活动报名
|
|
|
|
|
|
signUp() {
|
|
|
|
|
|
this.$http.post(`/app/appmarketingactivityinfo/signup?activityId=${this.activityId}`).then((res) => {
|
|
|
|
|
|
if (res.code == 0) {
|
|
|
|
|
|
this.$u.toast('活动报名成功！')
|
|
|
|
|
|
this.getDetail()
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
2023-02-02 09:51:46 +08:00
|
|
|
|
},
|
|
|
|
|
|
onShareAppMessage() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
// title: this.info.title,
|
|
|
|
|
|
// imageUrl: this.info.coverFile.url,
|
|
|
|
|
|
path: `/pages/AppLuckyDraw/AppLuckyDraw?id=${''}&areaId=${''}`
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang='scss'>
|
2023-02-02 18:07:16 +08:00
|
|
|
|
.AppLuckyDraw {
|
|
|
|
|
|
// position: relative;
|
2023-02-02 09:51:46 +08:00
|
|
|
|
width: 100%;
|
2023-02-02 18:07:16 +08:00
|
|
|
|
background-color: #F30000;
|
|
|
|
|
|
padding-bottom: 64px;
|
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
|
.header-bg {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
margin-bottom: 44px;
|
|
|
|
|
|
.header-bg-img {
|
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.share-bg-img {
|
|
|
|
|
|
width: 182px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 30px;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.share-btn {
|
|
|
|
|
|
width: 182px;
|
|
|
|
|
|
padding-left: 58px;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
height: 52px;
|
|
|
|
|
|
line-height: 52px;
|
|
|
|
|
|
font-family: PingFangSC-SNaNpxibold;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #FFE6C3;
|
|
|
|
|
|
text-shadow: 0 2px 4px rgba(173,0,0,0.80);
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 30px;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.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: 250px;
|
|
|
|
|
|
height: 96px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: -48px;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
margin-left: -125px;
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
|
|
|
width: 250px;
|
|
|
|
|
|
line-height: 74px;
|
|
|
|
|
|
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-size: 28px;
|
|
|
|
|
|
color: #E55500;
|
|
|
|
|
|
line-height: 44px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.text-content {
|
|
|
|
|
|
text-indent: 2em;
|
|
|
|
|
|
}
|
|
|
|
|
|
.title-text {
|
|
|
|
|
|
font-family: PingFangSC-SNaNpxibold;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
font-size: 32px;
|
|
|
|
|
|
color: #DC0000;
|
|
|
|
|
|
line-height: 44px;
|
|
|
|
|
|
margin: 30px 0 14px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.qrcode-img {
|
|
|
|
|
|
width: 174px;
|
|
|
|
|
|
height: 174px;
|
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.flex-img {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
padding: 0 0 20px;
|
|
|
|
|
|
.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) {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
.flex-img-item:nth-of-type(2) {
|
|
|
|
|
|
flex: 2.5;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
}
|
|
|
|
|
|
.flex-img-item:nth-of-type(3) {
|
|
|
|
|
|
flex: 4;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
}
|
|
|
|
|
|
.flex-img-item:nth-of-type(4) {
|
|
|
|
|
|
flex: 7;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.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 {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
padding: 0 16px;
|
|
|
|
|
|
div {
|
|
|
|
|
|
width: 140px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 36px;
|
|
|
|
|
|
font-family: PingFangSC-Regular;
|
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
|
color: #E55500;
|
|
|
|
|
|
}
|
|
|
|
|
|
div:nth-of-type(1) {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
div:nth-of-type(2) {
|
|
|
|
|
|
flex: 2.5;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
}
|
|
|
|
|
|
div:nth-of-type(3) {
|
|
|
|
|
|
flex: 4;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
}
|
|
|
|
|
|
div:nth-of-type(4) {
|
|
|
|
|
|
flex: 7;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.turntable-content {
|
|
|
|
|
|
width: 640px;
|
|
|
|
|
|
height: 888px;
|
|
|
|
|
|
background-image: url('./img/turntable-bg.png');
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
.turntable-btn {
|
|
|
|
|
|
width: 268px;
|
|
|
|
|
|
height: 84px;
|
|
|
|
|
|
line-height: 84px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
margin-left: 28px;
|
|
|
|
|
|
color: #F30000;
|
|
|
|
|
|
background-color: #FFCF75;
|
|
|
|
|
|
border-radius: 42px;
|
|
|
|
|
|
font-size: 34px;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 176px;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
margin-left: -134px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.turntable {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
top: 68px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
height: 500px;
|
|
|
|
|
|
width: 500px;
|
|
|
|
|
|
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 250px;
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
padding-top: 40px;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
}
|
|
|
|
|
|
.cell-img {
|
|
|
|
|
|
width: 50px;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
margin-top: 32px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.sector {
|
|
|
|
|
|
width: 500px;
|
|
|
|
|
|
height: 500px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
clip: rect(0 500px 500px 250px);
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.inner {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
clip: rect(0 250px 500px 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: 112px;
|
|
|
|
|
|
height: 160px;
|
|
|
|
|
|
top: 228px;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
margin-left: -56px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.lucky-list {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
background: #FFDEAC;
|
|
|
|
|
|
border: 2px solid #FFAE32;
|
|
|
|
|
|
border-radius: 28px;
|
|
|
|
|
|
padding: 22px;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.pad-lf18 {
|
|
|
|
|
|
padding: 64px 18px 48px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.share-bottom-btn {
|
|
|
|
|
|
width: calc(100% - 56px);
|
|
|
|
|
|
height: 84px;
|
|
|
|
|
|
line-height: 84px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
margin-left: 28px;
|
|
|
|
|
|
color: #F30000;
|
|
|
|
|
|
background-color: #FFCF75;
|
|
|
|
|
|
border-radius: 42px;
|
|
|
|
|
|
font-size: 34px;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
}
|
2023-02-02 09:51:46 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2023-02-02 18:07:16 +08:00
|
|
|
|
|
|
|
|
|
|
|
2023-02-02 09:51:46 +08:00
|
|
|
|
.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;
|
|
|
|
|
|
.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>
|
