Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
83871c37 1 parent 2b79da58

style(plan): 优化金额输入键盘弹窗布局对齐 

- 将"请输入保额金额"提示文字移至顶部
- 调整币种符号位置至金额数值前方
- 使用 items-end 和 leading-none 确保币种符号与金额数值底部对齐

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Inline Side-by-side
Showing 1 changed file with 8 additions and 7 deletions
...@@ -52,13 +52,17 @@ ...@@ -52,13 +52,17 @@
52 52
53 <!-- 内容容器 --> 53 <!-- 内容容器 -->
54 <view class="relative z-10 w-full px-8 flex flex-col items-center"> 54 <view class="relative z-10 w-full px-8 flex flex-col items-center">
55 + <!-- 顶部提示文字 -->
56 + <view class="text-sm text-gray-400 font-normal tracking-wide mb-6">请输入保额金额</view>
57 +
55 <!-- 垂直布局核心区域 --> 58 <!-- 垂直布局核心区域 -->
56 <view class="flex flex-col items-center justify-center w-full mb-8"> 59 <view class="flex flex-col items-center justify-center w-full mb-8">
57 - <!-- 币种符号 (放在上方) --> 60 + <!-- 币种符号 + 金额数值 + 光标 (水平排列) -->
58 - <view class="text-3xl font-medium text-gray-400 mb-4 font-sans">{{ currencySymbol }}</view> 61 + <view class="flex items-end justify-center relative h-[110rpx]">
62 + <!-- 币种符号 -->
63 + <view class="text-3xl font-medium text-gray-400 mr-2 font-sans leading-none mb-1">{{ currencySymbol }}</view>
59 64
60 - <!-- 金额数值 + 光标 --> 65 + <!-- 金额数值 -->
61 - <view class="flex items-center justify-center relative h-[110rpx]">
62 <view class="text-[100rpx] font-bold text-gray-900 leading-none tracking-tight font-sans tabular-nums"> 66 <view class="text-[100rpx] font-bold text-gray-900 leading-none tracking-tight font-sans tabular-nums">
63 {{ formattedInputValue || '0.00' }} 67 {{ formattedInputValue || '0.00' }}
64 </view> 68 </view>
...@@ -67,9 +71,6 @@ ...@@ -67,9 +71,6 @@
67 <view class="w-[4px] h-[80rpx] bg-[#007AFF] ml-4 rounded-full animate-pulse"></view> 71 <view class="w-[4px] h-[80rpx] bg-[#007AFF] ml-4 rounded-full animate-pulse"></view>
68 </view> 72 </view>
69 </view> 73 </view>
70 -
71 - <!-- 底部提示文字 -->
72 - <view class="text-xs text-gray-400 font-normal tracking-wide">请输入保额金额</view>
73 </view> 74 </view>
74 </view> 75 </view>
75 </nut-popup> 76 </nut-popup>
......