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 {