From b1fd37e9f5ba5d3d7e35300ee97dff90a4065619 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期一, 27 十月 2025 17:30:07 +0800
Subject: [PATCH] 我的页面
---
pages/prize/PrizeDetail/PrizeDetail.vue | 541 +++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 494 insertions(+), 47 deletions(-)
diff --git a/pages/prize/PrizeDetail/PrizeDetail.vue b/pages/prize/PrizeDetail/PrizeDetail.vue
index 86f8534..0888cf6 100644
--- a/pages/prize/PrizeDetail/PrizeDetail.vue
+++ b/pages/prize/PrizeDetail/PrizeDetail.vue
@@ -1,5 +1,5 @@
<template>
- <view class="layout" >
+ <view class="layout">
<!-- 绀肩洅闆ㄨ楗板厓绱� -->
<view class="giftboxes-container">
<view class="giftbox" v-for="n in 15" :key="n" :class="'giftbox-' + n">
@@ -7,9 +7,17 @@
</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 class="floating-btn-content">
+ <text class="floating-btn-icon">馃巵</text>
+ <text class="floating-btn-text">鏇村鏈轰細</text>
+ </view>
</view>
<!-- 鍓╀綑鎶藉娆℃暟 -->
@@ -49,14 +57,14 @@
<view class="prize-modal-content" @tap.stop>
<view class="modal-close" @tap="closePrizeModal">脳</view>
- <view class="congratulations-text" v-if="currentPrize.id !== 'thanks'">
+ <view class="congratulations-text" v-if="currentPrize.id !== 'notWIn'">
馃帀 鎭枩鎮� 馃帀
</view>
<view class="sorry-text" v-else>
馃様 寰堥仐鎲� 馃様
</view>
- <view class="prize-display">
+ <view class="prize-display" v-if="currentPrize.id !== 'notWIn'">
<image :src="currentPrize.img" class="modal-prize-img" />
<text class="modal-prize-name">{{ currentPrize.name }}</text>
</view>
@@ -69,7 +77,7 @@
</view>
<view class="modal-buttons" v-if="currentPrize.id !== 'notWIn'">
- <button class="confirm-btn" @tap="useItNow">鍘昏喘鐗�</button>
+ <button class="confirm-btn" @tap="useItNow">鍘诲厬鎹�</button>
</view>
<view class="modal-buttons" v-else>
<button class="confirm-btn" @tap="closePrizeModal">纭畾</button>
@@ -91,9 +99,8 @@
<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-item" @tap="shareToTimeline">
<view class="chance-icon">馃寪</view>
<text class="chance-title">鍒嗕韩鏈嬪弸鍦�</text>
<text class="chance-subtitle">+1娆℃満浼�</text>
@@ -101,17 +108,26 @@
<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="prize-rules-section" v-if="prizeAddRule.length > 0">
+ <view class="section-title">鑾峰彇鏈轰細瑙勫垯</view>
+ <view class="rules-list">
+ <view class="rule-item" v-for="(rule, index) in prizeAddRule" :key="rule.id">
+ <text class="rule-name">{{ rule.ruleName }}</text>
+ <text class="rule-value" v-if="rule.ruleValue">({{ rule.ruleValue }})</text>
+ <text class="rule-add-num">+{{ rule.addNum }}娆℃満浼�</text>
+ </view>
</view>
</view>
@@ -120,16 +136,38 @@
</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 { getSessionId, userAction ,userShare } from "@/api/userAction.js";
+
import {
prizeInfo,
prizeNum,
prize,
- grantRecord
+ grantRecord,
+ addPrizeNum,
+ getPrizeRule
} from '@/api/prize.js'
export default {
data() {
@@ -140,7 +178,11 @@
// 寮圭獥鎺у埗
showPrizeModal: false,
showMoreChancesModal: false,
+ showRulesModal: false,
currentPrize: {},
+ // 娲诲姩瑙勫垯鏁版嵁
+ activityRules: [
+ ],
// 鑷姩婊氬姩鎺у埗
scrollTimer: null,
scrollTop: 0,
@@ -152,9 +194,26 @@
prizeDraws: [],
// 鍒嗕韩鏈嬪弸鍦堝皾璇曟爣璁�
shareTimelineAttempt: false,
- activityCover:'',
- activityName:'',
- couponId:''
+ activityCover: '',
+ activityName: '',
+ couponId: '',
+ pageSessionNo:"",
+ actionParam:{
+ sessionId:'',
+ actionType:"PAGE",
+ joinType:"SELF",
+ pageCode:"PRIZE_DETAIL",
+ pageParams:"{}",
+ pageStatus:"JOIN",
+ pageType:"DETAIL"
+ },
+ shareParam:{
+ pageCode:"PRIZE_DETAIL",
+ shareOption:"{}",
+ pageType:"DETAIL"
+ },
+ shareId:'',
+ prizeAddRule:[]
};
},
computed: {
@@ -163,9 +222,56 @@
return [...this.originalWinners]
}
},
+ onUnload() {
+ let param = Object.assign({}, this.actionParam);
+ if (this.sendOnShow)return
+ param.pageStatus = "LEAVE"
+ userAction(param)
+ },
+ onHide() {
+ this.startHidenTime = Date.now()
+ let param = Object.assign({}, this.actionParam);
+ this.sendOnShow = true;
+ param.pageStatus = "LEAVE"
+ userAction(param)
+ },
+ onShow() {
+ getSessionId().then(res=>{
+ this.pageSessionNo = res.data.data
+ this.actionParam.sessionId = res.data.data
+ if(this.pageSessionNo){
+ let param = Object.assign({}, this.actionParam);
+ param.sessionId = this.pageSessionNo
+ userAction(param)
+ }
+ })
+ const shareId = uni.getStorageSync("shareId");
+ if(shareId){
+ let param = {
+ addType:"SHARE_USER_REGISTRY",
+ extend:"",
+ }
+ let extend = {shareId:shareId}
+ param.extend = JSON.stringify(extend)
+ addPrizeNum(param);
+
+ let param2 = {
+ addType:"USER_STAY_TIME",
+ extend:"",
+ }
+ addPrizeNum(param2);
+ }
+ },
async onLoad(option) {
- const pages = getCurrentPages()
- console.log('================pages ',pages)
+ if(option.shareId){
+ this.actionParam.shareId = option.shareId;
+ this.actionParam.joinType = 'SHARE'
+ console.log('瑙﹀彂onLoad')
+ }
+ this.actionParam.pageParams = JSON.stringify(option)
+
+ const pages = getCurrentPages()
+ console.log('================pages ', pages)
this.activityId = option.id
const prize = await prizeInfo(this.activityId);
this.activityCover = prize.data.data.activityCover
@@ -186,6 +292,7 @@
})
await this.getUnmber(this.activityId)
await this.getGrantRecord(this.activityId)
+ await this.prizeRule()
},
// onShareTimeline(e) {
// console.log('------------------>', e)
@@ -208,36 +315,70 @@
// this.startAutoScroll()
},
onShareAppMessage() {
- return{
+ // 杩斿洖涓�涓狿romise
+ return new Promise((resolve) => {
+ this.shareId = '';
+ this.shareParam.shareOption = JSON.stringify({
+ id:this.activityId
+ })
+ userShare(this.shareParam).then(res => {
+ this.shareId = res.data.data;
+ console.log('------------------1銆�', this.shareId);
+
+ // 褰撹幏鍙栧埌shareId鍚庯紝鍐峳esolve鍒嗕韩閰嶇疆
+ resolve({
+ title: this.activityName,
+ path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId + '&shareId=' + this.shareId,
+ imageUrl: this.activityCover,
+ success(e) {
+ console.log("鍒嗕韩鎴愬姛", e);
+ },
+ fail(e) {
+ console.log('鍒嗕韩澶辫触', e);
+ }
+ });
+ }).catch(err => {
+ // 澶勭悊閿欒鎯呭喌锛屼緥濡備娇鐢ㄩ粯璁ゅ弬鏁�
+ console.error('鑾峰彇鍒嗕韩ID澶辫触', err);
+ resolve({
title: this.activityName,
path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId,
- imageUrl:this.activityCover,
- success(e) {
- console.log("鍒嗕韩鎴愬姛",e)
- },fail(e) {
- console.log('鍒嗕韩澶辫触',e)
- }
- }
+ imageUrl: this.activityCover
+ });
+ });
+ });
},
beforeDestroy() {
this.stopAutoScroll()
},
methods: {
+ async prizeRule(){
+ this.prizeAddRule = [];
+ const res = await getPrizeRule()
+ this.prizeAddRule = res.data.data||[]
+ console.log('鑾峰彇鍒版坊鍔犳鏁拌鍒�',JSON.stringify(res.data.data))
+ },
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`
- });
+
+ // 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);
@@ -281,6 +422,14 @@
// 鍏抽棴鑾峰彇鏇村鏈轰細寮圭獥
closeMoreChancesModal() {
this.showMoreChancesModal = false
+ },
+ // 鏄剧ず娲诲姩瑙勫垯寮圭獥
+ showActivityRules() {
+ this.showRulesModal = true
+ },
+ // 鍏抽棴娲诲姩瑙勫垯寮圭獥
+ closeRulesModal() {
+ this.showRulesModal = false
},
// 鍒嗕韩鍒板井淇″ソ鍙�
shareToFriend() {
@@ -333,7 +482,7 @@
// 妯℃嫙瑙傜湅瑙嗛瀹屾垚锛屽鍔犳娊濂栨鏁�
// 杩欓噷鍙互娣诲姞璺宠浆鍒板叿浣撹棰戦〉闈㈢殑閫昏緫
uni.navigateTo({
- url: '/pages/tabbar/index/home'
+ url: '/pages/tabbar/index/home'
});
}
}
@@ -350,7 +499,7 @@
if (res.confirm) {
// 杩欓噷鍙互娣诲姞璺宠浆鍒板叿浣撳晢鍝侀〉闈㈢殑閫昏緫
uni.navigateTo({
- url: '/pages/commodity-square/commoditySquare'
+ url: '/pages/commodity-square/commoditySquare'
});
}
}
@@ -366,7 +515,7 @@
if (res.confirm) {
// 鎴栬�呰烦杞埌璐墿杞�
uni.navigateTo({
- url: '/pages/cusbar/cart/cartList'
+ url: '/pages/cusbar/cart/cartList'
});
}
}
@@ -383,7 +532,7 @@
return
}
const prizeDraw = await prize(this.activityId);
- console.log('---------------->',prizeDraw)
+ console.log('---------------->', prizeDraw)
let winId = 'notWIn'
if (prizeDraw.data.code == 200) {
winId = prizeDraw.data.data.id
@@ -396,10 +545,10 @@
// 濂栧搧鐨勭储寮�
this.$refs.dialer.run(findInfo)
- if(prizeDraw.data.data){
+ if (prizeDraw.data.data) {
this.couponId = prizeDraw.data.data.couponId
}
-
+
await this.getGrantRecord(this.activityId)
}
}
@@ -407,6 +556,7 @@
</script>
<style scoped>
@import url(@/pages/prize/PrizeDetail/prizeBg.css);
+
.layout {
width: 750rpx;
min-height: 100vh;
@@ -445,7 +595,7 @@
left: 0;
width: 100%;
height: 100%;
- background-image:
+ background-image:
/* 绀肩洅1 */
radial-gradient(ellipse 12rpx 15rpx at 10% -50%, #4834d4 0%, #4834d4 40%, transparent 41%),
/* 绀肩洅2 */
@@ -486,6 +636,7 @@
0% {
transform: translate(-10%, -10%) rotate(0deg);
}
+
100% {
transform: translate(10%, 10%) rotate(180deg);
}
@@ -497,12 +648,15 @@
transform: translateY(-100vh) rotate(0deg);
opacity: 0;
}
+
10% {
opacity: 1;
}
+
90% {
opacity: 1;
}
+
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
@@ -517,7 +671,7 @@
width: 100%;
height: 100%;
pointer-events: none;
- z-index: 999;
+ z-index: 998;
overflow: hidden;
}
@@ -630,20 +784,25 @@
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;
@@ -655,20 +814,25 @@
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;
@@ -680,20 +844,25 @@
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;
@@ -705,20 +874,25 @@
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;
@@ -730,20 +904,25 @@
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;
@@ -755,20 +934,25 @@
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;
@@ -780,20 +964,25 @@
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;
@@ -805,20 +994,25 @@
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;
@@ -830,20 +1024,25 @@
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;
@@ -855,20 +1054,25 @@
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;
@@ -880,20 +1084,25 @@
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;
@@ -905,20 +1114,25 @@
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;
@@ -930,20 +1144,25 @@
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;
@@ -955,20 +1174,25 @@
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;
@@ -980,20 +1204,25 @@
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;
@@ -1001,7 +1230,7 @@
}
/* 纭繚鎵�鏈夊瓙鍏冪礌鍦ㄨ儗鏅楗颁箣涓� */
- .layout > * {
+ .layout>* {
position: relative;
z-index: 1;
}
@@ -1039,21 +1268,83 @@
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;
+ width: 120rpx;
+ height: 120rpx;
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: 999;
+ z-index: 9999;
transition: all 0.3s ease;
+ flex-direction: column;
+ padding: 10rpx 0;
}
.floating-more-btn::before {
@@ -1089,12 +1380,29 @@
box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.5);
}
+ .floating-btn-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ position: relative;
+ }
+
.floating-btn-icon {
font-size: 36rpx;
color: white;
+ filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
+ margin-bottom: 5rpx;
+ }
+
+ .floating-btn-text {
+ font-size: 20rpx;
+ color: white;
z-index: 1;
position: relative;
- filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
+ text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
+ white-space: nowrap;
}
/* 濂栧搧灞曠ず */
@@ -1123,6 +1431,7 @@
justify-content: space-between;
gap: 20rpx;
}
+
.prize-item {
width: 30%;
margin-bottom: 20rpx;
@@ -1374,15 +1683,18 @@
gap: 20rpx;
margin-bottom: 30rpx;
}
- .chances-grid button{
+
+ .chances-grid button {
padding: 25rpx 15rpx;
margin: 0;
line-height: normal;
border: none;
}
- .chances-grid button::after{
+
+ .chances-grid button::after {
border: none;
}
+
.chance-item {
width: 45%;
background: linear-gradient(45deg, #ff6b6b, #feca57);
@@ -1464,4 +1776,139 @@
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;
+ }
+
+ /* 鎶藉瑙勫垯鏍峰紡 */
+ .prize-rules-section {
+ margin-top: 30rpx;
+ padding: 20rpx;
+ background: #f8f9ff;
+ border-radius: 15rpx;
+ }
+
+ .prize-rules-section .section-title {
+ text-align: left;
+ font-size: 30rpx;
+ margin-bottom: 15rpx;
+ color: #ff6b6b;
+ }
+
+ .rules-list {
+ max-height: 300rpx;
+ overflow-y: auto;
+ }
+
+ .rules-list .rule-item {
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ padding: 15rpx 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #eee;
+ }
+
+ .rules-list .rule-item:last-child {
+ border-bottom: none;
+ }
+
+ .rule-name {
+ font-size: 26rpx;
+ color: #333;
+ flex: 1;
+ }
+
+ .rule-value {
+ font-size: 24rpx;
+ color: #666;
+ margin: 0 10rpx;
+ }
+
+ .rule-add-num {
+ font-size: 26rpx;
+ color: #ff6b6b;
+ font-weight: bold;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.8.0