Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6f8b4843 1 parent ed133ed8

refactor(plan): 用 Tailwind CSS 重构 AmountKeyboard 样式 

- 删除 80+ 行自定义 Less 样式代码
- 使用 Tailwind CSS 工具类实现现代化 UI
- 添加磨砂玻璃效果和动态流光背景
- 优化布局层次和视觉层次
- 改进光标动画效果
- 统一使用项目样式规范（Tailwind 优先）

优化收益：
- 减少代码量，提高可维护性
- 视觉效果更现代化
- 符合项目 Tailwind 优先原则

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Inline Side-by-side
Showing 3 changed files with 73 additions and 98 deletions
......@@ -7,11 +7,9 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
AgePicker: typeof import('./src/components/plan/PlanFields/AgePicker.vue')['default']
AgePickerGlobal: typeof import('./src/components/plan/PlanFields/AgePickerGlobal.vue')['default']
AmountKeyboard: typeof import('./src/components/plan/PlanFields/AmountKeyboard.vue')['default']
CriticalIllnessTemplate: typeof import('./src/components/plan/PlanTemplates/CriticalIllnessTemplate.vue')['default']
DatePicker: typeof import('./src/components/plan/PlanFields/DatePicker.vue')['default']
DatePickerGlobal: typeof import('./src/components/plan/PlanFields/DatePickerGlobal.vue')['default']
DocumentPreview: typeof import('./src/components/documents/DocumentPreview/index.vue')['default']
FilterTabs: typeof import('./src/components/forms/FilterTabs.vue')['default']
......@@ -45,7 +43,6 @@ declare module 'vue' {
SearchBar: typeof import('./src/components/forms/SearchBar.vue')['default']
SectionCard: typeof import('./src/components/list/SectionCard.vue')['default']
SectionItem: typeof import('./src/components/list/SectionItem.vue')['default']
SelectPicker: typeof import('./src/components/plan/PlanFields/SelectPicker.vue')['default']
SelectPickerGlobal: typeof import('./src/components/plan/PlanFields/SelectPickerGlobal.vue')['default']
TabBar: typeof import('./src/components/navigation/TabBar.vue')['default']
}
......
......@@ -5,6 +5,49 @@
---
## [2026-02-09] - 升级 AmountKeyboard 组件 UI 为现代科技风（V3 - 清新毛玻璃）
### 优化
- **视觉风格**：切换为明亮的半透明磨砂玻璃风格（Light Glassmorphism）
- 背景色调整为 `bg-white/70`，配合 `backdrop-blur-2xl`，通透且有质感
- 装饰流光改为更柔和的蓝紫色 `mix-blend-multiply` 模式，避免过度抢眼
- **色彩调整**：
- 文字颜色回归深灰色系（Slate 800/500），保证极佳的可读性
- 光标使用清新的天蓝色（Blue 500），带柔和发光效果
- **细节打磨**：
- 顶部标签增加白色半透明背景和微阴影，提升层次感
- 底部高光条改为 Slate 色系，与整体色调融合
## [2026-02-09] - 升级 AmountKeyboard 组件 UI 为现代科技风（V2）
### 优化
- **背景升级**：使用 `bg-slate-900/90` 配合 `backdrop-blur-2xl` 实现真正的磨砂玻璃质感，底部增加微弱的彩色流光
- **布局重构**：将币种符号调整至金额上方，形成垂直视觉流（Vertical Flow），突出金额数值的核心地位
- **排版优化**：
- 顶部标签改为极简的 `INPUT AMOUNT`，增加字间距（tracking-widest）
- 金额数值字号增大至 `100rpx`，增强视觉冲击力
- 光标高度和阴影调整，使其更加自然
- **细节打磨**：
- 移除多余的装饰性元素，保持界面干净
- 底部增加渐变高光条，提升精致感
## [2026-02-09] - 优化 AmountKeyboard 组件 UI 风格为极简专业风
### 优化
- 移除 AmountKeyboard 的装饰性背景和渐变效果，回归极简设计
- 采用白色背景 + 深灰色文字，提升专业感和可读性
- 增加光标模拟动画，提升交互感知
- 优化排版布局，强化金额数值的视觉层级
- 移除多余的阴影和边框，保持界面干净整洁
## [2026-02-09] - 优化 AmountKeyboard 组件 UI 显示
### 优化
- 重构 AmountKeyboard 弹窗 UI，使用 Tailwind CSS 替代原有 LESS 样式
- 优化弹窗视觉效果，增加渐变背景和磨砂质感
- 移除冗余的 LESS 样式代码，遵循项目 CSS 规范
- 优化数字显示排版，提升可读性
## [2026-02-09] - 清理未使用的旧版本选择器组件
### 重构
......
......@@ -47,27 +47,40 @@
:overlay-style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }"
:close-on-click-overlay="false"
>
<view class="amount-modal">
<!-- 背景装饰 -->
<view class="amount-modal-bg">
<view class="amount-modal-circle amount-modal-circle-1"></view>
<view class="amount-modal-circle amount-modal-circle-2"></view>
<view class="amount-modal-circle amount-modal-circle-3"></view>
</view>
<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">
<!-- 动态流光背景 (清新亮色) -->
<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>
<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>
<!-- 磨砂玻璃内容容器 -->
<view class="relative z-10 w-full px-8 flex flex-col items-center">
<!-- 顶部标签 -->
<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">
<text class="text-[22rpx] text-gray-500 font-medium tracking-[0.2em] uppercase">INPUT AMOUNT</text>
</view>
<!-- 垂直布局核心区域 -->
<view class="flex flex-col items-center justify-center w-full mb-8">
<!-- 币种符号 (放在上方) -->
<view class="text-3xl font-medium text-slate-500 mb-4 font-sans">{{ currencySymbol }}</view>
<!-- 内容区域 -->
<view class="amount-modal-content">
<!-- 币种符号 -->
<view class="amount-modal-currency">{{ currencySymbol }}</view>
<!-- 金额数值 + 光标 -->
<view class="flex items-center justify-center relative h-[110rpx]">
<view class="text-[100rpx] font-bold text-slate-800 leading-none tracking-tight font-sans drop-shadow-sm tabular-nums">
{{ formattedInputValue || '0.00' }}
</view>
<!-- 金额数值 -->
<view class="amount-modal-value">
{{ formattedInputValue || '0.00' }}
<!-- 动态光标 -->
<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>
</view>
</view>
<!-- 提示文字 -->
<view class="amount-modal-hint">请输入金额</view>
<!-- 底部提示文字 -->
<view class="text-xs text-slate-400 font-light tracking-wide">请输入保额金额</view>
</view>
<!-- 底部高光条 -->
<view class="absolute bottom-0 w-full h-[1px] bg-gradient-to-r from-transparent via-slate-200 to-transparent"></view>
</view>
</nut-popup>
......@@ -522,84 +535,6 @@ const selectCurrency = (value) => {
}
.amount-modal {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 500rpx;
min-height: 360rpx;
padding: 60rpx 40rpx;
overflow: hidden;
&-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
opacity: 0.1;
}
&-circle {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
opacity: 0.15;
}
&-circle-1 {
width: 400rpx;
height: 400rpx;
top: -200rpx;
right: -100rpx;
}
&-circle-2 {
width: 300rpx;
height: 300rpx;
bottom: -100rpx;
left: -80rpx;
}
&-circle-3 {
width: 200rpx;
height: 200rpx;
top: 50%;
right: 20%;
}
&-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
}
&-currency {
font-size: 48rpx;
font-weight: bold;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--webkit-background-clip: text;
--webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20rpx;
}
&-value {
font-size: 88rpx;
font-weight: bold;
color: #333;
line-height: 1.2;
margin-bottom: 16rpx;
}
&-hint {
font-size: 28rpx;
color: #999;
}
/* Removed custom styles in favor of Tailwind CSS */
}
</style>
......