From 2678192dfec969beff6ef8843031be11a7ed9c1d Mon Sep 17 00:00:00 2001
From: Peanut <peanut_hzm@163.com>
Date: Sun, 15 Mar 2026 13:31:09 +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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复 scroll-view 高度计算，使用精确的视口高度 (100vh)
- 实现响应式表单网格，使用 auto-fit 适配不同屏幕宽度
- 优化输入框高度从 88rpx 降至 72rpx
- 优化 textarea 高度使用自适应范围 (160-300rpx)
- 统一 padding 和安全区处理，使用 CSS 变量传递安全区域值
- 解决组件重叠和溢出问题
---
 mini-program/src/pages/onboarding/index.vue | 44 ++++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/mini-program/src/pages/onboarding/index.vue b/mini-program/src/pages/onboarding/index.vue
index 7aa5bf5..b4fdc98 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="{ paddingTop: safeAreaTop + 20 + 'px', paddingBottom: safeAreaBottom + 20 + 'px' }">
+    <view class="content" :style="{ '--safe-area-top': safeAreaTop + 'px', '--safe-area-bottom': safeAreaBottom + 'px' }">
       <scroll-view class="step-content" scroll-y>
         <view class="step-inner">
           <view v-if="currentStep === 1" class="step animate-fade-in">
@@ -442,17 +442,22 @@ watch(currentStep, (val) => {
 .content {
   position: relative;
   z-index: 1;
-  min-height: 100vh;
+  height: 100vh;
   display: flex;
   flex-direction: column;
-  padding: 40rpx;
-  padding-top: calc(40rpx + constant(safe-area-inset-top));
-  padding-top: calc(40rpx + env(safe-area-inset-top));
+  /* 统一使用 rpx 单位处理 padding */
+  padding: 24rpx;
+  /* 安全区域使用 CSS 变量，从内联样式传入 */
+  padding-top: calc(24rpx + var(--safe-area-top, 20px));
+  padding-bottom: calc(24rpx + var(--safe-area-bottom, 0px));
 }
 
 .step-content {
   flex: 1;
   overflow-y: auto;
+  overflow-x: hidden;
+  /* 减去底部 bar 高度 (约 180rpx) + 上下 padding */
+  min-height: 0;
 }
 
 .step-inner {
@@ -490,8 +495,14 @@ watch(currentStep, (val) => {
 
 .form-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 24rpx;
+  /* 响应式网格：最小 280rpx，自动适配列数 */
+  grid-template-columns: repeat(auto-fit, minmax(280rpx, 1fr));
+  gap: 20rpx;
+}
+
+/* 小屏幕设备单列布局 - 使用 fixed 列宽触发自动换行 */
+.form-grid-mobile {
+  grid-template-columns: 1fr;
 }
 
 .full-width {
@@ -512,14 +523,14 @@ watch(currentStep, (val) => {
 }
 
 .glass-input, .glass-picker {
+  /* 输入框高度从 88rpx 降至 72rpx，为内容留出更多空间 */
+  height: 72rpx;
   width: 100%;
-  height: 88rpx;
-  /* 原型标准：backdrop-filter blur + 大圆角 */
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(168, 85, 247, 0.15);
-  border-radius: 40rpx; /* 原型：2.5rem = 40px */
+  border-radius: 36rpx;
   padding: 0 24rpx;
   color: #F3E8FF;
   font-size: 28rpx;
@@ -537,18 +548,21 @@ watch(currentStep, (val) => {
 }
 
 .picker-value {
-  line-height: 88rpx;
+  line-height: 72rpx;
   color: rgba(255, 255, 255, 0.8);
 }
 
 .glass-textarea {
+  /* 自适应高度：最小 160rpx，最大 300rpx */
   width: 100%;
-  height: 200rpx;
+  min-height: 160rpx;
+  max-height: 300rpx;
+  height: auto;
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(168, 85, 247, 0.15);
-  border-radius: 40rpx;
+  border-radius: 36rpx;
   padding: 24rpx;
   color: #F3E8FF;
   font-size: 28rpx;
@@ -645,8 +659,8 @@ watch(currentStep, (val) => {
 
 .bottom-bar {
   padding-top: 32rpx;
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
+  /* 使用 CSS 变量处理底部安全区域 */
+  padding-bottom: calc(32rpx + var(--safe-area-bottom, 0px));
   border-top: 1px solid rgba(255, 255, 255, 0.05);
 }