diff --git a/mini-program/src/pages/onboarding/index.vue b/mini-program/src/pages/onboarding/index.vue
index b4fdc98..376d416 100644
--- a/mini-program/src/pages/onboarding/index.vue
+++ b/mini-program/src/pages/onboarding/index.vue
@@ -5,7 +5,7 @@
-
+
@@ -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 {