调整服务页UI入

components/home/JdLikeHomeHeader.uvue

@@ -12,19 +12,21 @@
 			</view>
 		</view>
 
-		<view class="jd2-search-wrap" :style="capsuleStyle">
+		<view class="jd2-search-wrap">
 			<view class="jd2-search-box">
-				<text class="jd2-search-icon">⌕</text>
-				<input
-					class="jd2-search-input"
-					:value="searchKeyword"
-					:placeholder="placeholder"
-					placeholder-style="color:#b5b5b5"
-					confirm-type="search"
-					@input="handleInput"
-					@confirm="handleConfirm"
-					@click="emit('focusSearch')"
-				/>
+				<view class="jd2-search-input-wrap">
+					<text class="jd2-search-icon">⌕</text>
+					<input
+						class="jd2-search-input"
+						:value="searchKeyword"
+						:placeholder="placeholder"
+						placeholder-style="color:#b5b5b5"
+						confirm-type="search"
+						@input="handleInput"
+						@confirm="handleConfirm"
+						@click="emit('focusSearch')"
+					/>
+				</view>
 				<view class="jd2-search-btn" @click="handleSearch">
 					<text class="jd2-search-btn-text">搜索</text>
 				</view>
@@ -127,28 +129,29 @@ function handleSearch() {
 
 .jd2-module-row {
 	flex-direction: row;
-	align-items: flex-end;
-	padding-left: 24rpx;
+	align-items: center;
+	padding-left: 20rpx;
 	padding-right: 24rpx;
-	height: 78rpx;
+	height: 62rpx;
 	gap: 36rpx;
+	box-sizing: border-box;
 }
 
 .jd2-module-item {
 	align-items: center;
-	justify-content: flex-end;
-	height: 78rpx;
+	justify-content: center;
+	height: 62rpx;
 }
 
 .jd2-module-text {
-	font-size: 30rpx;
+	font-size: 32rpx;
 	font-weight: 400;
 	color: #222222;
-	line-height: 40rpx;
+	line-height: 42rpx;
 }
 
 .jd2-module-text-active {
-	font-size: 34rpx;
+	font-size: 36rpx;
 	font-weight: 700;
 	color: #e2231a;
 }
@@ -162,25 +165,40 @@ function handleSearch() {
 }
 
 .jd2-search-wrap {
-	padding-left: 24rpx;
-	padding-right: 24rpx;
-	padding-bottom: 10rpx;
+	width: 100%;
+	margin-top: 18rpx;
+	padding-left: 16rpx;
+	padding-right: 16rpx;
+	box-sizing: border-box;
 }
 
 .jd2-search-box {
+	width: 100%;
 	height: 68rpx;
 	border-width: 2rpx;
 	border-style: solid;
 	border-color: #ff2d2f;
-	border-radius: 14rpx;
+	border-radius: 12rpx;
 	background: #ffffff;
 	flex-direction: row;
 	align-items: center;
 	overflow: hidden;
+	box-sizing: border-box;
+}
+
+.jd2-search-input-wrap {
+	flex: 1;
+	min-width: 0;
+	height: 100%;
+	flex-direction: row;
+	align-items: center;
+	padding-left: 18rpx;
+	padding-right: 18rpx;
+	box-sizing: border-box;
 }
 
 .jd2-search-icon {
-	width: 52rpx;
+	width: 40rpx;
 	text-align: center;
 	font-size: 28rpx;
 	color: #999999;
@@ -189,21 +207,21 @@ function handleSearch() {
 .jd2-search-input {
 	flex: 1;
 	height: 68rpx;
-	font-size: 26rpx;
+	font-size: 28rpx;
 	color: #222222;
-	padding-right: 12rpx;
+	min-width: 0;
 }
 
 .jd2-search-btn {
-	width: 100rpx;
-	height: 68rpx;
+	width: 104rpx;
+	height: 100%;
 	align-items: center;
 	justify-content: center;
 	background: #ff2d2f;
 }
 
 .jd2-search-btn-text {
-	font-size: 28rpx;
+	font-size: 30rpx;
 	font-weight: 700;
 	color: #ffffff;
 }
@@ -211,8 +229,9 @@ function handleSearch() {
 .jd2-category-scroll {
 	height: 56rpx;
 	white-space: nowrap;
-	padding-left: 24rpx;
-	padding-right: 24rpx;
+	margin-top: 12rpx;
+	padding-left: 16rpx;
+	padding-right: 16rpx;
 	box-sizing: border-box;
 }
 
@@ -229,7 +248,7 @@ function handleSearch() {
 }
 
 .jd2-category-text {
-	font-size: 26rpx;
+	font-size: 28rpx;
 	color: #444444;
 }