Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fc958151 1 parent ec234257

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

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Inline Side-by-side
Showing 2 changed files with 18 additions and 17 deletions
......@@ -4,6 +4,16 @@
> 格式基于 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.0.0/)，
---
## [2026-02-12] - 优化保额输入组件样式
### 优化
- **AmountKeyboard 组件样式重构**：
- 移除原有的"流光/磨砂玻璃"特效，改为符合 Manulife 企业风格的简洁设计
- 调整背景为纯白底色搭配微弱渐变 (`bg-gradient-to-b from-blue-50 to-white`)
- 统一字体颜色和排版，增强可读性 (`text-gray-900`, `text-[#007AFF]`)
- 优化光标动画和标签样式，使其更加专业和沉稳
- 保持原有功能逻辑和布局结构不变，仅做视觉层面的优化
## [2026-02-11] - 优化计划书列表查看按钮显示
### 优化
......
......@@ -46,40 +46,31 @@
:overlay-style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }"
:close-on-click-overlay="false"
>
<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 flex flex-col items-center justify-center min-w-[580rpx] min-h-[500rpx] overflow-hidden bg-white shadow-xl">
<!-- 简洁背景 -->
<view class="absolute top-0 left-0 w-full h-[120rpx] bg-gradient-to-b from-blue-50 to-white opacity-60"></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="text-3xl font-medium text-gray-400 mb-4 font-sans">{{ 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">
<view class="text-[100rpx] font-bold text-gray-900 leading-none tracking-tight font-sans tabular-nums">
{{ formattedInputValue || '0.00' }}
</view>
<!-- 动态光标 -->
<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 class="w-[4px] h-[80rpx] bg-[#007AFF] ml-4 rounded-full animate-pulse"></view>
</view>
</view>
<!-- 底部提示文字 -->
<view class="text-xs text-slate-400 font-light tracking-wide">请输入保额金额</view>
<view class="text-xs text-gray-400 font-normal 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>
......