调整服务页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>
+				<view class="jd2-search-input-wrap">
-				<input
+					<text class="jd2-search-icon">⌕</text>
-					class="jd2-search-input"
+					<input
-					:value="searchKeyword"
+						class="jd2-search-input"
-					:placeholder="placeholder"
+						:value="searchKeyword"
-					placeholder-style="color:#b5b5b5"
+						:placeholder="placeholder"
-					confirm-type="search"
+						placeholder-style="color:#b5b5b5"
-					@input="handleInput"
+						confirm-type="search"
-					@confirm="handleConfirm"
+						@input="handleInput"
-					@click="emit('focusSearch')"
+						@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;
+	align-items: center;
-	padding-left: 24rpx;
+	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;
+	justify-content: center;
-	height: 78rpx;
+	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;
+	width: 100%;
-	padding-right: 24rpx;
+	margin-top: 18rpx;
-	padding-bottom: 10rpx;
+	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;
+	width: 104rpx;
-	height: 68rpx;
+	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;
+	margin-top: 12rpx;
-	padding-right: 24rpx;
+	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;
 }
 

pages/main/index.uvue

@@ -1281,8 +1281,10 @@ const initPage = () => {
 	const systemInfo = uni.getSystemInfoSync()
 	statusBarHeight.value = systemInfo.statusBarHeight != null ? systemInfo.statusBarHeight : 20
 	const searchContentHeight = Math.round(68 * systemInfo.screenWidth / 750)
-	const searchRowVerticalPadding = Math.round(18 * systemInfo.screenWidth / 750)
+	const searchTopGap = Math.round(14 * systemInfo.screenWidth / 750)
-	const moduleRowHeight = Math.round(78 * systemInfo.screenWidth / 750)
+	const categoryTopGap = Math.round(12 * systemInfo.screenWidth / 750)
+	const headerBottomPadding = Math.round(10 * systemInfo.screenWidth / 750)
+	const moduleRowHeight = Math.round(62 * systemInfo.screenWidth / 750)
 	const categoryRowHeight = Math.round(56 * systemInfo.screenWidth / 750)
 	
 	let menuInfo: CapsuleButtonInfo | null = null
@@ -1302,13 +1304,13 @@ const initPage = () => {
 		// 计算右边距避让
 		const rightReserve = systemInfo.screenWidth - menuInfo.left + 8
 		navBarRight.value = rightReserve
-		const searchRowTotalH = statusBarHeight.value + Math.max(navHeight, moduleRowHeight) + searchContentHeight + searchRowVerticalPadding + categoryRowHeight + Math.round(18 * systemInfo.screenWidth / 750)
+		const searchRowTotalH = statusBarHeight.value + Math.max(navHeight, moduleRowHeight) + searchTopGap + searchContentHeight + categoryTopGap + categoryRowHeight + headerBottomPadding
 		searchRowStyle.value = `padding-top:${statusBarHeight.value}px;height:${searchRowTotalH}px;padding-right:${rightReserve}px;`
 		navbarTotalHeight.value = searchRowTotalH
 	} else {
 		navBarHeight.value = 44
 		navBarRight.value = 0
-		const searchRowTotalH = statusBarHeight.value + Math.max(44, moduleRowHeight) + searchContentHeight + searchRowVerticalPadding + categoryRowHeight + Math.round(18 * systemInfo.screenWidth / 750)
+		const searchRowTotalH = statusBarHeight.value + Math.max(44, moduleRowHeight) + searchTopGap + searchContentHeight + categoryTopGap + categoryRowHeight + headerBottomPadding
 		searchRowStyle.value = `padding-top:${statusBarHeight.value}px;height:${searchRowTotalH}px;`
 		navbarTotalHeight.value = searchRowTotalH
 	}