From 2eb21bfe2f40630a46e675211f23b5f240e395a4 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期五, 12 九月 2025 15:01:42 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/user_action' into send_coupon
---
pages/prize/PrizeDetail/PrizeDetail.vue | 1351 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,334 insertions(+), 17 deletions(-)
diff --git a/pages/prize/PrizeDetail/PrizeDetail.vue b/pages/prize/PrizeDetail/PrizeDetail.vue
index a3db2e3..6e2bba5 100644
--- a/pages/prize/PrizeDetail/PrizeDetail.vue
+++ b/pages/prize/PrizeDetail/PrizeDetail.vue
@@ -1,5 +1,22 @@
<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>
@@ -13,7 +30,7 @@
<view class="prize-section">
<view class="section-title">濂栧搧姹�</view>
<view class="prize-grid">
- <view class="prize-item" v-for="(prize, index) in prizeList" :key="prize.id">
+ <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>
@@ -23,8 +40,7 @@
<!-- 鏈�杩戜腑濂栦俊鎭� -->
<view class="winners-section">
<view class="section-title">鏈�杩戜腑濂�</view>
- <scroll-view scroll-y="true" class="winners-list" :scroll-top="scrollTop"
- >
+ <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>
@@ -50,16 +66,81 @@
<text class="modal-prize-name">{{ currentPrize.name }}</text>
</view>
- <view class="prize-result-text" v-if="currentPrize.id !== 'thanks'">
+ <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">
+ <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>
@@ -81,7 +162,43 @@
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.鍙嶄綔寮婃潯娆撅細娲诲姩閲囩敤鎶�鏈墜娈佃繘琛岄鎺х洃娴嬶紝鍖呮嫭浣嗕笉闄愪簬锛氳澶嘔D鍘婚噸銆佸垎浜涓洪獙璇併�佸湴鐞嗕綅缃牳楠岀瓑锛屼互纭繚娲诲姩鐨勫叕骞虫�с�俓n銆�銆�3.娲诲姩鍙樻洿锛氬閬囦笉鍙姉鍔涘洜绱犳垨鎶�鏈棶棰樺鑷存椿鍔ㄦ棤娉曟甯歌繘琛岋紝銆愭偍鐨勫搧鐗屽悕绉般�戞湁鏉冩殏鍋溿�佸欢闀挎垨缁堟娲诲姩锛屽苟瑙嗘儏鍐靛娲诲姩瑙勫垯杩涜鍙樻洿鎴栬皟鏁达紝鐩稿叧鍙樺姩灏嗘彁鍓嶄簣浠ュ叕鍛娿�俓n銆�銆�4.涓汉淇℃伅淇濇姢锛氭偍鐨勪釜浜轰俊鎭粎鐢ㄤ簬鏈娲诲姩濂栧搧鍙戞斁鍙婂悗缁湇鍔★紝鎴戜滑灏嗕弗鏍间繚瀵嗭紝涓嶄細娉勯湶缁欎换浣曠涓夋柟銆俓n銆�銆�5.鍏嶈矗澹版槑锛氬浜庡洜缃戠粶銆侀�氫俊绛夊師鍥犲鑷寸敤鎴锋湭鑳藉弬涓庢椿鍔ㄦ垨棰嗗彇濂栧搧鐨勬儏鍐碉紝銆愭偍鐨勫搧鐗屽悕绉般�戜笉鎵挎媴浠讳綍璐ｄ换銆俓n銆�銆�6.娲诲姩瑙ｉ噴鏉冿細鏈椿鍔ㄦ渶缁堣В閲婃潈褰掋�愭偍鐨勫搧鐗屽悕绉般�戞墍鏈夈��'
+ }
+ ],
// 鑷姩婊氬姩鎺у埗
scrollTimer: null,
scrollTop: 0,
@@ -89,7 +206,13 @@
// 鏈�杩戜腑濂栦俊鎭�
originalWinners: [],
// 濂栧搧鍒楄〃锛�
- prizeList: []
+ prizeList: [],
+ prizeDraws: [],
+ // 鍒嗕韩鏈嬪弸鍦堝皾璇曟爣璁�
+ shareTimelineAttempt: false,
+ activityCover: '',
+ activityName: '',
+ couponId: ''
};
},
computed: {
@@ -99,8 +222,12 @@
}
},
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 {
@@ -109,18 +236,47 @@
img: item.prizeImg
}
})
+ this.prizeDraws = this.prizeList;
+ this.prizeList = [...this.prizeList]
this.prizeList.push({
id: 'notWIn',
- name: "璋㈣阿鍙備笌"
+ name: "鍐嶆潵涓�娆�"
})
await this.getUnmber(this.activityId)
await this.getGrantRecord(this.activityId)
},
- onShareTimeline(e){
- console.log('------------------>',e)
- },
+ // 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()
@@ -128,7 +284,25 @@
methods: {
async getUnmber(id) {
const prizeNums = await prizeNum(id);
- this.remainingTimes = prizeNums.data.data
+ 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);
@@ -165,7 +339,114 @@
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({
@@ -175,6 +456,7 @@
return
}
const prizeDraw = await prize(this.activityId);
+ console.log('---------------->', prizeDraw)
let winId = 'notWIn'
if (prizeDraw.data.code == 200) {
winId = prizeDraw.data.data.id
@@ -187,21 +469,694 @@
// 濂栧搧鐨勭储寮�
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: 100%;
+ width: 750rpx;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
- background: #f5f5f5;
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;
}
/* 鍓╀綑鎶藉娆℃暟 */
@@ -214,6 +1169,8 @@
padding: 20rpx 40rpx;
border-radius: 50rpx;
box-shadow: 0 4rpx 20rpx rgba(255, 107, 107, 0.3);
+ position: relative;
+ z-index: 10;
}
.times-label {
@@ -229,6 +1186,130 @@
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%;
@@ -237,6 +1318,8 @@
border-radius: 20rpx;
padding: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+ position: relative;
+ z-index: 10;
}
.section-title {
@@ -251,21 +1334,22 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
+ gap: 20rpx;
}
.prize-item {
- width: 22%;
+ width: 30%;
margin-bottom: 20rpx;
text-align: center;
background: #f8f9ff;
border-radius: 15rpx;
- padding: 15rpx;
+ padding: 20rpx;
box-sizing: border-box;
}
.prize-img {
- width: 60rpx;
- height: 60rpx;
+ width: 120rpx;
+ height: 120rpx;
border-radius: 10rpx;
}
@@ -287,6 +1371,8 @@
border-radius: 20rpx;
padding: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+ position: relative;
+ z-index: 10;
}
.winners-list {
@@ -448,4 +1534,235 @@
.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>
\ No newline at end of file
--
Gitblit v1.8.0