From 60281f17ce073493a7e5910f210f7f2ba591823b Mon Sep 17 00:00:00 2001
From: davy <davy@example.com>
Date: Tue, 8 Apr 2025 03:26:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96UI=EF=BC=9A1.=20=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E6=A0=87=E7=AD=BE=E9=A1=B5=E5=AF=BC=E8=88=AA=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=202.=20=E4=BC=98=E5=8C=96=E5=86=85=E5=AE=B9=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E5=8D=A1=E7=89=87=E9=98=B4=E5=BD=B1=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=203.=20=E8=B0=83=E6=95=B4=E5=9C=A8=E5=94=AE=E9=85=92=E6=AC=BE?=
 =?UTF-8?q?=E5=92=8C=E7=B4=AF=E7=A7=AF=E6=B4=BB=E5=8A=A8=E7=9A=84=E9=A1=BA?=
 =?UTF-8?q?=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BeerCard.vue   |   9 +-
 pages/index/brandHome.vue | 825 ++++++++++++++++++++++++++------------
 2 files changed, 574 insertions(+), 260 deletions(-)

diff --git a/components/BeerCard.vue b/components/BeerCard.vue
index 00c9fc6..07288b6 100644
--- a/components/BeerCard.vue
+++ b/components/BeerCard.vue
@@ -46,11 +46,10 @@
 	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
 	transition: all 0.3s ease;
 	
-
 	&:active {
 		transform: scale(0.98);
 	}
-
+	
 	.beer-cover {
 		width: 144rpx;
 		height: 204rpx;
@@ -58,7 +57,7 @@
 		border-radius: 12rpx;
 		object-fit: cover;
 	}
-
+	
 	.beer-info {
 		.beer-name {
 			font-size: 32rpx;
@@ -82,7 +81,7 @@
 				margin-right: 12rpx;
 				border-radius: 50%;
 			}
-
+			
 			.brand-name {
 				font-size: 28rpx;
 				color: #1E2019;
@@ -104,7 +103,7 @@
 					margin-right: 4rpx;
 				}
 			}
-
+			
 			.review-count {
 				color: #5F5F63;
 				font-size: 24rpx;
diff --git a/pages/index/brandHome.vue b/pages/index/brandHome.vue
index d8e973a..026fffe 100644
--- a/pages/index/brandHome.vue
+++ b/pages/index/brandHome.vue
@@ -14,120 +14,213 @@
 			<image class="banner" :src="breweryInfo.brandCover" mode="aspectFill"></image>
 			<view class="banner-overlay"></view>
 		</view>
+		
+		<!-- 品牌信息卡片 -->
 		<view class="brand-header">
-			<view style="padding:0 24rpx">
-				<view class="flex align-start justify-between margin-bottom-xl">
+			<view class="brand-info">
+				<view class="flex align-start justify-between">
 					<view class="flex align-center">
 						<image :src="breweryInfo.brandLogo" class="brand-logo" mode="aspectFill"></image>
 						<view class="flex flex-col">
 							<text class="brand-name">{{ breweryInfo.brandName}}</text>
-							<text class="brand-location">{{breweryInfo.country}}·{{breweryInfo.province}}·{{breweryInfo.city}}</text>
+							<view class="brand-location">
+								<text class="cuIcon-location"></text>
+								<text>{{breweryInfo.country}}·{{breweryInfo.province}}·{{breweryInfo.city}}</text>
+							</view>
 						</view>
 					</view>
 					<view class="action-buttons">
-						<view class="favor-btn" @click="favorBreweryFun(1)" v-if="!isFavor">
-							<image src="/static/heart-add.png" class="favor-icon" mode="aspectFit"></image>
+						<view class="action-btn favor-btn" @click="favorBreweryFun(1)" v-if="!isFavor">
+							<image src="/static/heart-add.png" class="action-icon" mode="aspectFit"></image>
 						</view>
-						<view class="favor-btn" @click="favorBreweryFun(2)" v-else>
-							<image src="/static/heart-tick.png" class="favor-icon" mode="aspectFit"></image>
+						<view class="action-btn favor-btn active" @click="favorBreweryFun(2)" v-else>
+							<image src="/static/heart-tick.png" class="action-icon" mode="aspectFit"></image>
 						</view>
-						<view class="share-btn" @click="share">
-							<image src="/static/send.png" class="share-icon" mode="aspectFit"></image>
+						<view class="action-btn share-btn" @click="share">
+							<image src="/static/send.png" class="action-icon" mode="aspectFit"></image>
 						</view>
 					</view>
 				</view>
+				
 				<view class="brand-stats">
 					<view class="stat-item">
 						<text class="stat-value">{{ beerTotal}}</text>
 						<text class="stat-label">在售酒款</text>
 					</view>
+					<view class="stat-divider"></view>
 					<view class="stat-item">
 						<text class="stat-value">{{ breweryInfo.buildingDate && breweryInfo.buildingDate.substr(0,4)}}</text>
 						<text class="stat-label">since</text>
 					</view>
+					<view class="stat-divider"></view>
 					<view class="stat-item">
 						<text class="stat-value">{{myCoin || '--'}}</text>
 						<text class="stat-label">啤酒币</text>
 					</view>
 				</view>
-			</view>
-			<view class="brand-desc">
-				{{breweryInfo.desc}}
+				
+				<view class="brand-desc-container">
+					<view class="brand-desc">{{breweryInfo.desc}}</view>
+				</view>
 			</view>
 		</view>
 
+		<!-- 标签页导航 -->
+		<view class="tab-nav">
+			<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 
+				class="tab-item" 
+				:class="{'active':currentTab == 3}" 
+				@click="changeTab(3)"
+			>
+				<text>啤酒币兑换</text>
+			</view>
+		</view>
+
+		<!-- 内容区域 -->
 		<view class="content-box">
-			<view class="top flex align-center justify-between">
-				<view class="def-box" :class="{'active':currentTab == 1}" @click="changeTab(1)">累积活动</view>
-				<view class="def-box" :class="{'active':currentTab == 2}" @click="changeTab(2)">在售酒款</view>
-				<view class="def-box" :class="{'active':currentTab == 3}" @click="changeTab(3)">啤酒币兑换</view>
-			</view>
-			<!-- 累积活动 -->
-			<view v-if="currentTab == 1">
-				<scroll-view scroll-y enable-flex class="scroll-container" @scrolltolower="changeActPage">
-					<activity-item
-						v-for="(item, index) in activityList"
-						:key="index"
-						:item="item"
-						@click="toActivityDetail"
-						@review="toReview"
-					></activity-item>
-					<view class="cu-load" style="width: 100%;"
-						:class="loading?'loading': activityList.length == activityTotal ? 'over' :'more'"></view>
-				</scroll-view>
-			</view>
 			<!-- 在售酒款 -->
-			<view v-if="currentTab == 2" class="">
-				<scroll-view scroll-y enable-flex class="scroll-container flex justify-start flex-wrap" @scrolltolower="changeBeerPage">
-					<view class="beer-box" v-for="(it, index) in beerList" :key="index" @click="toReview(it)">
-						<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 v-if="currentTab == 1" class="tab-content">
+				<scroll-view 
+					scroll-y 
+					enable-flex 
+					class="scroll-container" 
+					@scrolltolower="onScrollToLower"
+				>
+					<view class="beer-grid">
+						<beer-card
+							v-for="(item, index) in beerList"
+							:key="index"
+							:item="item"
+							@click="toReview(item)"
+							v-if="item && item.id"
+						></beer-card>
+					</view>
+					
+					<view 
+						class="loading-state" 
+						:class="loading ? 'loading' : beerList.length >= beerTotal ? 'no-more' : ''"
+						v-if="beerList.length > 0"
+					>
+						<view v-if="loading" class="loading-text">
+							<text class="cuIcon-loading2 iconfont-spin"></text>
+							<text>加载中...</text>
+						</view>
+						<text v-else-if="beerList.length >= beerTotal" class="no-more-text">没有更多了</text>
+					</view>
+					
+					<view class="empty-state" v-if="!loading && beerList.length === 0">
+						<image src="/static/empty.png" mode="aspectFit" class="empty-image"></image>
+						<text class="empty-text">暂无在售酒款</text>
 					</view>
-					<view class="cu-load" style="width: 100%;"
-						:class="loading?'loading': beerList.length == beerTotal ? 'over' :'more'"></view>
 				</scroll-view>
 			</view>
+			
+			<!-- 累积活动 -->
+			<view v-if="currentTab == 2" class="tab-content">
+				<scroll-view 
+					scroll-y 
+					enable-flex 
+					class="scroll-container" 
+					@scrolltolower="onScrollToLower"
+				>
+					<!-- 空状态 -->
+					<view v-if="!loading && activityList.length === 0" class="empty-state">
+						<image src="/static/images/empty.png" class="empty-image" mode="aspectFit"></image>
+						<text class="empty-text">暂无活动</text>
+					</view>
+					
+					<!-- 活动列表 -->
+					<view class="activity-list" v-else>
+						<activity-item
+							v-for="(item, index) in activityList"
+							:key="index"
+							:item="item"
+							@click="toActivityDetail"
+							@review="toReview"
+						></activity-item>
+					</view>
+					
+					<!-- 加载状态 -->
+					<view 
+						class="loading-state" 
+						:class="loading ? 'loading' : activityList.length >= activityTotal ? 'no-more' : ''"
+						v-if="activityList.length > 0"
+					>
+						<view v-if="loading" class="loading-text">
+							<text class="cuIcon-loading2 iconfont-spin"></text>
+							<text>加载中...</text>
+						</view>
+						<text v-else-if="activityList.length >= activityTotal" class="no-more-text">没有更多了</text>
+					</view>
+				</scroll-view>
+			</view>
+			
 			<!-- 啤酒币兑换 -->
-			<view v-if="currentTab == 3" class="goods-container">
-				<scroll-view scroll-y enable-flex class="flex justify-start flex-wrap" style="height: 100%;"
-					lower-threshold="20" @scrolltolower="changeGoodsPage">
-					<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
-						<view class="cover-box">
-							<image :src="item.goodsCover" class="cover"></image>
-							<!-- <view class="like">
-								<text v-if="index % 2 == 0" class="cuIcon-like" style="color: #1E2019"></text>
-								<text v-else class="cuIcon-likefill" style="color: pink"></text>
-							</view> -->
-						</view>
-						<view class="title">
-							<text>{{ item.goodsName }}</text>
-						</view>
-						<view class="flex justify-between align-center" style="padding:26rpx 16rpx">
-							<view class="flex align-center">
-								<text class="num">{{ item.redeemedNum}}</text>
-								<image src="@/static/beerCoin.png"
-									style="width: 30rpx;height: 30rpx;margin-left: 20rpx;">
-								</image>
+			<view v-if="currentTab == 3" class="tab-content">
+				<scroll-view 
+					scroll-y 
+					enable-flex 
+					class="scroll-container" 
+					@scrolltolower="onScrollToLower"
+				>
+					<view class="goods-grid">
+						<view 
+							class="goods-item" 
+							v-for="(item, index) in goodsList" 
+							:key="index"
+							@click="toDetail(item)"
+						>
+							<image class="goods-image" :src="item.goodsCover" mode="aspectFill"></image>
+							<view class="goods-info">
+								<view class="goods-title text-cut">{{item.goodsName}}</view>
+								<view class="goods-price">
+									<view class="price-left">
+										<text class="price-num">{{item.redeemedNum}}</text>
+										<text class="cuIcon-rechargefill coin-icon"></text>
+									</view>
+									<text class="brand-name">{{item.brandName}}</text>
+								</view>
 							</view>
-							<!-- <text style="color: #979797;font-size: 20rpx;">青岛啤酒</text> -->
 						</view>
 					</view>
-					<view class="cu-load" style="width: 100%;"
-						:class="loading?'loading': goodsList.length == goodsTotal ? 'over' :'more'"></view>
+					
+					<view 
+						class="loading-state" 
+						:class="loading ? 'loading' : goodsList.length >= goodsTotal ? 'no-more' : ''"
+						v-if="goodsList.length > 0"
+					>
+						<view v-if="loading" class="loading-text">
+							<text class="cuIcon-loading2 iconfont-spin"></text>
+							<text>加载中...</text>
+						</view>
+						<text v-else-if="goodsList.length >= goodsTotal" class="no-more-text">没有更多了</text>
+					</view>
+					
+					<view class="empty-state" v-if="!loading && goodsList.length === 0">
+						<image src="/static/empty.png" mode="aspectFit" class="empty-image"></image>
+						<text class="empty-text">暂无兑换商品</text>
+					</view>
 				</scroll-view>
 			</view>
 		</view>
+		
 		<!-- 登录弹窗组件 -->
 		<loginPopup ref="loginRef" @loginSuccess="loginSuccess"></loginPopup>
 	</view>
-
 </template>
 
 <script>
@@ -142,14 +235,18 @@
 	} from '@/api/bar.js'
 	import loginPopup from '@/components/loginPopup.vue';
 	import ActivityItem from '@/components/ActivityItem.vue';
+	import BeerCard from '@/components/BeerCard.vue';
 	export default {
 		components: {
 			loginPopup,
-			ActivityItem
+			ActivityItem,
+			BeerCard
 		},
 		data() {
 			return {
 				statusBarHeight: 0, // 状态栏高度
+				showTabNav: false,
+				scrollTop: 0,
 				breweryId: '',
 				currentTab: 1,
 				breweryInfo: {}, // 品牌方详情
@@ -166,9 +263,9 @@
 				myCoin: 0, // 我的啤酒币
 				queryForm: {
 					pageNum: 1,
-					pageSize: 4,
+					pageSize: 5,
 					id: ''
-				}
+				},
 			};
 		},
 		onLoad({
@@ -196,17 +293,15 @@
 				this.currentTab = index
 				this.queryForm.pageNum = 1
 				if (index == 1) {
-					this.activityList = []
-					this.getBreweryActivitiesFun()
-
-				} else if (index == 2) {
 					this.beerList = []
 					this.getBreweryBeerListFun()
+				} else if (index == 2) {
+					this.activityList = []
+					this.getBreweryActivitiesFun()
 				} else if (index == 3) {
 					this.goodsList = []
 					this.getBreweryGoodsListFun()
 				}
-
 			},
 			// 登录成功回调
 			loginSuccess() {
@@ -308,9 +403,7 @@
 							it.remainingDays = this.getRemainingDays(it.endDate)
 							return it
 						})
-						arr.forEach(it => {
-							this.activityList.push(it)
-						})
+						this.activityList = [...this.activityList, ...arr]
 					}
 				}).catch(err => {
 					console.error('获取累积活动失败:', err)
@@ -321,12 +414,6 @@
 					this.loading = false
 				})
 			},
-			changeActPage() {
-				if (this.activityList.length < this.activityTotal) {
-					this.queryForm.pageNum++
-					this.getBreweryActivitiesFun()
-				}
-			},
 			// 在售酒款
 			getBreweryBeerListFun() {
 				this.loading = true
@@ -334,9 +421,7 @@
 					this.loading = false
 					this.beerTotal = res.total
 					if (res.rows && res.rows.length > 0) {
-						res.rows.forEach(it => {
-							this.beerList.push(it)
-						})
+						this.beerList = [...this.beerList, ...res.rows.filter(item => item && item.id)]
 					}
 				}).catch(err => {
 					console.error('获取在售酒款失败:', err)
@@ -347,13 +432,6 @@
 					this.loading = false
 				})
 			},
-
-			changeBeerPage() {
-				if (this.beerList.length < this.beerTotal) {
-					this.queryForm.pageNum++
-					this.getBreweryBeerListFun()
-				}
-			},
 			// 兑换商品
 			getBreweryGoodsListFun() {
 				this.loading = true
@@ -361,9 +439,7 @@
 					this.loading = false
 					this.goodsTotal = res.total
 					if (res.rows && res.rows.length > 0) {
-						res.rows.forEach(it => {
-							this.goodsList.push(it)
-						})
+						this.goodsList = [...this.goodsList, ...res.rows]
 					}
 				}).catch(err => {
 					console.error('获取兑换商品失败:', err)
@@ -374,8 +450,17 @@
 					this.loading = false
 				})
 			},
-			changeGoodsPage() {
-				if (this.goodsList.length < this.goodsTotal) {
+			// 滚动加载更多
+			onScrollToLower() {
+				if (this.loading) return
+				
+				if (this.currentTab === 1 && this.activityList.length < this.activityTotal) {
+					this.queryForm.pageNum++
+					this.getBreweryActivitiesFun()
+				} else if (this.currentTab === 2 && this.beerList.length < this.beerTotal) {
+					this.queryForm.pageNum++
+					this.getBreweryBeerListFun()
+				} else if (this.currentTab === 3 && this.goodsList.length < this.goodsTotal) {
 					this.queryForm.pageNum++
 					this.getBreweryGoodsListFun()
 				}
@@ -492,12 +577,22 @@
 					url: "/pages/index/review?beerId=" + it.id
 				})
 			},
+			onPageScroll(e) {
+				const tabNavThreshold = 300; // 设置一个阈值，当滚动超过这个值时显示导航
+				this.scrollTop = e.scrollTop;
+				this.showTabNav = this.scrollTop > tabNavThreshold;
+			},
 		},
 	}
 </script>
 
 <style lang="scss" scoped>
 	.page-content {
+		min-height: 100vh;
+		background-color: #F6F7FB;
+		position: relative;
+		
+		/* 导航栏样式 */
 		.custom-nav {
 			position: fixed;
 			top: 0;
@@ -505,7 +600,6 @@
 			right: 0;
 			z-index: 999;
 			background: transparent;
-			// color: #f9f9f9
 			
 			.nav-content {
 				height: 44px;
@@ -519,22 +613,26 @@
 					display: flex;
 					align-items: center;
 					justify-content: center;
-					background: rgba(255, 255, 255, 0.8);
+					background: rgba(255, 255, 255, 0.9);
 					border-radius: 50%;
+					box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+					backdrop-filter: blur(10px);
+					-webkit-backdrop-filter: blur(10px);
 					
 					.cuIcon-back {
 						font-size: 36rpx;
-						color: #000;
+						color: #333;
 					}
 				}
 			}
 		}
 		
+		/* 品牌广告图片 */
 		.banner-container {
 			position: relative;
 			width: 100%;
 			height: 0;
-			padding-bottom: 75%; /* 4:3 比例 (3/4 = 0.75 = 75%) */
+			padding-bottom: 75%; /* 4:3 比例 */
 			margin-top: v-bind('statusBarHeight + 44 + "px"');
 			overflow: hidden;
 			
@@ -545,6 +643,11 @@
 				width: 100%;
 				height: 100%;
 				object-fit: cover;
+				transition: transform 0.3s ease;
+				
+				&:active {
+					transform: scale(1.02);
+				}
 			}
 			
 			.banner-overlay {
@@ -553,28 +656,37 @@
 				left: 0;
 				right: 0;
 				height: 200rpx;
-				background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
+				background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
 			}
 		}
 
+		/* 品牌信息卡片 */
 		.brand-header {
 			position: relative;
 			width: 100%;
-			padding: 40rpx 32rpx;
-			background-color: #fff;
-			border-radius: 30rpx 0 0 0;
 			margin-top: -150rpx;
-			margin-bottom: 20rpx;
 			z-index: 1;
-			box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.05);
+			
+			.brand-info {
+				background-color: #fff;
+				border-radius: 42rpx 0rpx 0 0;
+				padding: 40rpx 32rpx;
+				box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.05);
+			}
 			
 			.brand-logo {
-				width: 88rpx;
-				height: 88rpx;
+				width: 100rpx;
+				height: 100rpx;
 				margin-right: 24rpx;
 				border-radius: 50%;
 				object-fit: cover;
 				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+				border: 4rpx solid #fff;
+				transition: transform 0.3s ease;
+				
+				&:active {
+					transform: scale(1.05);
+				}
 			}
 			
 			.brand-name {
@@ -586,9 +698,17 @@
 			}
 			
 			.brand-location {
+				display: flex;
+				align-items: center;
 				color: #5E5F60;
 				font-size: 24rpx;
 				line-height: 1.4;
+				
+				.cuIcon-location {
+					font-size: 24rpx;
+					margin-right: 8rpx;
+					color: #19367A;
+				}
 			}
 			
 			.action-buttons {
@@ -596,7 +716,7 @@
 				align-items: center;
 				gap: 16rpx;
 				
-				.favor-btn, .share-btn {
+				.action-btn {
 					width: 72rpx;
 					height: 72rpx;
 					display: flex;
@@ -609,9 +729,19 @@
 					&:active {
 						transform: scale(0.95);
 					}
+					
+					&.active {
+						background: #19367A;
+					}
+					
+					&.favor-btn {
+						&.active {
+							background: rgba(255, 77, 79, 0.1);
+						}
+					}
 				}
 				
-				.favor-icon, .share-icon {
+				.action-icon {
 					width: 36rpx;
 					height: 36rpx;
 				}
@@ -620,10 +750,11 @@
 			.brand-stats {
 				display: flex;
 				justify-content: space-between;
-				margin: 40rpx 0;
+				align-items: center;
+				margin: 32rpx 0;
 				padding: 32rpx 0;
-				border-top: 1px solid rgba(0, 0, 0, 0.05);
-				border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+				background: rgba(246, 247, 251, 0.5);
+				border-radius: 12rpx;
 				
 				.stat-item {
 					flex: 1;
@@ -632,17 +763,6 @@
 					align-items: center;
 					position: relative;
 					
-					&:not(:last-child):after {
-						content: '';
-						position: absolute;
-						right: 0;
-						top: 50%;
-						transform: translateY(-50%);
-						width: 1px;
-						height: 40rpx;
-						background: rgba(0, 0, 0, 0.05);
-					}
-					
 					.stat-value {
 						font-size: 40rpx;
 						font-weight: 600;
@@ -657,152 +777,347 @@
 						line-height: 1.4;
 					}
 				}
+				
+				.stat-divider {
+					width: 2rpx;
+					height: 60rpx;
+					background: rgba(0, 0, 0, 0.05);
+				}
 			}
 			
-			.brand-desc {
-				color: #666666;
-				font-size: 26rpx;
-				line-height: 1.8;
-				text-indent: 2em;
-				margin: 0 8rpx;
+			.brand-desc-container {
+				margin-left: 20rpx;
+				margin-right: 20rpx;
+				padding-top: 20rpx;
+				
+				.brand-desc {
+					color: #666666;
+					font-size: 26rpx;
+					line-height: 1.8;
+					text-indent: 2em;
+				}
 			}
 		}
 
+		/* 标签页导航容器 */
+		.tab-nav-container {
+			position: relative;
+			background: #fff;
+			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+			margin-bottom: 24rpx;
+			width: 100%;
+		}
+
+		/* 标签页导航 */
+		.tab-nav {
+			display: flex;
+			justify-content: space-between;
+			padding: 0 24rpx;
+			background-color: #fff;
+			
+			&:after {
+				content: '';
+				position: absolute;
+				// bottom: -16rpx;
+				left: 0;
+				right: 0;
+				height: 2rpx;
+				background: #FFF;
+			}
+
+			.tab-item {
+				flex: 1;
+				height: 80rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 28rpx;
+				font-weight: 500;
+				color: #666666;
+				position: relative;
+				transition: all 0.3s ease;
+				
+				&.active {
+					color: #19367A;
+					font-weight: 600;
+					
+					&:after {
+						content: '';
+						position: absolute;
+						bottom: -16rpx;
+						left: 50%;
+						transform: translateX(-50%);
+						width: 40rpx;
+						height: 8rpx;
+						background: #19367A;
+						border-radius: 4rpx;
+					}
+				}
+				
+				&:active {
+					opacity: 0.8;
+				}
+			}
+		}
+
+		/* 内容区域 */
 		.content-box {
-			padding: 22rpx 26rpx;
+			margin-top: 32rpx;
 			box-sizing: border-box;
 			background-color: #fff;
-			border-radius: 30rpx;
+			border-radius: 24rpx;
+			box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
+			
+			/* 标签页内容区 */
+			.tab-content {
+				min-height: 600rpx;
+				width: 100%;
+				box-sizing: border-box;
+			}
 
-			.top {
-				padding: 0 72rpx;
-				margin-bottom: 20rpx;
-
-				.def-box {
-					font-size: 20rpx;
-					font-weight: 500;
-					color: #0B0E26;
-					width: 146rpx;
-					height: 52rpx;
+			/* 滚动容器 */
+			.scroll-container {
+				width: 100%;
+				height: 100%;
+				padding: 0;
+				box-sizing: border-box;
+			}
+			
+			/* 活动列表容器 */
+			.activity-list {
+				width: 100%;
+				padding: 32rpx 32rpx;
+				box-sizing: border-box;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				// border: 1rpx solid #FFD700;
+			}
+			
+			/* 啤酒网格 */
+			.beer-grid {
+				width: 100%;
+				padding: 32rpx 32rpx;
+				display: flex;
+				flex-direction: column;
+				box-sizing: border-box;
+			}
+			
+			/* 商品网格 */
+			.goods-grid {
+				width: 100%;
+				display: flex;
+				flex-wrap: wrap;
+				padding: 32rpx 32rpx;
+				gap: 24rpx;
+				// padding: 0 24rpx;
+				box-sizing: border-box;
+			}
+			
+			/* 商品卡片 */
+			.goods-item {
+				width: calc((100% - 24rpx) / 2);
+				background: #FFFFFF;
+				border-radius: 12rpx;
+				overflow: hidden;
+				box-sizing: border-box;
+				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+				transition: all 0.3s ease;
+				
+				&:active {
+					transform: scale(0.98);
+					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+				}
+				
+				.goods-image {
+					width: 100%;
+					height: 258rpx;
+					background: #F5F5F5;
+					transition: transform 0.3s ease;
+					
+					&:active {
+						transform: scale(1.05);
+					}
+				}
+				
+				.goods-info {
+					padding: 16rpx;
+					box-sizing: border-box;
+				}
+				
+				.goods-title {
+					font-size: 24rpx;
+					color: #1A1A1A;
+					font-weight: 600;
+					margin-bottom: 12rpx;
+				}
+				
+				.goods-price {
 					display: flex;
+					justify-content: space-between;
 					align-items: center;
-					justify-content: center;
-					border-radius: 13rpx;
-					background-color: #F2F2F2;
-				}
-
-				.active {
-					background: #39E5B1;
-				}
-			}
-
-			// 累积活动
-			.scroll-container {
-				margin-bottom: 50rpx;
-				padding: 0 24rpx;
-			}
-
-			// 在售酒款
-			.scroll-container {
-				margin-bottom: 50rpx;
-				justify-content: flex-start;
-				.beer-box {
-					width: 208rpx;
-					background: #FFFFFF;
-					margin-right: 12rpx;
-					margin-left: 12rpx;
-					margin-bottom: 36rpx;
-					box-sizing: border-box;
-					// display: inline-block;
-					min-height: 490rpx;
-					// &:nth-child(1) {
-					// 	margin-left: 32rpx;
-					// }
-
-					.cover {
-						width: 208rpx;
-						height: 300rpx;
-						border-radius: 30rpx;
-						margin-bottom: 18rpx;
+					
+					.price-left {
+						display: flex;
+						align-items: center;
+						
+						.price-num {
+							font-size: 32rpx;
+							color: #1A1A1A;
+							font-weight: bold;
+						}
+						
+						.coin-icon {
+							color: #FFD700;
+							font-size: 24rpx;
+							margin-left: 12rpx;
+						}
 					}
-
-					.title {
-						font-size: 28rpx;
-						color: #1E2019;
-						margin-bottom: 12rpx;
-						color: #19191B;
-					}
-
-					.desc {
-						font-size: 24rpx;
-						color: #A5A7B9;
-						margin-bottom: 12rpx;
-						color: #979797;
-					}
-
-					.num {
-
+					
+					.brand-name {
 						font-size: 20rpx;
-						color: #5F5F63;
+						color: #808080;
+						background: #F6F7FB;
+						padding: 4rpx 12rpx;
+						border-radius: 20rpx;
 					}
 				}
 			}
-
-			// 兑换商品
-			.goods-container {
-				flex: 1;
-				overflow-y: auto;
-				padding-bottom: calc(60rpx + constant(safe-area-inset-bottom));
-				padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
-
-				.goods-item {
-					width: 334rpx;
-					height: 605rpx;
-					border-radius: 30rpx;
-					background: rgba(255, 255, 255, 0.59);
-					box-sizing: border-box;
-					border: 1px solid rgba(242, 242, 242, 0.702);
-					margin-right: 20rpx;
-					margin-bottom: 56rpx;
-
-					&:nth-child(2n) {
-						margin-right: 0;
-					}
-
-					.cover-box {
-						width: 334rpx;
-						height: 440rpx;
-						border-radius: 30rpx 30rpx 0 0;
-						position: relative;
-
-						.cover {
-							width: 100%;
-							height: 100%;
-							border-radius: 30rpx 30rpx 0 0;
-						}
-
-						.like {
-							position: absolute;
-							right: 16rpx;
-							bottom: 18rpx;
-							width: 48rpx;
-							height: 48rpx;
-							border-radius: 50%;
-							background-color: #fff;
-							display: flex;
-							justify-content: center;
-							align-items: center;
-						}
-					}
-
-					.title {
-						padding: 16rpx 14rpx;
+			
+			/* 加载状态 */
+			.loading-state {
+				width: 100%;
+				height: 100rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				padding: 20rpx 0;
+				
+				&.loading {
+					.loading-text {
+						display: flex;
+						align-items: center;
+						color: #979797;
 						font-size: 24rpx;
-						color: #3D3D3D;
+						
+						.cuIcon-loading2 {
+							margin-right: 8rpx;
+							font-size: 28rpx;
+							filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.1));
+							animation: loading-rotate 1s linear infinite;
+						}
 					}
-
+				}
+				
+				&.no-more {
+					.no-more-text {
+						position: relative;
+						color: #979797;
+						font-size: 24rpx;
+						text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
+						padding: 0 30rpx;
+						
+						&::before,
+						&::after {
+							content: '';
+							position: absolute;
+							top: 50%;
+							width: 80rpx;
+							height: 1px;
+							background: linear-gradient(to right, transparent, #979797);
+						}
+						
+						&::before {
+							left: -60rpx;
+						}
+						
+						&::after {
+							right: -60rpx;
+							transform: rotate(180deg);
+						}
+					}
+				}
+			}
+			
+			/* 空状态 */
+			.empty-state {
+				width: 100%;
+				height: 400rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				
+				.empty-image {
+					width: 200rpx;
+					height: 200rpx;
+					margin-bottom: 20rpx;
+					opacity: 0.8;
+				}
+				
+				.empty-text {
+					color: #979797;
+					font-size: 28rpx;
 				}
 			}
 		}
 	}
+
+	/* 文本截断 */
+	.text-cut {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	/* 加载动画 */
+	.iconfont-spin {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* 加载动画 */
+	@keyframes loading-rotate {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* 上滑加载动画 */
+	@keyframes slide-in {
+		from {
+			transform: translateY(100%);
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+
+	/* 活动列表项动画 */
+	.activity-item {
+		animation: slide-in 0.3s ease-out;
+	}
+
+	/* 商品卡片动画 */
+	.goods-item {
+		animation: slide-in 0.3s ease-out;
+	}
+
+	/* 啤酒卡片动画 */
+	.beer-card {
+		animation: slide-in 0.3s ease-out;
+	}
 </style>
\ No newline at end of file