From 92c79166f5c62f5154338069d7c34e07c45bec98 Mon Sep 17 00:00:00 2001
From: davy <davy@example.com>
Date: Mon, 7 Apr 2025 12:49:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C=20-=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=90=9C=E7=B4=A2=E8=A7=A6=E5=8F=91=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=EF=BC=8C=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=92=8C=E6=90=9C=E7=B4=A2=E7=8A=B6=E6=80=81=E6=8C=87?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/activityList/index.vue |  246 +++---
 pagesActivity/homeSearch.vue | 1460 ++++++++++++++++++++++++++++------
 static/Vector@1x.png         |  Bin 0 -> 809 bytes
 3 files changed, 1359 insertions(+), 347 deletions(-)
 create mode 100644 static/Vector@1x.png

diff --git a/pages/activityList/index.vue b/pages/activityList/index.vue
index a3be098..f5cdbda 100644
--- a/pages/activityList/index.vue
+++ b/pages/activityList/index.vue
@@ -2,11 +2,14 @@
 	<view class="page">
 		<!-- 固定搜索栏 -->
 		<view class="fixed-search" :style="{ top: statusBaeHeight + 'px' }">
-			<SearchBar 
-				:placeholders="'搜索酒款/品牌'" 
-				:bgcolor="'#19367A'" 
-				:borderRs="'0px 0px 24rpx 24rpx'"
-			/>
+			<view class="search-box" @tap="toSearch">
+				<view class="search-input-container">
+					<text class="search-placeholder">输入酒款名称，品牌名称，啤酒风格</text>
+					<view class="search-icon-container">
+						<uni-icons type="search" size="24" color="#fff"></uni-icons>
+					</view>
+				</view>
+			</view>
 		</view>
 
 		<!-- 筛选栏 -->
@@ -48,14 +51,11 @@
 	} from '@/api/platform.js'
 	import commonTitle from '@/components/commonTitle.vue'
 	import rowBeer from '@/components/rowBeer.vue'
-	import SearchBar from '@/components/SearchBar.vue';
-
 
 	export default {
 		components: {
 			commonTitle,
 			rowBeer,
-			SearchBar,
 		},
 		data() {
 			return {
@@ -113,18 +113,12 @@
 					uni.navigateTo({
 						url: '/pages/index/newBeer'
 					})
-					// uni.navigateTo({
-					// 	url: '/pagesActivity/newWine'
-					// })
-					// uni.navigateTo({
-					// 	url: '/pages/activityList/details'
-					// })
 				}
 			},
 			// 搜索
 			toSearch() {
 				uni.navigateTo({
-					url: '/pages/index/searchBeer'
+					url: '/pagesActivity/homeSearch'
 				})
 			},
 			// 查询广告弹窗 banner列表
@@ -200,101 +194,141 @@
 </script>
 
 <style lang="scss" scoped>
-	.page {
-		background: #F9F9F9;
-		height: 100vh;
-		overflow-y: auto;
-	}
+.page {
+	background: #F9F9F9;
+	height: 100vh;
+	overflow-y: auto;
+}
 
-	.fixed-search {
-		position: fixed;
-		left: 0;
-		right: 0;
-		z-index: 1001; /* 提高导航栏层级 */
-		background-color: #19367A;
-		border-radius: 0 0 24rpx 24rpx;		
-		
-		/* 保持搜索栏原有圆角 */
-		:deep(.search-container) {
-			border-radius: 0 0 24rpx 24rpx !important;
-		}
-	}
+.fixed-search {
+	position: fixed;
+	left: 0;
+	right: 0;
+	z-index: 1001; /* 提高导航栏层级 */
+	background-color: #19367A;
+	border-radius: 0 0 24rpx 24rpx;		
+	padding: 20rpx 0;
+	transition: all 0.3s ease;
+}
 
-	.content-container {
-		padding-top: 0rpx;
-	}
+.search-box {
+	padding: 0 30rpx;
+}
 
-	/* 筛选导航栏 */
-	.filter-bar {
-		position: sticky;
-		top:80rpx;
-		z-index: 1000;
-		background: #FFFFFF;
-		box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
-		margin-top: -40rpx;
-		padding-top: 40rpx;
-	}
+.search-input-container {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	background-color: #fff;
+	border-radius: 30rpx;
+	overflow: hidden;
+	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+	height: 80rpx;
+	position: relative;
+}
 
-	.choose-center {
-		height: 112rpx;
-		width: 100%;
-		padding: 24rpx;
-		background: #FFFFFF;
-		
-		.choose-navs {
-			// 导航选项的样式
-			font-family: Roboto;
-			font-size: 24rpx;
-			font-weight: 500;
-			
-			.choose-navs-txt {
-				// 导航选项文本的样式
-				width: 144rpx;
-				height: 64rpx;
-				line-height: 64rpx;
-				border-radius: 12rpx;
-				background: #F9F9F9;
-				margin-right: 16rpx;
-				&.actives {
-					// 选中状态的样式
-					color: #FFF;
-					background: #D42E78;
-				}
-			}
-		}
-	}
+.search-placeholder {
+	flex: 1;
+	padding: 0 20rpx;
+	font-size: 28rpx;
+	color: #999;
+	position: relative;
+}
+
+.search-icon-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 80rpx;
+	height: 80rpx;
+	background-color: #D42E78;
+	border-radius: 0 30rpx 30rpx 0;
+	color: #fff;
+	transition: all 0.3s ease;
 	
-	.title-box {
-		padding: 24rpx 32rpx;
-		// margin-bottom: 24rpx;
-		// margin-top: 24rpx;
-		.title {
-			font-size: 32rpx;
-			color: #030303;
-			font-weight: 600;
-			line-height: 48rpx;
-			letter-spacing: normal;
-			margin-bottom: 8rpx;
-			max-width: 500rpx;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-		
-		.sub {
-			font-family: Roboto;
-			font-size: 24rpx;
-			font-weight: normal;
-			line-height: 32rpx;
-			display: flex;
-			align-items: center;
-			letter-spacing: normal;
-			color: #606060;
-			margin-bottom: 8rpx;
-			max-width: 500rpx;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-		}
+	&:active {
+		transform: scale(0.95);
+		opacity: 0.9;
 	}
+}
+
+.content-container {
+	padding-top: 0rpx;
+}
+
+/* 筛选导航栏 */
+.filter-bar {
+	position: sticky;
+	top:80rpx;
+	z-index: 1000;
+	background: #FFFFFF;
+	box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
+	margin-top: -40rpx;
+	padding-top: 40rpx;
+}
+
+.choose-center {
+	height: 112rpx;
+	width: 100%;
+	padding: 24rpx;
+	background: #FFFFFF;
+}
+
+.choose-navs {
+	// 导航选项的样式
+	font-family: Roboto;
+	font-size: 24rpx;
+	font-weight: 500;
+}
+
+.choose-navs-txt {
+	// 导航选项文本的样式
+	width: 144rpx;
+	height: 64rpx;
+	line-height: 64rpx;
+	border-radius: 12rpx;
+	background: #F9F9F9;
+	margin-right: 16rpx;
+	
+	&.actives {
+		// 选中状态的样式
+		color: #FFF;
+		background: #D42E78;
+	}
+}
+
+.title-box {
+	padding: 24rpx 32rpx;
+	// margin-bottom: 24rpx;
+	// margin-top: 24rpx;
+}
+
+.title {
+	font-size: 32rpx;
+	color: #030303;
+	font-weight: 600;
+	line-height: 48rpx;
+	letter-spacing: normal;
+	margin-bottom: 8rpx;
+	max-width: 500rpx;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.sub {
+	font-family: Roboto;
+	font-size: 24rpx;
+	font-weight: normal;
+	line-height: 32rpx;
+	display: flex;
+	align-items: center;
+	letter-spacing: normal;
+	color: #606060;
+	margin-bottom: 8rpx;
+	max-width: 500rpx;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
 </style>
\ No newline at end of file
diff --git a/pagesActivity/homeSearch.vue b/pagesActivity/homeSearch.vue
index 02c2c02..df163fb 100644
--- a/pagesActivity/homeSearch.vue
+++ b/pagesActivity/homeSearch.vue
@@ -3,142 +3,343 @@
 		<!-- 固定搜索框 -->
 		<view class="fixed-search-box" style="background-color:#19367A;border-radius: 0rpx 0rpx 24rpx 24rpx;">
 			<view class="search-box">
-				<text class="cuIcon-back" style="font-size: 40rpx;color: #fff;margin-right: 24rpx;padding-left: 20rpx;" @click="goBack"></text>
-				<input ref="searchInput" style="flex:1;" v-model="keyword" type="text" placeholder="搜索酒款名称，品牌名称，啤酒风格" @confirm="search" @input="changeSearch" focus>
-				<view class="searchs" @click="search" style="">
-				  <uni-icons type="search" size="30" color="#fff"></uni-icons>
+				<image 
+					src="/static/Vector@1x.png"
+					class="search-icon"
+					:class="{'rotating': isSearching}"
+					mode="aspectFit">
+				</image>
+				<input 
+					ref="searchInput"
+					type="text"
+					v-model="keyword"
+					placeholder="输入酒款名称，品牌名称，啤酒风格"
+					@confirm="handleConfirm"
+					@input="handleInput"
+					focus>
+				<text 
+					v-if="keyword" 
+					class="cuIcon-close clear-icon" 
+					@tap="clearKeyword">
+				</text>
+				<view 
+					class="searchs" 
+					:class="{'loading': isSearching}" 
+					@tap="search">
+					<uni-icons 
+						type="search" 
+						size="30" 
+						color="#fff">
+					</uni-icons>
 				</view>
 			</view>
 		</view>
 		
 		<!-- 内容区域 -->
 		<view class="content">
+			<!-- 搜索历史 -->
+			<template v-if="(!keyword || keyword.length < 2) && searchHistory.length > 0">
+				<view class="section-title">
+					<text class="title">搜索历史</text>
+					<view class="clear-btn" @tap="clearHistory">
+						<uni-icons type="trash" size="16" color="#999"></uni-icons>
+						<text>清空</text>
+					</view>
+				</view>
+				<view class="history-list">
+					<view 
+						v-for="(item, index) in searchHistory" 
+						:key="index"
+						class="history-tag"
+						@tap="useHistoryKeyword(item)">
+						{{item}}
+					</view>
+				</view>
+			</template>
+			
 			<!-- 热门啤酒风格 -->
-			<template v-if="!keyword">
-				<view class="hot-title">热门啤酒风格</view>
-				<view class="hot-box">
-					<view v-for="(item, index) in popularStyleList" :key="index" class="hot-item flex justify-between align-center"
-						@click="searchByStyle(item)" style="margin-bottom: 32rpx;">
-						<view class="">
-							<image src="@/static/bg/pc-1.png" style="width: 62rpx;height: 88rpx;"></image>	
+			<template v-if="!keyword || keyword.length < 2">
+				<view class="section-title">
+					<text class="title">热门啤酒风格</text>
+				</view>
+				<view class="style-list">
+					<view 
+						v-for="(item, index) in popularStyleList" 
+						:key="index" 
+						class="style-item"
+						@tap="searchByStyle(item)">
+						<view class="item-content">
+							<image 
+								src="/static/bg/pc-1.png" 
+								mode="aspectFit">
+							</image>
+							<view class="info">
+								<view class="title">{{ item.beerStyles }}</view>
+								<view class="sub">全系列{{item.popular}}款产品在售</view>
+							</view>
+							<image 
+								src="/static/bg/deletes.svg" 
+								class="arrow">
+							</image>
 						</view>
-						<view class="flex-1">
-							<view class="title ">{{ item.beerStyles}}</view>
-							<!-- <view class="sub">全系列{{item.popular}}款产品在售</view> -->
-						</view>
-						<view class="">
-						<image src="@/static/bg/deletes.svg" style="width: 48rpx;height: 48rpx;"></image>	
-						</view>
-						
 					</view>
 				</view>
 			</template>
-			<template v-else>
-				<view>
-					<view class=" flex justify-start margin-top:24rpx;">
-						<view class="text-sm tag" :class="{'active-tag': curTag == 0}" @click="changeTag(0)">最佳匹配</view>
-						<view class="text-sm tag" :class="{'active-tag': curTag == 1}" @click="changeTag(1)">酒款</view>
-						<view class="text-sm tag" :class="{'active-tag': curTag == 2}" @click="changeTag(2)">酒厂</view>
+			
+			<!-- 搜索结果 -->
+			<template v-if="keyword && keyword.length >= 2">
+				<view class="tag-list">
+					<view 
+						v-for="(tag, index) in searchTags" 
+						:key="index"
+						class="text-sm tag" 
+						:class="{'active-tag': curTag === index}" 
+						@tap="changeTag(index)">
+						{{tag.name}}
 					</view>
 				</view>
-			</template>
-			<template v-if="curTag == 0 && keyword ">
-				<scroll-view v-if="commonBeer.length > 0" scroll-y="true" class="my-brandSide">
-					<view class="brandSide-box" v-for="(item, index) in commonBeer" :key="index" @click="toBeer(item)">
-						<view class="flex align-center justify-start">
-							<image :src="item.cover" class="beerCover"></image>
-							<view>
-								<view class="title">{{ item.beerName }}</view>
-								<view class="desc" style="margin-bottom: 10rpx;">{{item.beerStyles}}</view>
-								<!-- <view class="desc flex align-center">
-									<image :src="item.brandLogo" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;">
-									</image>
-								{{item.brandName}}</view> -->
-							</view>
-						</view>
-						
-						<view class="flex flex-col justify-between">
-							<view class="desc margin-bottom-xs bg-beer">
-								{{ item.beerOverallRating || 0 }}
-								<text class="cuIcon-favorfill" style="font-size: 30rpx;margin-left: 10rpx;color:#FEE034"></text>
-							</view>
-							<!-- <view class="desc" style="text-align: right;">
-								{{ item.beerReviewsCount || 0}}
-								<text class="cuIcon-friend" style="font-size: 30rpx;margin-left: 10rpx;"></text>
-							</view> -->
-													
-						</view>
-					</view>
-				</scroll-view>
-				<scroll-view v-if="commonBreweries.length > 0" scroll-y="true" class="my-brandSide">
-					<view class="brandSide-box" v-for="(item, index) in commonBreweries" :key="index" @click="toBrand(item)">
-						<view class="flex align-center justify-start">
-							<image :src="item.brandLogo" class="logo"></image>
-							<view>
-								<view class="title">{{ item.brandName }}</view>
-								<view class="desc">全系列XXX款产品在售</view>
-							</view>
-						</view>
-						<image src="@/static/right-arrow.png" style="width: 48rpx;height: 48rpx;"></image>
-					</view>
-				</scroll-view>
 				
-				<view v-if="commonBeer.length == 0 && commonBreweries.length == 0" style="flex:1;width: 100%;" class="flex justify-center align-center">
-					<view style="color: #979797;font-size: 24rpx;">暂无结果</view>
-					</view>
-			</template>
-			
-			<!-- 酒款列表 -->
-			<template v-if="curTag == 1 && keyword">
-				<scroll-view v-if="beers.length > 0" scroll-y="true" class="my-brandSide" style="flex:1">
-					<view class="brandSide-box" v-for="(item, index) in beers" :key="index" @click="toBeer(item)">
-						<view class="flex align-center justify-start">
-							<image :src="item.cover" class="beerCover"></image>
-							<view>
-								<view class="title">{{ item.beerName }}</view>
-								<view class="desc" style="margin-bottom: 10rpx;">{{item.beerStyles}}</view>
-								<!-- <view class="desc flex align-center">
-									<image :src="item.brandLogo" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;">
-									</image>
-								{{item.brandName}}</view> -->
+				<!-- 最佳匹配 -->
+				<template v-if="curTag === 0">
+					<scroll-view 
+						v-if="commonBeer.length > 0 || commonBreweries.length > 0" 
+						scroll-y="true" 
+						class="my-brandSide"
+						@scrolltolower="loadMore">
+						<!-- 酒款列表 -->
+						<view 
+							v-for="(item, index) in commonBeer" 
+							:key="index" 
+							class="brandSide-box"
+							@tap="toBeer(item)">
+							<view class="flex align-center justify-start">
+								<image 
+									:src="item.cover" 
+									class="beerCover"
+									mode="aspectFill"
+									lazy-load>
+								</image>
+								<view class="info">
+									<view class="title">{{ item.beerName }}</view>
+									<view class="desc">{{item.beerStyles}}</view>
+									<view class="brewery-info">
+										<image 
+											:src="item.brandLogo || '/static/default-brewery.png'" 
+											class="brewery-logo"
+											mode="aspectFill">
+										</image>
+										<text class="brewery-name">{{item.brandName}}</text>
+									</view>
+								</view>
+							</view>
+							<view class="rating">
+								{{ item.beerOverallRating || 0 }}
+								<text class="cuIcon-favorfill star"></text>
 							</view>
 						</view>
 						
-						<view class="flex flex-col justify-between">
-							<view class="desc margin-bottom-xs bg-beer">
+						<!-- 酒厂列表 -->
+						<view 
+							v-for="(item, index) in commonBreweries" 
+							:key="index" 
+							class="brandSide-box brewery-item"
+							@tap="toBrand(item)">
+							<view class="flex align-center justify-start">
+								<image 
+									:src="item.brandLogo || '/static/default-brewery.png'" 
+									class="logo"
+									mode="aspectFill"
+									lazy-load>
+								</image>
+								<view class="info">
+									<view class="title">{{ item.brandName }}</view>
+									<view class="desc">全系列{{item.productCount || 'XXX'}}款产品在售</view>
+								</view>
+							</view>
+							<view class="arrow-container">
+								<image 
+									src="/static/right-arrow.png" 
+									class="arrow"
+									mode="aspectFit">
+								</image>
+							</view>
+						</view>
+						
+						<!-- 加载更多 -->
+						<view v-if="hasMore" class="loading-more">
+							<text>加载中...</text>
+						</view>
+
+						<!-- 添加引导提示 -->
+						<view v-if="!hasMore && (commonBeer.length > 0 || commonBreweries.length > 0)" class="guide-tip">
+							<text>没找到想要的酒款？</text>
+							<view class="add-btn" @tap="toNewBeer">
+								<text>添加新酒款</text>
+								<uni-icons type="plus" size="12" color="#19367A"></uni-icons>
+							</view>
+						</view>
+					</scroll-view>
+					
+					<!-- 空状态 -->
+					<view v-else class="empty-state">
+						<image 
+							src="@/static/wenhao.png" 
+							mode="aspectFit"
+							class="empty-image">
+						</image>
+						<view class="empty-content">
+							<view class="empty-text">
+								<text class="main-text">未找到相关酒款</text>
+								<text class="sub-text">换个关键词试试，或者添加新酒款</text>
+							</view>
+							<view class="request-btn" @tap="toNewBeer">
+								<text>添加新酒款</text>
+								<uni-icons type="plus" size="16" color="#FFFFFF"></uni-icons>
+							</view>
+						</view>
+					</view>
+				</template>
+				
+				<!-- 酒款列表 -->
+				<template v-if="curTag === 1">
+					<scroll-view 
+						v-if="beers.length > 0" 
+						scroll-y="true" 
+						class="my-brandSide"
+						@scrolltolower="loadMore">
+						<view 
+							v-for="(item, index) in beers" 
+							:key="index" 
+							class="brandSide-box"
+							@tap="toBeer(item)">
+							<view class="flex align-center justify-start">
+								<image 
+									:src="item.cover" 
+									class="beerCover"
+									mode="aspectFill"
+									lazy-load>
+								</image>
+								<view class="info">
+									<view class="title">{{ item.beerName }}</view>
+									<view class="desc">{{item.beerStyles}}</view>
+									<view class="brewery-info">
+										<image 
+											:src="item.brandLogo || '/static/default-brewery.png'" 
+											class="brewery-logo"
+											mode="aspectFill">
+										</image>
+										<text class="brewery-name">{{item.brandName}}</text>
+									</view>
+								</view>
+							</view>
+							<view class="rating">
 								{{ item.beerOverallRating || 0 }}
-								<text class="cuIcon-favorfill" style="font-size: 30rpx;margin-left: 10rpx;color:#FEE034"></text>
-							</view>
-							<!-- <view class="desc" style="text-align: right;">
-								{{ item.beerReviewsCount || 0}}
-								<text class="cuIcon-friend" style="font-size: 30rpx;margin-left: 10rpx;"></text>
-							</view> -->
-													
-						</view>
-					</view>
-				</scroll-view>
-			
-				<view v-else style="flex:1;width: 100%;" class="flex justify-center align-center">
-					<view style="color: #979797;font-size: 24rpx;">暂无结果</view>
-				</view>
-			</template>
-			<!-- 酒厂列表 -->
-			<template v-if="curTag == 2 && keyword">
-				<scroll-view v-if="breweries.length > 0" scroll-y="true" class="my-brandSide" style="flex:1">
-					<view class="brandSide-box" v-for="(item, index) in breweries" :key="index" @click="toBrand(item)">
-						<view class="flex align-center justify-start">
-							<image :src="item.brandLogo" class="logo"></image>
-							<view>
-								<view class="title">{{ item.brandName }}</view>
-								<view class="desc">全系列XXX款产品在售</view>
+								<text class="cuIcon-favorfill star"></text>
+							</view>
+						</view>
+						
+						<!-- 加载更多 -->
+						<view v-if="hasMore" class="loading-more">
+							<text>加载中...</text>
+						</view>
+
+						<!-- 添加引导提示 -->
+						<view v-if="!hasMore && beers.length > 0" class="guide-tip">
+							<text>没找到想要的酒款？</text>
+							<view class="add-btn" @tap="toNewBeer">
+								<text>添加新酒款</text>
+								<uni-icons type="plus" size="12" color="#19367A"></uni-icons>
+							</view>
+						</view>
+					</scroll-view>
+					
+					<!-- 空状态 -->
+					<view v-else class="empty-state">
+						<image 
+							src="@/static/wenhao.png" 
+							mode="aspectFit"
+							class="empty-image">
+						</image>
+						<view class="empty-content">
+							<view class="empty-text">
+								<text class="main-text">未找到相关酒款</text>
+								<text class="sub-text">换个关键词试试，或者添加新酒款</text>
+							</view>
+							<view class="request-btn" @tap="toNewBeer">
+								<text>添加新酒款</text>
+								<uni-icons type="plus" size="16" color="#FFFFFF"></uni-icons>
 							</view>
 						</view>
-						<image src="@/static/right-arrow.png" style="width: 48rpx;height: 48rpx;"></image>
 					</view>
-				</scroll-view>
-				<view v-else style="flex:1;width: 100%;" class="flex justify-center align-center">
-					<view style="color: #979797;font-size: 24rpx;">暂无结果</view>
-				</view>
+				</template>
+				
+				<!-- 厂牌列表 -->
+				<template v-if="curTag === 2">
+					<scroll-view 
+						v-if="breweries.length > 0" 
+						scroll-y="true" 
+						class="my-brandSide brewery-list"
+						@scrolltolower="loadMore">
+						<view 
+							v-for="(item, index) in breweries" 
+							:key="index" 
+							class="brandSide-box brewery-item"
+							@tap="toBrand(item)">
+							<view class="flex align-center justify-start">
+								<image 
+									:src="item.brandLogo || '/static/default-brewery.png'" 
+									class="logo"
+									mode="aspectFill"
+									lazy-load>
+								</image>
+								<view class="info">
+									<view class="title">{{ item.brandName }}</view>
+									<view class="desc">全系列{{item.productCount || 'XXX'}}款产品在售</view>
+								</view>
+							</view>
+							<view class="arrow-container">
+								<image 
+									src="/static/right-arrow.png" 
+									class="arrow"
+									mode="aspectFit">
+								</image>
+							</view>
+						</view>
+						
+						<!-- 加载更多 -->
+						<view v-if="hasMore" class="loading-more">
+							<text>加载中...</text>
+						</view>
+
+						<!-- 添加引导提示 -->
+						<view v-if="!hasMore && breweries.length > 0" class="guide-tip">
+							<text>没找到想要的酒款？</text>
+							<view class="add-btn" @tap="toNewBeer">
+								<text>添加新酒款</text>
+								<uni-icons type="plus" size="12" color="#19367A"></uni-icons>
+							</view>
+						</view>
+					</scroll-view>
+					
+					<!-- 空状态 -->
+					<view v-else class="empty-state">
+						<image 
+							src="@/static/wenhao.png" 
+							mode="aspectFit"
+							class="empty-image">
+						</image>
+						<view class="empty-content">
+							<view class="empty-text">
+								<text class="main-text">未找到相关酒款</text>
+								<text class="sub-text">换个关键词试试，或者添加新酒款</text>
+							</view>
+							<view class="request-btn" @tap="toNewBeer">
+								<text>添加新酒款</text>
+								<uni-icons type="plus" size="16" color="#FFFFFF"></uni-icons>
+							</view>
+						</view>
+					</view>
+				</template>
 			</template>
 		</view>
 	</view>
@@ -165,12 +366,22 @@
 				beers: [], // 酒款列表
 				commonBeer:[],
 				commonBreweries:[],
-				timer: null,
-				isRotating: false
+				searchHistory: [], // 搜索历史
+				isSearching: false, // 搜索状态
+				currentPage: 1, // 当前页码
+				pageSize: 10, // 每页数量
+				hasMore: false, // 是否有更多数据
+				timer: null, // 搜索防抖定时器
+				searchTags: [
+					{ name: '最佳匹配', type: 'all' },
+					{ name: '酒款', type: 'beer' },
+					{ name: '厂牌', type: 'brewery' }
+				]
 			};
 		},
 		onLoad() {
 			this.getPopularStyle()
+			this.loadSearchHistory()
 			// 监听键盘打开事件
 			uni.$on('openKeyboard', () => {
 				this.$refs.searchInput.focus()
@@ -181,100 +392,301 @@
 			uni.$off('openKeyboard')
 		},
 		methods: {
-			changeSearch() {
-				this.commonBeer=[]
-				this.commonBreweries=[]
-			  if(this.keyword.length < 2) return
-			 
-			  // 节流搜索
-			  if (this.timer) {
-				  clearTimeout(this.timer)
-				  this.timer = null
-			  }
-			  this.isRotating = true
-			  this.timer = setTimeout(()=>{
-				  if(this.keyword.length < 2) return
-				  this.search()
-			  },500)
+			// 加载搜索历史
+			loadSearchHistory() {
+				const history = uni.getStorageSync('searchHistory')
+				this.searchHistory = history ? JSON.parse(history) : []
 			},
-			search() {
-				this.commonBeer=[]
-				this.commonBreweries=[]
-				commonSearch(this.keyword).then(res => {
-					console.log(res)
-					this.isRotating = false
-					this.commonBeer = res.data.beers
-					this.commonBreweries = res.data.breweries
-				})
+			
+			// 保存搜索历史
+			saveSearchHistory(keyword) {
+				if (!keyword) return
+				
+				let history = this.searchHistory
+				// 移除重复项
+				history = history.filter(item => item !== keyword)
+				// 添加到开头
+				history.unshift(keyword)
+				// 最多保存8条
+				history = history.slice(0, 8)
+				
+				this.searchHistory = history
+				uni.setStorageSync('searchHistory', JSON.stringify(history))
 			},
-			// 获取热门风格
-			getPopularStyle() {
-				popularStyle().then(res => {
-					console.log(res)
-					this.popularStyleList = res.data
-				})
+			
+			// 清空搜索历史
+			clearHistory() {
+				this.searchHistory = []
+				uni.removeStorageSync('searchHistory')
 			},
-			searchByStyle(item) {
-				uni.navigateTo({
-					url: '/pages/index/styleBeer?beerStyles=' + item.beerStyles
-				})
+			
+			// 使用历史搜索词
+			useHistoryKeyword(keyword) {
+				this.keyword = keyword
+				this.search()
 			},
-			// 切换标签
-			changeTag(key) {
-				this.curTag = key
-				if (this.curTag == 2) {
-					this.commonBeer=[]
-					this.commonBreweries=[]
-					this.searchByBreweries()
-				} else if (this.curTag == 1) {
-					this.commonBeer=[]
-					this.commonBreweries=[]
-					this.searchByBeer()
-				} else if (this.curTag === 0) {
-					this.commonBeer=[]
-					this.commonBreweries=[]
+			
+			// 清空搜索框
+			clearKeyword() {
+				this.keyword = '';
+				this.isSearching = false;
+				this.clearSearchResults();
+			},
+			
+			// 输入框变化
+			handleInput(e) {
+				// 清除之前的定时器
+				if (this.timer) {
+					clearTimeout(this.timer);
+					this.timer = null;
+				}
+
+				// 如果输入长度小于2，直接返回并清空搜索状态
+				if (!this.keyword || this.keyword.length < 2) {
+					this.isSearching = false;
+					return;
+				}
+
+				// 设置新的定时器，只有当输入长度大于等于2时才触发搜索
+				this.timer = setTimeout(() => {
+					const trimmedKeyword = this.keyword.trim();
+					if (trimmedKeyword && trimmedKeyword.length >= 2) {
+						this.search();
+					}
+				}, 500);
+			},
+			
+			// 输入确认（回车键）
+			handleConfirm() {
+				if (!this.keyword || this.keyword.length < 2) {
+					uni.showToast({
+						title: '请至少输入2个字符',
+						icon: 'none'
+					});
+					return;
+				}
+				this.search();
+			},
+			
+			// 搜索
+			async search() {
+				if (!this.keyword || this.keyword.length < 2) {
+					this.isSearching = false;
+					return;
+				}
+
+				const trimmedKeyword = this.keyword.trim();
+				if (!trimmedKeyword || trimmedKeyword.length < 2) {
+					this.isSearching = false;
+					return;
+				}
+
+				this.isSearching = true;
+				this.currentPage = 1;
+
+				try {
+					// 保存搜索历史
+					this.saveSearchHistory(trimmedKeyword);
+					
+					// 根据当前标签搜索
+					await this.searchByTag();
+				} catch (error) {
+					console.error('搜索失败:', error);
+					if (error.statusCode === 400) {
+						uni.showToast({
+							title: '搜索参数错误，请重试',
+							icon: 'none'
+						});
+					} else if (error.statusCode === 500) {
+						uni.showToast({
+							title: '服务器错误，请稍后重试',
+							icon: 'none'
+						});
+					} else {
+						uni.showToast({
+							title: '搜索失败，请检查网络连接',
+							icon: 'none'
+						});
+					}
+					this.clearSearchResults();
+				} finally {
+					this.isSearching = false;
+				}
+			},
+			
+			// 清空搜索结果
+			clearSearchResults() {
+				this.commonBeer = [];
+				this.commonBreweries = [];
+				this.beers = [];
+				this.breweries = [];
+				this.hasMore = false;
+			},
+			
+			// 根据标签搜索
+			async searchByTag() {
+				const tag = this.searchTags[this.curTag]
+				
+				switch (tag.type) {
+					case 'all':
+						await this.searchAll()
+						break
+					case 'beer':
+						await this.searchBeers()
+						break
+					case 'brewery':
+						await this.searchBreweries()
+						break
+				}
+			},
+			
+			// 搜索全部
+			async searchAll() {
+				try {
+					const res = await commonSearch(this.keyword.trim())
+					
+					if (!res || res.code !== 200) {
+						throw new Error('搜索结果为空')
+					}
+					
+					// 直接使用返回的数据结构
+					if (this.currentPage === 1) {
+						this.commonBeer = res.data.beers || []
+						this.commonBreweries = res.data.breweries || []
+					} else {
+						this.commonBeer = [...this.commonBeer, ...(res.data.beers || [])]
+						this.commonBreweries = [...this.commonBreweries, ...(res.data.breweries || [])]
+					}
+					
+					// 根据返回的数据长度判断是否还有更多
+					this.hasMore = (res.data.beers?.length === this.pageSize) || 
+								  (res.data.breweries?.length === this.pageSize)
+				} catch (error) {
+					console.error('搜索全部失败:', error)
+					throw error
+				}
+			},
+			
+			// 搜索酒款
+			async searchBeers() {
+				try {
+					const keyword = this.keyword.trim()
+					const res = await getBeerList(keyword)
+					
+					// 修复：正确处理API返回的数据结构
+					if (!res || res.code !== 200) {
+						throw new Error('搜索结果为空')
+					}
+					
+					// 获取rows数组
+					const beerList = res.rows || []
+					
+					if (this.currentPage === 1) {
+						this.beers = beerList
+					} else {
+						this.beers = [...this.beers, ...beerList]
+					}
+					
+					this.hasMore = beerList.length === this.pageSize
+				} catch (error) {
+					console.error('搜索酒款失败:', error)
+					throw error
+				}
+			},
+			
+			// 搜索酒厂
+			async searchBreweries() {
+				try {
+					const keyword = this.keyword.trim()
+					const res = await searchByBreweriesApi(keyword)
+					
+					// 修复：正确处理API返回的数据结构
+					if (!res || res.code !== 200) {
+						throw new Error('搜索结果为空')
+					}
+					
+					// 获取rows数组
+					const breweryList = res.rows || []
+					
+					if (this.currentPage === 1) {
+						this.breweries = breweryList
+					} else {
+						this.breweries = [...this.breweries, ...breweryList]
+					}
+					
+					this.hasMore = breweryList.length === this.pageSize
+				} catch (error) {
+					console.error('搜索酒厂失败:', error)
+					throw error
+				}
+			},
+			
+			// 加载更多
+			loadMore() {
+				if (this.hasMore && !this.isSearching) {
+					this.currentPage++
 					this.search()
 				}
 			},
-			// 酒厂筛选
-			searchByBreweries() {
-				searchByBreweriesApi(this.keyword).then(res => {
-					console.log(res)
-					this.breweries = res.rows
-				})
+			
+			// 切换标签
+			async changeTag(index) {
+				if (this.curTag === index) return
+				this.curTag = index
+				this.currentPage = 1
+				await this.search()
 			},
-			// 酒款筛选
-			searchByBeer() {
-				getBeerList(this.keyword).then(res => {
-					console.log(res)
-					this.beers = res.rows
-				})
+			
+			// 获取热门风格
+			async getPopularStyle() {
+				try {
+					const res = await popularStyle()
+					this.popularStyleList = res.data || []
+				} catch (error) {
+					console.error('获取热门风格失败:', error)
+				}
 			},
+			
+			// 按风格搜索
+			searchByStyle(item) {
+				this.keyword = item.beerStyles
+				this.search()
+			},
+			
 			// 跳转酒厂详情
 			toBrand(item) {
 				uni.navigateTo({
 					url: '/pages/index/brandHome?breweryId=' + item.id
 				})
 			},
+			
 			// 跳转酒款详情
 			toBeer(item) {
 				uni.navigateTo({
 					url: '/pages/index/review?beerId=' + item.id
 				})
 			},
-			startLoading() {
-			  this.isLoading = true;
+			
+			// 返回
+			goBack() {
+				uni.navigateBack()
 			},
-			stopLoading() {
-			  this.isLoading = false;
+			
+			// 跳转到添加新酒款页面
+			toNewBeer() {
+				uni.navigateTo({
+					url: '/pages/index/addBeer'
+				})
 			}
 		},
 		watch: {
-			keyword(newVal, oldVal) {
-				console.log('关键词变化:', oldVal, '->', newVal);
-				if(newVal.length<2){
+			keyword(newVal) {
+				// 只在关键词为空时清空结果
+				if (!newVal || newVal.trim().length === 0) {
 					this.commonBeer = []
 					this.commonBreweries = []
+					this.beers = []
+					this.breweries = []
 				}
 			},
 			
@@ -286,7 +698,7 @@
 	.page {
 		background: #FFF;
 		height: 100vh;
-		padding-top: 120rpx; /* 为固定搜索框留出空间 */
+		padding-top: 120rpx;
 		font-family: Roboto;
 	}
 
@@ -296,11 +708,12 @@
 		left: 0;
 		right: 0;
 		z-index: 1000;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
 	}
 
 	.content {
 		padding: 0 38rpx;
-		// margin-top: 120rpx; /* 为固定搜索框留出空间 */
+		animation: fadeIn 0.3s ease;
 	}
 
 	.search-box {
@@ -311,6 +724,32 @@
 		display: flex;
 		align-items: center;
 		margin: 20rpx 30rpx 20rpx 22rpx;
+		position: relative;
+		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+		
+		.search-icon {
+			width: 32rpx;
+			height: 32rpx;
+			margin-left: 24rpx;
+			flex-shrink: 0;
+			
+			&.rotating {
+				animation: rotate 1.2s linear infinite;
+			}
+		}
+		
+		input {
+			flex: 1;
+			height: 100%;
+			font-size: 28rpx;
+			text-align: left;
+			padding: 0 20rpx;
+		}
+		
+		.clear-icon {
+			padding: 0 20rpx;
+			color: #999;
+		}
 		
 		.searchs {
 			background: #D42E78;
@@ -320,55 +759,299 @@
 			display: flex;
 			justify-content: center;
 			align-items: center;
+			
+			&.loading {
+				.uni-icons {
+					animation: rotate 1s linear infinite;
+				}
+			}
 		}
 	}
 
-	.hot-title {
-		font-family: Roboto;
-		font-size: 28rpx;
-		font-weight: 600;
-		color: #030303;
-		margin: 36rpx 0 16rpx 0;
-		// margin: 46rpx 22rpx 46rpx;
+	.section-title {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin: 36rpx 0 24rpx 0;
+		position: relative;
+		padding-left: 20rpx;
+		
+		.title {
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #030303;
+			position: relative;
+			
+			&::before {
+				content: '';
+				position: absolute;
+				left: -20rpx;
+				top: 50%;
+				transform: translateY(-50%);
+				width: 6rpx;
+				height: 24rpx;
+				background: #D42E78;
+				border-radius: 3rpx;
+			}
+		}
+		
+		.clear-btn {
+			display: flex;
+			align-items: center;
+			padding: 8rpx 16rpx;
+			border-radius: 20rpx;
+			background: #F7F8FA;
+			transition: all 0.3s ease;
+			
+			text {
+				font-size: 24rpx;
+				color: #999;
+				margin-left: 8rpx;
+			}
+			
+			&:active {
+				transform: scale(0.95);
+				opacity: 0.8;
+			}
+		}
 	}
 
-	.hot-box {
+	.history-list {
+		margin: 0 22rpx;
+		background: #FEFEFE;
+		box-sizing: border-box;
+		padding: 0 12rpx;
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.history-tag {
+		height: 64rpx;
+		background-color: #F9F9F9;
+		color: #606060;
+		border-radius: 32rpx;
+		padding: 0 24rpx;
+		margin: 0 16rpx 16rpx 0;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 26rpx;
+		transition: all 0.3s ease;
+		min-width: 80rpx;
 		
+		&:active {
+			transform: scale(0.95);
+			opacity: 0.8;
+		}
+	}
+
+	.style-list {
 		margin: 0 22rpx;
 		background: #FEFEFE;
 		box-sizing: border-box;
 		padding-left: 12rpx;
+	}
 
-		.hot-item {
-			.title {
-				font-family: Roboto;
-				font-size: 28rpx;
-				font-weight: 600;
-				color: #0B0E26;
-				padding-left: 24rpx;
+	.style-item {
+		position: relative;
+		padding: 20rpx;
+		border-radius: 16rpx;
+		margin-bottom: 32rpx;
+		transition: all 0.3s ease;
+		background: #FFF;
+		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+		
+		&:active {
+			transform: scale(0.98);
+			background: #F7F8FA;
+		}
+		
+		.item-content {
+			display: flex;
+			align-items: center;
+			
+			image {
+				width: 62rpx;
+				height: 88rpx;
+				margin-right: 24rpx;
+				transition: all 0.3s ease;
+				
+				&:active {
+					transform: scale(1.1);
+				}
 			}
-
-			.sub {
-				font-family: Roboto;
-				font-size: 24rpx;
-				font-weight: 500;
-				color: #5E5F60;
+			
+			.info {
+				flex: 1;
+				
+				.title {
+					font-size: 28rpx;
+					font-weight: 600;
+					color: #0B0E26;
+					margin-bottom: 8rpx;
+					transition: all 0.3s ease;
+					
+					&:active {
+						color: #D42E78;
+					}
+				}
+				
+				.sub {
+					font-size: 24rpx;
+					color: #5E5F60;
+					transition: all 0.3s ease;
+				}
+			}
+			
+			.arrow {
+				width: 48rpx;
+				height: 48rpx;
+				transition: all 0.3s ease;
+				
+				&:active {
+					transform: translateX(4rpx);
+				}
 			}
 		}
 	}
 
-	.tag {
-		background-color: #F7F8FA;
-		border-radius: 20rpx;
-		padding: 16rpx 32rpx;
-		margin-right: 40rpx;
-		color: #606060;
+	.tag-list {
+		display: flex;
+		align-items: center;
+		padding: 20rpx 0;
+		margin-bottom: 10rpx;
+		border-bottom: 1rpx solid #F0F4F9;
+		overflow-x: auto;
+		white-space: nowrap;
+		scrollbar-width: none;
+		
+		&::-webkit-scrollbar {
+			display: none;
+		}
+		
+		.tag {
+			background-color: #F7F8FA;
+			border-radius: 20rpx;
+			padding: 16rpx 32rpx;
+			margin-right: 40rpx;
+			color: #606060;
+			transition: all 0.3s ease;
+			position: relative;
+			overflow: hidden;
+			
+			&::after {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: 50%;
+				transform: translateX(-50%);
+				width: 0;
+				height: 4rpx;
+				background: #D42E78;
+				transition: all 0.3s ease;
+			}
+			
+			&:active {
+				transform: scale(0.95);
+				opacity: 0.8;
+			}
+			
+			&.active-tag {
+				background-color: #4E63E0;
+				font-weight: 600;
+				color: #FFFFFF;
+				
+				&::after {
+					width: 40rpx;
+				}
+			}
+		}
 	}
 
-	.active-tag {
-		background-color: #4E63E0;
-		font-weight: 600;
-		color: #FFFFFF;
+	.empty-state {
+		flex: 1;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 80rpx 32rpx;
+		animation: fadeIn 0.5s ease;
+		
+		.empty-image {
+			width: 280rpx;
+			height: 280rpx;
+			margin-bottom: 48rpx;
+			animation: float 3s ease-in-out infinite;
+		}
+		
+		.empty-content {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			width: 100%;
+			max-width: 600rpx;
+		}
+		
+		.empty-text {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			margin-bottom: 48rpx;
+			text-align: center;
+			
+			.main-text {
+				font-size: 36rpx;
+				color: #19367A;
+				font-weight: 600;
+				margin-bottom: 20rpx;
+				position: relative;
+				display: inline-block;
+				
+				&::after {
+					content: '';
+					position: absolute;
+					bottom: -4rpx;
+					left: 50%;
+					transform: translateX(-50%);
+					width: 120%;
+					height: 8rpx;
+					background: rgba(25, 54, 122, 0.1);
+					border-radius: 4rpx;
+				}
+			}
+			
+			.sub-text {
+				font-size: 28rpx;
+				color: #9C9BA6;
+				line-height: 1.6;
+			}
+		}
+
+		.request-btn {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			max-width: 400rpx;
+			height: 88rpx;
+			background: #19367A;
+			border-radius: 44rpx;
+			box-shadow: 0 8rpx 16rpx rgba(25, 54, 122, 0.15);
+			transition: all 0.3s ease;
+			
+			text {
+				font-size: 28rpx;
+				color: #FFFFFF;
+				font-weight: 500;
+				margin-right: 12rpx;
+			}
+			
+			&:active {
+				transform: scale(0.96) translateY(4rpx);
+				box-shadow: 0 4rpx 8rpx rgba(25, 54, 122, 0.1);
+			}
+		}
 	}
 
 	.my-brandSide {
@@ -378,49 +1061,344 @@
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-			// padding: 30rpx 0;
-			// border-bottom: 1rpx solid #F0F4F9;
-			padding: 22rpx 0;
+			padding: 24rpx 32rpx;
+			transition: all 0.3s ease;
+			border-radius: 16rpx;
+			margin-bottom: 24rpx;
+			background: #FFF;
+			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+			position: relative;
+			overflow: hidden;
+			
+			&::before {
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 6rpx;
+				height: 100%;
+				background: linear-gradient(to bottom, #D42E78, #4E63E0);
+				opacity: 0.8;
+			}
+			
+			&:active {
+				transform: scale(0.98);
+				background: #F7F8FA;
+			}
 
 			.logo {
 				width: 88rpx;
 				height: 88rpx;
 				border-radius: 12rpx;
-				margin-right: 20rpx;
+				margin-right: 24rpx;
+				transition: all 0.3s ease;
+				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+				border: 2rpx solid #F0F0F0;
+				
+				&:active {
+					transform: scale(1.1);
+				}
 			}
+			
 			.beerCover {
 				width: 88rpx;
 				height: 124rpx;
 				border-radius: 12rpx;
 				margin-right: 28rpx;
+				transition: all 0.3s ease;
+				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+				border: 2rpx solid #F0F0F0;
+				
+				&:active {
+					transform: scale(1.1);
+				}
 			}
-			.title {
-				font-size: 28rpx;
-				color: #19191B;
-				margin-bottom: 16rpx;
-			}
+			
+			.info {
+				flex: 1;
+				
+				.title {
+					font-size: 30rpx;
+					font-weight: 600;
+					color: #19191B;
+					margin-bottom: 16rpx;
+					transition: all 0.3s ease;
+					position: relative;
+					display: inline-block;
+					
+					&::after {
+						content: '';
+						position: absolute;
+						bottom: 4rpx;
+						left: 0;
+						width: 100%;
+						height: 6rpx;
+						background: linear-gradient(to right, rgba(212, 46, 120, 0.2), rgba(78, 99, 224, 0.2));
+						border-radius: 3rpx;
+						z-index: -1;
+					}
+					
+					&:active {
+						color: #D42E78;
+					}
+				}
 
-			.desc {
+				.desc {
+					font-size: 24rpx;
+					color: #9C9BA6;
+					transition: all 0.3s ease;
+					display: flex;
+					align-items: center;
+					
+					&::before {
+						content: '';
+						display: inline-block;
+						width: 8rpx;
+						height: 8rpx;
+						background: #D42E78;
+						border-radius: 50%;
+						margin-right: 12rpx;
+					}
+				}
+			}
+			
+			.rating {
+				padding: 10rpx 20rpx;
+				background: linear-gradient(135deg, #F7F8FA, #F0F0F0);
+				border-radius: 12rpx;
 				font-size: 24rpx;
 				color: #9C9BA6;
-			}
-			.bg-beer{
-				padding: 8rpx 18rpx;
-				background: #F7F8FA;
-				border-radius: 12rpx;
+				transition: all 0.3s ease;
+				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
+				
+				&:active {
+					transform: scale(0.95);
+					background: linear-gradient(135deg, #F0F0F0, #E8E8E8);
+				}
+				
+				.star {
+					color: #FEE034;
+					margin-left: 10rpx;
+					animation: twinkle 1.5s ease-in-out infinite;
+				}
 			}
 		}
 	}
-	.rotate {
-	  animation: rotate 1s linear infinite;
+
+	.brewery-list {
+		padding: 28rpx 0rpx;
+	}
+
+	.brewery-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 24rpx 32rpx;
+		transition: all 0.3s ease;
+		border-radius: 16rpx;
+		margin-bottom: 24rpx;
+		background: #FFF;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+		position: relative;
+		overflow: hidden;
+		
+		&::before {
+			content: '';
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 6rpx;
+			height: 100%;
+			background: linear-gradient(to bottom, #4E63E0, #D42E78);
+			opacity: 0.8;
+		}
+		
+		&:active {
+			transform: scale(0.98);
+			background: #F7F8FA;
+		}
+
+		.logo {
+			width: 100rpx;
+			height: 100rpx;
+			border-radius: 16rpx;
+			margin-right: 32rpx;
+			transition: all 0.3s ease;
+			object-fit: cover;
+			border: 2rpx solid #F0F0F0;
+			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+			
+			&:active {
+				transform: scale(1.1);
+			}
+		}
+		
+		.info {
+			flex: 1;
+			
+			.title {
+				font-size: 32rpx;
+				font-weight: 600;
+				color: #19191B;
+				margin-bottom: 12rpx;
+				transition: all 0.3s ease;
+				position: relative;
+				display: inline-block;
+				
+				&::after {
+					content: '';
+					position: absolute;
+					bottom: 4rpx;
+					left: 0;
+					width: 100%;
+					height: 6rpx;
+					background: linear-gradient(to right, rgba(78, 99, 224, 0.2), rgba(212, 46, 120, 0.2));
+					border-radius: 3rpx;
+					z-index: -1;
+				}
+				
+				&:active {
+					color: #D42E78;
+				}
+			}
+
+			.desc {
+				font-size: 26rpx;
+				color: #9C9BA6;
+				transition: all 0.3s ease;
+				display: flex;
+				align-items: center;
+				
+				&::before {
+					content: '';
+					display: inline-block;
+					width: 8rpx;
+					height: 8rpx;
+					background: #4E63E0;
+					border-radius: 50%;
+					margin-right: 12rpx;
+				}
+			}
+		}
+		
+		.arrow-container {
+			width: 60rpx;
+			height: 60rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: linear-gradient(135deg, #F7F8FA, #F0F0F0);
+			border-radius: 50%;
+			transition: all 0.3s ease;
+			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
+			
+			&:active {
+				transform: scale(0.9);
+				background: linear-gradient(135deg, #F0F0F0, #E8E8E8);
+			}
+			
+			.arrow {
+				width: 36rpx;
+				height: 36rpx;
+				transition: all 0.3s ease;
+				
+				&:active {
+					transform: translateX(4rpx);
+				}
+			}
+		}
+	}
+
+	.guide-tip {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 32rpx 0;
+		margin-top: 20rpx;
+		
+		text {
+			font-size: 24rpx;
+			color: #9C9BA6;
+		}
+		
+		.add-btn {
+			display: flex;
+			align-items: center;
+			margin-left: 16rpx;
+			padding: 8rpx 20rpx;
+			background: rgba(25, 54, 122, 0.05);
+			border-radius: 24rpx;
+			transition: all 0.3s ease;
+			
+			text {
+				font-size: 24rpx;
+				color: #19367A;
+				margin-right: 8rpx;
+			}
+			
+			&:active {
+				transform: scale(0.95);
+				opacity: 0.8;
+			}
+		}
+	}
+
+	.brewery-info {
+		display: flex;
+		align-items: center;
+		margin-top: 12rpx;
+		
+		.brewery-logo {
+			width: 32rpx;
+			height: 32rpx;
+			border-radius: 50%;
+			margin-right: 8rpx;
+			border: 1rpx solid rgba(240, 240, 240, 0.8);
+			box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
+		}
+		
+		.brewery-name {
+			font-size: 24rpx;
+			color: #9C9BA6;
+			padding-left: 8rpx;
+		}
+	}
+
+	@keyframes rotate {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
 	}
 	
-	@keyframes rotate {
-	  from {
-	    transform: rotate(0deg);
-	  }
-	  to {
-	    transform: rotate(360deg);
-	  }
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(20rpx);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+	
+	@keyframes float {
+		0%, 100% {
+			transform: translateY(0);
+		}
+		50% {
+			transform: translateY(-10rpx);
+		}
+	}
+	
+	@keyframes twinkle {
+		0%, 100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.5;
+		}
 	}
 </style>
\ No newline at end of file
diff --git a/static/Vector@1x.png b/static/Vector@1x.png
new file mode 100644
index 0000000000000000000000000000000000000000..43bde14f0149ee69dadde669ac4b07e17ba7676d
GIT binary patch
literal 809
zcmV+^1J?YBP)<h;3K|Lk000e1NJLTq001Wd001Wl1^@s6jH6LC00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZr(@8`@R9J=0n88)sKoEvMD-Eaw(ZS}%4N(Dc1z9SH
zsQ_F-$SpZ#IOPabfT$pw8#h#fO2}bn?U5`8*~U`-_x!vb$(moYJF~O@j6LDKFMuzA
z0}3G5PYpEsT?3Cm5RqnAAG1A)<-n_w8G;4~z*0o2p?>xv2jIPbB}QylR174U?eXx0
zIk3?0bKpcoX21#XQSD15V^IQ6-utg_IoLaLyFi!00=Vv6s(|^n^*9Q-1WlrAz#DT7
zoQp`^y?=w8KH#3Xh%fv8^bRB!fSuM}f_-c5o>(4A+Hd%75RqHrI!)7AsNWV^<aCib
zV|q9SIRMSpOJj1~B>7;7mB4p%?Mg(BMh+l^@Zy}C5oZbD)H!z-LTI2JIh#oj8v3I{
zL~Z~vrk`n$!76H{+8Wy79s^4=F1`02){(POlYREVL!enI#`GB=(*jwV3*Sa#)kZgZ
zc}6=st7Fu)AyB`;n92;eFowXisLc4R8@cCkxoqIkj9o^%?U_1qHWBkfTBc)QgItk*
zO_dB={1+LqBLG$%$z<sGuQNKK9GA`ptpDbJBUhMlozc$F3#NrFYjsAuww2>@*}$0@
zKW4P6vYRR?I(vKrgiJe-%G}pIA&rHF83z$*QW3s07yQ`KGpDkIC1^h<BEq!Mv;L~2
z2H5S(cE8?xe=`E9bWHTdwCd|t2b>T><DAQZQ#F;&xj!L<mm?A@fnUaSD<VJAkG@0o
zZ`SpuA<6~S5r};v9%fSEuSDeB-qY8W%vtZZIZ<?3^xSs{u^ZwcIuWbYZwtLziDu6e
z?d?Q}(p7x`se(ha67!&(_;zLI(vr9~2A|Njkb<~%&bPhrn<|q^1bx$55x2g8O06PN
zE0H9@UJzf-_5A-<M6UkjdyoXCS#{0(?7bBO)vKNKIYZL1dwW#@cUtfV;Sj;v5vQ$S
nt)>^O)$}A%KNHKu&MLxRY6u0yNA8@Y00000NkvXXu0mjfE<JVT

literal 0
HcmV?d00001