hookehuyr

style(plan): 优化保额输入组件样式

- 移除流光和磨砂玻璃特效,改为简洁设计
- 调整背景和颜色,符合 Manulife 企业风格
- 统一字体颜色和排版,增强可读性

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
...@@ -4,6 +4,16 @@ ...@@ -4,6 +4,16 @@
4 > 格式基于 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.0.0/), 4 > 格式基于 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.0.0/),
5 5
6 --- 6 ---
7 +
8 +## [2026-02-12] - 优化保额输入组件样式
9 +
10 +### 优化
11 +- **AmountKeyboard 组件样式重构**
12 + - 移除原有的"流光/磨砂玻璃"特效,改为符合 Manulife 企业风格的简洁设计
13 + - 调整背景为纯白底色搭配微弱渐变 (`bg-gradient-to-b from-blue-50 to-white`)
14 + - 统一字体颜色和排版,增强可读性 (`text-gray-900`, `text-[#007AFF]`)
15 + - 优化光标动画和标签样式,使其更加专业和沉稳
16 + - 保持原有功能逻辑和布局结构不变,仅做视觉层面的优化
7 ## [2026-02-11] - 优化计划书列表查看按钮显示 17 ## [2026-02-11] - 优化计划书列表查看按钮显示
8 18
9 ### 优化 19 ### 优化
......
...@@ -46,40 +46,31 @@ ...@@ -46,40 +46,31 @@
46 :overlay-style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }" 46 :overlay-style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }"
47 :close-on-click-overlay="false" 47 :close-on-click-overlay="false"
48 > 48 >
49 - <view class="relative flex flex-col items-center justify-center min-w-[580rpx] min-h-[500rpx] overflow-hidden bg-white/70 backdrop-blur-2xl border border-white/40 shadow-xl"> 49 + <view class="relative flex flex-col items-center justify-center min-w-[580rpx] min-h-[500rpx] overflow-hidden bg-white shadow-xl">
50 - <!-- 动态流光背景 (清新亮色) --> 50 + <!-- 简洁背景 -->
51 - <view class="absolute top-[-20%] left-[10%] w-[300rpx] h-[300rpx] bg-blue-400/20 rounded-full mix-blend-multiply filter blur-[60px] animate-pulse"></view> 51 + <view class="absolute top-0 left-0 w-full h-[120rpx] bg-gradient-to-b from-blue-50 to-white opacity-60"></view>
52 - <view class="absolute bottom-[-20%] right-[10%] w-[300rpx] h-[300rpx] bg-purple-400/20 rounded-full mix-blend-multiply filter blur-[60px] animate-pulse" style="animation-delay: 1s"></view>
53 52
54 - <!-- 磨砂玻璃内容容器 --> 53 + <!-- 内容容器 -->
55 <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">
56 - <!-- 顶部标签 -->
57 - <view class="mb-10 flex items-center gap-2 bg-white/40 px-4 py-1.5 rounded-full border border-white/50 shadow-sm">
58 - <text class="text-[22rpx] text-gray-500 font-medium tracking-[0.2em] uppercase">INPUT AMOUNT</text>
59 - </view>
60 -
61 <!-- 垂直布局核心区域 --> 55 <!-- 垂直布局核心区域 -->
62 <view class="flex flex-col items-center justify-center w-full mb-8"> 56 <view class="flex flex-col items-center justify-center w-full mb-8">
63 <!-- 币种符号 (放在上方) --> 57 <!-- 币种符号 (放在上方) -->
64 - <view class="text-3xl font-medium text-slate-500 mb-4 font-sans">{{ currencySymbol }}</view> 58 + <view class="text-3xl font-medium text-gray-400 mb-4 font-sans">{{ currencySymbol }}</view>
65 59
66 <!-- 金额数值 + 光标 --> 60 <!-- 金额数值 + 光标 -->
67 <view class="flex items-center justify-center relative h-[110rpx]"> 61 <view class="flex items-center justify-center relative h-[110rpx]">
68 - <view class="text-[100rpx] font-bold text-slate-800 leading-none tracking-tight font-sans drop-shadow-sm tabular-nums"> 62 + <view class="text-[100rpx] font-bold text-gray-900 leading-none tracking-tight font-sans tabular-nums">
69 {{ formattedInputValue || '0.00' }} 63 {{ formattedInputValue || '0.00' }}
70 </view> 64 </view>
71 65
72 <!-- 动态光标 --> 66 <!-- 动态光标 -->
73 - <view class="w-[4px] h-[80rpx] bg-blue-500 ml-4 rounded-full animate-pulse shadow-[0_0_10px_rgba(59,130,246,0.5)]"></view> 67 + <view class="w-[4px] h-[80rpx] bg-[#007AFF] ml-4 rounded-full animate-pulse"></view>
74 </view> 68 </view>
75 </view> 69 </view>
76 70
77 <!-- 底部提示文字 --> 71 <!-- 底部提示文字 -->
78 - <view class="text-xs text-slate-400 font-light tracking-wide">请输入保额金额</view> 72 + <view class="text-xs text-gray-400 font-normal tracking-wide">请输入保额金额</view>
79 </view> 73 </view>
80 -
81 - <!-- 底部高光条 -->
82 - <view class="absolute bottom-0 w-full h-[1px] bg-gradient-to-r from-transparent via-slate-200 to-transparent"></view>
83 </view> 74 </view>
84 </nut-popup> 75 </nut-popup>
85 76
......