From 9671183043c32b92f33e90c1e10395ebf90f6c70 Mon Sep 17 00:00:00 2001
From: davy <davy@example.com>
Date: Wed, 9 Apr 2025 12:36:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B4=BB=E5=8A=A8=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E7=BB=84=E4=BB=B6UI=E6=95=88=E6=9E=9C=EF=BC=9A1.=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=85=92=E6=AC=BE=E6=B5=B7=E6=8A=A5=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=98=BE=E7=A4=BA=EF=BC=88=E6=8C=891080x1527=E6=AF=94?=
 =?UTF-8?q?=E4=BE=8B=EF=BC=892.=20=E8=B0=83=E6=95=B4=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E9=97=B4=E8=B7=9D=E5=92=8C=E6=A0=B7=E5=BC=8F=203.=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=A5=96=E5=8A=B1=E6=8F=8F=E8=BF=B0=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ActivityItem.vue        | 144 +++--
 pages.json                         |   8 +-
 pages/index/myJoin.vue             | 200 +++---
 pages/index/review.vue             |  52 +-
 pagesActivity/activityDetail.vue   | 936 +++++++++++++--------------
 pagesActivity/myActivityDetail.vue | 981 ++++++++++++++++++++++-------
 static/heart-remove.svg            |   1 +
 7 files changed, 1458 insertions(+), 864 deletions(-)
 create mode 100644 static/heart-remove.svg

diff --git a/components/ActivityItem.vue b/components/ActivityItem.vue
index 66c545d..0680c38 100644
--- a/components/ActivityItem.vue
+++ b/components/ActivityItem.vue
@@ -1,11 +1,12 @@
 <template>
 	<view class="activity-item flex" v-if="isActivityVisible" @click="handleClick">
+		<view class="store-tag" v-if="item.activityType === 1">指定门店</view>
 		<view class="left">
-			<image :src="item.brandLogo"></image>
+			<image :src="item.brandLogo" class="brand-logo"></image>
 			<view class="status-content">
-				<text v-if="activityState === 'recruiting' && item.remainingDays > 0">招募剩余天数</text>
-				<text v-else-if="activityState === 'recruiting' && item.remainingDays <= 0">活动招募已结束</text>
-				<text v-else-if="activityState === 'inProgress'">距离达成还剩</text>
+				<text v-if="activityState === 'recruiting' && item.remainingDays > 0" class="status-label">招募剩余天数</text>
+				<text v-else-if="activityState === 'recruiting' && item.remainingDays <= 0" class="status-label">活动招募已结束</text>
+				<text v-else-if="activityState === 'inProgress'" class="status-label">距离达成还剩</text>
 				<view class="status-box">
 					<template v-if="activityState === 'recruiting' && item.remainingDays > 0">
 						<view class="days-left">
@@ -21,8 +22,8 @@
 					</template>
 					<template v-else-if="activityState === 'inProgress'">
 						<view v-if="item.remainingBeerCount > 0" class="beer-count">
-							<text>{{item.remainingBeerCount}}</text>
-							<text>桶</text>
+							<text class="count-num">{{item.remainingBeerCount}}</text>
+							<text class="count-unit">桶</text>
 						</view>
 					</template>
 					<template v-else-if="activityState === 'completed'">
@@ -35,18 +36,17 @@
 		</view>
 		<view class="right">
 			<view class="title">{{ item.breweryName }}</view>
-			<view class="sub">时间：首次扫码开始累计 <text style="color:#DE3C4B">{{item.duration}}天内</text></view>
-			<view class="sub">目标：全系列酒款累积扫码 ≥ {{ item.activityTarget}}桶</view>
-			<scroll-view v-if="item.beers" scroll-x="true" class="scroll-img">
+			<view class="sub">时间：首次扫码开始累计 <text class="highlight">{{item.duration}}天内</text></view>
+			<view class="sub">目标：{{item.beerScope === 0 ? '品牌全系' : '以下'}}酒款累积扫码 ≥ <text class="highlight">{{ item.activityTarget}}桶</text></view>
+			<scroll-view v-if="item.beers" scroll-x="true" class="scroll-img" enhanced show-scrollbar="false">
 				<view class="beer-box" v-for="(beer, beerIndex) in item.beers" :key="beerIndex" @click.stop="handleReview(beer)">
-					<image v-if="beer.cover" :src="beer.cover" class="cover"></image>
+					<image v-if="beer.cover" :src="beer.cover" class="cover" mode="aspectFit"></image>
 				</view>
 			</scroll-view>
-			<view class="flex align-center">
+			<view class="reward-info">
 				<text v-if="item.activityRewardType == 2 || (item.activityRewardType == 1 && item.activityRewardGoods)" class="zeng">赠</text>
-				<text v-if="item.activityRewardType == 1 && item.activityRewardGoods" style="color: #0B0E26;font-size: 24rpx;">{{item.activityRewardGoods.goodsName}} * {{item.activityRewardCount}}</text>
-				<text v-if="item.activityRewardType == 2" style="color: #0B0E26;font-size: 24rpx;">啤酒币 * {{item.activityRewardCount}}个</text>
-				<text v-if="item.barAwardStatus" style="color: #0B0E26;font-size: 24rpx;">（已发放）</text>
+				<text v-if="item.activityRewardType == 1 && item.activityRewardGoods" class="reward-text">{{item.activityRewardGoods.goodsName}} {{item.activityRewardGoods.specs}} 奖励数量：{{item.activityRewardCount}}份</text>
+				<text v-if="item.activityRewardType == 2" class="reward-text">品牌啤酒币 奖励数量 {{item.activityRewardCount}}枚</text>
 			</view>
 		</view>
 	</view>
@@ -117,34 +117,56 @@ export default {
 	position: relative;
 	width: 702rpx;
 	margin-bottom: 48rpx;
+	transition: transform 0.2s ease;
 	
-	// &:last-child {
-	// 	margin-bottom: 0;
-	// }
+	&:active {
+		transform: scale(0.98);
+	}
+	
+	.store-tag {
+		position: absolute;
+		top: 24rpx;
+		right: 24rpx;
+		font-size: 20rpx;
+		color: #FFFFFF;
+		background-color: #D42E78;
+		padding: 6rpx 16rpx;
+		border-radius: 8rpx;
+		z-index: 2;
+		box-shadow: 0 2rpx 6rpx rgba(212, 46, 120, 0.3);
+	}
 	
 	.right {
 		width: 702rpx;
 		min-height: 428rpx;
 		background: #FFFFFF;
 		border-radius: 20rpx;
-		padding: 24rpx 24rpx 24rpx 200rpx;
+		padding: 32rpx 32rpx 32rpx 200rpx;
 		box-sizing: border-box;
-		box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
+		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.08);
+		position: relative;
+		z-index: 1;
+		border: 1px solid #EFEDE9;
 
 		.title {
-			font-size: 32rpx;
+			font-size: 36rpx;
 			font-weight: bold;
 			line-height: 48rpx;
 			color: #0B0E26;
-			margin-bottom: 16rpx;
+			margin-bottom: 20rpx;
 		}
 
 		.sub {
 			font-size: 28rpx;
 			font-weight: 500;
-			line-height: 40rpx;
+			line-height: 44rpx;
 			color: #0B0E26;
-			margin-bottom: 16rpx;
+			margin-bottom: 20rpx;
+			
+			.highlight {
+				color: #D42E78;
+				font-weight: bold;
+			}
 		}
 
 		.scroll-img {
@@ -152,35 +174,62 @@ export default {
 			display: flex;
 			flex-direction: row;
 			white-space: nowrap;
-			height: 144rpx;
-			margin-bottom: 18rpx;
+			height: 200rpx;
+			margin-bottom: 24rpx;
 			overflow-x: auto;
+			padding: 4rpx 0;
 
 			.beer-box {
-				width: 100rpx;
+				width: 120rpx;
+				height: 170rpx;
 				background: #FFFFFF;
-				margin-right: 20rpx;
+				margin-right: 8rpx;
 				box-sizing: border-box;
-				display: inline-block;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				transition: transform 0.2s;
+				border-radius: 12rpx;
+				overflow: hidden;
+				position: relative;
+
+				&:active {
+					transform: scale(0.95);
+				}
 
 				.cover {
-					width: 100rpx;
-					height: 144rpx;
-					border-radius: 10rpx;
+					width: 100%;
+					height: 100%;
+					border-radius: 12rpx;
+					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+					object-fit: contain;
 				}
 			}
 		}
 
+		.reward-info {
+			display: flex;
+			align-items: center;
+			margin-top: 8rpx;
+		}
+
 		.zeng {
-			font-size: 20rpx;
+			font-size: 22rpx;
 			font-weight: bold;
 			line-height: normal;
 			text-align: center;
 			color: #0B0E26;
-			padding: 8rpx 12rpx;
+			padding: 8rpx 16rpx;
 			border-radius: 10rpx;
 			background: #FEE034;
 			margin-right: 20rpx;
+			box-shadow: 0 2rpx 4rpx rgba(254, 224, 52, 0.3);
+		}
+		
+		.reward-text {
+			color: #0B0E26;
+			font-size: 26rpx;
+			line-height: 36rpx;
 		}
 	}
 
@@ -195,17 +244,18 @@ export default {
 		border-radius: 20rpx;
 		box-sizing: border-box;
 		border: 1px solid #EFEDE9;
-		z-index: 1;
+		z-index: 3;
 		box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 
-		image {
+		.brand-logo {
 			width: 132rpx;
 			height: 132rpx;
 			border-radius: 6rpx;
 			margin-bottom: 40rpx;
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 		}
 
 		.status-content {
@@ -213,7 +263,7 @@ export default {
 			flex-direction: column;
 			align-items: center;
 			
-			text {
+			.status-label {
 				color: #606060;
 				font-size: 24rpx;
 				font-weight: bold;
@@ -244,18 +294,26 @@ export default {
 				}
 				
 				.beer-count {
-					text {
+					display: flex;
+					align-items: baseline;
+					justify-content: center;
+					
+					.count-num {
+						font-size: 48rpx;
+						color: #19367A;
+						font-weight: bold;
+						line-height: 1;
+					}
+					
+					.count-unit {
 						font-size: 24rpx;
-						color: #0B0E26;
-						
-						&:last-child {
-							margin-left: 4rpx;
-						}
+						color: #606060;
+						margin-left: 4rpx;
 					}
 				}
 				
 				.status-text {
-					font-size: 24rpx;
+					font-size: 28rpx;
 					color: #19367A;
 					font-weight: bold;
 					
diff --git a/pages.json b/pages.json
index d8c8d25..58f9323 100644
--- a/pages.json
+++ b/pages.json
@@ -198,15 +198,17 @@
 					"style" : 
 					{
 						"navigationBarTitleText" : "活动详情",
-						"navigationBarBackgroundColor": "#FFFFFF",
-						"navigationBarTextStyle": "black"
+						"navigationBarBackgroundColor": "#19367A",
+						"navigationBarTextStyle": "white"
 					}
 				},
 				{
 					"path" : "myActivityDetail",
 					"style" : 
 					{
-						"navigationBarTitleText" : "我的活动"
+						"navigationBarTitleText" : "我的活动",
+						"navigationBarBackgroundColor": "#19367A",
+						"navigationBarTextStyle": "white"
 					}
 				},
 				{
diff --git a/pages/index/myJoin.vue b/pages/index/myJoin.vue
index 10589f9..cdd1608 100644
--- a/pages/index/myJoin.vue
+++ b/pages/index/myJoin.vue
@@ -69,67 +69,13 @@
 					style="padding: 16rpx 28rpx 0;background-color: #F2F2F2;overflow-y: auto;flex:1"
 					@scrolltolower="changePage">
 					<!-- 活动列表项 -->
-					<view class="activity-item flex" v-for="(it, index) in myJoinList" :key="index" @click="toInfo(it)">
-						<!-- 左侧区域：品牌logo和达成进度 -->
-						<view class="left flex flex-col justify-between align-center">
-							<!-- 品牌logo：固定尺寸140x140 -->
-							<image :src="it.brandLogo" style="width: 140rpx;height: 140rpx;border-radius: 6rpx;">
-							</image>
-							<!-- 达成进度提示文字 -->
-							<view style="color: #606060;font-size: 24rpx;font-weight: bold;white-space: nowrap;">距离达成还剩</view>
-							<!-- 剩余数量/达标状态：根据不同状态显示不同内容 -->
-							<view>
-								<!-- 累计中：remainingBeerCount > 0 -->
-								<template v-if="it.remainingBeerCount > 0">
-									<text style="font-family: Roboto;font-size: 24rpx;font-weight: normal;line-height: 16rpx; text-align: center;letter-spacing: normal;color: #0B0E26;">{{ it.remainingBeerCount }}</text>
-									<text style="font-size: 24rpx;color: #0B0E26;">桶</text>
-								</template>
-								<!-- 待兑付：remainingBeerCount <= 0 且未兑付 -->
-								<template v-else-if="it.remainingBeerCount <= 0 && !it.barAwardStatus">
-									<text style="font-family: Roboto;font-size: 24rpx; color: #19367A;font-weight: bold;line-height: 130%;text-align: center;letter-spacing: normal;">待兑付</text>
-								</template>
-								<!-- 已兑付：厂家已兑付状态 -->
-								<template v-else-if="it.barAwardStatus">
-									<text style="font-family: Roboto;font-size: 24rpx; color: #19367A;font-weight: bold;line-height: 130%;text-align: center;letter-spacing: normal;">已兑付</text>
-								</template>
-								<!-- 已完成：活动已完成状态 -->
-								<template v-else-if="it.activityStatus === 'COMPLETED'">
-									<text style="font-family: Roboto;font-size: 24rpx; color: #19367A;font-weight: bold;line-height: 130%;text-align: center;letter-spacing: normal;">已完成</text>
-								</template>
-							</view>
-						</view>
-						<!-- 右侧区域：活动详细信息 -->
-						<view class="right">
-							<!-- 活动名称 -->
-							<view class="title">{{ it.activityName }}</view>
-							<!-- 活动时间：首次扫码开始计算 -->
-							<view class="sub">时间：首次扫码开始累计 <text style="color:#19367A">{{it.duration}}天内</text></view>
-							<!-- 活动目标：累积扫码数量 -->
-							<view class="sub">目标：全系列酒款累积扫码 ≥ {{ it.activityTarget}}桶</view>
-							
-							<!-- 酒款图片：横向滚动展示 -->
-							<scroll-view v-if="it.beers" scroll-x="true" class="scroll-img">
-								<view class="beer-box" v-for="(it, index) in it.beers" :key="index"
-									@click="toReview(it)">
-									<image v-if="it.cover" :src="it.cover" class="cover"></image>
-								</view>
-							</scroll-view>
-
-							<!-- 活动奖励信息：实物或啤酒币 -->
-							<view class="flex align-center">
-								<text class="zeng">赠</text>
-								<!-- 实物奖励：type=1 -->
-								<text v-if="it.activityRewardType == 1 && it.activityRewardGoods"
-									style="color: #0B0E26;font-size: 24rpx;">{{it.activityRewardGoods.goodsName}} * {{it.activityRewardCount}}</text>
-								<!-- 啤酒币奖励：type=2 -->
-								<text v-if="it.activityRewardType == 2" 
-									style="color: #0B0E26;font-size: 24rpx;">啤酒币 * {{it.activityRewardCount}}个</text>
-								<!-- 奖励发放状态 -->
-								<text v-if="it.barAwardStatus" 
-									style="color: #0B0E26;font-size: 24rpx;">（已发放）</text>
-							</view>
-						</view>
-					</view>
+					<activity-item
+						v-for="(it, index) in myJoinList"
+						:key="index"
+						:item="it"
+						@click="toInfo(it)"
+						@review="toReview"
+					></activity-item>
 					<!-- 列表加载状态 -->
 					<view class="cu-load" :class="'over'"></view>
 				</scroll-view>
@@ -172,38 +118,42 @@
 
 <script>
 	import loginPopup from '@/components/loginPopup.vue';
+	import ActivityItem from '@/components/ActivityItem.vue'
 	import { myJoinListApi, getMyExchangeOrder } from "@/api/user.js"
 	import { getBarInfo } from "@/api/bar.js"
 	export default {
 		components: {
-			loginPopup
+			loginPopup,
+			ActivityItem
 		},
 		data() {
 			return {
 				loading: true,
-				userInfo: null, // 用户信息
-				barInfo: null, // 门店信息
-				isLoggedIn: false, // 登录状态
-				isVerified: false, // 认证状态
-				tabCur: 0, // 当前选中的标签页
-				curTag: 0, // 累积活动当前选中的标签
-				curCoinTag: 0, // 啤酒币换购当前选中的标签
-				myJoinList: [], // 我参与的活动列表
+				userInfo: null,
+				barInfo: null,
+				isLoggedIn: false,
+				isVerified: false,
+				tabCur: 0,
+				curTag: 0,
+				curCoinTag: 0,
+				myJoinList: [],
 				queryForm: {
-					status: 1, // 活动状态
+					status: 1,
 					pageNum: 1,
 					pageSize: 10
 				},
-				total: 0, // 活动总数
-				myExchangeOrder:[], // 兑换订单列表
+				total: 0,
+				myExchangeOrder:[],
 				orderQuery: {
 					pageNum: 1,
 					pageSize: 10
 				},
-				orderTotal: 0, // 订单总数
-				isLoading: false, // 是否正在加载数据
-				isRefreshing: false, // 是否正在刷新
-				hasNetwork: true, // 网络状态
+				orderTotal: 0,
+				isLoading: false,
+				isRefreshing: false,
+				hasNetwork: true,
+				lastRefreshTime: 0,
+				refreshDebounceTime: 1000,
 			};
 		},
 		computed: {
@@ -301,29 +251,6 @@
 				console.log('【getBarInfoFun】当前userStatus:', this.userStatus)
 			},
 			
-			// 初始化数据
-			async initData() {
-				try {
-					this.loading = true
-					const isLoggedIn = await this.checkLoginStatus()
-					
-					if (isLoggedIn) {
-						await this.getMyJoinList()
-					}
-				} catch (error) {
-					console.error('初始化数据失败:', error)
-					// 只在已认证状态下显示错误提示
-					if (this.userStatus === 'verified') {
-						uni.showToast({
-							title: '加载失败',
-							icon: 'none'
-						})
-					}
-				} finally {
-					this.loading = false
-				}
-			},
-			
 			// 检查用户信息变化
 			async checkUserInfo() {
 				try {
@@ -338,7 +265,10 @@
 						const isLoggedIn = await this.checkLoginStatus()
 						
 						if (isLoggedIn) {
-							await this.getMyJoinList()
+							// 只在需要时刷新数据
+							if (this.shouldRefreshData()) {
+								await this.getMyJoinList()
+							}
 						} else {
 							this.myJoinList = []
 							this.myExchangeOrder = []
@@ -357,22 +287,16 @@
 					console.log('【loginSuccess】开始处理登录成功')
 					this.loading = true
 					
-					// 获取token和openId
 					const token = uni.getStorageSync('token')
 					const openId = uni.getStorageSync('openId')
-					console.log('【loginSuccess】获取到的token:', token)
-					console.log('【loginSuccess】获取到的openId:', openId)
 					
 					if (token && openId) {
-						// 更新登录状态
 						this.isLoggedIn = true
 						this.userInfo = {
 							token,
 							openId
 						}
-						console.log('【loginSuccess】更新登录状态:', this.isLoggedIn)
 						
-						// 获取门店信息
 						await this.getBarInfoFun()
 						
 						// 重置页面状态
@@ -381,12 +305,11 @@
 						this.myJoinList = []
 						this.myExchangeOrder = []
 						
-						// 重新加载数据
-						if (this.userStatus === 'verified') {
+						// 只在需要时刷新数据
+						if (this.userStatus === 'verified' && this.shouldRefreshData()) {
 							await this.getMyJoinList()
 						}
 					} else {
-						console.log('【loginSuccess】token或openId不存在')
 						this.isLoggedIn = false
 						this.userInfo = null
 						this.barInfo = null
@@ -394,7 +317,6 @@
 					}
 				} catch (error) {
 					console.error('【loginSuccess】登录成功处理失败:', error)
-					// 只在已认证状态下显示错误提示
 					if (this.userStatus === 'verified') {
 						uni.showToast({
 							title: '登录失败',
@@ -406,6 +328,16 @@
 				}
 			},
 			
+			// 判断是否需要刷新数据
+			shouldRefreshData() {
+				const now = Date.now()
+				if (now - this.lastRefreshTime < this.refreshDebounceTime) {
+					return false
+				}
+				this.lastRefreshTime = now
+				return true
+			},
+			
 			// 获取我的兑换订单
 			async getMyExchangeOrderFun() {
 				// 如果用户未认证，直接返回
@@ -450,11 +382,17 @@
 				if (this.tabCur == 0) {
 					this.myJoinList = []
 					this.queryForm.pageNum = 1
-					await this.getMyJoinList()
+					// 只在需要时刷新数据
+					if (this.shouldRefreshData()) {
+						await this.getMyJoinList()
+					}
 				} else {
 					this.myExchangeOrder = []
 					this.orderQuery.pageNum = 1
-					await this.getMyExchangeOrderFun()
+					// 只在需要时刷新数据
+					if (this.shouldRefreshData()) {
+						await this.getMyExchangeOrderFun()
+					}
 				}
 			},
 			
@@ -555,23 +493,26 @@
 				
 				// 设置查询状态
 				switch(key) {
-					case 0: // 累计中
-						this.queryForm.status = 1 // 使用整数类型
+					case 0:
+						this.queryForm.status = 1
 						break
-					case 1: // 待兑付
-						this.queryForm.status = 2 // 使用整数类型
+					case 1:
+						this.queryForm.status = 2
 						break
-					case 2: // 已兑付
-						this.queryForm.status = 3 // 使用整数类型
+					case 2:
+						this.queryForm.status = 3
 						break
-					case 3: // 已完成
-						this.queryForm.status = 4 // 使用整数类型
+					case 3:
+						this.queryForm.status = 4
 						break
 					default:
 						delete this.queryForm.status
 				}
 				
-				await this.getMyJoinList()
+				// 只在需要时刷新数据
+				if (this.shouldRefreshData()) {
+					await this.getMyJoinList()
+				}
 			},
 			
 			// 切换订单状态标签
@@ -585,20 +526,23 @@
 				// 设置查询状态
 				switch(key) {
 					case 0:
-						delete this.orderQuery.status // 全部状态
+						delete this.orderQuery.status
 						break
 					case 1:
-						this.orderQuery.status = 1 // 待发货
+						this.orderQuery.status = 1
 						break
 					case 2:
-						this.orderQuery.status = 2 // 已收货
+						this.orderQuery.status = 2
 						break
 					case 3:
-						this.orderQuery.status = 3 // 已完成
+						this.orderQuery.status = 3
 						break
 				}
 				
-				await this.getMyExchangeOrderFun()
+				// 只在需要时刷新数据
+				if (this.shouldRefreshData()) {
+					await this.getMyExchangeOrderFun()
+				}
 			},
 			
 			// 加载更多订单
@@ -918,4 +862,6 @@
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 }
+</style>
+}
 </style>
\ No newline at end of file
diff --git a/pages/index/review.vue b/pages/index/review.vue
index cdee4ca..a00cff0 100644
--- a/pages/index/review.vue
+++ b/pages/index/review.vue
@@ -200,7 +200,7 @@
 		</view>
 
 		<!-- 组件 -->
-		<loginPopup ref="loginRef"></loginPopup>
+		<loginPopup ref="loginRef" @loginSuccess="loginSuccess"></loginPopup>
 		<createPoster v-if="showShare" ref="createPosterRef" :url="tempUrl" @close="showShare=false"></createPoster>
 		<canvas type="2d" id="myCanvas" style="width: 360px;height: 570px;position: fixed;left:8888px"></canvas>
 	</view>
@@ -249,7 +249,8 @@
 				isAnimating: false,
 				lastRefreshTime: 0,
 				refreshDebounceTime: 1000,
-				loading: false
+				loading: false,
+				needRefresh: false // 添加标记，用于标识是否需要刷新
 			};
 		},
 		onLoad({beerId}) {
@@ -265,23 +266,32 @@
 			// 检查登录状态
 			checkLoginStatus() {
 				const token = uni.getStorageSync('token')
+				const wasLoggedIn = this.isLoggedIn
 				this.isLoggedIn = !!token
 				
 				if (this.isLoggedIn) {
 					const barInfo = uni.getStorageSync('barInfo')
 					this.isBarAuthenticated = barInfo && barInfo.authState === 1 // 1表示认证通过
+					
+					// 如果之前未登录，现在登录了，标记需要刷新
+					if (!wasLoggedIn) {
+						this.needRefresh = true
+					}
+				} else {
+					this.isBarAuthenticated = false
 				}
 			},
 			
 			// 初始化页面数据
 			async initPageData() {
 				const now = Date.now()
-				if (now - this.lastRefreshTime < this.refreshDebounceTime) {
+				if (now - this.lastRefreshTime < this.refreshDebounceTime && !this.needRefresh) {
 					return
 				}
 				
 				this.lastRefreshTime = now
 				this.loading = true
+				this.needRefresh = false // 重置刷新标记
 				
 				try {
 					// 重置数据
@@ -760,6 +770,42 @@
 				}
 				
 				this.currentTab = tab;
+			},
+			// 登录成功回调
+			async loginSuccess() {
+				console.log('登录成功，开始刷新页面数据')
+				// 重置状态
+				this.needRefresh = true
+				this.loading = true
+				
+				try {
+					// 检查登录状态
+					await this.checkLoginStatus()
+					
+					// 如果已登录，刷新页面数据
+					if (this.isLoggedIn) {
+						// 重置数据
+						this.reviewList = []
+						this.queryForm.pageNum = 1
+						
+						// 获取新数据
+						await this.initPageData()
+						
+						// 显示成功提示
+						uni.showToast({
+							title: '登录成功',
+							icon: 'success'
+						})
+					}
+				} catch (error) {
+					console.error('登录后刷新数据失败:', error)
+					uni.showToast({
+						title: '刷新数据失败',
+						icon: 'none'
+					})
+				} finally {
+					this.loading = false
+				}
 			}
 		}
 	}
diff --git a/pagesActivity/activityDetail.vue b/pagesActivity/activityDetail.vue
index 4715d10..b122854 100644
--- a/pagesActivity/activityDetail.vue
+++ b/pagesActivity/activityDetail.vue
@@ -1,130 +1,135 @@
 <template>
-	<view class="page-content">
-		<!-- 登录组件 -->
-		<login-popup ref="loginPopup" @success="onLoginSuccess"></login-popup>
-		<!-- 2. 进度展示区域 -->
-		<view class="bg-white progress-box" style="border-radius: 0 0 12rpx 12rpx;">
-			<!-- 标题文字 -->
-			<view class="title-text section-title">
-				<template v-if="activityInfo.hasJoined">
-					累计天数还剩
-				</template>
-				<template v-else>
-					<template v-if="activityInfo.remainingDays <= 0">
-						活动招募已结束
+	<view class="page">
+		<!-- 页面内容 -->
+		<view class="page-content">
+			<!-- 登录组件 -->
+			<login-popup ref="loginPopup" @success="onLoginSuccess"></login-popup>
+			
+			<!-- 进度展示区域 -->
+			<view class="section">
+				<view class="section-title">
+					<template v-if="activityInfo.hasJoined">
+						累计天数还剩
 					</template>
 					<template v-else>
-						活动招募即将结束
+						<template v-if="activityInfo.remainingDays <= 0">
+							活动招募已结束
+						</template>
+						<template v-else>
+							活动招募即将结束
+						</template>
 					</template>
-				</template>
-			</view>
-			
-			<!-- 倒计时区域 -->
-			<view class="countdown-container">
-				<view class="countdown-item">
-					<text class="number">{{activityInfo.hasJoined ? activityInfo.remainingDuration : (activityInfo.remainingDays || '0')}}</text>
-					<text class="unit">天</text>
-				</view>
-				<view class="countdown-item" v-if="!activityInfo.hasJoined">
-					<text class="number">{{countdownTime.hours || '00'}}</text>
-					<text class="unit">时</text>
-				</view>
-				<view class="countdown-item" v-if="!activityInfo.hasJoined">
-					<text class="number">{{countdownTime.minutes || '00'}}</text>
-					<text class="unit">分</text>
-				</view>
-				<view class="countdown-item" v-if="!activityInfo.hasJoined">
-					<text class="number">{{countdownTime.seconds || '00'}}</text>
-					<text class="unit">秒</text>
-				</view>
-			</view>
-
-			<!-- 进度条区域 -->
-			<view class="progress-bar">
-				<view class="progress-track">
-					<view class="progress-fill" :style="{ width: processNum + '%' }"></view>
-				</view>
-				<view class="progress-labels">
-					<text class="start">0天</text>
-					<text class="end">{{totalDays}}天</text>
-				</view>
-			</view>
-		</view>
-		<!-- 3. 活动信息区域 -->
-		<view class="bg-white padding margin-bottom-sm activity-info-box" style="border-radius:12rpx;margin-top: 24rpx;">
-			<view v-if="activityInfo.beers" class="brand-info" @click="toBrand">
-				<image :src="activityInfo.beers[0].breweryLogo" class="brand-logo"></image>
-				<view class="brand-text">
-					<view class="initiator">活动发起方</view>
-					<view class="section-title">{{ activityInfo.beers[0].brandName}}</view>
-				</view>
-				<view class="cuIcon-right"></view>
-			</view>
-			<template v-if="currentTab == 1">
-				<view class="activity-duration">首次扫码开始累计  <text class="duration-value">{{activityInfo.duration || '-'}} 天内</text></view>
-				<view class="activity-target">
-					{{ activityInfo.beer_scope === 0 ? '全系列酒款' : '以下酒款' }}累计扫码 ≥ {{activityInfo.activityTarget || '-'}} 桶
-				</view>
-			</template>
-			<scroll-view v-if="currentTab == 1" scroll-x="true" class="scroll-container">
-				<view v-for="(it, index) in activityInfo.beers" :key="index" style="display: inline-block;" class="row-box" @click="toReview(it)">
-					<view class="beer-box">
-						<image :src="it.cover" class="cover"></image>
-						<view class="title word-all">{{ it.beerName || ''}}</view>
-						<view class="desc word-all">{{ it.beerStyles || '' }}</view>
-						<view class="desc word-all">{{ it.brandName ||'' }}</view>
-						<view class="flex align-center num">
-							<image src="@/static/vector.png" style="width: 20rpx;height: 20rpx;margin-right: 10rpx;">
-							</image>
-							{{ it.beerOverallRating || 0 }}（{{ it.beerReviewsCount || 0}}）
-						</view>
-					</view>
 				</view>
 				
-			</scroll-view>
-		</view>
-		<!-- 1 商品  2 啤酒币 -->
-		<view v-if="activityInfo.activityRewardType == 1 || currentTab == 1" class="bg-white padding margin-bottom-sm"
-			style="border-radius:12rpx;">
-			<view class="section-title margin-bottom-sm">挑战奖励</view>
-			<view v-if="activityInfo.activityRewardGoods" class="flex align-center">
-				<image :src="activityInfo.activityRewardGoods.goodsCover" style="width: 144rpx;height: 204rpx;margin-right:16rpx;border-radius: 12rpx;"></image>
-				<view class="flex-1">
-					<view class="flex flex-1 align-center">
-						<view class="flex-1">
-							<view class="word-all margin-bottom-sm" style="color:#1E2019">{{activityInfo.activityRewardGoods.goodsName}}</view>
-							<!-- <view class="word-all margin-bottom-sm" style="color:rgba(30, 32, 25, 0.8)">风味西打酒</view>
-							<view class="word-all margin-bottom-sm" style="color:#1E2019">TasteRoom 风味屋</view> -->
+				<view class="info-list">
+					<!-- 倒计时区域 -->
+					<view class="info-item countdown-box">
+						<view class="countdown-container">
+							<view class="countdown-item">
+								<text class="number">{{activityInfo.hasJoined ? activityInfo.remainingDuration : (activityInfo.remainingDays || '0')}}</text>
+								<text class="unit">天</text>
+							</view>
+							<view class="countdown-item" v-if="!activityInfo.hasJoined">
+								<text class="number">{{countdownTime.hours || '00'}}</text>
+								<text class="unit">时</text>
+							</view>
+							<view class="countdown-item" v-if="!activityInfo.hasJoined">
+								<text class="number">{{countdownTime.minutes || '00'}}</text>
+								<text class="unit">分</text>
+							</view>
+							<view class="countdown-item" v-if="!activityInfo.hasJoined">
+								<text class="number">{{countdownTime.seconds || '00'}}</text>
+								<text class="unit">秒</text>
+							</view>
 						</view>
-						<view class="text-red text-right">x<text class="text-xxl text-bold">{{activityInfo.activityRewardCount}}</text></view>
 					</view>
+				</view>
+			</view>
 
+			<!-- 活动信息区域 -->
+			<view class="section">
+				<view class="section-title">活动信息</view>
+				<view class="info-list">
+					<view class="info-item" v-if="activityInfo.beers" @click="toBrand">
+						<text>活动发起方</text>
+						<view class="right-content">
+							<image :src="activityInfo.beers[0].breweryLogo" class="brand-logo"></image>
+							<text class="info-text">{{ activityInfo.beers[0].brandName}}</text>
+							<text class="cuIcon-right"></text>
+						</view>
+					</view>
+					<view class="info-item">
+						<text>活动时间</text>
+						<view class="right-content">
+							<text class="info-text">首次扫码开始累计 <text class="highlight">{{activityInfo.duration || '-'}} 天内</text></text>
+						</view>
+					</view>
+					<view class="info-item">
+						<text>活动目标</text>
+						<view class="right-content">
+							<text class="info-text">{{ activityInfo.beerScope === 0 ? '品牌全系列酒款' : '以下酒款' }}累计扫码 ≥ <text class="highlight">{{activityInfo.activityTarget || '-'}} 桶</text></text>
+						</view>
+					</view>
 				</view>
 			</view>
-		</view>
-		<view v-if="activityInfo.activityRewardType == 2" class="bg-white padding margin-bottom-sm"
-			style="border-radius:12rpx;">
-			<view class="margin-bottom-sm">奖励</view>
-			<view class="flex align-center">
-				<!-- <image src="@/static/img/icon-logo.png" class="margin-right"
-					style="width: 72rpx;height: 72rpx;border-radius: 30rpx;"></image> -->
-				<view class="flex flex-1 align-center">
-					<view class="flex-1 word-all" style="color:#1E2019">啤酒币</view>
-					<view class="text-red text-right">x<text
-							class="text-xxl text-bold">{{ activityInfo.activityRewardCount }}</text></view>
+
+			<!-- 参与酒款区域 -->
+			<view class="section">
+				<view class="section-title">参与酒款</view>
+				<scroll-view scroll-x="true" class="beer-scroll">
+					<view class="beer-list">
+						<view v-for="(it, index) in activityInfo.beers" :key="index" class="beer-card" @click="toBeerDetail(it)">
+							<image :src="it.cover" class="beer-image"></image>
+							<view class="beer-info">
+								<text class="name">{{ it.beerName || ''}}</text>
+								<text class="style">{{ it.beerStyles || '' }}</text>
+								<view class="rating">
+									<image src="@/static/vector.png" class="rating-icon"></image>
+									<text>{{ it.beerOverallRating || 0 }}（{{ it.beerReviewsCount || 0}}）</text>
+								</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+
+			<!-- 奖励区域 -->
+			<view class="section" v-if="activityInfo.activityRewardType">
+				<view class="section-title">挑战奖励</view>
+				<view class="info-list">
+					<view class="info-item reward-content" v-if="activityInfo.activityRewardType == 1">
+						<image :src="activityInfo.activityRewardGoods.goodsCover" class="goods-image" mode="aspectFit"></image>
+						<view class="goods-info">
+							<text class="name">{{activityInfo.activityRewardGoods.goodsName}}</text>
+							<view class="specs-info">
+								<text class="specs-label">规格：</text>
+								<text class="specs-value">{{activityInfo.activityRewardGoods.specs}}</text>
+							</view>
+							<text class="count">奖励数量：{{activityInfo.activityRewardCount}}份</text>
+						</view>
+					</view>
+					<view class="info-item reward-content" v-if="activityInfo.activityRewardType == 2">
+						<view class="coin-container">
+							<image :src="activityInfo.brandLogo" class="coin-logo" mode="aspectFit"></image>
+						</view>
+						<view class="coin-info">
+							<text class="name">{{activityInfo.breweryName}}品牌啤酒币</text>
+							<text class="count">奖励数量： {{ activityInfo.activityRewardCount }}枚</text>
+						</view>
+					</view>
 				</view>
 			</view>
-		</view>
-		<!-- <view style="height: 200rpx;background-color: transparent;"></view> -->
-		<!-- 5. 底部操作栏 -->
-		<view class="bg-white flex justify-center align-start padding-top bottom-bar">
-			<view class="scan-btn" 
-				:class="{
-					'btn-disabled': !isLoggedIn || !isVerified || (!activityInfo.hasJoined && activityInfo.remainingDays <= 0)
-				}" 
-				@click="activityInfo.remainingDays <= 0 && !activityInfo.hasJoined ? null : handleButtonClick">
-				<text class="cuIcon-qr_code margin-right-xs"></text>
-				扫桶标自动开始累计
+
+			<!-- 底部操作栏 -->
+			<view class="bottom-bar">
+				<view class="action-button" 
+					:class="{
+						'disabled': !isLoggedIn || !isVerified || (!activityInfo.hasJoined && activityInfo.remainingDays <= 0)
+					}" 
+					@click="activityInfo.remainingDays <= 0 && !activityInfo.hasJoined ? null : handleButtonClick">
+					<text class="cuIcon-qr_code"></text>
+					<text>扫桶标自动开始累计</text>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -360,14 +365,8 @@
 				this.isLoggedIn = !!token;
 				this.isVerified = barInfo && barInfo.authState === 1;
 			},
-			handleButtonClick() {
-				const token = uni.getStorageSync('token');
-				if (!token) {
-					this.$refs.loginPopup.open();
-					return;
-				}
-				
-				// 检查认证状态
+			// 检查认证状态并处理
+			checkAuthAndHandle() {
 				const barInfo = uni.getStorageSync('barInfo');
 				if (!barInfo) {
 					uni.showModal({
@@ -382,10 +381,9 @@
 							}
 						}
 					});
-					return;
+					return false;
 				}
 				
-				// 处理不同的认证状态
 				if (barInfo.authState === 2) {
 					uni.showModal({
 						title: '提示',
@@ -399,14 +397,11 @@
 							}
 						}
 					});
-					return;
+					return false;
 				} else if (barInfo.authState === 1) {
-					// 已认证，允许操作
-					this.handleScan();
-					return;
+					return true;
 				}
 				
-				// 未认证状态
 				uni.showModal({
 					title: '提示',
 					content: '请先认证门店',
@@ -419,6 +414,18 @@
 						}
 					}
 				});
+				return false;
+			},
+			handleButtonClick() {
+				const token = uni.getStorageSync('token');
+				if (!token) {
+					this.$refs.loginPopup.open();
+					return;
+				}
+				
+				if (this.checkAuthAndHandle()) {
+					this.handleScan();
+				}
 			},
 			onLoginSuccess(data) {
 				// 登录成功后重新检查状态
@@ -430,57 +437,32 @@
 					this.init();
 				}
 				
-				// 检查认证状态
-				const barInfo = uni.getStorageSync('barInfo');
-				if (!barInfo) {
-					uni.showModal({
-						title: '提示',
-						content: '请先认证门店',
-						showCancel: true,
-						success: (res) => {
-							if (res.confirm) {
-								uni.navigateTo({
-									url: '/pages/index/registration'
-								});
-							}
-						}
-					});
-					return;
-				}
-				
-				// 处理不同的认证状态
-				if (barInfo.authState === 2) {
-					uni.showModal({
-						title: '提示',
-						content: '您的门店正在认证中，请耐心等待',
-						showCancel: true,
-						success: (res) => {
-							if (res.confirm) {
-								uni.navigateTo({
-									url: '/pages/index/registration'
-								});
-							}
-						}
-					});
-					return;
-				} else if (barInfo.authState === 1) {
-					// 已认证，允许操作
+				if (this.checkAuthAndHandle()) {
 					this.handleScan();
+				}
+			},
+			// 跳转到酒款详情页
+			toBeerDetail(beer) {
+				if (!beer || !beer.id) {
+					uni.showToast({
+						title: '酒款信息不完整',
+						icon: 'none'
+					});
 					return;
 				}
 				
-				// 未认证状态
-				uni.showModal({
-					title: '提示',
-					content: '请先认证门店',
-					showCancel: true,
-					success: (res) => {
-						if (res.confirm) {
-							uni.navigateTo({
-								url: '/pages/index/registration'
-							});
-						}
-					}
+				// 确保id是数字类型
+				const beerId = parseInt(beer.id);
+				if (isNaN(beerId)) {
+					uni.showToast({
+						title: '酒款ID无效',
+						icon: 'none'
+					});
+					return;
+				}
+				
+				uni.navigateTo({
+					url: '/pages/index/review?beerId=' + beerId
 				});
 			}
 		},
@@ -499,301 +481,323 @@
 </script>
 
 <style lang="scss" scoped>
+.page {
+	min-height: 100vh;
+	background: #F7F7F7;
+
 	.page-content {
-		min-height: 100vh;
-		color: #F9F9F9;
-		padding-bottom: 200rpx;
+		padding: 24rpx 32rpx;
+		padding-bottom: calc(152rpx + env(safe-area-inset-bottom));
+	}
+
+	.section {
+		background: #FFFFFF;
+		border-radius: 16rpx;
+		margin-bottom: 24rpx;
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+		overflow: hidden;
 		
-		.progress-box {
-			position: relative;
-			background: #FFFFFF;
-			padding: 32rpx;
-			
-			.title-text {
-				margin-bottom: 24rpx;
-			}
-			
-			.countdown-container {
-				display: flex;
-				gap: 24rpx;
-				margin-bottom: 32rpx;
-				
-				.countdown-item {
-					display: flex;
-					align-items: baseline;
-					
-					.number {
-						font-size: 48rpx;
-						color: #D42E78;
-						font-weight: bold;
-						font-family: 'DIN';
-						background: #F5F5F5;
-						padding: 8rpx 12rpx;
-						border-radius: 12rpx;
-					}
-					
-					.unit {
-						font-size: 24rpx;
-						color: #67677A;
-						margin-left: 8rpx;
-					}
-				}
-			}
-			
-			.progress-bar {
-				width: 100%;
-				padding-left: 8rpx;
-				
-				.progress-track {
-					height: 16rpx;
-					background: rgba(227, 227, 229, 0.6);
-					border-radius: 12rpx;
-					overflow: hidden;
-					position: relative;
-					box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
-					margin-bottom: 12rpx;
-					
-					.progress-fill {
-						height: 100%;
-						background: linear-gradient(90deg, #D42E78 0%, #19367A 100%);
-						border-radius: 12rpx;
-						transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-						box-shadow: 0 2rpx 4rpx rgba(212, 46, 120, 0.2);
-					}
-				}
-				
-				.progress-labels {
-					display: flex;
-					justify-content: space-between;
-					
-					text {
-						font-size: 28rpx;
-						font-family: Roboto;
-						font-weight: 500;
-						
-						&.start {
-							color: #D42E78;
-						}
-						&.end {
-							color: #19367A;
-						}
-					}
-				}
-			}
-		}
-
-		/* 横向滚动容器样式 */
-		.scroll-container {
-			display: flex;                /* 使用弹性布局 */
-			padding-top: 16rpx;          /* 顶部内边距 */
-			flex-direction: row;         /* 水平方向排列 */
-			white-space: nowrap;         /* 防止内容换行 */
-			min-height: 505rpx;          /* 最小高度确保内容显示完整 */
-			
-			/* 行容器样式 */
-			.row-box {
-				&:nth-child(1) {         /* 第一个子元素特殊处理 */
-					margin-left: 32rpx;  /* 左侧外边距，与容器对齐 */
-				}
-			}
-			
-			/* 啤酒卡片样式 */
-			.beer-box {
-				width: 208rpx;           /* 卡片固定宽度 */
-				background: #FFFFFF;      /* 白色背景 */
-				margin-right: 12rpx;     /* 卡片间距 */
-				margin-bottom: 36rpx;    /* 底部外边距 */
-				box-sizing: border-box;   /* 盒模型计算方式 */
-				display: flex;            /* 弹性布局 */
-				flex-direction: column;   /* 垂直方向排列 */
-				justify-content: flex-start; /* 内容从顶部开始排列 */
-
-				/* 啤酒图片封面样式 */
-				.cover {
-					width: 208rpx;        /* 图片宽度 */
-					height: 300rpx;       /* 图片高度 */
-					border-radius: 12rpx; /* 圆角效果 */
-					margin-bottom: 16rpx; /* 与下方文字的间距 */
-				}
-
-				/* 啤酒名称样式 */
-				.title {
-					font-size: 32rpx;     /* 字体大小 */
-					color: #030303;       /* 文字颜色 */
-					font-weight: 600;     /* 字体粗细 */
-					line-height: 48rpx;   /* 行高 */
-					margin-bottom: 8rpx;  /* 底部间距 */
-					white-space: nowrap;  /* 不换行 */
-					overflow: hidden;     /* 溢出隐藏 */
-					text-overflow: ellipsis; /* 文本溢出显示省略号 */
-				}
-
-				/* 描述文本样式 */
-				.desc {
-					font-family: Roboto;  /* 字体 */
-					font-size: 24rpx;     /* 字体大小 */
-					font-weight: normal;  /* 字体粗细 */
-					line-height: 32rpx;   /* 行高 */
-					color: #606060;       /* 文字颜色 */
-					margin-bottom: 8rpx;  /* 底部间距 */
-					white-space: nowrap;  /* 不换行 */
-					overflow: hidden;     /* 溢出隐藏 */
-					text-overflow: ellipsis; /* 文本溢出显示省略号 */
-				}
-
-				/* 数量/评分样式 */
-				.num {
-					display: flex;        /* 弹性布局 */
-					align-items: center;  /* 垂直居中 */
-					font-size: 20rpx;     /* 字体大小 */
-					color: #606060;       /* 文字颜色 */
-					line-height: 32rpx;   /* 行高 */
-					
-					image {
-						margin-right: 10rpx; /* 图标右侧间距 */
-					}
-				}
-			}
-		}
-
-		// 奖励盒子
-		.reward-box {
-			background: #FFFFFF;
-			border-radius: 30rpx;
-			padding: 30rpx;
-			margin-bottom: 36rpx;
-		}
-
-		.progress-bar {
-			width: 100%;
-			padding: 0 32rpx;
-			
-			.progress-track {
-				height: 12rpx;
-				background: #E3E3E5;
-				border-radius: 12rpx;
-				overflow: hidden;
-				position: relative;
-				
-				.progress-fill {
-					height: 100%;
-					background: linear-gradient(90deg, #D42E78 0%, #19367A 100%);
-					border-radius: 6rpx;
-					transition: width 0.3s ease;
-				}
-			}
-			
-			.progress-labels {
-				display: flex;
-				justify-content: space-between;
-				margin-top: 12rpx;
-				
-				text {
-					font-size: 24rpx;
-					color: #67677A;
-					
-					&.start {
-						color: #D42E78;
-					}
-					&.end {
-						color: #19367A;
-					}
-				}
-			}
-		}
-
-		.activity-info-box {
-			padding: 32rpx;
-			min-height: 360rpx;  /* 设置最小高度 */
-			
-			.brand-info {
-				display: flex;
-				align-items: center;
-				margin-bottom: 24rpx;
-				// padding-bottom: 24rpx;
-				// border-bottom: 1rpx solid #F5F5F5;
-				border-radius: 12rpx;
-				
-				.brand-logo {
-					width: 88rpx;
-					height: 88rpx;
-					border-radius: 12rpx;
-					margin-right: 16rpx;
-				}
-				
-				.brand-text {
-					flex: 1;
-					
-					.initiator {
-						color: #979797;
-						font-size: 24rpx;
-						font-weight: normal;
-						margin-bottom: 16rpx;
-					}
-				}
-			}
-			
-			.activity-duration {
-				color: #0B0E26;
-				font-size: 28rpx;
-				font-weight: normal;
-				line-height: 40rpx;
-				margin-bottom: 16rpx;
-				
-				.duration-value {
-					color: #D42E78;
-					font-size: 32rpx;
-				}
-			}
-			
-			.activity-target {
-				color: #0B0E26;
-				font-size: 28rpx;
-				margin-bottom: 24rpx;
-			}
-			
-			.scroll-container {
-				margin-top: 16rpx;
-				height: 505rpx;  /* 固定高度确保滚动区域统一 */
-			}
-		}
-
-		.bottom-bar {
-			border-radius: 12rpx;
-			height: 182rpx;
-			width: 100%;
-			position: fixed;
-			bottom: 0;
-			box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
-			
-			.scan-btn {
-				width: 686rpx;
-				height: 96rpx;
-				background: #19367A;
-				border-radius: 12rpx;
-				color: #FFFFFF;
-				font-size: 32rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				
-				&.btn-disabled {
-					background: #E5E6EB;
-					color: #86909C;
-				}
-				
-				.cuIcon-qr_code {
-					font-size: 36rpx;
-					margin-right: 16rpx;
-				}
-			}
-		}
-
 		.section-title {
 			font-size: 32rpx;
 			font-weight: 600;
-			color: #0B0E26;
-			line-height: 48rpx;
+			padding: 32rpx;
+			color: #333333;
+			position: relative;
+			
+			&::after {
+				content: '';
+				position: absolute;
+				left: 32rpx;
+				bottom: 0;
+				width: 48rpx;
+				height: 4rpx;
+				background: #19367A;
+				border-radius: 2rpx;
+			}
 		}
 	}
+
+	.info-list {
+		.info-item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 32rpx;
+			border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
+			transition: all 0.3s ease;
+			
+			&:last-child {
+				border-bottom: none;
+			}
+
+			text {
+				font-size: 28rpx;
+				color: #333333;
+			}
+
+			.right-content {
+				display: flex;
+				align-items: center;
+				gap: 16rpx;
+
+				.brand-logo {
+					width: 48rpx;
+					height: 48rpx;
+					border-radius: 50%;
+					border: 1rpx solid #19367A;
+				}
+
+				.info-text {
+					font-size: 28rpx;
+					color: #666666;
+					text-align: right;
+					
+					.highlight {
+						color: #19367A;
+						font-weight: 600;
+					}
+				}
+
+				.cuIcon-right {
+					color: #CCCCCC;
+					font-size: 24rpx;
+					margin-left: 8rpx;
+				}
+			}
+		}
+
+		.countdown-box {
+			padding: 24rpx 32rpx;
+			justify-content: center;
+		}
+	}
+
+	.countdown-container {
+		display: flex;
+		gap: 24rpx;
+		justify-content: center;
+		
+		.countdown-item {
+			display: flex;
+			align-items: baseline;
+			
+			.number {
+				font-size: 48rpx;
+				color: #D42E78;
+				font-weight: bold;
+				font-family: 'DIN';
+				background: #F5F5F5;
+				padding: 8rpx 12rpx;
+				border-radius: 12rpx;
+				min-width: 80rpx;
+				text-align: center;
+			}
+			
+			.unit {
+				font-size: 24rpx;
+				color: #67677A;
+				margin-left: 8rpx;
+			}
+		}
+	}
+
+	.beer-scroll {
+		padding: 24rpx 0;
+		
+		.beer-list {
+			display: flex;
+			padding: 0 32rpx;
+			gap: 24rpx;
+
+			.beer-card {
+				width: 200rpx;
+				flex-shrink: 0;
+				background: #F9F9F9;
+				border-radius: 12rpx;
+				padding: 16rpx;
+				transition: all 0.3s ease;
+				
+				&:active {
+					transform: scale(0.95);
+					background: #F0F0F0;
+				}
+
+				.beer-image {
+					width: 200rpx;
+					height: 280rpx;
+					border-radius: 8rpx;
+					margin-bottom: 12rpx;
+				}
+
+				.beer-info {
+					.name {
+						font-size: 28rpx;
+						color: #333333;
+						font-weight: bold;
+						margin-bottom: 8rpx;
+						display: block;
+					}
+
+					.style {
+						font-size: 24rpx;
+						color: rgba(51, 51, 51, 0.8);
+						margin-bottom: 8rpx;
+						display: block;
+					}
+
+					.rating {
+						display: flex;
+						align-items: center;
+						gap: 8rpx;
+
+						.rating-icon {
+							width: 20rpx;
+							height: 20rpx;
+						}
+
+						text {
+							font-size: 24rpx;
+							color: #666666;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.reward-content {
+		display: flex;
+		align-items: center;
+		gap: 24rpx;
+		padding: 0 32rpx 32rpx;
+
+		.goods-image {
+			width: 160rpx;
+			height: 160rpx;
+			border-radius: 12rpx;
+			background: #FFFFFF;
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+		}
+
+		.goods-info {
+			flex: 1;
+
+			.name {
+				font-size: 32rpx;
+				color: #333333;
+				margin-bottom: 12rpx;
+				display: block;
+				font-weight: 600;
+			}
+
+			.specs-info {
+				display: flex;
+				align-items: center;
+				margin-bottom: 12rpx;
+				
+				.specs-label {
+					font-size: 32rpx;
+					color: #666666;
+				}
+				
+				.specs-value {
+					font-size: 32rpx;
+					color: #333333;
+					font-weight: 500;
+				}
+			}
+
+			.count {
+				font-size: 32rpx;
+				color: #333333;
+				font-weight: 500;
+			}
+		}
+
+		.coin-container {
+			position: relative;
+			width: 120rpx;
+			height: 120rpx;
+			flex-shrink: 0;
+			
+			.coin-logo {
+				width: 100%;
+				height: 100%;
+				border-radius: 50%;
+				position: relative;
+				background: #FFFFFF;
+				padding: 16rpx;
+				box-sizing: border-box;
+				object-fit: contain;
+			}
+		}
+
+		.coin-info {
+			flex: 1;
+
+			.name {
+				font-size: 32rpx;
+				color: #333333;
+				margin-bottom: 12rpx;
+				display: block;
+				font-weight: 600;
+			}
+
+			.count {
+				font-size: 32rpx;
+				color: #333333;
+				font-weight: 500;
+			}
+		}
+	}
+
+	.bottom-bar {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: #FFFFFF;
+		padding: 24rpx 32rpx;
+		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+		display: flex;
+		justify-content: center;
+		box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
+
+		.action-button {
+			width: 686rpx;
+			height: 88rpx;
+			background: linear-gradient(135deg, #19367A, #2C4C99);
+			border-radius: 44rpx;
+			color: #FFFFFF;
+			font-size: 32rpx;
+			font-weight: 500;
+			letter-spacing: 2rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 8rpx;
+			box-shadow: 0 4rpx 16rpx rgba(25, 54, 122, 0.2);
+			transition: all 0.3s ease;
+			
+			&:active {
+				transform: scale(0.98);
+				box-shadow: 0 2rpx 8rpx rgba(25, 54, 122, 0.1);
+			}
+
+			&.disabled {
+				background: #EFEFEF;
+				color: #999999;
+				box-shadow: none;
+				
+				&:active {
+					transform: none;
+				}
+			}
+
+			.cuIcon-qr_code {
+				font-size: 36rpx;
+			}
+		}
+	}
+}
 </style>
\ No newline at end of file
diff --git a/pagesActivity/myActivityDetail.vue b/pagesActivity/myActivityDetail.vue
index 9eadb4e..577884a 100644
--- a/pagesActivity/myActivityDetail.vue
+++ b/pagesActivity/myActivityDetail.vue
@@ -1,126 +1,177 @@
 <template>
-	<view class="page-content">
-		<view class="bg-white progress-box margin-bottom-sm" style="height: 600rpx;border-radius: 0 0 36rpx 36rpx;"
-			:style="{'padding-top': statusBaeHeight + 'px'}">
-			<process v-model="processNum" progress_width="360" bg_color="#E3E3E5" border_width="6" progress_height="335"
-				start_color="#FEE034" end_color="#71F4B4" :total="activity.activityTarget"></process>
-			<view class="progress-text">
-				<view class="margin-bottom-sm">距离达成目标还剩</view>
-				<view class="text-red margin-bottom-lg">
-					<text v-if="activity.remainingBeerCount <= 0" style="font-size: 48rpx;">已达标</text>
-					<template v-else>
-						<text class="text-sl text-bold">{{ activity.remainingBeerCount || 0}}</text>桶
-					</template>
-				</view>
-				<view>累积截止 {{ activity.endDate }}</view>
-			</view>
-			<view class="tab-box">
-				<view class="defTab" :class="{'active':currentTab == 1}" @click="changeTab(1)">活动信息</view>
-				<view class="defTab" :class="{'active':currentTab == 2}" @click="changeTab(2)">累积记录</view>
-			</view>
-		</view>
-		<template v-if="currentTab == 1">
-			<view class="bg-white padding margin-bottom-sm" style="border-radius:36rpx;">
-				<view class="flex justify-between align-center margin-bottom" @click="toBrand">
-					<image :src="activity.beers[0].breweryLogo" class="margin-right"
-						style="width: 72rpx;height: 72rpx;border-radius: 30rpx;"></image>
-					<view class="flex-1">
-						<view style="color:#979797">活动发起方</view>
-						<view class="word-all margin-bottom-sm" style="color:#1E2019">{{activity.beers[0].brandName}}</view>
-					</view>
-					<view class="cuIcon-right"></view>
-				</view>
-				<template v-if="currentTab == 1">
-					<view class="margin-bottom-xs" style="color:#0B0E26">首次扫码开始累计 · <text style="color: #DE3C4B;">{{activity.duration}} 天内</text></view>
-					<view class="margin-bottom-xs" style="color:#0B0E26">{{ activity.beer_scope === 0 ? '全系列酒款' : '以下酒款' }}累计扫码 ≥ {{activity.activityTarget}} 桶 </view>
-				</template>
-				
-				<rowBeer :beers="activity.beers" />
-			</view>
-			<!-- 1 商品  2 啤酒币 -->
-			<view v-if="activity.activityRewardType == 1" class="bg-white padding margin-bottom-sm"
-				style="border-radius:36rpx;">
-				<view class="margin-bottom-sm" style="color: #0B0E26;">挑战奖励</view>
-				<view v-if="activity.activityRewardGoods" class="flex align-center">
-					<image :src="activity.activityRewardGoods.goodsCover" style="width: 144rpx;height: 204rpx;margin-right:20rpx;"></image>
-					<view class="flex-1">
-						<view class="flex flex-1 align-center">
-							<view class="flex-1">
-								<view class="word-all margin-bottom-sm" style="color:#1E2019">{{activity.activityRewardGoods.goodsName}}</view>
-								<!-- <view class="word-all margin-bottom-sm" style="color:rgba(30, 32, 25, 0.8)">风味西打酒</view>
-								<view class="word-all margin-bottom-sm" style="color:#1E2019">TasteRoom 风味屋</view> -->
-							</view>
-							<view class="text-red text-right">x<text class="text-xxl text-bold">{{activity.activityRewardCount}}</text></view>
+	<view class="page">
+		<view class="page-content">
+			<!-- 进度展示区域 -->
+			<view class="section">
+				<view class="section-title">累计进度</view>
+				<view class="progress-content">
+					<!-- 剩余目标显示 -->
+					<view class="target-display">
+						<text class="target-label">剩余累计目标</text>
+						<view class="target-number">
+							<text class="number">{{activity.remainingBeerCount || 0}}</text>
+							<text class="unit">桶</text>
+						</view>
+					</view>
+
+					<!-- 倒计时区域 -->
+					<view class="countdown-container">
+						<view class="countdown-item">
+							<text class="number">{{remainingDays}}</text>
+							<text class="unit">天</text>
+						</view>
+						<view class="countdown-item">
+							<text class="number">{{remainingHours}}</text>
+							<text class="unit">时</text>
+						</view>
+						<view class="countdown-item">
+							<text class="number">{{remainingMinutes}}</text>
+							<text class="unit">分</text>
+						</view>
+						<view class="countdown-item">
+							<text class="number">{{remainingSeconds}}</text>
+							<text class="unit">秒</text>
+						</view>
+					</view>
+
+					<!-- 进度条区域 -->
+					<view class="progress-bar-section">
+						<view class="progress-track">
+							<view class="progress-fill" :style="{ width: processNum + '%' }">
+								<view class="progress-marker">
+									<text>{{processNum}}%</text>
+								</view>
+							</view>
+						</view>
+						<view class="progress-labels">
+							<text class="start">0桶</text>
+							<text class="end">{{activity.activityTarget}}桶</text>
 						</view>
-			
 					</view>
 				</view>
 			</view>
-			<view v-if="activity.activityRewardType == 2" class="bg-white padding margin-bottom-sm"
-				style="border-radius:36rpx;">
-				<view class="margin-bottom-sm">奖励</view>
-				<view class="flex align-center">
-					<!-- <image src="@/static/img/icon-logo.png" class="margin-right"
-						style="width: 72rpx;height: 72rpx;border-radius: 30rpx;"></image> -->
-					<view class="flex flex-1 align-center">
-						<view class="flex-1 word-all" style="color:#1E2019">啤酒币</view>
-						<view class="text-red text-right">x<text
-								class="text-xxl text-bold">{{ activity.activityRewardCount }}</text></view>
+
+			<!-- 切换标签 -->
+			<view class="tab-box">
+				<view class="tab-item" :class="{'active':currentTab == 1}" @click="changeTab(1)">
+					<text>活动信息</text>
+				</view>
+				<view class="tab-item" :class="{'active':currentTab == 2}" @click="changeTab(2)">
+					<text>累积记录</text>
+				</view>
+			</view>
+
+			<!-- 活动信息区域 -->
+			<view class="section" v-if="currentTab == 1">
+				<view class="info-list">
+					<view class="info-item" @click="toBrand" v-if="activity.beers">
+						<text>活动发起方</text>
+						<view class="right-content">
+							<image :src="activity.beers[0].breweryLogo" class="brand-logo"></image>
+							<text class="info-text">{{ activity.beers[0].brandName}}</text>
+							<text class="cuIcon-right"></text>
+						</view>
+					</view>
+					<view class="info-item">
+						<text>活动时间</text>
+						<view class="right-content">
+							<text class="info-text">首次扫码开始累计 <text class="highlight">{{activity.duration || '-'}} 天内</text></text>
+						</view>
+					</view>
+					<view class="info-item">
+						<text>活动目标</text>
+						<view class="right-content">
+							<text class="info-text">{{ activity.beerScope === 0 ? '品牌全系列酒款' : '以下酒款' }}累计扫码 ≥ <text class="highlight">{{activity.activityTarget || '-'}} 桶</text></text>
+						</view>
+					</view>
+				</view>
+
+				<view class="beer-section">
+					<view class="section-subtitle">参与酒款</view>
+					<scroll-view scroll-x="true" class="beer-scroll">
+						<view class="beer-list">
+							<view v-for="(it, index) in activity.beers" :key="index" class="beer-card" @click="toBeerDetail(it)">
+								<image :src="it.cover" class="beer-image"></image>
+								<view class="beer-info">
+									<text class="name">{{ it.beerName || ''}}</text>
+									<text class="style">{{ it.beerStyles || '' }}</text>
+									<view class="rating">
+										<image src="@/static/vector.png" class="rating-icon"></image>
+										<text>{{ it.beerOverallRating || 0 }}（{{ it.beerReviewsCount || 0}}）</text>
+									</view>
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+			</view>
+
+			<!-- 累积记录区域 -->
+			<view class="section" v-if="currentTab == 2">
+				<view class="info-list">
+					<view v-if="logs && logs.length > 0">
+						<view class="info-item" v-for="(it, index) in logs" :key="index">
+							<view class="log-info">
+								<text class="time">{{ it.date}}</text>
+								<text class="operation">{{ it.operation}}</text>
+							</view>
+							<text class="percent" v-if="it.percent != null">{{it.percent || 0}}%</text>
+						</view>
+					</view>
+					<view v-else class="empty-state">
+						<text>暂无记录</text>
 					</view>
 				</view>
 			</view>
-			
-		</template>
-		<template v-else>
-			<view v-if="logs && logs.length > 0" class="log-box">
-				<view class="log-item flex justify-between align-center" v-for="(it, index) in logs">
-					<view class="left">
-						<view class="time">{{ it.date}}</view>
-						<view class="title">{{ it.operation}}</view>
+
+			<!-- 奖励展示区域 -->
+			<view class="section" v-if="activity.activityRewardType">
+				<view class="section-title">挑战奖励</view>
+				<view class="info-item reward-content" v-if="activity.activityRewardType == 1">
+					<image :src="activity.activityRewardGoods.goodsCover" class="goods-image" mode="aspectFit"></image>
+					<view class="goods-info">
+						<text class="name">{{activity.activityRewardGoods.goodsName}}</text>
+						<view class="specs-info">
+							<text class="specs-label">规格：</text>
+							<text class="specs-value">{{activity.activityRewardGoods.specs}}</text>
+						</view>
+						<text class="count">奖励数量：{{activity.activityRewardCount}}份</text>
+					</view>
+				</view>
+				<view class="info-item reward-content" v-if="activity.activityRewardType == 2">
+					<view class="coin-container">
+						<image :src="activity.brandLogo" class="coin-logo" mode="aspectFit"></image>
+					</view>
+					<view class="coin-info">
+						<text class="name">{{activity.breweryName}}品牌啤酒币</text>
+						<text class="count">奖励数量： {{ activity.activityRewardCount }}枚</text>
 					</view>
-					<text v-if="it.percent != null">{{it.percent || 0}}%</text>
 				</view>
 			</view>
-			<view v-else class="empty">
-				暂无记录
+
+			<!-- 底部操作栏 -->
+			<view class="bottom-bar">
+				<view class="status-info">
+					<text class="label">活动状态</text>
+					<text class="status" :class="{
+						'status-ongoing': !reward,
+						'status-pending': reward && reward.rewardStatus == 0,
+						'status-completed': reward && reward.rewardStatus == 1
+					}">
+						{{!reward ? '累计中' : (reward.rewardStatus == 0 ? '待确认' : '已确认')}}
+					</text>
+				</view>
+				<view class="action-button" 
+					:class="{
+						'scan-btn': !reward,
+						'confirm-btn': reward && reward.rewardStatus == 0,
+						'completed-btn': reward && reward.rewardStatus == 1
+					}"
+					@click="!reward ? toScan() : (reward.rewardStatus == 0 ? confirmPay() : null)">
+					<text class="cuIcon-qr_code" v-if="!reward"></text>
+					<text>{{!reward ? '扫码累计' : (reward.rewardStatus == 0 ? '确认兑付完成' : '兑付已确认')}}</text>
+				</view>
 			</view>
-		</template>
-		
-		
-		
-		
-		<view class="bg-white flex justify-center align-start padding-top"
-			style="border-radius:36rpx 36rpx 0 0;height: 182rpx;width: 100%;position: fixed;bottom:0;gap:50rpx">
-			<!-- 活动未开始 -->
-			<!-- <template v-if="true">
-				<view class="bg-zd2 padding text-center" style="border-radius: 30rpx;width: 434rpx;font-size: 36rpx;" @click="handleScan">
-					<text class="cuIcon-qr_code margin-right-xs"></text>
-					扫桶标自动开始累计
-				</view>
-			</template> -->
-			<template>
-				<view class="flex flex-col justify-center align-start">
-					<text style="color: #606060;font-size: 28rpx;margin-bottom: 8rpx;">活动状态</text>
-					<text v-if="!reward" style="color: #FDCA40;font-size: 28rpx;">累计中</text>
-					<text v-if="reward && reward.rewardStatus == 0" style="color: #4E63E0;font-size: 28rpx;">待确认</text>
-					<text v-if="reward && reward.rewardStatus == 1" style="color: #D42E78;font-size: 28rpx;">已确认</text>
-				</view>
-				<view v-if="!reward" class="bottom-btn" @click="toScan">
-					<text class="cuIcon-qr_code margin-right-xs"></text>
-					扫码累计
-				</view>
-				<view v-if="reward && reward.rewardStatus == 0" class="bottom-btn" 
-				@click="confirmPay"
-				>
-					确认对付完成
-				</view>
-				<view v-if="reward && reward.rewardStatus == 1" class="bottom-btn" style="background-color: #efefef;color:#333"
-				
-				>
-					对付已确认
-				</view>
-			</template>
-			
 		</view>
 	</view>
 </template>
@@ -145,25 +196,34 @@
 				activity: {},
 				logs:[], // 累积记录
 				currentTab: 1,
-				reward: null
+				reward: null,
+				remainingDays: 0,
+				remainingHours: 0,
+				remainingMinutes: 0,
+				remainingSeconds: 0,
+				timer: null
 			};
 		},
 		onLoad({
 			batchId
 		}) {
-			this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
+			const sysInfo = uni.getSystemInfoSync()
+			this.statusBaeHeight = sysInfo.statusBarHeight
 			this.batchId = batchId
 			this.init()
 		},
+		onUnload() {
+			if(this.timer) {
+				clearInterval(this.timer)
+			}
+		},
 		computed: {
 			processNum() {
 				if(this.activity.remainingBeerCount != null && this.activity.activityTarget) {
-					return (this.activity.activityTarget - this.activity.remainingBeerCount) / this.activity.activityTarget * 100
-					// return (this.activity.remainingBeerCount / this.activity.activityTarget).toFixed(0) * 100
+					return ((this.activity.activityTarget - this.activity.remainingBeerCount) / this.activity.activityTarget * 100).toFixed(0)
 				}else {
 					return 0
 				}
-				
 			}
 		},
 		methods: {
@@ -172,9 +232,38 @@
 					this.activity = res.data.activity
 					this.reward = res.data.reward
 					this.logs = res.data.logs
-					this.activity.remainingDays = this.getRemainingDays(res.data.activity.endDate)
+					
+					// 计算结束时间
+					if(this.activity.activityType === 2 && this.logs && this.logs.length > 0) {
+						const startDate = new Date(this.logs[0].date)
+						const endDate = new Date(startDate.getTime() + this.activity.duration * 24 * 60 * 60 * 1000)
+						this.startCountdown(endDate)
+					}
 				})
 			},
+			startCountdown(endDate) {
+				const updateCountdown = () => {
+					const now = new Date()
+					const diff = endDate.getTime() - now.getTime()
+					
+					if(diff <= 0) {
+						this.remainingDays = 0
+						this.remainingHours = 0
+						this.remainingMinutes = 0
+						this.remainingSeconds = 0
+						clearInterval(this.timer)
+						return
+					}
+					
+					this.remainingDays = Math.floor(diff / (1000 * 60 * 60 * 24))
+					this.remainingHours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
+					this.remainingMinutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
+					this.remainingSeconds = Math.floor((diff % (1000 * 60)) / 1000)
+				}
+				
+				updateCountdown()
+				this.timer = setInterval(updateCountdown, 1000) // 每秒更新一次
+			},
 			changeTab(index) {
 				this.currentTab = index
 			},
@@ -227,147 +316,595 @@
 				uni.switchTab({
 					url: '/pages/index/scan'
 				})
+			},
+			// 跳转到酒款详情
+			toBeerDetail(beer) {
+				if (!beer || !beer.id) {
+					uni.showToast({
+						title: '酒款信息不完整',
+						icon: 'none'
+					});
+					return;
+				}
+				
+				const beerId = parseInt(beer.id);
+				if (isNaN(beerId)) {
+					uni.showToast({
+						title: '酒款ID无效',
+						icon: 'none'
+					});
+					return;
+				}
+				
+				uni.navigateTo({
+					url: '/pages/index/review?beerId=' + beerId
+				});
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
+.page {
+	min-height: 100vh;
+	background: #F7F7F7;
+
 	.page-content {
-		// overflow-y: auto;
-		min-height: 100vh;
-		padding-bottom: 200rpx;
+		padding: 24rpx 32rpx;
+		padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
+	}
 
-		.progress-box {
+	.section {
+		background: #FFFFFF;
+		border-radius: 16rpx;
+		margin-bottom: 24rpx;
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+		overflow: hidden;
+		
+		.section-title {
+			font-size: 32rpx;
+			font-weight: 600;
+			padding: 32rpx;
+			color: #333333;
 			position: relative;
-
-			.progress-text {
+			
+			&::after {
+				content: '';
 				position: absolute;
-				top: 200rpx;
-				left: 50%;
-				transform: translateX(-50%);
+				left: 32rpx;
+				bottom: 0;
+				width: 48rpx;
+				height: 4rpx;
+				background: #19367A;
+				border-radius: 2rpx;
+			}
+		}
+		
+		.section-subtitle {
+			font-size: 28rpx;
+			font-weight: 600;
+			padding: 24rpx 32rpx 16rpx;
+			color: #333333;
+		}
+	}
+
+	.progress-content {
+		padding: 32rpx;
+	}
+
+	.target-display {
+		text-align: center;
+		margin-bottom: 32rpx;
+
+		.target-label {
+			font-size: 28rpx;
+			color: #333333;
+			margin-bottom: 16rpx;
+			display: block;
+		}
+
+		.target-number {
+			display: flex;
+			align-items: baseline;
+			justify-content: center;
+			
+			.number {
+				font-size: 64rpx;
+				color: #D42E78;
+				font-weight: bold;
+				font-family: 'DIN';
+				line-height: 1;
+			}
+			
+			.unit {
+				font-size: 32rpx;
+				color: #333333;
+				margin-left: 8rpx;
+				font-weight: 500;
+			}
+		}
+	}
+
+	.countdown-container {
+		display: flex;
+		gap: 24rpx;
+		justify-content: center;
+		margin-bottom: 64rpx;
+		
+		.countdown-item {
+			display: flex;
+			align-items: baseline;
+			
+			.number {
+				font-size: 48rpx;
+				color: #D42E78;
+				font-weight: bold;
+				font-family: 'DIN';
+				background: #F5F5F5;
+				padding: 8rpx 12rpx;
+				border-radius: 12rpx;
+				min-width: 80rpx;
 				text-align: center;
 			}
+			
+			.unit {
+				font-size: 24rpx;
+				color: #67677A;
+				margin-left: 8rpx;
+			}
+		}
+	}
 
-			.tab-box {
-				position: absolute;
-				width: 674rpx;
-				top: 475rpx;
-				left: 50%;
-				transform: translateX(-50%);
-				border-radius: 12rpx;
-				background: #F2F2F2;
-				padding: 8rpx;
-				display: flex;
-				justify-content: space-between;
+	.progress-bar-section {
+		.progress-track {
+			height: 16rpx;
+			background: rgba(227, 227, 229, 0.6);
+			border-radius: 8rpx;
+			position: relative;
+			margin-bottom: 16rpx;
+			box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
+			overflow: hidden;
 
-				.defTab {
-					width: 50%;
+			.progress-fill {
+				height: 100%;
+				background: linear-gradient(90deg, #D42E78 0%, #19367A 100%);
+				border-radius: 8rpx;
+				position: relative;
+				transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+				box-shadow: 0 2rpx 4rpx rgba(212, 46, 120, 0.2);
+				min-width: 40rpx;
+
+				.progress-marker {
+					position: absolute;
+					right: -2rpx;
+					top: -28rpx;
+					transform: translateX(50%);
+					background: #D42E78;
+					padding: 4rpx 16rpx;
 					border-radius: 12rpx;
-					background: #F2F2F2;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					font-family: Source Han Sans;
-					font-size: 32rpx;
-					font-weight: 500;
-					color: #FFFFFF;
-					padding: 16rpx 48rpx;
-				}
+					transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+					box-shadow: 0 2rpx 8rpx rgba(212, 46, 120, 0.2);
 
-				.active {
-					background-color: #4E63E0;
+					text {
+						font-size: 24rpx;
+						color: #FFFFFF;
+						font-weight: 600;
+					}
+
+					&::after {
+						content: '';
+						position: absolute;
+						bottom: -6rpx;
+						left: 50%;
+						transform: translateX(-50%);
+						width: 0;
+						height: 0;
+						border-left: 6rpx solid transparent;
+						border-right: 6rpx solid transparent;
+						border-top: 6rpx solid #D42E78;
+					}
 				}
 			}
 		}
 
-		.scroll-container {
+		.progress-labels {
 			display: flex;
-			flex-direction: row;
-			white-space: nowrap;
-			height: 490rpx;
+			justify-content: space-between;
+			padding: 0 8rpx;
 
-			.beer-box {
-				width: 208rpx;
-				background: #FFFFFF;
-				margin-right: 28rpx;
-				margin-bottom: 36rpx;
-				box-sizing: border-box;
-				display: inline-block;
-
-				&:nth-child(1) {
-					margin-left: 32rpx;
+			text {
+				font-size: 28rpx;
+				font-family: Roboto;
+				font-weight: 500;
+				
+				&.start {
+					color: #D42E78;
 				}
-
-				.cover {
-					width: 208rpx;
-					height: 300rpx;
-					border-radius: 30rpx;
-					margin-bottom: 18rpx;
-				}
-
-				.title {
-					font-size: 28rpx;
-					color: #1E2019;
-					margin-bottom: 12rpx;
-					color: #19191B;
-				}
-
-				.desc {
-					font-size: 24rpx;
-					color: #A5A7B9;
-					margin-bottom: 12rpx;
-					color: #979797;
-				}
-
-				.num {
-
-					font-size: 20rpx;
-					color: #5F5F63;
+				&.end {
+					color: #19367A;
 				}
 			}
 		}
-		
-		// 奖励盒子
-		.reward-box {
-			background: #FFFFFF;
-			border-radius: 30rpx;
-			padding: 30rpx;
-			margin-bottom: 36rpx;
+	}
+
+	.tab-box {
+		display: flex;
+		background: #FFFFFF;
+		margin-bottom: 24rpx;
+		padding: 8rpx 20rpx;
+		border-radius: 16rpx;
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+
+		.tab-item {
+			flex: 1;
+			text-align: center;
+			font-size: 28rpx;
+			color: #666666;
+			padding: 24rpx 0;
+			position: relative;
+			transition: all 0.3s ease;
+
+			&.active {
+				color: #19367A;
+				font-weight: 600;
+
+				&::after {
+					content: '';
+					position: absolute;
+					bottom: 0;
+					left: 50%;
+					transform: translateX(-50%);
+					width: 48rpx;
+					height: 4rpx;
+					background: #19367A;
+					border-radius: 2rpx;
+					transition: all 0.3s ease;
+				}
+			}
 		}
-		
-		.log-box {
-			padding: 24rpx 36rpx;
-			background: #FFFFFF;
-			.log-item {
-				margin-bottom: 32rpx;
+	}
+
+	.info-list {
+		.info-item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 32rpx;
+			border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
+			transition: all 0.3s ease;
+			
+			&:active {
+				background: rgba(25, 54, 122, 0.05);
+			}
+			
+			&:last-child {
+				border-bottom: none;
+			}
+
+			text {
+				font-size: 28rpx;
+				color: #333333;
+			}
+
+			.right-content {
+				display: flex;
+				align-items: center;
+				gap: 16rpx;
+
+				.brand-logo {
+					width: 48rpx;
+					height: 48rpx;
+					border-radius: 50%;
+					border: 1rpx solid #19367A;
+				}
+
+				.info-text {
+					font-size: 28rpx;
+					color: #666666;
+					text-align: right;
+					
+					.highlight {
+						color: #19367A;
+						font-weight: 600;
+					}
+				}
+
+				.cuIcon-right {
+					color: #CCCCCC;
+					font-size: 24rpx;
+					margin-left: 8rpx;
+				}
+			}
+			
+			.log-info {
 				.time {
 					font-size: 28rpx;
 					color: #606060;
-					margin-bottom: 16rpx;
+					margin-bottom: 8rpx;
+					display: block;
 				}
-				.title{
-					color:#4E63E0;
+
+				.operation {
 					font-size: 32rpx;
+					color: #19367A;
+					font-weight: 500;
+				}
+			}
+
+			.percent {
+				font-size: 32rpx;
+				color: #19367A;
+				font-weight: 500;
+			}
+		}
+	}
+
+	.beer-section {
+		padding: 0 0 32rpx;
+	}
+
+	.beer-scroll {
+		padding: 24rpx 0;
+		
+		.beer-list {
+			display: flex;
+			padding: 0 32rpx;
+			gap: 24rpx;
+
+			.beer-card {
+				width: 200rpx;
+				flex-shrink: 0;
+				background: #F9F9F9;
+				border-radius: 12rpx;
+				padding: 16rpx;
+				transition: all 0.3s ease;
+				
+				&:active {
+					transform: scale(0.95);
+					background: #F0F0F0;
+				}
+
+				.beer-image {
+					width: 100%;
+					height: 280rpx;
+					border-radius: 8rpx;
+					margin-bottom: 12rpx;
+				}
+
+				.beer-info {
+					.name {
+						font-size: 28rpx;
+						color: #333333;
+						font-weight: bold;
+						margin-bottom: 8rpx;
+						display: block;
+					}
+
+					.style {
+						font-size: 24rpx;
+						color: rgba(51, 51, 51, 0.8);
+						margin-bottom: 8rpx;
+						display: block;
+					}
+
+					.rating {
+						display: flex;
+						align-items: center;
+						gap: 8rpx;
+
+						.rating-icon {
+							width: 20rpx;
+							height: 20rpx;
+						}
+
+						text {
+							font-size: 24rpx;
+							color: #666666;
+						}
+					}
 				}
 			}
 		}
-		.empty{
-			text-align: center;
-				font-size: 28rpx;
-				color: #A5A7B9;
-				height: 100rpx;
+	}
+
+	.empty-state {
+		padding: 100rpx 0;
+		text-align: center;
+		color: #A5A7B9;
+		font-size: 28rpx;
+	}
+
+	.reward-content {
+		display: flex;
+		align-items: center;
+		gap: 24rpx;
+		padding: 0 32rpx 32rpx;
+
+		.goods-image {
+			width: 160rpx;
+			height: 160rpx;
+			border-radius: 12rpx;
+			background: #FFFFFF;
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+		}
+
+		.goods-info {
+			flex: 1;
+
+			.name {
+				font-size: 32rpx;
+				color: #333333;
+				margin-bottom: 12rpx;
+				display: block;
+				font-weight: 600;
+			}
+
+			.specs-info {
+				display: flex;
+				align-items: center;
+				margin-bottom: 12rpx;
+				
+				.specs-label {
+					font-size: 32rpx;
+					color: #666666;
+				}
+				
+				.specs-value {
+					font-size: 32rpx;
+					color: #333333;
+					font-weight: 500;
+				}
+			}
+
+			.count {
+				font-size: 32rpx;
+				color: #333333;
+				font-weight: 500;
+			}
+		}
+
+		.coin-container {
+			position: relative;
+			width: 120rpx;
+			height: 120rpx;
+			flex-shrink: 0;
+			
+			.coin-logo {
+				width: 100%;
+				height: 100%;
+				border-radius: 50%;
+				position: relative;
+				background: #FFFFFF;
+				padding: 16rpx;
+				box-sizing: border-box;
+				object-fit: contain;
+			}
+		}
+
+		.coin-info {
+			flex: 1;
+
+			.name {
+				font-size: 32rpx;
+				color: #333333;
+				margin-bottom: 12rpx;
+				display: block;
+				font-weight: 600;
+			}
+
+			.count {
+				font-size: 32rpx;
+				color: #333333;
+				font-weight: 500;
+			}
 		}
 	}
-	.bottom-btn {
-		width: 434rpx;
-		height: 80rpx;
-		line-height: 80rpx;
-		text-align: center;
-		font-weight: 400;
-		font-size: 28rpx;
-		color: #FFFFFF;
-		border-radius: 12rpx;
-		background: #4E63E0;
+
+	.bottom-bar {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: #FFFFFF;
+		padding: 32rpx;
+		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
+		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(10px);
+		z-index: 100;
+
+		.status-info {
+			.label {
+				font-size: 28rpx;
+				color: #606060;
+				margin-left: 24rpx;
+				margin-bottom: 8rpx;
+				display: block;
+			}
+
+			.status {
+				font-size: 32rpx;
+				font-weight: 500;
+				padding: 8rpx 24rpx;
+				border-radius: 8rpx;
+				background: rgba(0, 0, 0, 0.03);
+
+				&.status-ongoing {
+					color: #FDCA40;
+					background: rgba(253, 202, 64, 0.1);
+				}
+
+				&.status-pending {
+					color: #19367A;
+					background: rgba(25, 54, 122, 0.1);
+				}
+
+				&.status-completed {
+					color: #D42E78;
+					background: rgba(212, 46, 120, 0.1);
+				}
+			}
+		}
+
+		.action-button {
+			width: 434rpx;
+			height: 96rpx;
+			border-radius: 48rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 12rpx;
+			font-size: 32rpx;
+			color: #FFFFFF;
+			transition: all 0.3s ease;
+			position: relative;
+			overflow: hidden;
+			margin-left: 24rpx;
+
+			&::before {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
+				opacity: 0;
+				transition: opacity 0.3s ease;
+			}
+
+			&:active::before {
+				opacity: 1;
+			}
+
+			.cuIcon-qr_code {
+				font-size: 40rpx;
+			}
+
+			&.scan-btn,
+			&.confirm-btn {
+				background: linear-gradient(135deg, #19367A, #2C4C99);
+				box-shadow: 0 4rpx 16rpx rgba(25, 54, 122, 0.2);
+
+				&:active {
+					transform: scale(0.98);
+					box-shadow: 0 2rpx 8rpx rgba(25, 54, 122, 0.1);
+				}
+			}
+
+			&.completed-btn {
+				background: #EFEFEF;
+				color: #333333;
+				box-shadow: none;
+
+				&:active {
+					background: #E5E5E5;
+				}
+			}
+		}
 	}
+}
 </style>
\ No newline at end of file
diff --git a/static/heart-remove.svg b/static/heart-remove.svg
new file mode 100644
index 0000000..8e89704
--- /dev/null
+++ b/static/heart-remove.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="48" height="48" viewBox="0 0 48 48"><g><g><g><g><path d="M42.484748828125,26.8248546875Q42.478148828125,26.8178546875,42.471948828125,26.8112746875Q42.456548828125,26.7949246875,42.440648828125,26.7790446875Q42.463248828125,26.8016746875,42.484748828125,26.8248546875ZM42.607148828125,26.9570546875Q42.544448828125,26.8678946875,42.469548828125,26.7887346875Q39.168148828125,23.2998046875,34.400028828125,23.2998046875Q29.803698828125,23.2998046875,26.551878828124998,26.551634687499998Q23.300048828125,29.8034546875,23.300048828125,34.3997846875Q23.300048828125,38.6213046875,26.143938828125002,41.8020046875Q29.464378828125,45.4998046875,34.400018828125,45.4998046875Q38.996348828125,45.4998046875,42.248148828125,42.2479046875Q45.500048828125,38.9961046875,45.500048828125,34.3997846875Q45.500048828125,30.1250146875,42.607148828125,26.9570546875ZM42.847348828125,28.1310046875Q42.799948828125,28.3542546875,42.688348828125,28.5533246875Q42.576748828125005,28.7523846875,42.410948828125,28.9092446875Q42.307448828125004,29.0071946875,42.187348828124996,29.0838946875Q42.067248828125,29.1606046875,41.934848828125,29.2133146875Q41.802448828125,29.2660246875,41.662448828125,29.2928646875Q41.522548828125,29.3197046875,41.380048828125,29.3197046875Q42.703048828125,29.3197046875,42.847348828125,28.1310046875ZM40.297048828125,28.8776646875Q42.500048828125,31.2230646875,42.500048828125,34.3997846875Q42.499948828125,37.7535046875,40.126848828125,40.1266046875Q37.753748828125,42.4998046875,34.400018828125,42.4998046875Q30.802498828125,42.4998046875,28.376078828125,39.7976046875Q26.300048828125,37.4757046875,26.300048828125,34.3997846875Q26.300048828125,31.046104687499998,28.673198828125,28.6729546875Q31.046338828125002,26.2998046875,34.400028828125,26.2998046875Q37.778848828125,26.2998046875,40.153648828125,28.7090146875Q40.218148828125,28.7960246875,40.297048828125,28.8776646875Z" fill-rule="evenodd" fill="#606060" fill-opacity="1"/></g><g><g><path d="M30.8372744140625,33.05856Q30.7332744140625,32.954157,30.6515844140625,32.831508Q30.5698944140625,32.708858,30.5136344140625,32.572657Q30.4573844140625,32.436455,30.4287044140625,32.291909Q30.4000244140625,32.147363,30.4000244140625,32Q30.4000244140625,31.9263097,30.4072444140625,31.852974Q30.4144744140625,31.779639,30.4288444140625,31.707365Q30.4432244140625,31.63509,30.4646144140625,31.564573Q30.4860044140625,31.494056,30.5142044140625,31.425975Q30.5424044140625,31.357894,30.5771444140625,31.292905Q30.6118844140625,31.227916,30.6528244140625,31.166645Q30.6937644140625,31.105373,30.7405044140625,31.04841Q30.7872544140625,30.99145,30.8393644140625,30.93934Q30.8914744140625,30.88723,30.9484344140625,30.84048Q31.0053974140625,30.79374,31.0666694140625,30.7528Q31.1279404140625,30.71186,31.1929294140625,30.67712Q31.2579184140625,30.64238,31.3259994140625,30.61418Q31.3940804140625,30.58598,31.4645974140625,30.56459Q31.5351144140625,30.5432,31.6073894140625,30.52882Q31.6796634140625,30.51445,31.7529984140625,30.50722Q31.8263341140625,30.5,31.9000244140625,30.5Q32.0481354140625,30.5,32.1933864140625,30.52897Q32.3386364140625,30.55793,32.4754174140625,30.61475Q32.6121984140625,30.67156,32.7352254140625,30.75403Q32.8582534140625,30.8365,32.9627744140625,30.94144L38.0222044140625,36.02088L38.0227144140625,36.02139Q38.1267044140625,36.1258,38.2083944140625,36.24845Q38.2900844140625,36.3711,38.3463444140625,36.5073Q38.4026044140625,36.6435,38.4312844140625,36.78805Q38.4599644140625,36.93259,38.4599644140625,37.07996Q38.4599644140625,37.15365,38.4527344140625,37.22698Q38.4455144140625,37.30032,38.4311344140625,37.37259Q38.4167644140625,37.44487,38.3953744140625,37.51538Q38.3739844140625,37.5859,38.3457844140625,37.65398Q38.3175744140625,37.72206,38.2828444140625,37.78705Q38.2481044140625,37.85204,38.207164414062504,37.91331Q38.1662244140625,37.97458,38.1194744140625,38.03155Q38.0727244140625,38.08851,38.020624414062496,38.14062Q37.9685144140625,38.19272,37.9115544140625,38.23947Q37.8545844140625,38.28622,37.7933144140625,38.32716Q37.7320444140625,38.3681,37.6670544140625,38.40284Q37.6020644140625,38.43757,37.5339844140625,38.46577Q37.4659044140625,38.49397,37.3953844140625,38.51537Q37.3248744140625,38.53676,37.2525944140625,38.55113Q37.1803244140625,38.56551,37.1069844140625,38.57273Q37.0336544140625,38.57996,36.9599644140625,38.57996Q36.8118544140625,38.57996,36.6666044140625,38.55099Q36.5213544140625,38.52202,36.3845644140625,38.46521Q36.2477844140625,38.40839,36.1247644140625,38.32593Q36.0017344140625,38.24346,35.8972044140625,38.13852L30.8372744140625,33.05856Z" fill-rule="evenodd" fill="#606060" fill-opacity="1"/></g><g><path d="M37.9627658203125,33.11863859375Q38.0667658203125,33.01422759375,38.1484558203125,32.89157759375Q38.2301458203125,32.76892759375,38.2864058203125,32.63272359375Q38.3426658203125,32.49652059375,38.3713458203125,32.35197259375Q38.4000258203125,32.20742459375,38.4000258203125,32.06005859375Q38.4000258203125,31.98636829375,38.3928058203125,31.91303259375Q38.385575820312496,31.83969759375,38.3712058203125,31.76742359375Q38.3568258203125,31.69514859375,38.3354358203125,31.62463159375Q38.3140458203125,31.55411459375,38.2858458203125,31.48603359375Q38.2576458203125,31.41795259375,38.2229058203125,31.35296359375Q38.1881658203125,31.28797459375,38.1472258203125,31.22670359375Q38.1062858203125,31.16543159375,38.0595358203125,31.10846859375Q38.0127958203125,31.05150859375,37.9606858203125,30.99939859375Q37.9085758203125,30.94728859375,37.8516158203125,30.90053859375Q37.7946558203125,30.85379859375,37.7333758203125,30.81285859375Q37.6721058203125,30.77191859375,37.6071158203125,30.73717859375Q37.5421258203125,30.70243859375,37.4740458203125,30.67423859375Q37.4059658203125,30.64603859375,37.335455820312504,30.62464859375Q37.2649358203125,30.60325859375,37.1926558203125,30.58887859375Q37.1203858203125,30.57450859375,37.0470458203125,30.56727859375Q36.9737158203125,30.56005859375,36.9000258203125,30.56005859375Q36.7519158203125,30.56005859375,36.6066658203125,30.58902859375Q36.4614158203125,30.61798859375,36.3246358203125,30.67479859375Q36.1878658203125,30.73161859375,36.0648358203125,30.81407859375Q35.9418058203125,30.89654859375,35.8372858203125,31.00147859375L30.7772258203125,36.08143859375Q30.6732258203125,36.18584859375,30.5915358203125,36.30849859375Q30.5098458203125,36.43114859375,30.4535858203125,36.56734859375Q30.3973258203125,36.70354859375,30.3686458203125,36.84809859375Q30.3399658203125,36.99264859375,30.3399658203125,37.14001859375Q30.3399658203125,37.21370859375,30.3471858203125,37.28703859375Q30.3544158203125,37.36037859375,30.3687858203125,37.43264859375Q30.3831658203125,37.50492859375,30.4045558203125,37.57543859375Q30.4259458203125,37.64595859375,30.4541458203125,37.71403859375Q30.4823458203125,37.78211859375,30.5170858203125,37.84710859375Q30.5518258203125,37.91209859375,30.5927658203125,37.97336859375Q30.6337058203125,38.03463859375,30.6804458203125,38.09160859375Q30.7271958203125,38.14856859375,30.7793058203125,38.20067859375Q30.8314158203125,38.25277859375,30.8883758203125,38.29952859375Q30.9453388203125,38.34627859375,31.0066108203125,38.38721859375Q31.0678818203125,38.42815859375,31.1328708203125,38.46289859375Q31.1978598203125,38.49762859375,31.2659408203125,38.52582859375Q31.3340218203125,38.55402859375,31.4045388203125,38.57542859375Q31.4750558203125,38.59681859375,31.5473308203125,38.61118859375Q31.6196048203125,38.62556859375,31.6929398203125,38.63278859375Q31.7662755203125,38.64001859375,31.8399658203125,38.64001859375Q31.9880748203125,38.64001859375,32.1333228203125,38.61104859375Q32.2785718203125,38.58207859375,32.4153498203125,38.52526859375Q32.5521288203125,38.46845859375,32.6751558203125,38.38598859375Q32.7981818203125,38.30352859375,32.9027058203125,38.19858859375L37.9627658203125,33.11863859375Z" fill-rule="evenodd" fill="#606060" fill-opacity="1"/></g></g><g><g><path d="M5.5,17.3801732421875Q5.5,13.3414132421875,8.32067,10.5207432421875Q8.425139999999999,10.4162732421875,8.50721,10.2934432421875Q8.58929,10.1706032421875,8.64583,10.0341032421875Q8.70237,9.8976132421875,8.73119,9.7527232421875Q8.760010000000001,9.6078232421875,8.760010000000001,9.4600832421875Q8.760010000000001,9.3863932421875,8.752790000000001,9.3130532421875Q8.745560000000001,9.2397232421875,8.73119,9.167443242187499Q8.716809999999999,9.0951732421875,8.69542,9.024653242187501Q8.67403,8.9541432421875,8.64583,8.8860532421875Q8.61763,8.8179732421875,8.582889999999999,8.7529832421875Q8.54815,8.6880032421875,8.50721,8.6267232421875Q8.46627,8.5654532421875,8.41953,8.5084932421875Q8.372779999999999,8.4515332421875,8.32067,8.399423242187499Q8.26856,8.3473132421875,8.2116,8.3005632421875Q8.15464,8.2538232421875,8.09336,8.2128832421875Q8.03209,8.1719432421875,7.9671,8.1372032421875Q7.90212,8.1024632421875,7.83403,8.0742632421875Q7.76595,8.0460632421875,7.69544,8.0246732421875Q7.6249199999999995,8.0032832421875,7.55264,7.9889032421875Q7.480370000000001,7.9745332421874995,7.40704,7.9673032421875Q7.3337,7.9600832421875,7.260009999999999,7.9600832421875Q7.1122700000000005,7.9600832421875,6.96737,7.9889032421875Q6.8224800000000005,8.0177232421875,6.68598,8.0742632421875Q6.5494900000000005,8.1308032421875,6.42665,8.2128832421875Q6.30382,8.2949532421875,6.19935,8.399423242187499L6.19902,8.3997532421875Q2.5,12.0990032421875,2.5,17.3801732421875Q2.5,27.2361732421875,10.131540000000001,35.055273242187496Q15.7502,40.8120732421875,22.2754,43.0396732421875Q24,43.6484732421875,25.7392,43.0345732421875Q26.6496,42.7313732421875,27.8863,42.1631732421875Q27.9532,42.1323732421875,28.0168,42.0952732421875Q28.0805,42.0580732421875,28.1401,42.0147732421875Q28.1998,41.9715732421875,28.255,41.9226732421875Q28.3101,41.8737732421875,28.3602,41.8197732421875Q28.4103,41.7657732421875,28.4548,41.7070732421875Q28.4994,41.6483732421875,28.538,41.5855732421875Q28.5766,41.5227732421875,28.6088,41.4564732421875Q28.641,41.3902732421875,28.6666,41.3211732421875Q28.6922,41.2520732421875,28.7109,41.1807732421875Q28.7296,41.1094732421875,28.7412,41.0366732421875Q28.7529,40.9639732421875,28.7573,40.8903732421875Q28.7617,40.8168732421875,28.7589,40.7431732421875Q28.7561,40.6695732421875,28.7461,40.5965732421875Q28.7361,40.5235732421875,28.719,40.4518732421875Q28.7019,40.3801732421875,28.6778,40.3105732421875Q28.6538,40.2408732421875,28.623,40.1738732421875Q28.5287,39.9686732421875,28.3782,39.8003732421875Q26.3,37.476073242187496,26.3,34.4001732421875Q26.3,31.0464732421875,28.6732,28.6732732421875Q31.0463,26.3001732421875,34.4,26.3001732421875Q37.8767,26.3001732421875,40.2905,28.8510732421875Q40.3411,28.9045732421875,40.3968,28.9528732421875Q40.4524,29.0011732421875,40.5125,29.0437732421875Q40.5726,29.0863732421875,40.6367,29.1228732421875Q40.7007,29.1594732421875,40.7679,29.1894732421875Q40.8352,29.2195732421875,40.9051,29.2428732421875Q40.975,29.2662732421875,41.0468,29.2825732421875Q41.1187,29.2989732421875,41.1918,29.3081732421875Q41.2649,29.3174732421875,41.3386,29.3194732421875Q41.4122,29.3215732421875,41.4858,29.3163732421875Q41.5593,29.3111732421875,41.6319,29.2987732421875Q41.7045,29.2863732421875,41.7756,29.2669732421875Q41.8467,29.2474732421875,41.9155,29.2211732421875Q41.9844,29.1948732421875,42.0503,29.1619732421875Q42.1162,29.1290732421875,42.1786,29.0897732421875Q42.241,29.0505732421875,42.2992,29.0053732421875Q42.3574,28.9602732421875,42.411,28.9095732421875Q42.5901,28.7401732421875,42.7055,28.5222732421875Q45.5,23.2475732421875,45.5,17.3801732421875Q45.5,12.1271632421875,41.8058,8.414573242187501Q38.1097,4.7000732421875,32.879999999999995,4.7000732421875Q27.5364,4.7000732421875,24,8.3481132421875Q20.4636,4.7000732421875,15.12,4.7000732421875Q15.0463,4.7000732421875,14.973,4.7072932421875Q14.8996,4.7145232421875,14.8274,4.7288932421875Q14.7551,4.7432732421875,14.6846,4.7646632421875Q14.614,4.7860532421875,14.546,4.8142532421875Q14.4779,4.8424532421875,14.4129,4.8771932421875Q14.3479,4.9119332421875,14.2866,4.9528732421875Q14.2254,4.9938132421875,14.1684,5.0405532421874994Q14.1114,5.0873032421875,14.0593,5.1394132421875Q14.0072,5.1915232421875,13.96048,5.2484832421875Q13.91373,5.3054462421875,13.87279,5.3667182421875Q13.83185,5.4279892421875005,13.79711,5.4929782421875Q13.76238,5.5579672421875,13.73418,5.6260482421875Q13.70598,5.6941292421875005,13.68459,5.7646462421875Q13.66319,5.8351632421875,13.64882,5.9074382421875Q13.63444,5.9797122421875,13.62722,6.0530472421875Q13.62,6.1263829421875,13.62,6.2000732421875Q13.62,6.2737635421875,13.62722,6.3470992421875Q13.63444,6.4204342421875,13.64882,6.4927082421875Q13.66319,6.5649832421875,13.68459,6.6355002421875Q13.70598,6.7060172421874995,13.73418,6.7740982421875Q13.76238,6.8421792421875,13.79711,6.9071682421875Q13.83185,6.9721572421874995,13.87279,7.0334282421875Q13.91373,7.0947002421875,13.96048,7.1516632421875Q14.0072,7.2086232421875,14.0593,7.2607332421875Q14.1114,7.3128432421875,14.1684,7.3595932421875006Q14.2254,7.4063332421875,14.2866,7.4472732421875Q14.3479,7.4882132421875,14.4129,7.5229532421875Q14.4779,7.5576932421875,14.546,7.5858932421875Q14.6141,7.6140932421875,14.6846,7.6354832421875Q14.7551,7.6568732421875,14.8274,7.6712532421875Q14.8996,7.6856232421875,14.973,7.6928532421875Q15.0463,7.7000732421875,15.12,7.7000732421875L15.1211,7.7000732421875Q19.912399999999998,7.7005332421875,22.7989,11.5587332421875Q22.9284,11.731763242187501,23.1014,11.8612232421875Q23.1604,11.9053632421875,23.2235,11.9435132421875Q23.2865,11.9816632421875,23.353,12.013443242187499Q23.4195,12.0452332421875,23.4888,12.0703432421875Q23.558,12.095463242187499,23.6294,12.1136632421875Q23.7009,12.131873242187499,23.7737,12.142983242187501Q23.8466,12.1541032421875,23.9201,12.1580232421875Q23.9937,12.1619532421875,24.0673,12.1586432421875Q24.141,12.155333242187499,24.2139,12.144823242187499Q24.2868,12.134323242187499,24.3584,12.116713242187501Q24.4299,12.0991032421875,24.4994,12.074573242187501Q24.5689,12.0500332421875,24.6357,12.0188032421875Q24.7024,11.987583242187501,24.7658,11.9499632421875Q24.8291,11.9123432421875,24.8885,11.8686932421875Q24.9479,11.825043242187501,25.0027,11.7757832421875Q25.0575,11.7265232421875,25.1072,11.672133242187499Q25.1569,11.6177332421875,25.2011,11.5587332421875Q28.0879,7.7000732421875,32.879999999999995,7.7000732421875Q36.8627,7.7000732421875,39.6792,10.530623242187499Q42.5,13.3654432421875,42.5,17.3801732421875Q42.5,21.5452732421875,40.8828,25.3757732421875Q38.0777,23.3001732421875,34.4,23.3001732421875Q29.8037,23.3001732421875,26.5519,26.5519732421875Q23.3,29.8038732421875,23.3,34.4001732421875Q23.3,37.569373242187496,24.9016,40.1506732421875Q24.8198,40.1792732421875,24.7408,40.2056732421875Q24,40.4670732421875,23.2446,40.2005732421875Q17.397,38.2042732421875,12.27847,32.9598732421875Q5.5,26.0147732421875,5.5,17.3801732421875Z" fill-rule="evenodd" fill="#606060" fill-opacity="1"/></g></g><g transform="matrix(-1,-1.2246469849340659e-16,1.2246469849340659e-16,-1,96,96)" style="opacity:0;"></g></g></g></g></svg>
\ No newline at end of file