From e146d4c1594cdd38dc601d6754f06243f49686c4 Mon Sep 17 00:00:00 2001
From: Peanut <peanut_hzm@163.com>
Date: Sun, 15 Mar 2026 19:51:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=20onboarding=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=EF=BC=88=E6=96=B9=E6=A1=88=20A=20=E6=B8=90=E8=BF=9B=E5=BC=8F?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复 scroll-view 高度计算，使用精确的 calc(100vh - 260rpx)
- 统一安全区域单位为 rpx，避免 px/rpx 混用
- 输入框和 textarea 圆角统一至 40rpx 原型标准
- 添加 box-sizing: border-box 防止尺寸溢出
- 优化 picker-value 文本溢出处理
- 添加 -webkit-overflow-scrolling 改善滚动体验
---
 mini-program/src/pages/onboarding/index.vue | 31 +++++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

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 @@
       <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 {