fix: 优化 onboarding 页面移动端布局(方案 A 渐进式修复)

- 修复 scroll-view 高度计算,使用精确的 calc(100vh - 260rpx)
- 统一安全区域单位为 rpx,避免 px/rpx 混用
- 输入框和 textarea 圆角统一至 40rpx 原型标准
- 添加 box-sizing: border-box 防止尺寸溢出
- 优化 picker-value 文本溢出处理
- 添加 -webkit-overflow-scrolling 改善滚动体验
This commit is contained in:
2026-03-15 19:51:59 +08:00
parent 2678192dfe
commit e146d4c159
+22 -9
View File
@@ -5,7 +5,7 @@
<view class="aurora-bottom"></view>
</view>
<view class="content" :style="{ '--safe-area-top': safeAreaTop + 'px', '--safe-area-bottom': safeAreaBottom + 'px' }">
<view class="content" :style="{ '--safe-area-top-rpx': safeAreaTop + 'rpx', '--safe-area-bottom-rpx': safeAreaBottom + 'rpx' }">
<scroll-view class="step-content" scroll-y>
<view class="step-inner">
<view v-if="currentStep === 1" class="step animate-fade-in">
@@ -267,8 +267,12 @@ const safeAreaBottom = ref(uni.getStorageSync('safeAreaBottom') || 0)
onMounted(async () => {
// 使用新的推荐 API 替代已弃用的 getSystemInfoSync
const windowInfo = uni.getWindowInfo()
safeAreaTop.value = windowInfo.safeAreaInsets?.top || windowInfo.statusBarHeight || 20
safeAreaBottom.value = windowInfo.safeAreaInsets?.bottom || 0
// 获取安全区域值(px),转换为 rpx(乘以 2,假设设计稿宽度 750rpx)
const safeTopPx = windowInfo.safeAreaInsets?.top || windowInfo.statusBarHeight || 20
const safeBottomPx = windowInfo.safeAreaInsets?.bottom || 0
// 转换为 rpx 用于 CSS 变量
safeAreaTop.value = safeTopPx * 2
safeAreaBottom.value = safeBottomPx * 2
await store.fetchUserProfile()
Object.assign(formData, store.registrationData)
currentStep.value = store.currentStep || 1
@@ -447,17 +451,21 @@ watch(currentStep, (val) => {
flex-direction: column;
/* 统一使用 rpx 单位处理 padding */
padding: 24rpx;
/* 安全区域使用 CSS 变量,从内联样式传入 */
padding-top: calc(24rpx + var(--safe-area-top, 20px));
padding-bottom: calc(24rpx + var(--safe-area-bottom, 0px));
/* 安全区域使用 CSS 变量,从内联样式传入 - 统一转换为 rpx */
padding-top: calc(24rpx + var(--safe-area-top-rpx, 40rpx));
padding-bottom: calc(24rpx + var(--safe-area-bottom-rpx, 0rpx));
box-sizing: border-box;
}
.step-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
/* 减去底部 bar 高度 (约 180rpx) + 上下 padding */
/* 精确计算:100vh 减去底部 bar 高度 (约 180rpx) 上下 padding (48rpx) */
height: calc(100vh - 260rpx);
min-height: 0;
/* 修复微信小程序滚动问题 */
-webkit-overflow-scrolling: touch;
}
.step-inner {
@@ -530,11 +538,12 @@ watch(currentStep, (val) => {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(168, 85, 247, 0.15);
border-radius: 36rpx;
border-radius: 40rpx; /* 原型标准:2.5rem = 40px = 80rpx -> 40rpx */
padding: 0 24rpx;
color: #F3E8FF;
font-size: 28rpx;
transition: all 0.3s ease;
box-sizing: border-box;
}
.glass-input:active, .glass-picker:active {
@@ -550,6 +559,9 @@ watch(currentStep, (val) => {
.picker-value {
line-height: 72rpx;
color: rgba(255, 255, 255, 0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.glass-textarea {
@@ -562,11 +574,12 @@ watch(currentStep, (val) => {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(168, 85, 247, 0.15);
border-radius: 36rpx;
border-radius: 40rpx; /* 原型标准:统一圆角 */
padding: 24rpx;
color: #F3E8FF;
font-size: 28rpx;
transition: all 0.3s ease;
box-sizing: border-box;
}
.glass-textarea:active {