Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
50ea866c 1 parent 97ea9d5f

refactor(PlanSchemes): 统一方案A样式实现模式以保持视觉一致性 

重构方案A组件布局与样式，使其与方案B保持一致
- 使用相同的容器结构、卡片布局和背景样式
- 将自定义图片替换为IconFont图标组件
- 使用NutUI Radio/Checkbox组件替换自定义选择器
- 统一输入框的边框、圆角和内边距样式
- 移除冗余的图标资源引用，优化代码结构
Expand all
Inline Side-by-side
Showing 5 changed files with 50 additions and 63 deletions
......@@ -41,6 +41,8 @@ src/
├── components/ # 通用组件
│ ├── PosterBuilder/ # 海报生成器（可选）
│ ├── time-picker-data/ # 时间选择器
│ ├── PlanPopup/ # 录入计划书弹窗容器
│ ├── PlanSchemes/ # 录入计划书方案组件
│ ├── indexNav.vue # 底部导航
│ └── qrCode.vue # 二维码组件（可选）
├── composables/ # Composition API hooks
......
......@@ -13,9 +13,16 @@ declare module 'vue' {
NavHeader: typeof import('./src/components/NavHeader.vue')['default']
NutAvatar: typeof import('@nutui/nutui-taro')['Avatar']
NutButton: typeof import('@nutui/nutui-taro')['Button']
NutCheckbox: typeof import('@nutui/nutui-taro')['Checkbox']
NutCheckboxGroup: typeof import('@nutui/nutui-taro')['CheckboxGroup']
NutForm: typeof import('@nutui/nutui-taro')['Form']
NutFormItem: typeof import('@nutui/nutui-taro')['FormItem']
NutIcon: typeof import('@nutui/nutui-taro')['Icon']
NutInput: typeof import('@nutui/nutui-taro')['Input']
NutPicker: typeof import('@nutui/nutui-taro')['Picker']
NutPopup: typeof import('@nutui/nutui-taro')['Popup']
NutRadio: typeof import('@nutui/nutui-taro')['Radio']
NutRadioGroup: typeof import('@nutui/nutui-taro')['RadioGroup']
NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar']
NutTabPane: typeof import('@nutui/nutui-taro')['TabPane']
NutTabs: typeof import('@nutui/nutui-taro')['Tabs']
......
## [2026-01-31] - 统一方案A样式实现模式
### 优化
- 调整录入计划书方案A布局与样式 (`src/components/PlanSchemes/SchemeA.vue`)
- 使用与方案B一致的容器结构与卡片布局
- 统一背景、圆角与输入样式，保持视觉一致性
---
**详细信息**：
- **修改文件**: `src/components/PlanSchemes/SchemeA.vue`
- **技术栈**: Vue 3, Tailwind CSS, NutUI
## [2026-01-31] - 集成录入计划书方案B
### 新增
......
This diff is collapsed. Click to expand it.
......@@ -3,11 +3,7 @@
<!-- Header -->
<div class="flex justify-between items-center px-5 py-5 bg-white rounded-t-xl">
<span class="text-lg font-normal text-gray-900">保险计划书申请</span>
<img
class="w-5 h-5"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng43284a8c3fc98c60509d6d415fed8113414c4c0b072fa0f3b41fc26e76a03b15"
@click="close"
/>
<IconFont name="close" size="16" color="#9CA3AF" @click="close" />
</div>
<!-- Scrollable Content -->
......@@ -29,54 +25,28 @@
</div>
</div>
<!-- 附加计划 & 性别 -->
<div class="flex justify-between items-center mb-5">
<!-- 附加计划 -->
<div class="mb-5">
<span class="text-base text-gray-900">附加计划</span>
<div class="flex items-center">
<span class="text-sm text-gray-600 mr-4">性别</span>
<div class="flex items-center">
<div
class="flex items-center mr-4 cursor-pointer"
@click="form.gender = 'female'"
>
<img
class="w-4.5 h-4.5 mr-1"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng1015590381802ed3f770814c3e05e4b73e6534f72e97a9a0721c459ed1dbac6a"
/>
<span :class="form.gender === 'female' ? 'text-blue-600 font-bold' : 'text-gray-800'" class="text-sm">女</span>
</div>
<div
class="flex items-center cursor-pointer"
@click="form.gender = 'male'"
>
<img
class="w-4.5 h-4.5 mr-1"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb0bb17420dba3691281e919f69d1e06a69d343e53ee68ad570ec2fe340cdb09c"
/>
<span :class="form.gender === 'male' ? 'text-blue-600 font-bold' : 'text-gray-500'" class="text-sm">男</span>
</div>
</div>
</div>
</div>
<!-- 性别 -->
<div class="text-sm text-gray-600 mb-2">性别</div>
<nut-radio-group v-model="form.gender" direction="horizontal" class="mb-4">
<nut-radio label="female" class="mr-8">女</nut-radio>
<nut-radio label="male">男</nut-radio>
</nut-radio-group>
<!-- 年龄 -->
<div class="flex justify-between items-center mb-5">
<span class="text-sm text-gray-600">年龄</span>
<div class="flex items-center">
<div class="text-sm text-gray-600 mb-2">年龄</div>
<div class="border border-gray-200 rounded-lg mb-4 overflow-hidden">
<nut-input
v-model="form.age"
type="digit"
placeholder="请输入"
class="!p-0 !bg-transparent !w-16 !text-right !text-gray-900 !text-sm"
placeholder="请输入年龄"
class="!p-0 !bg-transparent !text-sm !text-gray-900"
:border="false"
input-align="right"
/>
<span class="text-sm text-gray-900 mx-1">周岁</span>
<img
class="w-4 h-4"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4f1ca24a37fc014649249f2a5db80cdec300bf86076429fb76cc42dff9b59f3d"
/>
</div>
</div>
<!-- 保险期间 -->
......@@ -89,45 +59,39 @@
<!-- 交费期间 -->
<div class="text-sm text-gray-600 mb-3">交费期间</div>
<div class="flex flex-wrap gap-3 mb-5">
<div
<nut-radio-group v-model="form.paymentPeriod" direction="horizontal" class="mb-4">
<nut-radio
v-for="period in paymentPeriods"
:key="period"
class="px-4 py-2 rounded-lg text-sm cursor-pointer transition-colors border"
:class="form.paymentPeriod === period ? 'bg-blue-600 text-white border-blue-600' : 'bg-gray-50 text-gray-600 border-gray-200'"
@click="form.paymentPeriod = period"
:label="period"
class="mr-6"
>
{{ period }}
</div>
</div>
</nut-radio>
</nut-radio-group>
<!-- 年交保费 -->
<div class="text-sm text-gray-600 mb-2">年交保费</div>
<div class="bg-gray-50 rounded-lg border border-gray-200 p-3 flex justify-between items-center">
<div class="border border-gray-200 rounded-lg mb-4 flex items-center overflow-hidden">
<nut-input
v-model="form.premium"
type="digit"
placeholder="请输入保费"
class="!p-0 !bg-transparent flex-1 !text-base !text-gray-900"
class="!p-0 !bg-transparent flex-1 !text-sm !text-gray-900"
:border="false"
/>
<span class="text-sm text-gray-500 ml-2">美元</span>
<span class="text-sm text-gray-500 shrink-0 ml-2 mr-5">美元</span>
</div>
</div>
</div>
<!-- Footer Buttons -->
<div class="p-4 pt-2 pb-8 flex justify-between gap-4 bg-gray-50">
<div
class="flex-1 py-3 text-center border border-blue-600 text-blue-600 rounded-lg text-base bg-white"
@click="close"
>
<div class="flex-1 py-3 text-center border border-blue-600 text-blue-600 rounded-lg text-base bg-white"
@click="close">
取消
</div>
<div
class="flex-1 py-3 text-center bg-blue-600 text-white rounded-lg text-base"
@click="submit"
>
<div class="flex-1 py-3 text-center bg-blue-600 text-white rounded-lg text-base" @click="submit">
提交申请
</div>
</div>
......@@ -154,7 +118,7 @@ const form = reactive({
premium: '100000',
});
const paymentPeriods = ['10年交', '3年交', '5年交', '躸交', '2年交'];
const paymentPeriods = ['10年交', '3年交', '5年交', '2年交'];
const close = () => {
emit('close');
......@@ -170,5 +134,6 @@ const submit = () => {
:deep(.nut-input) {
padding: 0;
background: transparent;
border-radius: inherit;
}
</style>
......