huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整服务页UI入

Browse Source
This commit is contained in:
huangzhenbao
2026-05-14 17:30:19 +08:00
parent 309f50a637
commit 2f7e097e6c
2 changed files with 58 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
components/home/JdLikeHomeHeader.uvue
View File

@@ -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;
}

10
pages/main/index.uvue
View File

@@ -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 moduleRowHeight = Math.round(78 * systemInfo.screenWidth / 750)
const searchTopGap = Math.round(14 * 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
}