搜索框与花材绿植以同一行来布局，左边是搜索框，右边是花材绿植

mallApp/src/pages/home/category.vue

@@ -10,7 +10,7 @@
 			</view>
 		</view>
 
-		<!-- 搜索框区域 -->
+		<!-- 搜索框和花材绿植按钮区域 -->
 		<view class="search-wrap">
 			<view class="search-bar">
 				<app-search-module 
@@ -21,18 +21,17 @@
 					:fontSize="28"
 				/>
 			</view>
-			<!-- 搜索状态提示 -->
-			<view v-if="isSearching" class="search-loading">
-				<text class="loading-text">正在搜索...</text>
+			<view class="buy-material-container">
+				<button class="buy-material-btn" @click="buyProduct()">
+					<view class="btn-content">
+						<text class="btn-text">花材绿植</text>
+					</view>
+				</button>
 			</view>
 		</view>
-
-		<view class="buy-material-container">
-			<button class="buy-material-btn" @click="buyProduct()">
-				<view class="btn-content">
-					<text class="btn-text">花材绿植</text>
-				</view>
-			</button>
+		<!-- 搜索状态提示 -->
+		<view v-if="isSearching" class="search-loading">
+			<text class="loading-text">正在搜索...</text>
 		</view>
 
     <scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop">
@@ -555,39 +554,35 @@ page {
 
 /* 搜索框样式 */
 .search-wrap {
-	padding: 20upx 30upx 10upx 30upx;
+	padding: 15upx 30upx 25upx 30upx;
 	background: linear-gradient(to bottom, #3385FF, #fff);
+	display: flex;
+	align-items: center;
+	gap: 20upx;
 }
 
 .search-bar {
+	flex: 1;
 	background-color: #fff;
 	border-radius: 30upx;
-	padding: 10upx;
+	padding: 2upx;
 	box-shadow: 0upx 2px 8px 0upx rgba(0, 0, 0, 0.1);
 	position: relative;
 }
 
 .search-loading {
-	position: absolute;
-	right: 20upx;
-	top: 50%;
-	transform: translateY(-50%);
-	z-index: 100;
+	padding: 10upx 30upx;
+	text-align: center;
+	background-color: #f5f5f5;
 	
 	.loading-text {
 		font-size: 24upx;
-		color: #999;
-		background-color: rgba(255, 255, 255, 0.9);
-		padding: 5upx 10upx;
-		border-radius: 10upx;
+		color: #666;
 	}
 }
 
 .buy-material-container {
-	position: absolute;
-	right: 20upx;
-	top: 190upx; /* 调整位置以适应搜索框 */
-	z-index: 9999;
+	flex-shrink: 0;
 }
 
 .buy-material-btn {