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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user