uniapp 微信小程序转盘指针抽奖
但是发现瓶子并不是一个宽度，从下往上会越来越细，改变液体的位置不太合适。转盘抽奖uniapp小程序，跟搜到的插件转盘旋转不同，我们的需求是中间的指针也就是瓶子旋转，而且要求长摁蓄力液体装满瓶子，松手旋转并且液体慢慢转为空，最后停止在相应的奖品上。后来想到了 找设计mm切了几个图装满瓶子液体的图放最底层，上面压一个空瓶子但是没有底的图，通过控制空瓶子的高度，一点点把下面的液体显示出来。瓶子旋转停下抽
·
转盘抽奖uniapp小程序，跟搜到的插件转盘旋转不同，我们的需求是中间的指针也就是瓶子旋转，而且要求长摁蓄力液体装满瓶子，松手旋转并且液体慢慢转为空，最后停止在相应的奖品上。
首先考虑蓄力液体装满的问题，一开始想的是最底层放一个空瓶子的图片，然后把液体图片的bottom一点点改为0。但是发现瓶子并不是一个宽度，从下往上会越来越细，改变液体的位置不太合适。
后来想到了 找设计mm切了几个图 装满瓶子液体的图放最底层，上面压一个空瓶子但是没有底的图，通过控制空瓶子的高度，一点点把下面的液体显示出来。
此处需要插一下uniapp 动画的链接添加链接描述
<!-- 转盘图片 -->
<view class="box">
<view class="plant">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/plant.png')" mode="widthFix"></image>
</view>
<view class="bottleBox" :animation="animationData" @touchstart="touchstartBottle " @touchmove='touchmoveBottle'
@touchend="touchend">
<!-- 手机号 -->
<button class="btn phone" open-type="getPhoneNumber" @getphonenumber="getphonenumber"
v-if="havePhone==0"></button>
<!-- 蓄力动效 -->
<view class="bottle">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/b-all.png')" mode="widthFix"></image>
</view>
<view class="top" :animation="animationDataTop">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/b-top.png')" mode="widthFix"></image>
</view>
</view>
</view>
<style lang="less" scoped>
.box {
width: 646rpx;
height: 685rpx;
margin: 58rpx auto 0;
position: relative;
display: flex;
justify-content: center;
align-items: center;
.plant {
width: 100%;
height: 100%;
position: absolute;
}
.bottleBox {
// width: 183rpx;
width: 60rpx;
height: 135rpx;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
.bottle {
width: 60rpx;
// overflow: hidden;
}
.top {
width: 60rpx;
overflow: hidden;
z-index: 99;
position: absolute;
top: 0;
height: 130rpx;
}
.phone {
background-color: transparent;
width: 60rpx;
height: 135rpx;
z-index: 999;
position: absolute;
}
}
}
</style>
//触摸开始
let timer
const touchstartBottle = () => {
liquidUpInfo.height=120
liquidUpInfo.time=0
console.log('liquidUpInfo',liquidUpInfo);
startTouchTime.value=new Date()
clearInterval(timer)
timer=setInterval(()=>{
if(liquidUpInfo.height>0){
console.log('开始');
liquidUpInfo.time+=100
liquidUpInfo.height-=5
console.log('liquidUpInfo',liquidUpInfo);
liquidUp()
}
},100)
}
//触摸结束
const touchend = () => {
console.log('isPrize.value',isPrize.value);
if(isPrize.value == 1){
clearInterval(timer)
console.log('触摸结束');
liquidDown()
}
}
// 液体蓄力上涨
const liquidUp = () => {
console.log('液体蓄力上涨');
var animation = uni.createAnimation({
duration: liquidUpInfo.time,
timingFunction: 'ease-in-out',
})
animation.height(liquidUpInfo.height+'rpx').step()
animationDataTop.value = animation.export()
}
// 液体蓄力下降
const liquidDown = () => {
console.log('液体蓄力下降');
var animation = uni.createAnimation({
duration: liquidUpInfo.time,
timingFunction: 'ease-in-out',
})
animation.height('130rpx').step()
animationDataTop.value = animation.export()
}
瓶子旋转停下抽奖就很简单啦，我是先让瓶子空转两圈，同时调接口获取抽奖信息，然后把奖品的位置序号存一下，再让瓶子转360x2+45x序号就OK了，瓶子两次的旋转时间都取长摁时间的一半，还加了一个参数防止多次点击抽奖。
完整代码如下（懒得整理了哈哈，有一些收货地址组件的弹窗啥的，大家自行删除就好。 ）
<template>
<view class="page">
<!-- 背景 -->
<view class="mybg">
<image class="myimg" :src="setCdn('/myimgs/index/bg.png')" mode="scaleToFill"></image>
</view>
<scroll-view class="home" scroll-y="true">
<!-- title -->
<view class="title">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/title.png')" mode="widthFix"></image>
</view>
<!-- 转盘图片 -->
<view class="box">
<view class="plant">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/plant.png')" mode="widthFix"></image>
</view>
<view class="bottleBox" :animation="animationData" @touchstart="goStart" @touchmove='touchmoveBottle'
@touchend="touchend">
<!-- 手机号 -->
<button class="btn phone" open-type="getPhoneNumber" @getphonenumber="getphonenumber"
v-if="havePhone==0"></button>
<!-- 蓄力动效 -->
<view class="bottle">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/b-all.png')" mode="widthFix"></image>
</view>
<view class="top" :animation="animationDataTop">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/b-top.png')" mode="widthFix"></image>
</view>
</view>
</view>
<!-- 可以参与活动 -->
<view class="buttons" v-if="isDuring">
<!-- 次数 -->
<view class="num">
抽奖次数：{{totalLotteryCount-lotteryCount}}/{{totalLotteryCount}}
</view>
<!-- 按钮 -->
<view class="btns">
<button class="btn share" @click="myShare" open-type="share">
<image class="myimg" :src="setCdn('/myimgs/prize/share.png')" mode="widthFix"></image>
</button>
</view>
<!-- 规则按钮 -->
<view class="ruleBtn" @click="openRule">
<image class="myimg" :src="setCdn('/myimgs/prize/goRule.png')" mode="widthFix"></image>
</view>
</view>
<!-- 活动结束 -->
<view class="over" v-else>
<image class="myimg" :src="setCdn('/myimgs/prize/over.png')" mode="widthFix"></image>
</view>
<!-- 弹窗 -->
<!-- 抽奖规则 -->
<view class="mask rule" v-if="popType=='isRule'" @click="popType=''" @touchmove.stop.prevent="moveHandle">
<view class="pop animate__fadeInUp" @click.stop="inputt">
<view class="popbg">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/rule.png')" mode="widthFix"></image>
</view>
<view class="tips" v-if="isStart">
<view class="icon" @click.stop="changeAgree">
<image class="myimg choosed" :src="setCdn('/myimgs/rule/choosed.png')" mode="widthFix"
v-if="isAgree==1"></image>
<image class="myimg notchoose" :src="setCdn('/myimgs/rule/noSelect.png')" mode="widthFix">
</image>
</view>
<view class="detail" @click.stop="popType='ruleDetail'">
<image class="myimg" :src="setCdn('/myimgs/rule/detail.png')" mode="widthFix"></image>
</view>
</view>
<view class="conform" @click.stop="confirm" v-if="isStart">
<image class="myimg" :src="setCdn('/myimgs/rule/conform.png')" mode="widthFix"></image>
</view>
<view class="conform" v-else @click="popType=''">
<image class="myimg" :src="setCdn('/myimgs/treasure/back.png')" mode="widthFix"></image>
</view>
</view>
</view>
<!-- 实物奖品弹窗 -->
<view class="mask gift " v-if="popType=='entity'" @click="popType=''" @touchmove.stop.prevent="moveHandle">
<view :class="padeType==1 ? 'pop animate__zoomIn':'pop animate__fadeOutUp'" @click.stop="inputt">
<view class="popbg">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/bg.png')" mode="widthFix"></image>
</view>
<view class="giftName">
{{lotteryInfo.giftName}}
</view>
<view class="giftImg">
<image class="myimg" :src="lotteryInfo.giftCoverImg" mode="widthFix"></image>
</view>
<view class="btn" @click.stop="receive">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/receive.png')" mode="widthFix"></image>
</view>
</view>
</view>
<!-- 积分奖品弹窗 -->
<!-- +1 -->
<view class="mask gift integral" v-if="popType=='integral1'" @click="popType=''"
@touchmove.stop.prevent="moveHandle">
<view :class="padeType==1 ? 'pop animate__zoomIn':'pop animate__fadeOutUp'">
<!-- <image class="myimg" :src="setCdn('/myimgs/prizePop/first.png')" mode="widthFix"></image> -->
<view class="popbg" @click.stop="inputt">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/+1.png')" mode="widthFix"></image>
</view>
<view class="btn" @click="popType=''">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/close.png')" mode="widthFix"></image>
</view>
</view>
</view>
<!-- +2 -->
<view class="mask gift integral" v-if="popType=='integral2'" @click="popType=''"
@touchmove.stop.prevent="moveHandle">
<view :class="padeType==1 ? 'pop animate__zoomIn':'pop animate__fadeOutUp'">
<!-- <image class="myimg" :src="setCdn('/myimgs/prizePop/first.png')" mode="widthFix"></image> -->
<view class="popbg" @click.stop="inputt">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/+2.png')" mode="widthFix"></image>
</view>
<view class="btn" @click="popType=''">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/close.png')" mode="widthFix"></image>
</view>
</view>
</view>
<!-- 未中奖 -->
<view class="mask gift not " v-if="popType=='notGift'" @click="popType=''"
@touchmove.stop.prevent="moveHandle">
<view class="pop animate__zoomIn">
<view class="popbg" @click.stop="inputt">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/not.png')" mode="widthFix"></image>
</view>
<view class="btn" @click="popType=''">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/close.png')" mode="widthFix"></image>
</view>
</view>
</view>
<!-- 兑换成功 -->
<view class="mask success" v-if="popType=='isSuccess'" @click="closePop">
<view class="pop animate__fadeInUp" @click.stop="inputt">
<view class="popbg">
<image class="myimg" :src="setCdn('/myimgs/rule/bg.png')" mode="widthFix"></image>
</view>
<view class="title">
<image class="myimg" :src="setCdn('/myimgs/2stage/shoppop/conversionTitle.png')"
mode="widthFix"></image>
</view>
<view class="giftImg">
<image class="myimg" :src="lotteryInfo.giftCoverImg" mode="widthFix"></image>
</view>
<view class="giftName">
{{lotteryInfo.giftName}}
</view>
<view class="btns">
<view class="btn close" @click="closePop">
<image class="myimg" :src="setCdn('/myimgs/2stage/bottle/back.png')" mode="widthFix">
</image>
</view>
<view class="btn goMore" @click="goTreasure">
<image class="myimg" :src="setCdn('/myimgs/2stage/shoppop/goMore.png')" mode="widthFix">
</image>
</view>
</view>
</view>
</view>
<!-- 规则条款 -->
<view class="mask rule privacy animate__zoomOutRight" v-if="popType=='ruleDetail'"
@touchmove.stop.prevent="moveHandle">
<view class="pop">
<view class="popbg">
<image class="myimg" :src="setCdn('/myimgs/rule/bg.png')" mode="widthFix"></image>
</view>
<view class="title">
<image class="myimg" :src="setCdn('/myimgs/clause/rtitle.png')" mode="widthFix"></image>
</view>
<scroll-view class="content" scroll-y="true">
<image class="myimg" :src="setCdn('/myimgs/clause/rcontent.png')" mode="widthFix"></image>
</scroll-view>
<view class="more">
<image class="myimg" :src="setCdn('/myimgs/clause/more.png')" mode="widthFix"></image>
</view>
<view class="conform" @click="popType='isRule'">
<image class="myimg" :src="setCdn('/myimgs/clause/close.png')" mode="widthFix"></image>
</view>
</view>
</view>
</scroll-view>
<mheader />
<giftAdd ref="addPop" @finished='fn' />
</view>
</template>
<script setup>
import {
ref,
reactive
} from 'vue'
import {
setCdn,
showModal,
showToast,
throttle
} from "@/common/js"
import {
onLoad,
onShow,
onShareAppMessage
} from "@dcloudio/uni-app";
import {
shareConfig
} from "@/config"
import {
useStore
} from "@/stores"
// const store = useStore();
// import Age18 from "@/components/age18/age18.vue"
// import myTabbar from "@/components/myTabbar/myTabbar.vue"
import {
api
} from "@/service"
import mheader from "@/components/header/header.vue"
import giftAdd from "@/components/giftAdd/giftAdd.vue"
const startDate = ref('2023/3/31 0:0:0')
const endDate = ref('2023/4/9')
let isAgree = ref(0) //同意规则
let lotteryCount = ref('') //已抽奖次数
let totalLotteryCount = ref('') //可以抽奖总次数
let shared = ref('') //是否已分享
let opened = ref("") //活动是否开启
let addPop = ref(null) //收货地址
let haveAdd = ref(0) //是否有收货地址
let isAgreeP = ref(0) //同意隐私
let isPrize = ref(0) //是否可以点击抽奖按钮
let popType = ref('') //弹窗样式
let padeType = ref(1) //1淡入 0淡出
let isDuring = ref(1) //是否可以参加活动 后台返回
let isStart = ref(0) //是否开始了活动 前端判断时间
let isGif = ref(0) //是否显示抽奖动画
let havePhone = ref(0) //是否授权了手机号
let animationData = ref({})
let animationDataTop = ref({})
let lotteryInfo = ref({}) //中奖信息
let giftLogId = ref('') //奖品记录id
let reGiftList = reactive([]) //奖品列表
let subInfo = reactive({}) //提交到后台
let startTouchTime=ref(0)//开始时间
let duringTouchTime=ref(0)//长摁时间
let liquidUpInfo=reactive({time:0,height:130})
//关闭弹窗
function closePop() {
popType.value = ''
lotteryInfo.value = {}
subInfo.giftLogId = ''
}
//宝藏馆
function goTreasure() {
uni.navigateTo({
url: '/pages/treasure/treasure'
})
closePop()
uni.removeStorageSync('addinfo')
}
//触摸开始
let timer
const touchstartBottle = () => {
liquidUpInfo.height=120
liquidUpInfo.time=0
console.log('liquidUpInfo',liquidUpInfo);
startTouchTime.value=new Date()
clearInterval(timer)
timer=setInterval(()=>{
if(liquidUpInfo.height>0){
console.log('开始');
liquidUpInfo.time+=100
liquidUpInfo.height-=5
console.log('liquidUpInfo',liquidUpInfo);
liquidUp()
}
},100)
}
//触摸结束
const touchend = () => {
console.log('isPrize.value',isPrize.value);
if(isPrize.value == 1){
clearInterval(timer)
console.log('触摸结束');
liquidDown()
apiLottery()
}
}
// 液体蓄力上涨
const liquidUp = () => {
console.log('液体蓄力上涨');
var animation = uni.createAnimation({
duration: liquidUpInfo.time,
timingFunction: 'ease-in-out',
})
animation.height(liquidUpInfo.height+'rpx').step()
animationDataTop.value = animation.export()
}
// 液体蓄力下降
const liquidDown = () => {
console.log('液体蓄力下降');
var animation = uni.createAnimation({
duration: liquidUpInfo.time,
timingFunction: 'ease-in-out',
})
animation.height('130rpx').step()
animationDataTop.value = animation.export()
}
//瓶子旋转
const bottalAni = () => {
console.log('瓶子旋转');
lotteryInfo.value = {
giftName: '',
giftCoverImg: "",
giftId: 0,
sort: '',
giftType: '',
}
animationData.value = null
var animation = uni.createAnimation({
duration: liquidUpInfo.time/2,
timingFunction: 'ease',
})
let angle = 360 * 2
//
animation.rotate(angle).step()
animationData.value = animation.export()
setTimeout(() => {
console.log('旋转动画');
var animation = uni.createAnimation({
duration: liquidUpInfo.time/2,
timingFunction: 'ease',
})
let angle2 = 360 * 2 + lotteryInfo.value.sort * 45
// let angle2=360 * 2 + 2*45
console.log('angle2', angle2, lotteryInfo.value);
animation.rotate(angle2).step()
animationData.value = animation.export()
setTimeout(() => {
animation.rotate(0).step({
duration: 100
})
animationData.value = animation.export()
if (lotteryInfo.value.giftType == 'PHYSICAL') {
popType.value = 'entity'
return
}
if (lotteryInfo.value.giftType == 'SCORE') {
if (lotteryInfo.value.giftName == '+1积分') {
popType.value = 'integral1'
} else {
popType.value = 'integral2'
}
return
}
if (lotteryInfo.value.giftType == 'POSTER') {
popType.value = 'notGift'
return
}
// else {
// popType.value = 'notGift'
// return
// }
// animationData.value =null
}, liquidUpInfo.time/2)
}, liquidUpInfo.time/2)
}
//阻止穿透滑动
function moveHandle() {
return
}
// 是否可以在活动期间
function ifDuringActivyty() {
const currentDate = new Date
console.log('currentDate', currentDate);
let endtime = new Date(endDate.value).getTime()
let isInEndTime = endtime - currentDate > 0 ? true : false
console.log('isInEndTime', isInEndTime);
let starttime = new Date(startDate.value).getTime()
let isInStartTime = currentDate - starttime > 0 ? true : false
console.log('isInStartTime', isInStartTime);
if (
// isInEndTime &&
isInStartTime
) {
isStart.value = 1
} else {
isStart.value = 0
}
}
// 打开活动规则弹窗
function openRule() {
if (uni.getStorageSync('haveAgreeRuleBottle')) {
isAgree.value = 1
}
popType.value = 'isRule'
}
//授权手机号
function getphonenumber(e) {
console.log(e);
let code = e.detail.code
let data = {
code: e.detail.code
}
api.GetPhone(data).then(res => {
if (res.code == 200) {
console.log(res);
havePhone.value = res.data
getUserInfo()
// goStart()
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
}
//同意拒绝规则
function changeAgree() {
isAgree.value = !isAgree.value
}
// 点击了确认
function confirm() {
console.log('isAgree.value', isAgree.value);
if (isAgree.value == 1) {
console.log('isAgree');
popType.value = ''
// 抽奖
uni.setStorageSync('haveAgreeRuleBottle', true)
// startLottery()
} else {
uni.showToast({
title: '请先阅读并同意抽奖活动约定条款',
icon: 'none'
})
}
}
//开始抽奖
function goStart() {
if (havePhone.value) {
let haveAgreeRuleBottle = uni.getStorageSync('haveAgreeRuleBottle')
console.log('haveAgreeRuleBottle', haveAgreeRuleBottle);
if (isStart.value) {
if (!uni.getStorageSync('haveAgreeRuleBottle')) {
popType.value = 'isRule'
} else {
startLottery()
}
} else {
popType.value = 'isRule'
}
} else {
return
}
}
//发起抽奖，调接口
function startLottery() {
console.log('可以抽奖', lotteryCount.value < totalLotteryCount.value);
if (lotteryCount.value < totalLotteryCount.value) {
if (isPrize.value == 0) {
console.log(
'startLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLottery'
);
isPrize.value = 1
touchstartBottle()
}
} else {
uni.showToast({
icon: 'none',
title: '抽奖次数已到上限'
})
}
}
//调抽奖接口
const apiLottery=()=>{
bottalAni()
api.StartLotteryBottle().then(res => {
console.log('----------ress调抽奖接口', res);
if (res.code == 200) {
getListGiftBottle()
for (let i = 0; i < reGiftList.length; i++) {
if (reGiftList[i].giftId == res.data.giftId) {
lotteryInfo.value.giftId = res.data.giftId
lotteryInfo.value.giftName = res.data.giftName
lotteryInfo.value.giftCoverImg = res.data.giftCoverImg
lotteryInfo.value.sort = parseInt(reGiftList[i].sort)
lotteryInfo.value.giftType = res.data.giftType
subInfo.giftLogId = res.data.giftLogId
}
}
console.log('----------lotteryInfo', lotteryInfo);
}
})
}
//打开收货地址页
function goAddress() {
uni.navigateTo({
url: '/pages/address/address'
})
}
//立即领取
const receive = () => {
console.log('立即领取', haveAdd.value);
if (haveAdd.value) {
console.log('打开组件');
addPop.value.openAdd()
popType.value = ''
} else {
console.log('打开收货地址');
goAddress()
popType.value = ''
}
}
function fn() {
console.log('========================shoudaol');
submit()
}
//提交兑换信息
const submit = () => {
api.getuserinfo().then(res => {
if (res.code == 200) {
subInfo.receiverName = res.data.consigneeName
subInfo.receiverPhone = res.data.consigneeMobile
subInfo.receiverDetailAddress = res.data
.consigneeProvince + ' ' + res.data.consigneeCity + ' ' + res.data.consigneeArea +
' ' + res.data.consigneeDetailAddress
console.log('subInfo', subInfo);
api.SaveGiftAddress(subInfo).then(res => {
console.log('@@@@@@@@@@@@@@@', res);
if (res.code == 200) {
popType.value = 'isSuccess'
}
})
}
})
}
// 获取抽奖信息
function getListGiftBottle() {
api.GetLotteryinfoBottle().then(res => {
console.log('-----------res', res);
lotteryCount.value = res.data.lotteryCount
totalLotteryCount.value = res.data.totalLotteryCount
opened.value = res.data.opened
shared.value = res.data.shared
reGiftList = res.data.giftList
console.log('reGiftList', reGiftList);
if (opened.value) {
isDuring.value = 1
} else {
isDuring.value = 0
}
setTimeout(() => {
isPrize.value = 0
}, 1000)
})
}
//获取用户信息 判断是否授权过手机号
function getUserInfo() {
api.getuserinfo().then(res => {
if (res.code == 200) {
havePhone.value = res.data.phone || 0
console.log('res', res);
if (res.data.consigneeProvince) {
haveAdd.value = 1
subInfo.receiverName = res.data.consigneeName
subInfo.receiverPhone = res.data.consigneeMobile
subInfo.receiverDetailAddress = res.data
.consigneeProvince + ' ' + res.data.consigneeCity + ' ' + res.data.consigneeArea +
' ' + res.data.consigneeDetailAddress
} else {
haveAdd.value = 0
}
}
})
}
// 阻止冒泡
function inputt() {
console.log('阻止冒泡');
}
onLoad((option) => {
ifDuringActivyty()
getListGiftBottle()
getUserInfo()
// ListGiftBottle()
});
onShow(() => {
if (uni.getStorageSync('addinfo')) {
if (lotteryInfo) {
console.log('打开组件');
addPop.value.openAdd()
} else {
return
}
}
})
// 分享
onShareAppMessage((res) => {
console.log("分享");
uni.removeStorageSync('addinfo')
if (!shared.value) {
api.ShareBottle().then(res => {
console.log('-----------分享res', res);
uni.showToast({
title: '分享成功，抽奖次数+1'
})
getListGiftBottle()
})
}
return {
...shareConfig,
}
})
</script>
<style lang="less" scoped>
.home {
width: 750rpx;
border-top: 1rpx solid transparent;
position: relative;
top: -1rpx;
box-sizing: border-box;
height: calc(100vh + 1rpx);
height: 100vh;
overflow: hidden;
.myimg {
width: 100%;
height: 100%;
}
.title {
width: 550rpx;
margin: 170rpx auto 0;
}
.box {
width: 646rpx;
height: 685rpx;
margin: 58rpx auto 0;
position: relative;
display: flex;
justify-content: center;
align-items: center;
.plant {
width: 100%;
height: 100%;
position: absolute;
}
.bottleBox {
// width: 183rpx;
width: 60rpx;
height: 135rpx;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
.bottle {
width: 60rpx;
// overflow: hidden;
}
.top {
width: 60rpx;
overflow: hidden;
z-index: 99;
position: absolute;
top: 0;
height: 130rpx;
}
.phone {
background-color: transparent;
width: 60rpx;
height: 135rpx;
z-index: 999;
position: absolute;
}
}
}
.boxGif {
width: 750rpx;
position: absolute;
top: 0;
}
.buttons {
.num {
width: 750rpx;
margin: 40rpx auto 0;
text-align: center;
font-size: 23rpx;
color: #fdf7ed;
font-weight: 700;
font-family: SourceHanSansCN-Heavy;
}
.btns {
display: flex;
flex-direction: column;
width: 750rpx;
margin-top: 15rpx;
justify-content: center;
align-items: center;
position: relative;
.btn {
width: 514rpx;
height: 106rpx;
}
.share {
width: 350rpx;
height: 113rpx;
margin-top: 32rpx;
margin-left: 50rpx;
}
}
}
.ruleBtn {
width: 90rpx;
margin: 44rpx auto;
padding-bottom: 150rpx;
}
.over {
width: 600rpx;
margin: 150rpx auto 0;
}
.mask {
width: 750rpx;
height: 101vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .7);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
.pop {
display: flex;
// justify-content: center;
align-items: center;
flex-direction: column;
.popbg {
width: 100%;
position: absolute;
top: 0;
}
}
}
.rule {
.pop {
width: 680rpx;
height: 1242rpx;
.popbg {
width: 100%;
position: absolute;
top: 0;
}
.tips {
// width: 400rpx;
margin: 983rpx auto 0;
display: flex;
align-items: center;
justify-content: center;
.icon {
position: relative;
margin-right: 20rpx;
top: -5rpx;
.notchoose {
width: 25rpx;
display: flex;
justify-content: center;
align-items: center;
}
.choosed {
width: 30rpx;
position: absolute;
top: -15rpx;
left: 5rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.detail {
width: 361rpx;
display: flex;
justify-content: center;
align-items: center;
}
.word {
font-family: SourceHanSansCN-Bold;
font-size: 24rpx;
color: #fdf7ed;
line-height: 36rpx;
font-weight: 700;
text {
padding-bottom: 10rpx;
border-bottom: 2rpx solid #fdf7ed;
}
}
}
.conform {
width: 200rpx;
margin: 30rpx auto 0;
}
}
}
.prize {
.pop {
width: 700rpx;
}
}
.not {
.pop {
// width: 679rpx;
// height: 1242rpx;
width: 700rpx;
height: 900rpx;
// position: relative;
.popbg {
width: 100%;
position: absolute;
top: 0;
}
.prizeImg {
width: 330rpx;
border: 10rpx solid #fff;
margin: 280rpx auto 0;
}
}
}
.sub {
.pop {
width: 574rpx;
.popbg {
width: 100%;
position: absolute;
top: 0;
}
.buttons {
margin: 336rpx auto 0;
display: flex;
justify-content: center;
align-items: center;
.btn {
width: 200rpx;
}
.close {
margin-left: 46rpx;
}
}
}
}
.privacy {
.content {
margin-top: 20rpx;
width: 574rpx;
height: 680rpx;
}
.title {
width: 750rpx;
margin-left: -35rpx;
}
.more {
width: 32rpx;
margin: 20rpx auto 0;
}
}
.gift {
.pop {
width: 697rpx;
height: 831rpx;
.giftName {
margin-top: 262rpx;
font-family: SourceHanSansCN-Heavy;
font-size: 35rpx;
font-weight: 700;
color: #fdf7ed;
text-align: center;
}
.giftImg {
width: 500rpx;
margin-top: 60rpx;
}
.btn {
margin-top: 80rpx;
width: 276rpx;
}
}
}
.integral {
.btn {
position: absolute;
bottom: -83rpx;
}
}
.not {
.btn {
position: absolute;
bottom: 10rpx;
}
}
.success {
.pop {
width: 679rpx;
height: 1242rpx;
.title {
width: 465rpx;
padding-top: 200rpx;
margin-top: 0;
}
.giftName {
margin-top: 40rpx;
font-family: SourceHanSansCN-Heavy;
font-size: 35rpx;
font-weight: 700;
color: #fdf7ed;
text-align: center;
}
.giftImg {
width: 437rpx;
margin-top: 115rpx;
}
.btns {
margin-top: 70rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.btn {
width: 200rpx;
}
.goMore {
width: 256rpx;
margin-top: 40rpx;
}
}
}
}
}
</style>
最后，代码仅供参考哈，主要还是记录一下思路，欢迎交流~~
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
0
0- 0
已为社区贡献4条内容
所有评论(0)