fix: 优化搜索栏和筛选栏的布局，修复ui样式问题

components/rowBeer.vue

@@ -1,3 +1,12 @@
+/**
+ * @description 横向滚动的啤酒列表组件
+ * @author [作者名]
+ * @usage 用于展示横向滚动的啤酒列表，支持点击跳转到酒评详情
+ * @props beers: Array - 啤酒列表数据，包含啤酒的详细信息
+ * @events 无
+ * @example
+ * <rowBeer :beers="beerList" />
+ */
 <template>
 	<scroll-view scroll-x="true" class="scroll-container">
 		<view v-for="(it, index) in beers" :key="index" style="display: inline-block;" class="row-box" @click="toReview(it)">
@@ -43,18 +52,23 @@
 </script>
 
 <style lang="scss" scoped>
+// 1. 横向滚动容器样式
 .scroll-container {
-		display: flex;
+		display: flex; // 弹性布局
-		flex-direction: row;
+		flex-direction: row;// 水平方向排列
-		white-space: nowrap;
+		white-space: nowrap; // 内容不换行
-		min-height: 505rpx;
+		min-height: 505rpx;// 最小高度505rpx
 		// padding-bottom: 10rpx;
-		margin-bottom: 32rpx;
+		// margin-bottom: 24rpx;// 底部外边距32rpx
+
+		// 2. 每个啤酒盒子的样式
 		.row-box {
 			&:nth-child(1) {
-				margin-left: 32rpx;
+				margin-left: 32rpx; // 第一个啤酒盒子左边外边距32rpx
 			}
 		}
+
+		  // 3. 啤酒卡片基础样式
 		.beer-box {
 			width: 208rpx;
 			background: #FFFFFF;
@@ -63,35 +77,46 @@
 			box-sizing: border-box;
 			display: flex;
 			flex-direction: column;
-			justify-content: flex-start;
+			justify-content: flex-start;// 顶部对齐
 			
+			// 4. 啤酒封面图样式
 
 			.cover {
 				width: 208rpx;
 				height: 300rpx;
 				border-radius: 12rpx;
-				margin-bottom: 18rpx;
+				margin-bottom: 16rpx;
+				// margin-top: 16rpx;
 			}
-
+			 // 5. 啤酒名称样式
 			.title {
 				font-size: 28rpx;
-				color: #1E2019;
+				font-weight: 600;
+				line-height: 40rpx;
+				color: #030303;
 				margin-bottom: 12rpx;
-				color: #19191B;
+				line-height: 1.4;
-				min-height: 88rpx;
+				white-space: normal;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 2;
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
 
+			// 6. 啤酒描述样式
 			.desc {
 				font-size: 24rpx;
-				color: #A5A7B9;
+				color: #606060;
 				margin-bottom: 12rpx;
-				color: #979797;
+				color: #606060;
 			}
 
+			// 7. 评分样式
 			.num {
 
-				font-size: 20rpx;
+				font-size: 24rpx;
-				color: #5F5F63;
+				color: #FFCC00;
 			}
 		}
 	}

pages/activityList/index.vue

@@ -9,9 +9,9 @@
 			/>
 		</view>
 
-		<!-- 内容容器 -->
+		<!-- 筛选栏 -->
 		<view class="content-container" style="margin-top: 120rpx;">
-			<view class="bg-white" :style="{ borderRadius: '30rpx 30rpx 12rpx 12rpx' }">
+			<view class="bg-white filter-bar" :style="{ borderRadius: '30rpx 30rpx 12rpx 12rpx' }">
 				<view class="choose-center bg-white">
 					<view class="flex align-center choose-navs">
 						<view class="" v-for="item in tabList" style="text-align: center;"> 
@@ -60,15 +60,8 @@
 		data() {
 			return {
 				statusBaeHeight: 0,
-				curTag: 0,
+				featurePageList: [],
-				ADList: [], // 广告弹窗
+				bgcolor: '#19367A',
-				bannerJoin: null, // 入驻banner
-				showJoinImg: false, // 是否显示入驻图片
-				userInfo: null,
-				featurePageList: [], // 专辑页列表
-				homeBanner: [], //首页banner
-				bgcolor:'#19367A',
-				owPopup: false,
 				tabList:[
 					{
 						label:'为您推荐',
@@ -88,7 +81,6 @@
 					},
 				],
 				actives:'1',
-			
 			};
 		},
 		onLoad() {
@@ -101,22 +93,10 @@
 		},
 		onShow() {
 			this.actives = '1'
-			// this.userInfo = uni.getStorageSync('userInfo')
-			// if (this.userInfo == null || this.userInfo.userType == '09') { // 没登录或者没入驻
-			// 	this.showJoinImg = true
-			// }else {
-			// 		this.showJoinImg = false
-			// 	}
 			this.getFeaturePageListFun() // 专辑页列表
 		},
-		// onPullDownRefresh(){
-		// 	this.getFeaturePageListFun() // 专辑页列表
-		// },
 
 		methods: {
-			handleUpdateHeight(height) {
-			      this.contentMarginTop = height; // 动态更新 margin-top
-			},
 			changeNavs(ind){
 				this.actives = ind
 				if(ind == 2) {
@@ -130,24 +110,16 @@
 					})
 				}else if(ind == 4){
 					//pages/activityList/hotLabel
-					// uni.navigateTo({
-					// 	url: '/pages/index/newBeer'
-					// })
 					uni.navigateTo({
-						url: '/pagesActivity/newWine'
+						url: '/pages/index/newBeer'
 					})
 					// uni.navigateTo({
+					// 	url: '/pagesActivity/newWine'
+					// })
+					// uni.navigateTo({
 					// 	url: '/pages/activityList/details'
 					// })
 				}
-			},
-			 handleClose() {
-				 
-			 },
-			toAddAiad() {
-				uni.navigateTo({
-					url: '/pagesMy/addAiad'
-				})
 			},
 			// 搜索
 			toSearch() {
@@ -155,9 +127,6 @@
 					url: '/pages/index/searchBeer'
 				})
 			},
-			changeTag(index) {
-				this.curTag = index
-			},
 			// 查询广告弹窗 banner列表
 			getBannerListFun() {
 				this.ADList = []
@@ -226,50 +195,13 @@
 					url: "/pages/index/review?beerId=" + it.id
 				})
 			},
-			toGo(key) {
-				switch (key) {
-					case 1: // 新酒上市
-						uni.navigateTo({
-							url: "/pages/index/newBeer"
-						})
-						break;
-					case 2: // 生成酒单
-						if (!uni.getStorageSync('token')) {
-							this.$refs.loginRef.open()
-							return
-						}
-						uni.navigateTo({
-							url: "/pagesActivity/winelist"
-						})
-						break;
-					case 3: //酒币换购
-
-						if (!uni.getStorageSync('token')) {
-							this.$refs.loginRef.open()
-							return
-						}
-						uni.navigateTo({
-							url: "/pagesCoin/beerCoin"
-						})
-						break;
-					case 4: // 关注酒厂
-						if (!uni.getStorageSync('token')) {
-							this.$refs.loginRef.open()
-							return
-						}
-						uni.navigateTo({
-							url: '/pagesMy/myAttention'
-						})
-						break;
-				}
-			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
 	.page {
-		background: #FFFFFF;
+		background: #F9F9F9;
 		height: 100vh;
 		overflow-y: auto;
 	}
@@ -278,8 +210,9 @@
 		position: fixed;
 		left: 0;
 		right: 0;
-		z-index: 1000;
+		z-index: 1001; /* 提高导航栏层级 */
 		background-color: #19367A;
+		border-radius: 0 0 24rpx 24rpx;		
 		
 		/* 保持搜索栏原有圆角 */
 		:deep(.search-container) {
@@ -288,22 +221,34 @@
 	}
 
 	.content-container {
-		padding-top: 20rpx; /* 与搜索栏间距 */
+		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;
-		box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+		background: #FFFFFF;
 		
 		.choose-navs {
+			// 导航选项的样式
 			font-family: Roboto;
 			font-size: 12px;
 			font-weight: 500;
 			
 			.choose-navs-txt {
+				// 导航选项文本的样式
 				width: 144rpx;
 				height: 64rpx;
 				line-height: 64rpx;
@@ -311,6 +256,7 @@
 				background: #F9F9F9;
 				margin-right: 16rpx;
 				&.actives {
+					// 选中状态的样式
 					color: #FFF;
 					background: #D42E78;
 				}
@@ -320,18 +266,35 @@
 	
 	.title-box {
 		padding: 24rpx 32rpx;
-		margin-bottom: 28rpx;
+		// margin-bottom: 24rpx;
-		
+		// margin-top: 24rpx;
 		.title {
 			font-size: 32rpx;
-			font-weight: bold;
+			color: #030303;
-			color: #1E2019;
+			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-size: 20rpx;
+			font-family: Roboto;
-			color: #9D9D9D;
+			font-size: 24rpx;
-			margin-top: 18rpx;
+			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>

pages/index/index.vue

@@ -355,7 +355,7 @@
 	}
 
 	.page {
-		// background: #FDFDFD;
+		background: #F9F9F9;
 		height: 100vh;
 		overflow-y: auto;
 		font-family: Roboto;
@@ -367,12 +367,13 @@
 		border-radius: 24rpx;
 		width: 700rpx;
 		height: 80rpx;
-		background-color: rgba(243, 243, 243, 0.8);
+		background-color: #F9F9F9;
 		display: flex;
 		align-items: center;
 		padding: 32rpx 0;
 		margin: 26rpx auto;
 		box-sizing: border-box;
+		box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
 
 		.search-input {
 			flex: 1;
@@ -389,6 +390,7 @@
 			display: flex;
 			justify-content: center;
 			align-items: center;
+			box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
 		}
 	}
 	.list-container {
@@ -534,9 +536,10 @@
 		.img-box {
 			width: 146rpx;
 			height: 146rpx;
-			background: #F2F2F2;
+			background: #F9F9F9;
 			border-radius: 50%;
 			margin-bottom: 18rpx;
+			box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
 		}
 	}
 
@@ -635,8 +638,8 @@
 		}
 
 		.more-btn {
-			font-size: 32rpx;
+			font-size: 28rpx;
-			font-weight: 400;
+			font-weight: 600;
 			letter-spacing: 2rpx;
 			color: #FFFFFF;
 		}
@@ -645,4 +648,26 @@
 		padding: 0 34rpx 0 20rpx;
 		background: rgba(0, 0, 0, 0.6);
 	}
+
+	.bg-white {
+		background: #FFFFFF;
+		// box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
+	}
+
+	.activity-item {
+		background: #FFFFFF;
+		border-radius: 12rpx;
+		padding: 24rpx;
+		margin-bottom: 24rpx;
+		box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
+		
+		.left {
+			width: 140rpx;
+			margin-right: 24rpx;
+		}
+		
+		.right {
+			flex: 1;
+		}
+	}
 </style>