diff --git a/et --hard 6d203c0 b/et --hard 6d203c0
deleted file mode 100644
index 980e136..0000000
--- a/et --hard 6d203c0	
+++ /dev/null
@@ -1,15 +0,0 @@
-a58ff14 (HEAD -> devs) HEAD@{0}: reset: moving to a58ff14
-6d203c0 HEAD@{1}: reset: moving to HEAD
-6d203c0 HEAD@{2}: commit: 更新啤酒评分写酒评页面UI交互方式
-eb39ad8 (origin/devs) HEAD@{3}: commit: feat: 1. 优化啤酒币页面登录验证 2. 添加商家入驻协议页面 3. 添加联系二维码
-94415fb HEAD@{4}: commit: feat: 登陆弹窗优化，添加商家入驻协议页面，登录页面优化，添加添加企业微信二维码，啤酒币页面逻辑判定。
-30c802c HEAD@{5}: commit: 更新：1. 优化注册页面逻辑 2. 更新API请求配置
-9c4f90a HEAD@{6}: commit: feat: 优化新酒页面布局，配置啤啤猩球对接
-e5441ad HEAD@{7}: reset: moving to origin/devs
-e5441ad HEAD@{8}: commit: feat: optimize pages style and functionality
-a58ff14 (HEAD -> devs) HEAD@{9}: commit: feat: optimize activity list page
-d53c847 HEAD@{10}: commit: fix: 优化搜索栏和筛选栏的布局，修复ui样式问题
-3081fcd HEAD@{11}: commit: feat: 优化首页搜索功能交互,添加默认头像
-05d27af HEAD@{12}: reset: moving to origin/devs
-5a3853f (master) HEAD@{13}: checkout: moving from master to devs
-5a3853f (master) HEAD@{14}: commit (initial): 初始化提交：完成活动列表页面功能
diff --git a/pages.json b/pages.json
index 7e05f0f..d8c8d25 100644
--- a/pages.json
+++ b/pages.json
@@ -177,6 +177,14 @@
 				"navigationBarBackgroundColor": "#19367A",
 				"navigationBarTextStyle": "white"
 			}
+		},
+		{
+			"path" : "pages/index/allReviews",
+			"style" : {
+				"navigationBarTitleText" : "全部酒评",
+				"navigationBarBackgroundColor": "#19367A",
+				"navigationBarTextStyle": "white"
+			}
 		}
 		
 		
diff --git a/pages/index/allReviews.vue b/pages/index/allReviews.vue
new file mode 100644
index 0000000..0f0ea38
--- /dev/null
+++ b/pages/index/allReviews.vue
@@ -0,0 +1,661 @@
+<template>
+	<view class="page">
+		<!-- 评分统计 -->
+		<view class="rating-stats">
+			<view class="rating-content">
+				<view class="rating-distribution">
+					<view class="rating-bar" v-for="(item, index) in ratingDistribution" :key="index">
+						<text class="rating-label">{{5-index}}分</text>
+						<view class="bar-wrapper">
+							<view class="bar-fill" :style="{ width: item.percentage + '%' }"></view>
+						</view>
+					</view>
+				</view>
+				<view class="rating-summary">
+					<view class="total-score">
+						<text class="score">{{averageScore}}</text>
+						<text class="max-score">/5.0</text>
+					</view>
+					<text class="total-reviews">{{totalReviews}}条评价</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 排序选项 -->
+		<view class="sort-options">
+			<view 
+				class="sort-item" 
+				:class="{ active: sortType === 'time' }" 
+				@tap="changeSortType('time')"
+			>
+				<text>最新酒评</text>
+			</view>
+			<view 
+				class="sort-item" 
+				:class="{ active: sortType === 'score' }" 
+				@tap="changeSortType('score')"
+			>
+				<text>评分排序</text>
+			</view>
+			<view 
+				class="sort-item" 
+				:class="{ active: sortType === 'hot' }" 
+				@tap="changeSortType('hot')"
+			>
+				<text>热门酒评</text>
+			</view>
+		</view>
+
+		<!-- 评价列表 -->
+		<view class="review-list">
+			<view class="review-item" v-for="(item, index) in reviewList" :key="index">
+				<!-- 用户信息头部 -->
+				<view class="review-header">
+					<view class="user-info">
+						<image class="avatar" :src="item.userAvatar || '/static/default-avatar.png'" mode="aspectFill"></image>
+						<view class="user-meta">
+							<text class="user-name">{{item.userName || '匿名用户'}}</text>
+							<view class="rating-row">
+								<uni-rate 
+									:value="item.compositeScore" 
+									:readonly="true"
+									:size="16"
+									:touchable="false"
+									color="#ECECEC"
+									active-color="#FEE034"
+								/>
+								<text class="score-text">{{item.compositeScore}}分</text>
+							</view>
+						</view>
+					</view>
+					<text class="review-time">{{item.createTime.slice(0,10)}}</text>
+				</view>
+
+				<!-- 评论内容区域 -->
+				<view class="review-content">
+					<!-- 评论文本 -->
+					<view class="review-text">{{item.reviewContent}}</view>
+					<!-- 评论图片区域 -->
+					<scroll-view v-if="item.reviewImg" class="image-scroll" scroll-x="true">
+						<view class="image-container">
+							<image 
+								v-for="(img, imgIndex) in item.reviewImg.split(',')" 
+								:key="imgIndex"
+								:src="img"
+								class="review-image"
+								mode="aspectFill"
+								@tap="previewImage(item.reviewImg.split(','), imgIndex)"
+							></image>
+						</view>
+					</scroll-view>
+					<!-- 评分详情 -->
+					<view class="rating-details">
+						<view class="rating-item">
+							<text class="label">外观</text>
+							<uni-rate :value="item.colorRating" :readonly="true" :size="14"></uni-rate>
+							<text class="rating-value">{{item.colorRating}}分</text>
+						</view>
+						<view class="rating-item">
+							<text class="label">香气</text>
+							<uni-rate :value="item.aromaRating" :readonly="true" :size="14"></uni-rate>
+							<text class="rating-value">{{item.aromaRating}}分</text>
+						</view>
+						<view class="rating-item">
+							<text class="label">口感</text>
+							<uni-rate :value="item.tasteRating" :readonly="true" :size="14"></uni-rate>
+							<text class="rating-value">{{item.tasteRating}}分</text>
+						</view>
+					</view>
+					<!-- 点赞按钮 -->
+					<view class="review-footer">
+						<view class="like-btn" :class="{ active: item.reviewLike }" @tap.stop="handleLike(item)">
+							<image class="like-icon" src="/static/like.png" mode="aspectFit"></image>
+							<text class="like-count">{{item.likeCount || 0}}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 加载更多 -->
+			<view class="load-more" v-if="reviewList.length > 0">
+				<text class="load-text">{{ hasMore ? '加载更多...' : '没有更多了' }}</text>
+			</view>
+			<!-- 无评论展示 -->
+			<view v-if="reviewList.length === 0" class="no-review">
+				暂无评论，快来发表第一条评论吧
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getReviewList,
+		getReviewScoreList,
+		likeReview
+	} from '@/api/bar.js'
+	import loginPopup from '@/components/loginPopup.vue';
+	
+	export default {
+		components: {
+			loginPopup
+		},
+		data() {
+			return {
+				beerId: '',
+				reviewList: [], // 酒评列表
+				reviewScoreList: {}, // 酒评评分
+				reviewTotal: 0, // 酒评总数
+				queryForm: {
+					beerId: '',
+					pageNum: 1,
+					pageSize: 10,
+					sortType: 'time' // 添加排序类型参数
+				},
+				sortType: 'time',
+				hasMore: true,
+				averageScore: 0,
+				totalReviews: 124,
+				ratingDistribution: [],
+				ratingCounts: {
+					five: 0,
+					four: 0,
+					three: 0,
+					two: 0,
+					one: 0
+				}
+			};
+		},
+		onLoad({beerId}) {
+			if (!beerId) {
+				uni.showToast({
+					title: '参数错误',
+					icon: 'none'
+				});
+				setTimeout(() => {
+					uni.navigateBack();
+				}, 1500);
+				return;
+			}
+			this.beerId = beerId;
+			this.queryForm.beerId = beerId;
+			this.initPageData();
+		},
+		onReachBottom() {
+			if (this.hasMore) {
+				this.queryForm.pageNum++;
+				this.getReviewListFun();
+			}
+		},
+		methods: {
+			// 初始化页面数据
+			async initPageData() {
+				await this.getReviewScoreListFun(); // 先获取评分统计
+				await this.getReviewListFun(); // 再获取评论列表
+			},
+			// 获取酒评列表
+			async getReviewListFun() {
+				uni.showLoading({
+					title: '加载中'
+				});
+				try {
+					const res = await getReviewList(this.queryForm);
+					if (res.rows) {
+						// 重置评分计数
+						this.ratingCounts = {
+							five: 0,
+							four: 0,
+							three: 0,
+							two: 0,
+							one: 0
+						};
+						
+						// 统计各个评分的数量
+						res.rows.forEach(review => {
+							const rating = Math.round(review.overallRating); // 四舍五入到整数
+							switch(rating) {
+								case 5:
+									this.ratingCounts.five++;
+									break;
+								case 4:
+									this.ratingCounts.four++;
+									break;
+								case 3:
+									this.ratingCounts.three++;
+									break;
+								case 2:
+									this.ratingCounts.two++;
+									break;
+								case 1:
+									this.ratingCounts.one++;
+									break;
+							}
+						});
+
+						// 计算平均分
+						let totalScore = 0;
+						let totalCount = 0;
+						Object.entries(this.ratingCounts).forEach(([key, count]) => {
+							const score = key === 'five' ? 5 : 
+										key === 'four' ? 4 : 
+										key === 'three' ? 3 : 
+										key === 'two' ? 2 : 1;
+							totalScore += score * count;
+							totalCount += count;
+						});
+						this.averageScore = totalCount > 0 ? 
+							Math.round((totalScore / totalCount) * 10) / 10 : 
+							'0.0';
+						this.totalReviews = res.total || 0;
+
+						// 更新评分分布数据
+						this.ratingDistribution = [
+							{ 
+								percentage: this.calculatePercentage(this.ratingCounts.five, res.total)
+							},
+							{
+								percentage: this.calculatePercentage(this.ratingCounts.four, res.total)
+							},
+							{
+								percentage: this.calculatePercentage(this.ratingCounts.three, res.total)
+							},
+							{
+								percentage: this.calculatePercentage(this.ratingCounts.two, res.total)
+							},
+							{
+								percentage: this.calculatePercentage(this.ratingCounts.one, res.total)
+							}
+						];
+
+						// 处理评论列表数据
+						const arr = res.rows.map(it => ({
+							...it,
+							compositeScore: this.getScore(it.aromaRating, it.tasteRating, it.colorRating)
+						}));
+						
+						if (this.queryForm.pageNum === 1) {
+							this.reviewList = arr;
+						} else {
+							this.reviewList = [...this.reviewList, ...arr];
+						}
+						this.reviewTotal = res.total;
+						this.hasMore = this.reviewList.length < this.reviewTotal;
+					}
+				} catch (err) {
+					console.error('获取评论列表失败:', err);
+					uni.showToast({
+						title: '获取评论失败',
+						icon: 'none'
+					});
+				} finally {
+					uni.hideLoading();
+				}
+			},
+			// 获取酒评评分列表
+			async getReviewScoreListFun() {
+				try {
+					const res = await getReviewScoreList(this.beerId);
+					if (res.data) {
+						this.reviewScoreList = res.data;
+						this.averageScore = res.data.avgOverallRating?.toFixed(2) || '0.00';
+						
+						// 构建评分分布数据
+						this.ratingDistribution = [
+							{ percentage: this.calculatePercentage(res.data.fiveStarCount) },
+							{ percentage: this.calculatePercentage(res.data.fourStarCount) },
+							{ percentage: this.calculatePercentage(res.data.threeStarCount) },
+							{ percentage: this.calculatePercentage(res.data.twoStarCount) },
+							{ percentage: this.calculatePercentage(res.data.oneStarCount) }
+						];
+					}
+				} catch (err) {
+					console.error('获取评分统计失败:', err);
+					uni.showToast({
+						title: '获取评分统计失败',
+						icon: 'none'
+					});
+				}
+			},
+			// 计算评分百分比
+			calculatePercentage(count, total) {
+				if (!total) return 0;
+				return Math.round((count / total) * 100);
+			},
+			// 计算综合评分
+			getScore(a, b, c) {
+				if (!a && !b && !c) return '0.0';
+				const score = ((a || 0) + (b || 0) + (c || 0)) / 3;
+				return score.toFixed(1);
+			},
+			// 点赞
+			handleLike(item) {
+				const token = uni.getStorageSync('token')
+				if (!token) {
+					this.$refs.loginRef.open()
+					return
+				}
+				let data = {
+					reviewId: item.id,
+					status: item.reviewLike ? 2 : 1
+				}
+				likeReview(data).then(res => {
+					if (data.status == 1) {
+						uni.showToast({
+							title: '点赞成功',
+							icon: 'none'
+						})
+						item.reviewLike = true
+						item.likeCount = (item.likeCount || 0) + 1
+					} else {
+						uni.showToast({
+							title: '取消点赞',
+							icon: 'none'
+						})
+						item.reviewLike = false
+						item.likeCount = Math.max(0, (item.likeCount || 1) - 1)
+					}
+				})
+			},
+			// 预览图片
+			previewImage(imgs, index) {
+				uni.previewImage({
+					urls: imgs,
+					current: index
+				})
+			},
+			// 切换排序方式
+			changeSortType(type) {
+				if (this.sortType === type) return;
+				this.sortType = type;
+				this.queryForm.pageNum = 1;
+				this.reviewList = [];
+				this.getReviewListFun();
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+/* 页面容器 */
+.page {
+	min-height: 100vh;
+	background-color: #F8F9FA;
+	padding-bottom: 40rpx;
+	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Roboto, "Segoe UI", "Microsoft YaHei", sans-serif;
+}
+
+/* 评分统计 */
+.rating-stats {
+	margin: 24rpx;
+	padding: 32rpx;
+	background: #fff;
+	border-radius: 16rpx;
+	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+	
+	.rating-content {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 40rpx;
+		
+		.rating-distribution {
+			flex: 1;
+			min-width: 0;
+			
+			.rating-bar {
+				display: flex;
+				align-items: center;
+				margin-bottom: 16rpx;
+				
+				&:last-child {
+					margin-bottom: 0;
+				}
+				
+				.rating-label {
+					width: 60rpx;
+					font-size: 24rpx;
+					color: #666;
+				}
+				
+				.bar-wrapper {
+					flex: 1;
+					height: 12rpx;
+					background: #f5f5f5;
+					border-radius: 6rpx;
+					margin-left: 16rpx;
+					overflow: hidden;
+					
+					.bar-fill {
+						height: 100%;
+						background: linear-gradient(90deg, #FFE034 0%, #FFD234 100%);
+						border-radius: 6rpx;
+						transition: width 0.3s ease;
+					}
+				}
+			}
+		}
+		
+		.rating-summary {
+			text-align: center;
+			
+			.total-score {
+				display: flex;
+				align-items: baseline;
+				white-space: nowrap;
+				
+				.score {
+					font-size: 64rpx;
+					font-weight: 600;
+					color: #333;
+					line-height: 1;
+				}
+				
+				.max-score {
+					font-size: 28rpx;
+					color: #999;
+					margin-left: 4rpx;
+				}
+			}
+			
+			.total-reviews {
+				font-size: 24rpx;
+				color: #999;
+				margin-top: 8rpx;
+			}
+		}
+	}
+}
+
+/* 排序选项 */
+.sort-options {
+	display: flex;
+	padding: 0 24rpx;
+	margin-bottom: 16rpx;
+	
+	.sort-item {
+		padding: 12rpx 32rpx;
+		margin-right: 16rpx;
+		border-radius: 28rpx;
+		background: #F5F5F5;
+		transition: all 0.3s ease;
+		
+		text {
+			font-size: 26rpx;
+			color: #666;
+			transition: all 0.3s ease;
+		}
+		
+		&.active {
+			background: #4E63E0;
+			
+			text {
+				color: #FFFFFF;
+			}
+		}
+	}
+}
+
+/* 评价列表 */
+.review-list {
+	padding: 0 24rpx;
+	
+	.review-item {
+		margin-bottom: 24rpx;
+		padding: 24rpx;
+		background: #FFFFFF;
+		border-radius: 16rpx;
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+		
+		.review-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-start;
+			margin-bottom: 20rpx;
+			
+			.user-info {
+				display: flex;
+				align-items: center;
+				gap: 16rpx;
+				
+				.avatar {
+					width: 72rpx;
+					height: 72rpx;
+					border-radius: 50%;
+					background: #f5f5f5;
+				}
+				
+				.user-meta {
+					.user-name {
+						font-size: 28rpx;
+						color: #333;
+						font-weight: 500;
+						margin-bottom: 8rpx;
+					}
+					
+					.rating-row {
+						display: flex;
+						align-items: center;
+						gap: 8rpx;
+						
+						.score-text {
+							font-size: 24rpx;
+							color: #FFB800;
+						}
+					}
+				}
+			}
+			
+			.review-time {
+				font-size: 24rpx;
+				color: #999;
+			}
+		}
+		
+		.review-content {
+			.review-text {
+				font-size: 28rpx;
+				line-height: 1.6;
+				color: #333;
+				margin-bottom: 16rpx;
+			}
+			
+			.image-scroll {
+				margin-bottom: 16rpx;
+				
+				.image-container {
+					display: flex;
+					gap: 12rpx;
+					
+					.review-image {
+						width: 180rpx;
+						height: 180rpx;
+						border-radius: 8rpx;
+						flex-shrink: 0;
+					}
+				}
+			}
+			
+			.rating-details {
+				padding: 16rpx;
+				background: #F8F9FA;
+				border-radius: 12rpx;
+				margin-bottom: 16rpx;
+				
+				.rating-item {
+					display: flex;
+					align-items: center;
+					margin-bottom: 12rpx;
+					
+					&:last-child {
+						margin-bottom: 0;
+					}
+					
+					.label {
+						width: 64rpx;
+						font-size: 24rpx;
+						color: #666;
+					}
+					
+					.rating-value {
+						font-size: 24rpx;
+						color: #999;
+						margin-left: 12rpx;
+					}
+				}
+			}
+			
+			.review-footer {
+				display: flex;
+				justify-content: flex-end;
+				
+				.like-btn {
+					display: flex;
+					align-items: center;
+					padding: 8rpx 16rpx;
+					gap: 8rpx;
+					border-radius: 24rpx;
+					background: #F5F5F5;
+					
+					.like-icon {
+						width: 32rpx;
+						height: 32rpx;
+					}
+					
+					.like-count {
+						font-size: 24rpx;
+						color: #666;
+					}
+					
+					&.active {
+						background: rgba(255, 184, 0, 0.1);
+						
+						.like-count {
+							color: #FFB800;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+.no-review {
+	text-align: center;
+	padding: 48rpx 0;
+	font-size: 28rpx;
+	color: #999;
+	background: #FFFFFF;
+	border-radius: 16rpx;
+	margin: 24rpx;
+}
+
+.load-more {
+	text-align: center;
+	padding: 24rpx 0;
+	
+	.load-text {
+		font-size: 26rpx;
+		color: #999;
+	}
+}
+</style> 
\ No newline at end of file
diff --git a/pages/index/review.vue b/pages/index/review.vue
index 52768b2..5d8258a 100644
--- a/pages/index/review.vue
+++ b/pages/index/review.vue
@@ -1,228 +1,205 @@
 <template>
 	<view class="page">
-		<view class="beer-container">
-			<view class="goods-box">
-				<image :src="beerInfo.cover" class="cover"></image>
-				<view class="flex-1">
-					<view class="flex justify-between align-center" style="margin-bottom: 28rpx;">
-						<view class="flex flex-1 justify-between align-center">
-							<text
-								style="font-size: 40rpx;color: #141415;font-weight: 600;margin-right: 8rpx;">{{ beerInfo.beerName || '--' }}</text>
-							<text v-if="!isFavor" class="cuIcon-like" style="font-size: 40rpx;color: #0B0E26"
-								@click="favorBeerFun(1)"></text>
-							<text v-else class="cuIcon-likefill" style="color: pink;font-size: 40rpx;" @click="favorBeerFun(2)"></text>
-							<!-- <image src="@/static/verify-mark.png" style="width: 48rpx;height: 48rpx;" @click="favorBeerFun(2)"> -->
-						</image>
-						</view>
-
-						<!-- <text class="cuIcon-like" style="color: #979797;font-size: 48rpx;"></text> -->
+		<!-- 商品信息卡片 -->
+		<view class="product-card">
+			<!-- 商品头部 -->
+			<view class="product-header">
+				<image class="product-image" :src="beerInfo.cover" mode="aspectFill"></image>
+				<view class="product-info">
+					<view class="title-row">
+						<text class="product-title">{{beerInfo.beerName || '--'}}</text>
+						<image v-if="!isFavor" class="like-btn" src="/static/heart-add.png" mode="aspectFit" @click="favorBeerFun(1)"></image>
+						<image v-else class="like-btn" src="/static/heart-tick.png" mode="aspectFit" @click="favorBeerFun(2)"></image>
 					</view>
-					<view style="margin-bottom: 18rpx;font-size: 30rpx;color: #5F5F63;"> {{ beerInfo.beerStyles || '--' }}
+					<text class="product-subtitle">{{beerInfo.beerStyles || '--'}}</text>
+					<view class="rating">
+						<text class="rating-score">{{reviewScoreList.avgOverallRating || 0}}/5.0</text>
+						<uni-rate :value="reviewScoreList.avgOverallRating || 0" :readonly="true" :touchable="false" size="18" />
 					</view>
-					<!-- <view style="margin-bottom: 18rpx;font-size: 30rpx;color: #5F5F63;">{{ item.launchDate }}</view> -->
-					<view class="flex align-center" style="gap:20rpx;margin-bottom: 18rpx;">
-						<uni-rate :readonly="true" :touchable="false" v-model="reviewScoreList.avgOverallRating || 0" />
-						{{ reviewScoreList.avgOverallRating || 0 }} / 5.0
-					</view>
-
-					<view v-if="beerInfo.breweryId" class="flex align-center justify-between" @click="toBrand">
-						<view class="flex align-center">
-							<image :src="beerInfo.brandLogo" style="width: 72rpx;height: 72rpx;margin-right: 12rpx;">
-							</image>
-							<text class="">{{ beerInfo.brandName || ''}}</text>
-						</view>
-						<image src="/static/arrow-right.png" style="width: 40rpx;height: 40rpx;"></image>
+					<view v-if="beerInfo.breweryId" class="brand" @click="toBrand">
+						<image class="brand-logo" :src="beerInfo.brandLogo" mode="aspectFill"></image>
+						<text class="brand-name">{{beerInfo.brandName || ''}}</text>
+						<image class="arrow-icon" src="/static/arrow-right.png" mode="aspectFit"></image>
 					</view>
 				</view>
 			</view>
-			<view>
-				<view class="info-box flex justify-between margin-bottom">
-					<view class="info-item">
-						<text class="label">ABV</text>
-						<text class="item-text">{{beerInfo.beerAbv || '--'}}</text>
-					</view>
-					<view class="info-item">
-						<text class="label">IBU</text>
-						<text class="item-text">{{beerInfo.beerIbus || '--'}}</text>
-					</view>
-					<view class="info-item">
-						<text class="label">上市状态</text>
-						<text class="item-text">{{beerInfo.onSale == 1 ? '在售款' : '停售'}}</text>
-					</view>
+
+			<!-- 商品参数 -->
+			<view class="product-params">
+				<view class="param-item">
+					<text class="param-label">ABV</text>
+					<text class="param-value">≈{{beerInfo.beerAbv || '--'}}</text>
 				</view>
-				<!-- <text class="desc word-all" v-html="beerInfo.desc"></text> -->
-				<rich-text class="desc word-all" :nodes="beerInfo.desc"></rich-text>
+				<view class="param-item">
+					<text class="param-label">IBU</text>
+					<text class="param-value">{{beerInfo.beerIbus || '--'}}</text>
+				</view>
+				<view class="param-item">
+					<text class="param-label">原麦汁</text>
+					<text class="param-value">{{beerInfo.onSale == 1 ? '在售款' : '停售'}}</text>
+				</view>
+			</view>
+
+			<!-- 商品描述 -->
+			<view class="product-description">
+				<rich-text :nodes="beerInfo.desc"></rich-text>
 			</view>
 		</view>
-		<!-- 大家评分 -->
-		<view class="score-box">
-			<view class="top">
-				<view class="left flex justify-between align-center">
-					<image src="/static/ranking.png" class="icon"></image>
-					<text v-if="currentTab == 1">我的评分</text>
-					<text v-if="currentTab == 2">大家评分</text>
-				</view>
-				<view class="right">
-					<view class="defTab" :class="{'active':currentTab == 1}" @click="currentTab = 1">
-						<image src="/static/user.png" class="icon"></image>
-					</view>
-					<view class="defTab" :class="{'active':currentTab == 2}" @click="currentTab = 2">
-						<image src="/static/users.png" class="icon"></image>
+
+		<!-- 评分和评价 -->
+		<view class="rating-section">
+			<view class="section-title">评分和评价</view>
+			
+			<!-- 评分总览 -->
+			<view class="rating-overview">
+				<text class="rating-score-large">{{currentTab === 2 ? (reviewScoreList.avgOverallRating || '-') : (myReviewInfo ? myReviewInfo.overallRating : '-')}}</text>
+				<view class="rating-right">
+					<uni-rate 
+						:value="currentTab === 2 ? (reviewScoreList.avgOverallRating || 0) : (myReviewInfo ? myReviewInfo.overallRating : 0)" 
+						:readonly="true"
+						:size="24"
+						:touchable="false"
+						color="#ECECEC"
+						active-color="#FEE034"
+					/>
+					<view class="rating-count" :class="{ highlight: currentTab === 1 && !myReviewInfo }">
+						<template v-if="currentTab === 2">
+							({{reviewTotal}}条)
+						</template>
+						<template v-else>
+							<template v-if="myReviewInfo">
+								{{myReviewInfo.createTime ? '评分于 ' + myReviewInfo.createTime.slice(0,10) : '我的评分'}}
+							</template>
+							<template v-else>
+								首次评分还可以领取品牌啤酒币哦
+							</template>
+						</template>
 					</view>
 				</view>
 			</view>
-			<view v-if="currentTab == 1">
-				<template v-if="myReviewInfo">
-					<view class="item-label flex justify-between align-center">
-						<text>颜色</text>
-						<text>{{myReviewInfo.colorRating}}</text>
-					</view>
-					<view class="slider-box">
-						<slider min="0" max="5" step="1" disabled :value="myReviewInfo.colorRating" activeColor="#FEE034"
-							backgroundColor="#f2f2f2" block-color="#FEE034" block-size="18" />
-					</view>
-					
-					<view class="item-label flex justify-between align-center">
-						<text>香味</text>
-						<text>{{myReviewInfo.aromaRating}}</text>
-					</view>
-					<view class="slider-box">
-						<slider min="0" max="5" step="1" disabled :value="myReviewInfo.aromaRating" activeColor="#FEE034"
-							backgroundColor="#f2f2f2" block-color="#FEE034" block-size="18" />
-					</view>
-					
-					<view class="item-label flex justify-between align-center">
-						<text>口味</text>
-						<text>{{myReviewInfo.tasteRating}}</text>
-					</view>
-					<view class="slider-box">
-						<slider min="0" max="5" step="1" disabled :value="myReviewInfo.tasteRating" activeColor="#FEE034"
-							backgroundColor="#f2f2f2" block-color="#FEE034" block-size="18" />
-					</view>
-					<view class="item-label flex justify-between align-center margin-top-sm">
-						<text>综合得分</text>
-						<text style="font-size: 30rpx;">
-							<text class="cuIcon-favorfill lg"
-								style="color:#FEE034;font-size: 40rpx;margin-right:10rpx"></text>
-							{{myReviewInfo.overallRating || 0}}</text>
-					</view>
-				</template>
-				<view v-else class="flex justify-center align-center" style="height: 80rpx;" @click="toPageBottom">
-						<text>你还没有评价，快来评价吧</text>
+
+			<!-- 添加评分切换按钮 -->
+			<view class="rating-tabs">
+				<view class="tab-item" :class="{ active: currentTab === 2 }" @click="currentTab = 2">
+					<image class="tab-icon" src="/static/users.png" mode="aspectFit"></image>
+				</view>
+				<view class="tab-item" :class="{ active: currentTab === 1 }" @click="currentTab = 1">
+					<image class="tab-icon" src="/static/user.png" mode="aspectFit"></image>
 				</view>
-				
 			</view>
-			<view v-if="currentTab == 2">
-				<view class="item-label flex justify-between align-center">
-					<text>颜色</text>
-					<text>{{reviewScoreList.avgColorRating}}</text>
-				</view>
-				<view class="slider-box">
-					<slider min="0" max="5" step="1" disabled :value="reviewScoreList.avgColorRating"
-						activeColor="#FEE034" backgroundColor="#f2f2f2" block-color="#FEE034" block-size="18" />
-				</view>
 
-				<view class="item-label flex justify-between align-center">
-					<text>香味</text>
-					<text>{{reviewScoreList.avgAromaRating}}</text>
-				</view>
-				<view class="slider-box">
-					<slider min="0" max="5" step="1" disabled :value="reviewScoreList.avgAromaRating"
-						activeColor="#FEE034" backgroundColor="#f2f2f2" block-color="#FEE034" block-size="18" />
+			<!-- 评分条区域 -->
+			<view class="rating-bars">
+				<view class="rating-bar" v-for="(item, index) in [
+					{label: '外观', key: 'avgColorRating', weight: '10%', 
+						value: currentTab === 2 ? reviewScoreList.avgColorRating : (myReviewInfo ? myReviewInfo.colorRating : 0)},
+					{label: '香气', key: 'avgAromaRating', weight: '30%', 
+						value: currentTab === 2 ? reviewScoreList.avgAromaRating : (myReviewInfo ? myReviewInfo.aromaRating : 0)},
+					{label: '口感', key: 'avgTasteRating', weight: '60%', 
+						value: currentTab === 2 ? reviewScoreList.avgTasteRating : (myReviewInfo ? myReviewInfo.tasteRating : 0)}
+				]" :key="index">
+					<view class="bar-header">
+						<text class="bar-label">{{item.label}} ({{item.weight}})</text>
+						<text class="bar-value">{{item.value ? item.value.toFixed(1) : '0.0'}}</text>
+					</view>
+					<view class="bar">
+						<view class="bar-filled" :style="{width: item.value ? (item.value/5*100 + '%') : '0%'}"></view>
+					</view>
 				</view>
+			</view>
 
-				<view class="item-label flex justify-between align-center">
-					<text>口味</text>
-					<text>{{reviewScoreList.avgTasteRating}}</text>
+			<!-- 评价排序按钮 -->
+			<view class="review-sort">
+				<view class="sort-item" :class="{ active: sortType === 'latest' }" @click="sortType = 'latest'">
+					<text>最新</text>
 				</view>
-				<view class="slider-box">
-					<slider min="0" max="5" step="1" disabled :value="reviewScoreList.avgTasteRating"
-						activeColor="#FEE034" backgroundColor="#f2f2f2" block-color="#FEE034" block-size="18" />
+				<view class="sort-item" :class="{ active: sortType === 'hot' }" @click="sortType = 'hot'">
+					<text>最热</text>
 				</view>
-				<view class="item-label flex justify-between align-center margin-top-sm">
-					<text>综合得分</text>
-					<text style="font-size: 30rpx;">
-						<text class="cuIcon-favorfill lg"
-							style="color:#FEE034;font-size: 40rpx;margin-right:10rpx"></text>
-						{{reviewScoreList.avgOverallRating || 0}}</text>
+			</view>
+
+			<!-- 评论列表 -->
+			<view class="reviews" v-if="reviewList.length > 0">
+				<view class="review-item" v-for="(item, index) in reviewList.slice(0, 3)" :key="index">
+					<!-- 用户信息头部 -->
+					<view class="review-header">
+						<view class="user-info">
+							<image class="avatar" :src="item.userAvatar || '/static/default-avatar.png'" mode="aspectFill"></image>
+							<view class="user-meta">
+								<text class="user-name">{{item.userName || '匿名用户'}}</text>
+								<text class="review-time">{{item.createTime.slice(0,10)}}</text>
+							</view>
+						</view>
+					</view>
+					<!-- 评论内容区域 -->
+					<view class="review-content">
+						<view class="content-left">
+							<!-- 评论文本 -->
+							<view class="review-text">
+								{{item.reviewContent}}
+							</view>
+							<!-- 评论图片区域 -->
+							<scroll-view v-if="item.reviewImg" class="image-scroll" scroll-x="true">
+								<view class="image-container">
+									<image 
+										v-for="(img, imgIndex) in item.reviewImg.split(',')" 
+										:key="imgIndex"
+										:src="img"
+										class="review-image"
+										mode="aspectFill"
+										@tap="previewImage(item.reviewImg.split(','), imgIndex)"
+									></image>
+								</view>
+							</scroll-view>
+							<!-- 评分和点赞 -->
+							<view class="review-footer">
+								<uni-rate 
+									:value="item.compositeScore" 
+									:readonly="true"
+									:size="16"
+									:touchable="false"
+									color="#ECECEC"
+									active-color="#FEE034"
+								/>
+								<text class="score-text">{{item.compositeScore}}分</text>
+								<view class="like-btn" :class="{ active: item.reviewLike }" @tap.stop="handleLike(item)">
+									<image class="like-icon" src="/static/like.png" mode="aspectFit"></image>
+									<text class="like-count">{{item.likeCount || 0}}</text>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view v-else class="no-review">巧了，还没有酒评呢，快拿下首评</view>
+
+			<!-- 查看全部评价按钮 -->
+			<view v-if="reviewList.length > 0" 
+				class="view-all-reviews" 
+				:class="{ 'disabled': reviewList.length === 0 }"
+				@tap="toAllReviews">
+				查看全部评价
+			</view>
+		</view>
+
+		<!-- 底部操作栏 -->
+		<view class="bottom-bar">
+			<view class="action-box">
+				<view class="action-item" @click="createPic">
+					<image class="action-icon" src="@/static/share.png" mode="aspectFit"></image>
+					<text class="action-text">酒款分享</text>
+				</view>
+				<view class="action-item" @click="toWinelist">
+					<image class="action-icon" src="@/static/map.png" mode="aspectFit"></image>
+					<text class="action-text">生成酒单</text>
+				</view>
+				<view class="write-review" @click="toWrite">
+					{{ myReviewInfo ? '修改评分' : '为这款酒评分' }}
 				</view>
 			</view>
 		</view>
-		<!-- 酒款评价 -->
-		<view class="review-box">
-			<view class="top">
-				<view class="left flex justify-between align-center">
-					<image src="/static/archive-tick.png" class="icon"></image>
-					<text>酒款评价</text>
-				</view>
-				<view v-if="reviewTotal > 0" class="right">
-					（{{ reviewTotal }}）条
-				</view>
-			</view>
-			<template v-if="reviewList.length > 0">
-				<view class="review-item" v-for="(item, index) in reviewList" :key="index">
-					<view class="flex margin-bottom-sm">
-						<!-- <image v-if="item.reviewImg" :src="item.reviewImg" class="avatar"></image> -->
-						<view class="flex flex-col">
-							<text class="beerName">{{ item.userName || '匿名用户' }}</text>
-							<text class="time">{{ item.createTime.slice(0,10) }}</text>
-						</view>
-					</view>
-					<view class="margin-bottom flex ">
-						<text class="word-all flex-1">
-							{{ item.reviewContent }}
-						</text>
-						<image v-if="item.reviewImg" :src="item.reviewImg"
-							style="width: 200rpx;height:200rpx;flex-shrink: 0;margin-left: 20rpx;"></image>
-					</view>
-					<view class="flex align-center justify-between">
-						<view class="flex align-center justify-start">
-							<image src="@/static/vector.png" class="icon"></image>
-							<text style="color:#5F5F63;margin-right: 40rpx;">{{ item.compositeScore }}</text>
-							<!-- <image src="@/static/message.png" class="icon"></image>
-						<text style="color:#979797">(100)</text> -->
-						</view>
 
-						<text v-if="!item.reviewLike" class="cuIcon-appreciate" style="font-size: 40rpx;margin-right: 40rpx;"
-							@click="handleLike(item)"></text>
-						<text v-else class="cuIcon-appreciatefill" style="font-size: 40rpx;margin-right: 40rpx;color: #FEE034;"
-						@click="handleLike(item)"
-						></text>
-						<!-- <view class="cu-btn line-grey round">删除</view> -->
-
-					</view>
-				</view>
-				<view v-if="reviewList.length < reviewTotal" style="color: #747783;font-size: 24rpx;text-align: center;" @click="reviewPageChange">查看更多评价</view>
-				<view v-else class="margin-top" style="color: #747783;font-size: 24rpx;text-align: center;">没有更多了</view>
-			</template>
-			<template v-else>
-				<view class="flex align-center justify-center"
-					style="height: 140rpx;width: 100%;color: #747783;font-size: 24rpx;">暂无评价</view>
-			</template>
-
-		</view>
-		<view class="flex align-end flex-col bg-white padding margin-bottom">
-			<view class="lq-tip flex align-center">
-				<image src="@/static/warning-2.png" style="width: 30rpx;height:30rpx;margin-right: 12rpx;"></image>
-				首次写酒评还能领取啤酒币哦
-			</view>
-			<view class="flex justify-between align-center" style="width: 100%;padding-left: 52rpx;">
-				<!-- <view class="btn">
-					生成酒单
-				</view> -->
-				<view class="flex flex-col align-center" @click="createPic">
-					<image src="@/static/share.png" style="width: 48rpx;height: 48rpx;margin-bottom: 10rpx;"></image>
-					<text style="color: #030416;font-size: 20rpx;">酒款分享</text>
-				</view>
-				<view class="flex flex-col align-center" @click="toWinelist">
-					<image src="@/static/map.png" style="width: 48rpx;height: 48rpx;margin-bottom: 10rpx;"></image>
-					<text style="color: #030416;font-size: 20rpx;">生成酒单</text>
-				</view>
-				<view class="btn" style="background-color: #71F4B4;" @click="toWrite">
-					写酒评
-				</view>
-			</view>
-		</view>
+		<!-- 组件 -->
 		<loginPopup ref="loginRef"></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>
@@ -265,16 +242,20 @@
 					pageSize: 5,
 				},
 				isFavor: false, // 是否收藏
+				sortType: 'latest',
 			};
 		},
 		onLoad({beerId}) {
 			this.beerId = beerId
 			this.queryForm.beerId = beerId
 			this.getBeerInfoFun()
-			// 只在登录状态下获取收藏状态
+			this.getReviewListFun()
+			this.getReviewScoreListFun()
+			// 只在登录状态下获取收藏状态和我的评价信息
 			const token = uni.getStorageSync('token')
 			if (token) {
 				this.getBeerFavorStatusFun()
+				this.getMyReviewInfoFun()
 			}
 		},
 		onShow() {
@@ -283,9 +264,10 @@
 			this.queryForm.pageNum = 1
 			this.getReviewListFun()
 			this.getReviewScoreListFun()
-			// 只在登录状态下获取我的酒评信息
+			// 只在登录状态下获取收藏状态和我的评价信息
 			const token = uni.getStorageSync('token')
 			if (token) {
+				this.getBeerFavorStatusFun()
 				this.getMyReviewInfoFun()
 			}
 			// 滚动到最顶
@@ -331,15 +313,16 @@
 			getReviewListFun() {
 				getReviewList(this.queryForm).then(res => {
 					if (res.rows) {
-						let arr = res.rows.map(it => {
-							it.compositeScore = this.getScore(it.aromaRating, it.tasteRating, it
-								.colorRating)
-							return it
-						})
+						console.log('获取评论列表数据:', res.rows.length)
+						let arr = res.rows.map(it => ({
+							...it,
+							compositeScore: this.getScore(it.aromaRating, it.tasteRating, it.colorRating),
+							isExpanded: false,
+							needExpand: it.reviewContent && it.reviewContent.length > 50
+						}))
 						if (arr.length > 0) {
-							arr.forEach(it => {
-								this.reviewList.push(it)
-							})
+							console.log('更新评论列表')
+							this.reviewList = [...this.reviewList, ...arr]
 						}
 					}
 					this.reviewTotal = res.total
@@ -526,12 +509,14 @@
 							icon: 'none'
 						})
 						item.reviewLike = true
+						item.likeCount = (item.likeCount || 0) + 1
 					} else {
 						uni.showToast({
 							title: '取消点赞',
 							icon: 'none'
 						})
 						item.reviewLike = false
+						item.likeCount = Math.max(0, (item.likeCount || 1) - 1)
 					}
 				})
 			},
@@ -657,242 +642,552 @@
 
 				})
 			},
+			// 预览图片
+			previewImage(imgs, index) {
+				// 实现图片预览逻辑
+				console.log('Previewing image:', imgs[index])
+			},
+			// 跳转到全部评价页面
+			toAllReviews() {
+				uni.navigateTo({
+					url: '/pages/index/allReviews?beerId=' + this.beerId
+				})
+			},
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	/deep/ slider {
-		margin: 0;
-	}
+/* 页面容器 */
+.page {
+	min-height: 100vh;
+	background-color: #F8F9FA;
+	padding-bottom: 220rpx;
+	font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Roboto, "Segoe UI", "Microsoft YaHei", sans-serif;
+}
 
-	/deep/ .wx-slider-handle-wrapper {
-		margin: 0;
-		height: 36rpx !important;
-	}
+/* 商品信息卡片 */
+.product-card {
+	background: #fff;
+	margin: 24rpx;
+	padding: 32rpx;
+	border-radius: 24rpx;
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
 
-	.page {
-		min-height: 100vh;
-		background-color: #F6F6F6;
-		;
+	.product-header {
 		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		// padding: 0rpx 28rpx 116rpx;
+		padding: 0;
 
-		.lq-tip {
-			border-radius: 20rpx;
-			background: rgba(233, 233, 233, 0.38);
-			box-sizing: border-box;
-			border: 1px solid rgba(233, 233, 233, 0.3804);
-			padding: 10rpx;
-			font-size: 20rpx;
-			color: #5E5F60;
-			margin-bottom: 14rpx;
-			// width: 400rpx;
+		.product-image {
+			width: 242rpx;
+			height: 342rpx;
+			border-radius: 16rpx;
+			margin-right: 32rpx;
+			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
 		}
 
-		.btn {
-			border-radius: 30rpx;
-			box-sizing: border-box;
-			width: 306rpx;
-			height: 96rpx;
-			border-radius: 30rpx;
-			background-color: #FEE034;
-			font-size: 28rpx;
-			color: #1E2019;
+		.product-info {
+			flex: 1;
+			padding-top: 10rpx;
+
+			.title-row {
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-start;
+				margin-bottom: 16rpx;
+
+				.product-title {
+					flex: 1;
+					font-size: 40rpx;
+					font-weight: bold;
+					color: #0B0E26;
+					margin-right: 20rpx;
+				}
+
+				.like-btn {
+					margin-top: 4rpx;
+					width: 48rpx;
+					height: 48rpx;
+					padding: 4rpx;
+				}
+			}
+
+			.product-subtitle {
+				font-size: 28rpx;
+				color: #606060;
+				margin: 10rpx 0;
+			}
+
+			.rating {
+				display: flex;
+				align-items: center;
+				gap: 16rpx;
+				margin: 20rpx 0;
+
+				.rating-score {
+					font-size: 32rpx;
+					font-weight: bold;
+					color: #333;
+				}
+			}
+
+			.brand {
+				display: flex;
+				align-items: center;
+				padding: 20rpx;
+				background: linear-gradient(to right, #f9f9f9, #ffffff);
+				border-radius: 16rpx;
+				margin-top: 20rpx;
+				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+
+				.brand-logo {
+					width: 60rpx;
+					height: 60rpx;
+					border-radius: 50%;
+					margin-right: 16rpx;
+					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+				}
+
+				.brand-name {
+					flex: 1;
+					font-size: 28rpx;
+					color: #0B0E26;
+				}
+
+				.arrow-icon {
+					width: 32rpx;
+					height: 32rpx;
+					opacity: 0.6;
+				}
+			}
+		}
+	}
+
+	.product-params {
+		display: flex;
+		justify-content: space-between;
+		padding: 0;
+		margin: 32rpx 0;
+
+		.param-item {
+			width: 200rpx;
+			height: 180rpx;
+			background: linear-gradient(135deg, rgba(245, 197, 24, 0.1), rgba(245, 197, 24, 0.05));
+			border-radius: 16rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			gap: 12rpx;
+			box-shadow: 0 4rpx 16rpx rgba(245, 197, 24, 0.1);
+
+			.param-label {
+				font-size: 32rpx;
+				font-weight: 600;
+				color: #5F5F63;
+			}
+
+			.param-value {
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #FDCA40;
+			}
+		}
+	}
+
+	.product-description {
+		padding: 0;
+		font-size: 28rpx;
+		font-weight: normal;
+		line-height: 1.6;
+		color: #A1A1A1;
+		margin-bottom: 32rpx;
+	}
+}
+
+/* 评分区域 */
+.rating-section {
+	background-color: #fff;
+	margin: 24rpx;
+	padding: 32rpx;
+	border-radius: 24rpx;
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
+
+	.section-title {
+		font-size: 40rpx;
+		font-weight: bold;
+		line-height: 130%;
+		color: #030303;
+		margin-bottom: 36rpx;
+	}
+
+	.rating-tabs {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		margin: 56rpx 0;
+		width: 100%;
+
+		.tab-item {
+			width: 120rpx;
+			height: 80rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: #F9F9F9;
+			position: relative;
+			
+			&:first-child {
+				border-radius: 12rpx 0 0 12rpx;
+			}
+			
+			&:last-child {
+				border-radius: 0 12rpx 12rpx 0;
+			}
+			
+			.tab-icon {
+				width: 60rpx;
+				height: 40rpx;
+				opacity: 0.6;
+			}
+			
+			&.active {
+				background: #19367A;
+				box-shadow: 0 4rpx 12rpx rgba(25, 54, 122, 0.2);
+				
+				.tab-icon {
+					opacity: 1;
+					filter: brightness(0) invert(1);
+				}
+			}
+		}
+	}
+
+	.rating-overview {
+		display: flex;
+		align-items: center;
+		padding-left: 80rpx;
+		gap: 30rpx;
+		margin-bottom: 40rpx;
+
+		.rating-score-large {
+			font-size: 104rpx;
+			font-weight: bold;
+			color: #030303;
+			line-height: 1;
+			min-width: 120rpx;
+			text-align: center;
+			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+		}
+
+		.rating-right {
+			display: flex;
+			flex-direction: column;
+			margin-left: 12rpx;
+			gap: 10rpx;
+			min-height: 80rpx;
+		}
+
+		.rating-count {
+			font-size: 24rpx;
+			margin-left: 12rpx;
+			color: #606060;
+			white-space: nowrap;
+			min-height: 24rpx;
+
+			&.highlight {
+				color: #FDCA40;
+				font-weight: 500;
+			}
+		}
+	}
+
+	.rating-bars {
+		margin: 32rpx 0;
+
+		.rating-bar {
+			margin-bottom: 16rpx;
+
+			.bar-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-start;
+				margin-bottom: 8rpx;
+
+				.bar-label {
+					font-size: 24rpx;
+					color: #606060;
+				}
+
+				.bar-value {
+					font-size: 32rpx;
+					color: #030303;
+					font-weight: 600;
+				}
+			}
+
+			.bar {
+				width: 100%;
+				height: 46rpx;
+				background: #F9F9F9;
+				border-radius: 23rpx;
+				overflow: hidden;
+				box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
+
+				.bar-filled {
+					height: 100%;
+					background: linear-gradient(to right, #FDCA40, #FEE034);
+					border-radius: 23rpx;
+					box-shadow: 0 2rpx 8rpx rgba(253, 202, 64, 0.3);
+				}
+			}
+		}
+	}
+
+	.review-sort {
+		display: flex;
+		align-items: center;
+		margin: 32rpx 0;
+		gap: 16rpx;
+		padding-top: 24rpx;
+
+		.sort-item {
+			height: 64rpx;
+			padding: 0 24rpx;
+			background: #F9F9F9;
+			border-radius: 8rpx;
+			font-size: 24rpx;
+			color: #606060;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 
-			.icon {
-				width: 48rpx;
-				height: 48rpx;
-				margin-right: 22rpx;
-			}
-		}
-
-		.beer-container {
-			border-radius: 0rpx 0rpx 30rpx 30rpx;
-			background: #FFF;
-			box-sizing: border-box;
-			border: 1px solid #F2F2F2;
-			box-shadow: 0px 5.47px 43.78px 0px rgba(0, 0, 0, 0.05);
-			padding: 16rpx 40rpx;
-
-			.goods-box {
-				display: flex;
-				margin-bottom: 34rpx;
-
-				.cover {
-					width: 208rpx;
-					height: 300rpx;
-					border-radius: 12rpx;
-					margin-right: 14rpx;
-				}
-			}
-
-			.info-box {
-				.info-item {
-					border-radius: 36rpx;
-					background: rgba(255, 188, 17, 0.1);
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					justify-content: center;
-					width: 160rpx;
-					height: 164rpx;
-
-					.label {
-						font-family: Source Han Sans;
-						font-size: 30rpx;
-						font-weight: 500;
-						line-height: 44rpx;
-						color: #5F5F63;
-						margin-bottom: 9rpx;
-					}
-
-					.item-text {
-						font-family: Source Han Sans;
-						font-size: 30rpx;
-						font-weight: 500;
-						line-height: 44rpx;
-						color: #FFBC11;
-					}
-				}
-			}
-
-			.desc {
-				font-family: Source Han Sans;
-				font-size: 24rpx;
-				font-weight: 500;
-				line-height: 48rpx;
-				color: #A1A1A1;
-			}
-		}
-
-		.score-box {
-			border-radius: 30rpx;
-			background: #FFFFFF;
-			padding: 24rpx 28rpx 34rpx 34rpx;
-			margin-bottom: 32rpx;
-
-			.top {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				margin-bottom: 22rpx;
-
-				.left {
-					font-family: Source Han Sans;
-					font-size: 36rpx;
-					font-weight: 500;
-					line-height: 44rpx;
-					color: #0B0E26;
-
-					.icon {
-						width: 48rpx;
-						height: 48rpx;
-						margin-right: 14rpx;
-
-					}
-				}
-
-				.right {
-					border-radius: 20rpx;
-					background: #F2F2F2;
-					display: flex;
-					justify-content: space-between;
-
-					.defTab {
-						width: 50%;
-						border-radius: 20rpx;
-						background: #F2F2F2;
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						padding: 24rpx 36rpx;
-
-						.icon {
-							width: 48rpx;
-							height: 48rpx;
-						}
-					}
-
-					.active {
-						background-color: #71F4B4;
-					}
-				}
-			}
-		}
-
-
-
-
-		.review-box {
-			width: 100%;
-			// height: 200rpx;
-			padding: 0rpx 32rpx 30rpx;
-			border-radius: 30rpx;
-			background: #FFFFFF;
-			box-sizing: border-box;
-			border: 1px solid #F2F2F2;
-
-			.top {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				padding: 36rpx 10rpx 36rpx 0;
-				color: #0B0E26;
-				border-bottom: 1rpx solid rgba(242, 242, 242, 0.9);
-
-				.left {
-					font-family: Source Han Sans;
-					font-size: 36rpx;
-					font-weight: 500;
-					line-height: 44rpx;
-
-					.icon {
-						width: 48rpx;
-						height: 48rpx;
-						margin-right: 14rpx;
-
-					}
-				}
-
-
-			}
-		}
-
-		.review-item {
-			padding: 32rpx 0;
-			// margin-bottom: 32rpx;
-			border-bottom: 1rpx solid rgba(242, 242, 242, 0.9);
-
-			.avatar {
-				width: 60rpx;
-				height: 60rpx;
-				border-radius: 50%;
-				margin-right: 36rpx;
-			}
-
-			.beerName {
-				font-size: 24rpx;
-				font-weight: bold;
-				color: #32343E;
-				margin-bottom: 8rpx;
-			}
-
-			.time {
-				font-size: 24rpx;
-				color: #9C9BA6;
-			}
-
-			.icon {
-				width: 40rpx;
-				height: 40rpx;
-				margin-right: 10rpx;
+			&.active {
+				background: #19367A;
+				color: #FFFFFF;
+				box-shadow: 0 4rpx 12rpx rgba(25, 54, 122, 0.2);
 			}
 		}
 	}
+
+	.reviews {
+		.review-item {
+			padding: 40rpx 32rpx;
+			margin: 24rpx 0;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+			border: none;
+			
+			&:last-child {
+				border-bottom: none;
+			}
+
+			.review-header {
+				margin-bottom: 32rpx;
+
+				.user-info {
+					display: flex;
+					align-items: center;
+					gap: 24rpx;
+
+					.avatar {
+						width: 72rpx;
+						height: 72rpx;
+						border-radius: 50%;
+						background: #f5f5f5;
+						box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+					}
+
+					.user-meta {
+						flex: 1;
+						display: flex;
+						flex-direction: column;
+						gap: 12rpx;
+
+						.user-name {
+							font-size: 32rpx;
+							color: #333333;
+							font-weight: 500;
+						}
+
+						.review-time {
+							font-size: 24rpx;
+							color: #999999;
+						}
+					}
+				}
+			}
+
+			.review-content {
+				.content-left {
+					flex: 1;
+					min-width: 0;
+					display: flex;
+					flex-direction: column;
+					gap: 24rpx;
+
+					.review-text {
+						font-size: 28rpx;
+						line-height: 44rpx;
+						color: #333333;
+						word-break: break-all;
+					}
+
+					.image-scroll {
+						margin-top: 32rpx;
+						width: 100%;
+						white-space: nowrap;
+						
+						.image-container {
+							display: inline-flex;
+							gap: 16rpx;
+							padding-right: 32rpx;
+							
+							.review-image {
+								width: 220rpx;
+								height: 220rpx;
+								border-radius: 12rpx;
+								flex-shrink: 0;
+								box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+							}
+						}
+					}
+
+					.review-footer {
+						display: flex;
+						align-items: center;
+						gap: 24rpx;
+						margin-top: 24rpx;
+						padding-top: 24rpx;
+						border-top: 2rpx solid #f5f5f5;
+
+						.score-text {
+							font-size: 28rpx;
+							color: #FDCA40;
+							font-weight: 500;
+						}
+
+						.like-btn {
+							display: flex;
+							align-items: center;
+							gap: 8rpx;
+							padding: 4rpx 12rpx;
+							border-radius: 8rpx;
+							background: rgba(25, 54, 122, 0.05);
+							
+							.like-icon {
+								width: 32rpx;
+								height: 32rpx;
+								opacity: 0.6;
+							}
+							
+							.like-count {
+								font-size: 24rpx;
+								color: #666666;
+							}
+							
+							&.active {
+								background: rgba(253, 202, 64, 0.1);
+								box-shadow: 0 2rpx 8rpx rgba(253, 202, 64, 0.2);
+								
+								.like-icon {
+									opacity: 1;
+								}
+								
+								.like-count {
+									color: #FDCA40;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.view-all-reviews {
+		width: 100%;
+		height: 88rpx;
+		margin: 40rpx 0;
+		border: 2rpx solid #19367A;
+		border-radius: 12rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 28rpx;
+		color: #19367A;
+		background: #FFFFFF;
+		box-shadow: 0 4rpx 12rpx rgba(25, 54, 122, 0.08);
+		
+		&.disabled {
+			border-color: #CCCCCC;
+			color: #CCCCCC;
+			pointer-events: none;
+			box-shadow: none;
+		}
+	}
+
+	.no-review {
+		text-align: center;
+		padding: 80rpx 0;
+		font-size: 32rpx;
+		color: #606060;
+		background: #FFFFFF;
+		border-radius: 16rpx;
+		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+	}
+}
+
+/* 底部操作栏 */
+.bottom-bar {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: #fff;
+	padding: 24rpx 32rpx env(safe-area-inset-bottom);
+	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
+
+	.action-box {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 12rpx 0;
+
+		.action-item {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: 8rpx;
+			padding: 8rpx 16rpx;
+
+			.action-icon {
+				width: 48rpx;
+				height: 48rpx;
+			}
+
+			.action-text {
+				font-size: 24rpx;
+				color: #333;
+				margin-top: 4rpx;
+			}
+		}
+
+		.write-review {
+			width: 358rpx;
+			height: 96rpx;
+			background: linear-gradient(135deg, #19367A, #1E4B9E);
+			border-radius: 48rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 32rpx;
+			color: #fff;
+			font-weight: 500;
+			margin: 0 16rpx;
+			box-shadow: 0 4rpx 16rpx rgba(25, 54, 122, 0.2);
+		}
+	}
+}
 </style>
\ No newline at end of file
diff --git a/static/heart-add.png b/static/heart-add.png
new file mode 100644
index 0000000..3fd3249
Binary files /dev/null and b/static/heart-add.png differ
diff --git a/static/heart-tick.png b/static/heart-tick.png
new file mode 100644
index 0000000..b33cfc5
Binary files /dev/null and b/static/heart-tick.png differ
diff --git a/static/like.png b/static/like.png
new file mode 100644
index 0000000..c3ac97f
Binary files /dev/null and b/static/like.png differ
diff --git a/tatus b/tatus
deleted file mode 100644
index b94c066..0000000
--- a/tatus
+++ /dev/null
@@ -1,35 +0,0 @@
-
-                   SSUUMMMMAARRYY OOFF LLEESSSS CCOOMMMMAANNDDSS
-
-      Commands marked with * may be preceded by a number, _N.
-      Notes in parentheses indicate the behavior if _N is given.
-      A key preceded by a caret indicates the Ctrl key; thus ^K is ctrl-K.
-
-  h  H                 Display this help.
-  q  :q  Q  :Q  ZZ     Exit.
- ---------------------------------------------------------------------------
-
-                           MMOOVVIINNGG
-
-  e  ^E  j  ^N  CR  *  Forward  one line   (or _N lines).
-  y  ^Y  k  ^K  ^P  *  Backward one line   (or _N lines).
-  f  ^F  ^V  SPACE  *  Forward  one window (or _N lines).
-  b  ^B  ESC-v      *  Backward one window (or _N lines).
-  z                 *  Forward  one window (and set window to _N).
-  w                 *  Backward one window (and set window to _N).
-  ESC-SPACE         *  Forward  one window, but don't stop at end-of-file.
-  d  ^D             *  Forward  one half-window (and set half-window to _N).
-  u  ^U             *  Backward one half-window (and set half-window to _N).
-  ESC-)  RightArrow *  Right one half screen width (or _N positions).
-  ESC-(  LeftArrow  *  Left  one half screen width (or _N positions).
-  ESC-}  ^RightArrow   Right to last column displayed.
-  ESC-{  ^LeftArrow    Left  to first column.
-  F                    Forward forever; like "tail -f".
-  ESC-F                Like F but stop when search pattern is found.
-  r  ^R  ^L            Repaint screen.
-  R                    Repaint screen, discarding buffered input.
-        ---------------------------------------------------
-        Default "window" is the screen height.
-        Default "half-window" is half of the screen height.
- ---------------------------------------------------------------------------
-