<template>
|
<view class="layout">
|
<!-- 礼盒雨装饰元素 -->
|
<view class="giftboxes-container">
|
<view class="giftbox" v-for="n in 15" :key="n" :class="'giftbox-' + n">
|
<text class="giftbox-icon">🎁</text>
|
</view>
|
</view>
|
|
<!-- 活动规则按钮 - 右上角 -->
|
<view class="floating-rules-btn" @tap="showActivityRules" v-if="false">
|
<text class="rules-btn-text">活动规则</text>
|
</view>
|
|
<!-- 获取更多机会按钮 - 右上角悬浮 -->
|
<view class="floating-more-btn" @tap="showMoreChances">
|
<text class="floating-btn-icon">🎁</text>
|
</view>
|
|
<!-- 剩余抽奖次数 -->
|
<view class="remaining-times">
|
<text class="times-label">剩余抽奖次数:</text>
|
<text class="times-count">{{ remainingTimes }}</text>
|
</view>
|
|
<!-- 转盘抽奖 -->
|
<l-dialer :prizeList="prizeList" @click="onClick" @done="onDone" ref="dialer" />
|
|
<!-- 奖品展示 -->
|
<view class="prize-section">
|
<view class="section-title">奖品池</view>
|
<view class="prize-grid">
|
<view class="prize-item" v-for="(prize, index) in prizeDraws" :key="prize.id">
|
<image :src="prize.img" class="prize-img" />
|
<text class="prize-name">{{ prize.name }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 最近中奖信息 -->
|
<view class="winners-section">
|
<view class="section-title">最近中奖</view>
|
<scroll-view scroll-y="true" class="winners-list" :scroll-top="scrollTop">
|
<view class="winner-item" v-for="(winner, index) in recentWinners" :key="index">
|
<text class="winner-name">{{ winner.nickname }}</text>
|
<text class="winner-prize">获得 {{ winner.prizeName }}</text>
|
<text class="winner-time">{{ winner.time }}</text>
|
</view>
|
</scroll-view>
|
</view>
|
|
<!-- 自定义中奖弹窗 -->
|
<view class="prize-modal" v-if="showPrizeModal" @tap="closePrizeModal">
|
<view class="prize-modal-content" @tap.stop>
|
<view class="modal-close" @tap="closePrizeModal">×</view>
|
|
<view class="congratulations-text" v-if="currentPrize.id !== 'thanks'">
|
🎉 恭喜您 🎉
|
</view>
|
<view class="sorry-text" v-else>
|
😔 很遗憾 😔
|
</view>
|
|
<view class="prize-display">
|
<image :src="currentPrize.img" class="modal-prize-img" />
|
<text class="modal-prize-name">{{ currentPrize.name }}</text>
|
</view>
|
|
<view class="prize-result-text" v-if="currentPrize.id !== 'notWIn'">
|
获得了 {{ currentPrize.name }}
|
</view>
|
<view class="prize-result-text" v-else>
|
{{ currentPrize.name }}，再接再厉！
|
</view>
|
|
<view class="modal-buttons" v-if="currentPrize.id !== 'notWIn'">
|
<button class="confirm-btn" @tap="useItNow">去购物</button>
|
</view>
|
<view class="modal-buttons" v-else>
|
<button class="confirm-btn" @tap="closePrizeModal">确定</button>
|
</view>
|
</view>
|
</view>
|
|
<!-- 获取更多抽奖机会弹窗 -->
|
<view class="more-chances-modal" v-if="showMoreChancesModal" @tap="closeMoreChancesModal">
|
<view class="more-chances-modal-content" @tap.stop>
|
<view class="modal-close" @tap="closeMoreChancesModal">×</view>
|
|
<view class="modal-title">
|
<text class="title-icon">🎯</text>
|
<text class="title-text">获取更多抽奖机会</text>
|
</view>
|
|
<view class="chances-grid">
|
<button class="chance-item" open-type="share">
|
<view class="chance-icon">👥</view>
|
<text class="chance-title">分享好友</text>
|
<text class="chance-subtitle">+1次机会</text>
|
</button>
|
<!-- <view class="chance-item" @tap="shareToTimeline">
|
<view class="chance-icon">🌐</view>
|
<text class="chance-title">分享朋友圈</text>
|
<text class="chance-subtitle">+1次机会</text>
|
</view> -->
|
<view class="chance-item" @tap="watchVideo">
|
<view class="chance-icon">🎬</view>
|
<text class="chance-title">浏览视频</text>
|
<text class="chance-subtitle">+1次机会</text>
|
</view>
|
<view class="chance-item" @tap="browseProduct">
|
<view class="chance-icon">🛍️</view>
|
<text class="chance-title">浏览商品</text>
|
<text class="chance-subtitle">+1次机会</text>
|
</view>
|
<view class="chance-item " @tap="goShopping">
|
<view class="chance-icon">🛒</view>
|
<text class="chance-title">去购物</text>
|
<text class="chance-subtitle">享受购物乐趣</text>
|
</view>
|
</view>
|
|
<view class="modal-tip">
|
<text class="tip-text">💡 完成任务即可获得额外抽奖机会</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 活动规则弹窗 -->
|
<view class="rules-modal" v-if="showRulesModal" @tap="closeRulesModal">
|
<view class="rules-modal-content" @tap.stop>
|
<view class="modal-close" @tap="closeRulesModal">×</view>
|
|
<view class="modal-title">
|
<text class="title-text">活动规则</text>
|
</view>
|
|
<scroll-view scroll-y="true" class="rules-content">
|
<view class="rule-item" v-for="(rule, index) in activityRules" :key="rule.id">
|
<view class="rule-title" v-if="rule.title">{{ rule.title }}</view>
|
<text class="rule-text">{{ rule.text }}</text>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
</view>
|
|
</template>
|
<script>
|
import bgConfig from '@/pages/prize/PrizeDetail/prize-bgConfig.js'
|
import {
|
prizeInfo,
|
prizeNum,
|
prize,
|
grantRecord
|
} from '@/api/prize.js'
|
export default {
|
data() {
|
return {
|
bg: bgConfig.bg,
|
// 剩余抽奖次数
|
remainingTimes: 0,
|
// 弹窗控制
|
showPrizeModal: false,
|
showMoreChancesModal: false,
|
showRulesModal: false,
|
currentPrize: {},
|
// 活动规则数据
|
activityRules: [{
|
id: 1,
|
title: '一、 参与方式与规则：',
|
text: `1. 免费抽奖机会获取：
|
每日登录： 用户每日登录小程序， 即可自动获得2次免费抽奖机会；
|
任务赚取： 完成指定任务， 可获取额外无上限的抽奖机会；
|
浏览任务： 单次访问活动视频页并停留≥ 10 分钟， 可额外获得1次机会； 单次访问商品详情页停留≥ 1 分钟， 可额外获得1次机会；
|
分享任务： 首次分享活动至朋友圈可额外获得1次机会； 每成功邀请1位新用户点击您的分享链接， 可再得1次机会； 好友通过您的链接完成首次抽奖， 您可再获得2次机会。`
|
},
|
{
|
id: 2,
|
title: '二、 抽奖规则',
|
text: `1.用户消耗1次抽奖机会即可参与一次抽奖；
|
2.本次活动奖品每日限量，先到先得，抽完即止。
|
用户消耗1次抽奖机会即可参与一次抽奖。本次活动奖品每日限量，先到先得，抽完即止。
|
3.注意事项：每日基础免费机会仅限当日使用，不累计至次日。通过任务获得的额外机会无上限。请确保分享时生成的是您本人的专属带参链接/二维码，否则无法统计您的邀请关系。`
|
},
|
{
|
id: 4,
|
title: '三、奖品明细',
|
text: ' 本次抽奖活动奖品池具体每日库存以小程序页面实时显示为准。'
|
},
|
{
|
id: 5,
|
title: '四、奖品发放与领取',
|
text: ' 1.中奖通知：中奖后，系统将自动弹出中奖提示，并生成中奖海报。您也可以实时领取也可再活动中查看中奖记录。\n 2.奖品领取：请在收到中奖通知后的24小时内，及时填写并确认收货地址，逾期视为自动放弃奖品。\n 3.奖品退换：所有奖品均为活动特定礼品，不予折现、不退不换。如遇产品质量问题，请于收货后24小时内联系客服处理。'
|
},
|
{
|
id: 6,
|
title: '五、其他情况说明',
|
text: ' 1.用户行为规范：严禁用户通过任何不正当手段（如使用外挂、机器人、恶意注册多个账号、虚假分享等）参与活动。一经发现，【您的品牌名称】有权取消其参与及获奖资格，并保留追究法律责任的权利。\n 2.反作弊条款：活动采用技术手段进行风控监测，包括但不限于：设备ID去重、分享行为验证、地理位置核验等，以确保活动的公平性。\n 3.活动变更：如遇不可抗力因素或技术问题导致活动无法正常进行，【您的品牌名称】有权暂停、延长或终止活动，并视情况对活动规则进行变更或调整，相关变动将提前予以公告。\n 4.个人信息保护：您的个人信息仅用于本次活动奖品发放及后续服务，我们将严格保密，不会泄露给任何第三方。\n 5.免责声明：对于因网络、通信等原因导致用户未能参与活动或领取奖品的情况，【您的品牌名称】不承担任何责任。\n 6.活动解释权：本活动最终解释权归【您的品牌名称】所有。'
|
}
|
],
|
// 自动滚动控制
|
scrollTimer: null,
|
scrollTop: 0,
|
activityId: '',
|
// 最近中奖信息
|
originalWinners: [],
|
// 奖品列表，
|
prizeList: [],
|
prizeDraws: [],
|
// 分享朋友圈尝试标记
|
shareTimelineAttempt: false,
|
activityCover: '',
|
activityName: '',
|
couponId: ''
|
};
|
},
|
computed: {
|
recentWinners() {
|
// 将原始数据重复3次，确保无缝循环
|
return [...this.originalWinners]
|
}
|
},
|
async onLoad(option) {
|
const pages = getCurrentPages()
|
console.log('================pages ', pages)
|
this.activityId = option.id
|
const prize = await prizeInfo(this.activityId);
|
this.activityCover = prize.data.data.activityCover
|
this.activityName = prize.data.data.activityName
|
console.log(prize.data)
|
this.prizeList = prize.data.data.prizeInfoVOS.map(item => {
|
return {
|
id: item.id,
|
name: item.prizeName,
|
img: item.prizeImg
|
}
|
})
|
this.prizeDraws = this.prizeList;
|
this.prizeList = [...this.prizeList]
|
this.prizeList.push({
|
id: 'notWIn',
|
name: "再来一次"
|
})
|
await this.getUnmber(this.activityId)
|
await this.getGrantRecord(this.activityId)
|
},
|
// onShareTimeline(e) {
|
// console.log('------------------>', e)
|
// // 如果用户尝试过分享朋友圈，给予奖励
|
// if (this.shareTimelineAttempt) {
|
// this.remainingTimes++;
|
// this.shareTimelineAttempt = false;
|
// uni.showToast({
|
// title: '获得1次抽奖机会',
|
// icon: 'success'
|
// });
|
// }
|
// return {
|
// title: '快来参与抽奖活动吧！',
|
// path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId
|
// }
|
// },
|
//可能会使用到
|
mounted() {
|
// this.startAutoScroll()
|
},
|
onShareAppMessage() {
|
return {
|
title: this.activityName,
|
path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId,
|
imageUrl: this.activityCover,
|
success(e) {
|
console.log("分享成功", e)
|
},
|
fail(e) {
|
console.log('分享失败', e)
|
}
|
}
|
},
|
beforeDestroy() {
|
this.stopAutoScroll()
|
},
|
methods: {
|
async getUnmber(id) {
|
const prizeNums = await prizeNum(id);
|
if(prizeNums.statusCode === 400){
|
uni.showModal({
|
title:'',
|
content:prizeNums.data.message
|
})
|
}
|
this.remainingTimes = prizeNums.data.data ||0
|
},
|
/**
|
* 立即使用优惠券
|
*/
|
useItNow() {
|
|
// uni.navigateTo({
|
// url: `/pages/navigation/search/searchPage?promotionsId=${item.couponId}&promotionType=COUPON`,
|
// });
|
uni.navigateTo({
|
url: `/pages/commodity-square/coups-goods-list?promotionsId=${this.couponId}&promotionType=COUPON`
|
});
|
},
|
async getGrantRecord(id) {
|
const record = await grantRecord(id);
|
this.originalWinners = record.data.data || []
|
console.log('-------------->', record.data.data)
|
|
},
|
startAutoScroll() {
|
this.scrollTimer = setInterval(() => {
|
this.scrollTop += 1
|
// 每个item约80rpx高度，当滚动到第二组数据的中间位置时，重置到第一组对应位置
|
const itemHeight = 80
|
const originalLength = this.originalWinners.length
|
const oneSetHeight = originalLength * itemHeight
|
|
// 当滚动到第二组数据时，无缝重置到第一组对应位置
|
if (this.scrollTop >= oneSetHeight) {
|
this.scrollTop = 0
|
}
|
}, 50)
|
},
|
stopAutoScroll() {
|
if (this.scrollTimer) {
|
clearInterval(this.scrollTimer)
|
this.scrollTimer = null
|
}
|
},
|
onDone(index) {
|
const prize = this.prizeList[index]
|
this.currentPrize = prize
|
this.showPrizeModal = true
|
},
|
closePrizeModal() {
|
this.showPrizeModal = false
|
this.currentPrize = {}
|
},
|
// 显示获取更多机会弹窗
|
showMoreChances() {
|
this.showMoreChancesModal = true
|
},
|
// 关闭获取更多机会弹窗
|
closeMoreChancesModal() {
|
this.showMoreChancesModal = false
|
},
|
// 显示活动规则弹窗
|
showActivityRules() {
|
this.showRulesModal = true
|
},
|
// 关闭活动规则弹窗
|
closeRulesModal() {
|
this.showRulesModal = false
|
},
|
// 分享到微信好友
|
shareToFriend() {
|
uni.showShareMenu({
|
menus: ['weixin'],
|
success: (res) => {
|
console.log('分享菜单显示成功', res);
|
// 增加抽奖次数
|
this.remainingTimes++;
|
// 关闭弹窗
|
this.closeMoreChancesModal();
|
uni.showToast({
|
title: '获得1次抽奖机会',
|
icon: 'success'
|
});
|
},
|
fail: (err) => {
|
console.log('分享菜单显示失败', err);
|
uni.showToast({
|
title: '分享失败',
|
icon: 'none'
|
});
|
}
|
});
|
},
|
// 分享到朋友圈
|
shareToTimeline() {
|
// 由于uni-app的限制，朋友圈分享需要在onShareTimeline中处理
|
// 这里我们先显示提示，然后通过右上角分享到朋友圈
|
this.closeMoreChancesModal();
|
uni.showModal({
|
title: '分享到朋友圈',
|
content: '请点击右上角的分享按钮，选择"分享到朋友圈"',
|
showCancel: false,
|
success: () => {
|
// 标记用户已尝试分享朋友圈
|
this.shareTimelineAttempt = true;
|
}
|
});
|
},
|
// 浏览视频
|
watchVideo() {
|
// 这里可以跳转到视频页面或弹出视频播放器
|
this.closeMoreChancesModal();
|
uni.showModal({
|
title: '浏览视频',
|
content: '即将跳转到视频页面',
|
success: (res) => {
|
if (res.confirm) {
|
// 模拟观看视频完成，增加抽奖次数
|
// 这里可以添加跳转到具体视频页面的逻辑
|
uni.navigateTo({
|
url: '/pages/tabbar/index/home'
|
});
|
}
|
}
|
});
|
},
|
// 浏览商品
|
browseProduct() {
|
// 跳转到商品页面
|
this.closeMoreChancesModal();
|
uni.showModal({
|
title: '浏览商品',
|
content: '即将跳转到商品广场',
|
success: (res) => {
|
if (res.confirm) {
|
// 这里可以添加跳转到具体商品页面的逻辑
|
uni.navigateTo({
|
url: '/pages/commodity-square/commoditySquare'
|
});
|
}
|
}
|
});
|
},
|
// 去购物
|
goShopping() {
|
this.closeMoreChancesModal();
|
uni.showModal({
|
title: '去购物',
|
content: '即将跳转到购物车',
|
success: (res) => {
|
if (res.confirm) {
|
// 或者跳转到购物车
|
uni.navigateTo({
|
url: '/pages/cusbar/cart/cartList'
|
});
|
}
|
}
|
});
|
},
|
async onClick() {
|
this.couponId = ''
|
// 检查剩余次数
|
if (this.remainingTimes <= 0) {
|
uni.showToast({
|
title: '抽奖次数已用完',
|
icon: 'none'
|
})
|
return
|
}
|
const prizeDraw = await prize(this.activityId);
|
console.log('---------------->', prizeDraw)
|
let winId = 'notWIn'
|
if (prizeDraw.data.code == 200) {
|
winId = prizeDraw.data.data.id
|
}
|
const findInfo = this.prizeList.findIndex(item => {
|
return item.id == winId
|
})
|
// 减少剩余次数
|
this.remainingTimes--
|
|
// 奖品的索引
|
this.$refs.dialer.run(findInfo)
|
if (prizeDraw.data.data) {
|
this.couponId = prizeDraw.data.data.couponId
|
}
|
|
await this.getGrantRecord(this.activityId)
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
@import url(@/pages/prize/PrizeDetail/prizeBg.css);
|
|
.layout {
|
width: 750rpx;
|
min-height: 100vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
align-items: center;
|
padding: 20rpx;
|
position: relative;
|
overflow: hidden;
|
/* 确保背景显示 */
|
background-attachment: fixed;
|
z-index: 1;
|
background-image: var(--prize-bg);
|
}
|
|
/* 礼盒雨背景装饰 */
|
.layout::before {
|
content: '';
|
position: absolute;
|
top: -50%;
|
left: -50%;
|
width: 200%;
|
height: 200%;
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
animation: background-float 8s ease-in-out infinite alternate;
|
pointer-events: none;
|
z-index: 2;
|
}
|
|
/* 礼盒动画容器 */
|
.layout::after {
|
content: '';
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-image:
|
/* 礼盒1 */
|
radial-gradient(ellipse 12rpx 15rpx at 10% -50%, #4834d4 0%, #4834d4 40%, transparent 41%),
|
/* 礼盒2 */
|
radial-gradient(ellipse 10rpx 13rpx at 85% -60%, #eb4d4b 0%, #eb4d4b 40%, transparent 41%),
|
/* 礼盒3 */
|
radial-gradient(ellipse 14rpx 16rpx at 25% -45%, #6ab04c 0%, #6ab04c 40%, transparent 41%),
|
/* 礼盒4 */
|
radial-gradient(ellipse 11rpx 14rpx at 70% -55%, #f0932b 0%, #f0932b 40%, transparent 41%),
|
/* 礼盒5 */
|
radial-gradient(ellipse 13rpx 15rpx at 40% -70%, #e056fd 0%, #e056fd 40%, transparent 41%),
|
/* 礼盒6 */
|
radial-gradient(ellipse 9rpx 12rpx at 90% -40%, #30336b 0%, #30336b 40%, transparent 41%),
|
/* 礼盒7 */
|
radial-gradient(ellipse 15rpx 17rpx at 15% -80%, #fd79a8 0%, #fd79a8 40%, transparent 41%),
|
/* 礼盒8 */
|
radial-gradient(ellipse 12rpx 14rpx at 60% -65%, #0abde3 0%, #0abde3 40%, transparent 41%),
|
/* 礼盒9 */
|
radial-gradient(ellipse 10rpx 13rpx at 5% -55%, #ff6348 0%, #ff6348 40%, transparent 41%),
|
/* 礼盒10 */
|
radial-gradient(ellipse 13rpx 16rpx at 95% -75%, #2ed573 0%, #2ed573 40%, transparent 41%),
|
/* 礼盒11 */
|
radial-gradient(ellipse 11rpx 15rpx at 30% -50%, #ffa502 0%, #ffa502 40%, transparent 41%),
|
/* 礼盒12 */
|
radial-gradient(ellipse 14rpx 17rpx at 75% -85%, #ff4757 0%, #ff4757 40%, transparent 41%),
|
/* 礼盒13 */
|
radial-gradient(ellipse 9rpx 12rpx at 8% -45%, #3742fa 0%, #3742fa 40%, transparent 41%),
|
/* 礼盒14 */
|
radial-gradient(ellipse 12rpx 15rpx at 55% -60%, #2f3542 0%, #2f3542 40%, transparent 41%),
|
/* 礼盒15 */
|
radial-gradient(ellipse 13rpx 14rpx at 88% -50%, #ff3838 0%, #ff3838 40%, transparent 41%);
|
animation: giftbox-rain 6s linear infinite;
|
pointer-events: none;
|
z-index: 3;
|
opacity: 0.8;
|
}
|
|
@keyframes background-float {
|
0% {
|
transform: translate(-10%, -10%) rotate(0deg);
|
}
|
|
100% {
|
transform: translate(10%, 10%) rotate(180deg);
|
}
|
}
|
|
/* 礼盒雨动画 */
|
@keyframes giftbox-rain {
|
0% {
|
transform: translateY(-100vh) rotate(0deg);
|
opacity: 0;
|
}
|
|
10% {
|
opacity: 1;
|
}
|
|
90% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(100vh) rotate(360deg);
|
opacity: 0;
|
}
|
}
|
|
/* 礼盒容器 */
|
.giftboxes-container {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
pointer-events: none;
|
z-index: 998;
|
overflow: hidden;
|
}
|
|
/* 礼盒元素 */
|
.giftbox {
|
position: absolute;
|
font-size: 45rpx;
|
animation-timing-function: linear;
|
animation-iteration-count: infinite;
|
filter: drop-shadow(0 4rpx 8rpx rgba(72, 52, 212, 0.3));
|
/* 初始状态完全隐藏 */
|
opacity: 0;
|
transform: translateY(-200rpx);
|
}
|
|
/* 不同礼盒的位置和动画 */
|
.giftbox-1 {
|
left: 10%;
|
animation: giftbox-fall-1 8s linear infinite;
|
animation-delay: 0s;
|
}
|
|
.giftbox-2 {
|
left: 25%;
|
animation: giftbox-fall-2 10s linear infinite;
|
animation-delay: 2s;
|
}
|
|
.giftbox-3 {
|
left: 45%;
|
animation: giftbox-fall-3 7s linear infinite;
|
animation-delay: 1s;
|
}
|
|
.giftbox-4 {
|
left: 65%;
|
animation: giftbox-fall-4 9s linear infinite;
|
animation-delay: 3s;
|
}
|
|
.giftbox-5 {
|
left: 80%;
|
animation: giftbox-fall-5 11s linear infinite;
|
animation-delay: 4s;
|
}
|
|
.giftbox-6 {
|
left: 35%;
|
animation: giftbox-fall-6 6s linear infinite;
|
animation-delay: 1.5s;
|
}
|
|
.giftbox-7 {
|
left: 55%;
|
animation: giftbox-fall-7 12s linear infinite;
|
animation-delay: 5s;
|
}
|
|
.giftbox-8 {
|
left: 75%;
|
animation: giftbox-fall-8 8.5s linear infinite;
|
animation-delay: 2.5s;
|
}
|
|
.giftbox-9 {
|
left: 15%;
|
animation: giftbox-fall-9 9.5s linear infinite;
|
animation-delay: 3.2s;
|
}
|
|
.giftbox-10 {
|
left: 85%;
|
animation: giftbox-fall-10 7.8s linear infinite;
|
animation-delay: 4.1s;
|
}
|
|
.giftbox-11 {
|
left: 30%;
|
animation: giftbox-fall-11 10.2s linear infinite;
|
animation-delay: 1.8s;
|
}
|
|
.giftbox-12 {
|
left: 70%;
|
animation: giftbox-fall-12 8.8s linear infinite;
|
animation-delay: 5.5s;
|
}
|
|
.giftbox-13 {
|
left: 5%;
|
animation: giftbox-fall-13 11.5s linear infinite;
|
animation-delay: 2.8s;
|
}
|
|
.giftbox-14 {
|
left: 50%;
|
animation: giftbox-fall-14 9.2s linear infinite;
|
animation-delay: 6.2s;
|
}
|
|
.giftbox-15 {
|
left: 90%;
|
animation: giftbox-fall-15 7.5s linear infinite;
|
animation-delay: 4.8s;
|
}
|
|
/* 各个礼盒的下落动画 */
|
@keyframes giftbox-fall-1 {
|
0% {
|
transform: translateY(-250rpx) rotate(0deg);
|
opacity: 0;
|
}
|
|
20% {
|
transform: translateY(-100rpx) rotate(45deg);
|
opacity: 0;
|
}
|
|
30% {
|
transform: translateY(-20rpx) rotate(90deg);
|
opacity: 1;
|
}
|
|
50% {
|
transform: translateY(50vh) rotate(180deg) translateX(20rpx);
|
}
|
|
90% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(120vh) rotate(360deg) translateX(-30rpx);
|
opacity: 0;
|
}
|
}
|
|
@keyframes giftbox-fall-2 {
|
0% {
|
transform: translateY(-230rpx) rotate(45deg);
|
opacity: 0;
|
}
|
|
18% {
|
transform: translateY(-80rpx) rotate(90deg);
|
opacity: 0;
|
}
|
|
28% {
|
transform: translateY(-10rpx) rotate(135deg);
|
opacity: 1;
|
}
|
|
40% {
|
transform: translateY(40vh) rotate(225deg) translateX(-25rpx);
|
}
|
|
85% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(110vh) rotate(405deg) translateX(15rpx);
|
opacity: 0;
|
}
|
}
|
|
@keyframes giftbox-fall-3 {
|
0% {
|
transform: translateY(-270rpx) rotate(-30deg);
|
opacity: 0;
|
}
|
|
15% {
|
transform: translateY(-120rpx) rotate(30deg);
|
opacity: 0;
|
}
|
|
25% {
|
transform: translateY(-30rpx) rotate(80deg);
|
opacity: 1;
|
}
|
|
60% {
|
transform: translateY(60vh) rotate(150deg) translateX(35rpx);
|
}
|
|
88% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(125vh) rotate(330deg) translateX(-20rpx);
|
opacity: 0;
|
}
|
}
|
|
@keyframes giftbox-fall-4 {
|
0% {
|
transform: translateY(-240rpx) rotate(60deg);
|
opacity: 0;
|
}
|
|
12% {
|
transform: translateY(-90rpx) rotate(120deg);
|
opacity: 0;
|
}
|
|
22% {
|
transform: translateY(-15rpx) rotate(180deg);
|
opacity: 1;
|
}
|
|
45% {
|
transform: translateY(45vh) rotate(240deg) translateX(-40rpx);
|
}
|
|
92% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(115vh) rotate(420deg) translateX(25rpx);
|
opacity: 0;
|
}
|
}
|
|
@keyframes giftbox-fall-5 {
|
0% {
|
transform: translateY(-260rpx) rotate(-45deg);
|
opacity: 0;
|
}
|
|
10% {
|
transform: translateY(-110rpx) rotate(-10deg);
|
opacity: 0;
|
}
|
|
20% {
|
transform: translateY(-25rpx) rotate(45deg);
|
opacity: 1;
|
}
|
|
55% {
|
transform: translateY(55vh) rotate(135deg) translateX(30rpx);
|
}
|
|
95% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(130vh) rotate(315deg) translateX(-35rpx);
|
opacity: 0;
|
}
|
}
|
|
@keyframes giftbox-fall-6 {
|
0% {
|
transform: translateY(-220rpx) rotate(90deg);
|
opacity: 0;
|
}
|
|
25% {
|
transform: translateY(-70rpx) rotate(150deg);
|
opacity: 0;
|
}
|
|
35% {
|
transform: translateY(-5rpx) rotate(210deg);
|
opacity: 1;
|
}
|
|
45% {
|
transform: translateY(35vh) rotate(270deg) translateX(-15rpx);
|
}
|
|
80% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(105vh) rotate(450deg) translateX(40rpx);
|
opacity: 0;
|
}
|
}
|
|
@keyframes giftbox-fall-7 {
|
0% {
|
transform: translateY(-280rpx) rotate(-60deg);
|
opacity: 0;
|
}
|
|
8% {
|
transform: translateY(-130rpx) rotate(-20deg);
|
opacity: 0;
|
}
|
|
16% {
|
transform: translateY(-40rpx) rotate(20deg);
|
opacity: 1;
|
}
|
|
65% {
|
transform: translateY(65vh) rotate(120deg) translateX(45rpx);
|
}
|
|
94% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(135vh) rotate(300deg) translateX(-25rpx);
|
opacity: 0;
|
}
|
}
|
|
@keyframes giftbox-fall-8 {
|
0% {
|
transform: translateY(-235rpx) rotate(30deg);
|
opacity: 0;
|
}
|
|
16% {
|
transform: translateY(-85rpx) rotate(90deg);
|
opacity: 0;
|
}
|
|
26% {
|
transform: translateY(-8rpx) rotate(150deg);
|
opacity: 1;
|
}
|
|
42% {
|
transform: translateY(42vh) rotate(210deg) translateX(-30rpx);
|
}
|
|
82% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(118vh) rotate(390deg) translateX(35rpx);
|
opacity: 0;
|
}
|
}
|
|
@keyframes giftbox-fall-9 {
|
0% {
|
transform: translateY(-250rpx) rotate(-15deg);
|
opacity: 0;
|
}
|
|
18% {
|
transform: translateY(-95rpx) rotate(60deg);
|
opacity: 0;
|
}
|
|
28% {
|
transform: translateY(-15rpx) rotate(120deg);
|
opacity: 1;
|
}
|
|
55% {
|
transform: translateY(48vh) rotate(200deg) translateX(25rpx);
|
}
|
|
88% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(122vh) rotate(380deg) translateX(-40rpx);
|
opacity: 0;
|
}
|
}
|
|
@keyframes giftbox-fall-10 {
|
0% {
|
transform: translateY(-265rpx) rotate(75deg);
|
opacity: 0;
|
}
|
|
20% {
|
transform: translateY(-105rpx) rotate(135deg);
|
opacity: 0;
|
}
|
|
30% {
|
transform: translateY(-22rpx) rotate(195deg);
|
opacity: 1;
|
}
|
|
50% {
|
transform: translateY(52vh) rotate(270deg) translateX(-35rpx);
|
}
|
|
85% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(115vh) rotate(450deg) translateX(30rpx);
|
opacity: 0;
|
}
|
}
|
|
@keyframes giftbox-fall-11 {
|
0% {
|
transform: translateY(-245rpx) rotate(-45deg);
|
opacity: 0;
|
}
|
|
15% {
|
transform: translateY(-88rpx) rotate(15deg);
|
opacity: 0;
|
}
|
|
25% {
|
transform: translateY(-12rpx) rotate(75deg);
|
opacity: 1;
|
}
|
|
45% {
|
transform: translateY(45vh) rotate(165deg) translateX(38rpx);
|
}
|
|
90% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(128vh) rotate(345deg) translateX(-28rpx);
|
opacity: 0;
|
}
|
}
|
|
@keyframes giftbox-fall-12 {
|
0% {
|
transform: translateY(-275rpx) rotate(45deg);
|
opacity: 0;
|
}
|
|
22% {
|
transform: translateY(-112rpx) rotate(105deg);
|
opacity: 0;
|
}
|
|
32% {
|
transform: translateY(-28rpx) rotate(165deg);
|
opacity: 1;
|
}
|
|
48% {
|
transform: translateY(46vh) rotate(240deg) translateX(-42rpx);
|
}
|
|
86% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(120vh) rotate(420deg) translateX(32rpx);
|
opacity: 0;
|
}
|
}
|
|
@keyframes giftbox-fall-13 {
|
0% {
|
transform: translateY(-255rpx) rotate(-30deg);
|
opacity: 0;
|
}
|
|
14% {
|
transform: translateY(-98rpx) rotate(30deg);
|
opacity: 0;
|
}
|
|
24% {
|
transform: translateY(-18rpx) rotate(90deg);
|
opacity: 1;
|
}
|
|
60% {
|
transform: translateY(58vh) rotate(180deg) translateX(45rpx);
|
}
|
|
92% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(132vh) rotate(360deg) translateX(-22rpx);
|
opacity: 0;
|
}
|
}
|
|
@keyframes giftbox-fall-14 {
|
0% {
|
transform: translateY(-240rpx) rotate(60deg);
|
opacity: 0;
|
}
|
|
19% {
|
transform: translateY(-92rpx) rotate(120deg);
|
opacity: 0;
|
}
|
|
29% {
|
transform: translateY(-16rpx) rotate(180deg);
|
opacity: 1;
|
}
|
|
52% {
|
transform: translateY(50vh) rotate(255deg) translateX(-20rpx);
|
}
|
|
84% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(125vh) rotate(435deg) translateX(38rpx);
|
opacity: 0;
|
}
|
}
|
|
@keyframes giftbox-fall-15 {
|
0% {
|
transform: translateY(-260rpx) rotate(-60deg);
|
opacity: 0;
|
}
|
|
17% {
|
transform: translateY(-102rpx) rotate(0deg);
|
opacity: 0;
|
}
|
|
27% {
|
transform: translateY(-20rpx) rotate(60deg);
|
opacity: 1;
|
}
|
|
58% {
|
transform: translateY(54vh) rotate(150deg) translateX(33rpx);
|
}
|
|
87% {
|
opacity: 1;
|
}
|
|
100% {
|
transform: translateY(119vh) rotate(330deg) translateX(-45rpx);
|
opacity: 0;
|
}
|
}
|
|
/* 确保所有子元素在背景装饰之上 */
|
.layout>* {
|
position: relative;
|
z-index: 1;
|
}
|
|
/* 剩余抽奖次数 */
|
.remaining-times {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-bottom: 40rpx;
|
background: linear-gradient(45deg, #ff6b6b, #feca57);
|
padding: 20rpx 40rpx;
|
border-radius: 50rpx;
|
box-shadow: 0 4rpx 20rpx rgba(255, 107, 107, 0.3);
|
position: relative;
|
z-index: 10;
|
}
|
|
.times-label {
|
color: white;
|
font-size: 28rpx;
|
font-weight: 500;
|
margin-right: 10rpx;
|
}
|
|
.times-count {
|
color: white;
|
font-size: 32rpx;
|
font-weight: bold;
|
}
|
|
/* 转盘抽奖 */
|
.l-dialer {
|
position: relative;
|
z-index: 10;
|
}
|
|
/* 右上角活动规则按钮 */
|
.floating-rules-btn {
|
position: fixed;
|
top: 140rpx;
|
right: 0;
|
width: auto;
|
height: 60rpx;
|
background: linear-gradient(45deg, #ff6b6b, #ff9ff3);
|
border-radius: 30rpx 0 0 30rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 0 20rpx;
|
box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.4);
|
z-index: 9999;
|
transition: all 0.3s ease;
|
}
|
|
.floating-rules-btn::before {
|
content: '';
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
border-radius: 30rpx 0 0 30rpx;
|
background: linear-gradient(45deg, #ff6b6b, #ff9ff3);
|
opacity: 0.8;
|
animation: pulse-rules 2s infinite;
|
}
|
|
@keyframes pulse-rules {
|
0% {
|
transform: scale(1);
|
opacity: 0.8;
|
}
|
|
50% {
|
transform: scale(1.05);
|
opacity: 0.4;
|
}
|
|
100% {
|
transform: scale(1);
|
opacity: 0.8;
|
}
|
}
|
|
.floating-rules-btn:active {
|
transform: scale(0.95);
|
box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.5);
|
}
|
|
.rules-btn-text {
|
color: white;
|
font-size: 24rpx;
|
font-weight: bold;
|
z-index: 1;
|
position: relative;
|
text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
|
}
|
|
/* 右上角悬浮获取更多机会按钮 */
|
.floating-more-btn {
|
position: fixed;
|
top: 30rpx;
|
right: 30rpx;
|
width: 100rpx;
|
height: 100rpx;
|
background: linear-gradient(45deg, #ff6b6b, #feca57);
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.4);
|
z-index: 9999;
|
transition: all 0.3s ease;
|
}
|
|
.floating-more-btn::before {
|
content: '';
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
background: linear-gradient(45deg, #ff6b6b, #feca57);
|
opacity: 0.8;
|
animation: pulse 2s infinite;
|
}
|
|
@keyframes pulse {
|
0% {
|
transform: scale(1);
|
opacity: 0.8;
|
}
|
|
50% {
|
transform: scale(1.1);
|
opacity: 0.4;
|
}
|
|
100% {
|
transform: scale(1);
|
opacity: 0.8;
|
}
|
}
|
|
.floating-more-btn:active {
|
transform: scale(0.95);
|
box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.5);
|
}
|
|
.floating-btn-icon {
|
font-size: 36rpx;
|
color: white;
|
z-index: 1;
|
position: relative;
|
filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
|
}
|
|
/* 奖品展示 */
|
.prize-section {
|
width: 100%;
|
margin-top: 40rpx;
|
background: white;
|
border-radius: 20rpx;
|
padding: 30rpx;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
position: relative;
|
z-index: 10;
|
}
|
|
.section-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
text-align: center;
|
margin-bottom: 20rpx;
|
}
|
|
.prize-grid {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
gap: 20rpx;
|
}
|
|
.prize-item {
|
width: 30%;
|
margin-bottom: 20rpx;
|
text-align: center;
|
background: #f8f9ff;
|
border-radius: 15rpx;
|
padding: 20rpx;
|
box-sizing: border-box;
|
}
|
|
.prize-img {
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 10rpx;
|
}
|
|
.prize-name {
|
display: block;
|
font-size: 22rpx;
|
color: #666;
|
margin-top: 8rpx;
|
white-space: normal;
|
word-break: break-all;
|
line-height: 1.2;
|
}
|
|
/* 最近中奖信息 */
|
.winners-section {
|
width: 100%;
|
margin-top: 40rpx;
|
background: white;
|
border-radius: 20rpx;
|
padding: 30rpx;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
position: relative;
|
z-index: 10;
|
}
|
|
.winners-list {
|
max-height: 320rpx;
|
overflow-y: scroll;
|
-webkit-overflow-scrolling: touch;
|
}
|
|
.winners-list::-webkit-scrollbar {
|
width: 4rpx;
|
}
|
|
.winners-list::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
border-radius: 2rpx;
|
}
|
|
.winners-list::-webkit-scrollbar-thumb {
|
background: #ff6b6b;
|
border-radius: 2rpx;
|
}
|
|
.winners-list::-webkit-scrollbar-thumb:hover {
|
background: #e55555;
|
}
|
|
.winner-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20rpx 0;
|
height: 80rpx;
|
min-height: 80rpx;
|
border-bottom: 1px solid #f0f0f0;
|
box-sizing: border-box;
|
}
|
|
.winner-item:last-child {
|
border-bottom: none;
|
}
|
|
.winner-name {
|
font-size: 26rpx;
|
color: #333;
|
font-weight: 500;
|
flex: 1;
|
}
|
|
.winner-prize {
|
font-size: 26rpx;
|
color: #ff6b6b;
|
font-weight: bold;
|
flex: 2;
|
text-align: center;
|
}
|
|
.winner-time {
|
font-size: 22rpx;
|
color: #999;
|
flex: 1;
|
text-align: right;
|
}
|
|
/* 中奖弹窗样式 */
|
.prize-modal {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.6);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 9999;
|
}
|
|
.prize-modal-content {
|
background: white;
|
border-radius: 30rpx;
|
width: 80%;
|
max-width: 500rpx;
|
padding: 40rpx;
|
text-align: center;
|
position: relative;
|
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
|
}
|
|
.modal-close {
|
position: absolute;
|
top: 20rpx;
|
right: 30rpx;
|
font-size: 40rpx;
|
color: #999;
|
font-weight: bold;
|
width: 50rpx;
|
height: 50rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.congratulations-text {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #ff6b6b;
|
margin-bottom: 30rpx;
|
}
|
|
.sorry-text {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #666;
|
margin-bottom: 30rpx;
|
}
|
|
.prize-display {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin: 30rpx 0;
|
}
|
|
.modal-prize-img {
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 15rpx;
|
margin-bottom: 20rpx;
|
border: 3rpx solid #ff6b6b;
|
}
|
|
.modal-prize-name {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.prize-result-text {
|
font-size: 28rpx;
|
color: #666;
|
margin: 20rpx 0 30rpx;
|
line-height: 1.4;
|
}
|
|
.modal-buttons {
|
margin-top: 30rpx;
|
}
|
|
.confirm-btn {
|
background: linear-gradient(45deg, #ff6b6b, #feca57);
|
color: white;
|
font-size: 30rpx;
|
border: none;
|
border-radius: 50rpx;
|
padding: 20rpx 60rpx;
|
font-weight: bold;
|
}
|
|
.confirm-btn::after {
|
border: none;
|
}
|
|
/* 获取更多机会弹窗样式 */
|
.more-chances-modal {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.6);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 9999;
|
}
|
|
.more-chances-modal-content {
|
background: white;
|
border-radius: 30rpx;
|
width: 90%;
|
max-width: 600rpx;
|
max-height: 80vh;
|
padding: 40rpx;
|
position: relative;
|
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
|
overflow-y: auto;
|
}
|
|
.modal-title {
|
text-align: center;
|
margin-bottom: 40rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.title-icon {
|
font-size: 50rpx;
|
margin-bottom: 15rpx;
|
display: block;
|
}
|
|
.title-text {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.chances-grid {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
gap: 20rpx;
|
margin-bottom: 30rpx;
|
}
|
|
.chances-grid button {
|
padding: 25rpx 15rpx;
|
margin: 0;
|
line-height: normal;
|
border: none;
|
}
|
|
.chances-grid button::after {
|
border: none;
|
}
|
|
.chance-item {
|
width: 45%;
|
background: linear-gradient(45deg, #ff6b6b, #feca57);
|
border-radius: 15rpx;
|
padding: 25rpx 15rpx;
|
text-align: center;
|
position: relative;
|
overflow: hidden;
|
transition: all 0.3s ease;
|
box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.3);
|
}
|
|
.chance-item::before {
|
content: '';
|
position: absolute;
|
top: -50%;
|
left: -50%;
|
width: 200%;
|
height: 200%;
|
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
transform: rotate(45deg);
|
transition: all 0.6s ease;
|
opacity: 0;
|
}
|
|
.chance-item:active::before {
|
opacity: 1;
|
transform: translateX(100%) translateY(100%) rotate(45deg);
|
}
|
|
.chance-item:active {
|
transform: scale(0.98);
|
box-shadow: 0 2rpx 10rpx rgba(255, 107, 107, 0.4);
|
}
|
|
.chance-item-large {
|
width: 100%;
|
background: linear-gradient(45deg, #feca57, #ff9ff3);
|
box-shadow: 0 4rpx 20rpx rgba(254, 202, 87, 0.3);
|
}
|
|
.chance-item-large:active {
|
box-shadow: 0 2rpx 15rpx rgba(254, 202, 87, 0.4);
|
}
|
|
.chance-icon {
|
font-size: 40rpx;
|
margin-bottom: 10rpx;
|
display: block;
|
filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
|
}
|
|
.chance-title {
|
display: block;
|
color: white;
|
font-size: 28rpx;
|
font-weight: bold;
|
margin-bottom: 5rpx;
|
text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
|
}
|
|
.chance-subtitle {
|
display: block;
|
color: rgba(255, 255, 255, 0.95);
|
font-size: 22rpx;
|
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.modal-tip {
|
text-align: center;
|
padding: 20rpx;
|
background: linear-gradient(45deg, #f8f9ff, #e3f2fd);
|
border-radius: 15rpx;
|
border: 2rpx dashed #667eea;
|
}
|
|
.tip-text {
|
color: #667eea;
|
font-size: 26rpx;
|
font-weight: 500;
|
}
|
|
/* 活动规则弹窗样式 */
|
.rules-modal {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.6);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 9999;
|
}
|
|
.rules-modal-content {
|
background: white;
|
border-radius: 30rpx;
|
width: 95%;
|
max-width: 700rpx;
|
max-height: 80vh;
|
padding: 40rpx;
|
position: relative;
|
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
|
display: flex;
|
flex-direction: column;
|
}
|
|
.rules-content {
|
max-height: 60vh;
|
overflow-y: auto;
|
-webkit-overflow-scrolling: touch;
|
flex: 1;
|
}
|
|
.rules-content::-webkit-scrollbar {
|
width: 4rpx;
|
}
|
|
.rules-content::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
border-radius: 2rpx;
|
}
|
|
.rules-content::-webkit-scrollbar-thumb {
|
background: #667eea;
|
border-radius: 2rpx;
|
}
|
|
.rules-content::-webkit-scrollbar-thumb:hover {
|
background: #5a67d8;
|
}
|
|
.rule-item {
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 25rpx;
|
padding-bottom: 20rpx;
|
border-bottom: 1px solid #f0f0f0;
|
line-height: 1.6;
|
}
|
|
.rule-item:last-child {
|
border-bottom: none;
|
margin-bottom: 0;
|
}
|
|
.rule-title {
|
color: #333;
|
font-size: 28rpx;
|
font-weight: bold;
|
margin-bottom: 10rpx;
|
color: #ff6b6b;
|
}
|
|
.rule-text {
|
color: #333;
|
font-size: 24rpx;
|
line-height: 1.8;
|
flex: 1;
|
text-align: left;
|
white-space: pre-line;
|
word-break: break-word;
|
}
|
</style>
|
