fix: 优化 onboarding 页面移动端布局

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

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);
 }