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组件替换自定义选择器
- 统一输入框的边框、圆角和内边距样式
- 移除冗余的图标资源引用，优化代码结构
Inline Side-by-side
Showing 5 changed files with 100 additions and 148 deletions
...@@ -41,6 +41,8 @@ src/ ...@@ -41,6 +41,8 @@ src/
41 ├── components/ # 通用组件 41 ├── components/ # 通用组件
42 │ ├── PosterBuilder/ # 海报生成器（可选） 42 │ ├── PosterBuilder/ # 海报生成器（可选）
43 │ ├── time-picker-data/ # 时间选择器 43 │ ├── time-picker-data/ # 时间选择器
44 +│ ├── PlanPopup/ # 录入计划书弹窗容器
45 +│ ├── PlanSchemes/ # 录入计划书方案组件
44 │ ├── indexNav.vue # 底部导航 46 │ ├── indexNav.vue # 底部导航
45 │ └── qrCode.vue # 二维码组件（可选） 47 │ └── qrCode.vue # 二维码组件（可选）
46 ├── composables/ # Composition API hooks 48 ├── composables/ # Composition API hooks
......
...@@ -13,9 +13,16 @@ declare module 'vue' { ...@@ -13,9 +13,16 @@ declare module 'vue' {
13 NavHeader: typeof import('./src/components/NavHeader.vue')['default'] 13 NavHeader: typeof import('./src/components/NavHeader.vue')['default']
14 NutAvatar: typeof import('@nutui/nutui-taro')['Avatar'] 14 NutAvatar: typeof import('@nutui/nutui-taro')['Avatar']
15 NutButton: typeof import('@nutui/nutui-taro')['Button'] 15 NutButton: typeof import('@nutui/nutui-taro')['Button']
16 + NutCheckbox: typeof import('@nutui/nutui-taro')['Checkbox']
17 + NutCheckboxGroup: typeof import('@nutui/nutui-taro')['CheckboxGroup']
18 + NutForm: typeof import('@nutui/nutui-taro')['Form']
19 + NutFormItem: typeof import('@nutui/nutui-taro')['FormItem']
20 + NutIcon: typeof import('@nutui/nutui-taro')['Icon']
16 NutInput: typeof import('@nutui/nutui-taro')['Input'] 21 NutInput: typeof import('@nutui/nutui-taro')['Input']
17 NutPicker: typeof import('@nutui/nutui-taro')['Picker'] 22 NutPicker: typeof import('@nutui/nutui-taro')['Picker']
18 NutPopup: typeof import('@nutui/nutui-taro')['Popup'] 23 NutPopup: typeof import('@nutui/nutui-taro')['Popup']
24 + NutRadio: typeof import('@nutui/nutui-taro')['Radio']
25 + NutRadioGroup: typeof import('@nutui/nutui-taro')['RadioGroup']
19 NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar'] 26 NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar']
20 NutTabPane: typeof import('@nutui/nutui-taro')['TabPane'] 27 NutTabPane: typeof import('@nutui/nutui-taro')['TabPane']
21 NutTabs: typeof import('@nutui/nutui-taro')['Tabs'] 28 NutTabs: typeof import('@nutui/nutui-taro')['Tabs']
......
1 +## [2026-01-31] - 统一方案A样式实现模式
2 +
3 +### 优化
4 +- 调整录入计划书方案A布局与样式 (`src/components/PlanSchemes/SchemeA.vue`)
5 + - 使用与方案B一致的容器结构与卡片布局
6 + - 统一背景、圆角与输入样式，保持视觉一致性
7 +
8 +---
9 +
10 +**详细信息**：
11 +- **修改文件**: `src/components/PlanSchemes/SchemeA.vue`
12 +- **技术栈**: Vue 3, Tailwind CSS, NutUI
13 +
1 ## [2026-01-31] - 集成录入计划书方案B 14 ## [2026-01-31] - 集成录入计划书方案B
2 15
3 ### 新增 16 ### 新增
......
1 <template> 1 <template>
2 - <div class="flex flex-col h-full bg-white"> 2 + <div class="flex flex-col h-full bg-gray-50">
3 - <!-- Header --> 3 + <div class="flex justify-between items-center px-5 py-5 bg-white rounded-t-xl">
4 - <div class="flex justify-between items-center px-6 py-6 border-b border-gray-100"> 4 + <span class="text-lg font-normal text-gray-900">申请计划书</span>
5 - <span class="text-lg font-normal text-gray-800">申请计划书</span> 5 + <IconFont name="close" size="16" color="#9CA3AF" @click="close" />
6 - <img
7 - class="w-6 h-6"
8 - src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9edea6fd27cf6cb2ff57c90a0834dcda1f86b6072ce07f5e7e07069c2d3b3e9e"
9 - @click="close"
10 - />
11 </div> 6 </div>
12 7
13 - <!-- Scrollable Content --> 8 + <div class="flex-1 overflow-y-auto p-4">
14 - <div class="flex-1 overflow-y-auto px-6 py-4"> 9 + <div class="bg-white rounded-xl p-5 shadow-sm">
15 - <!-- 客户姓名 --> 10 + <div class="text-sm text-gray-600 mb-2">客户姓名</div>
16 - <div class="text-sm text-gray-700 mb-2">客户姓名</div> 11 + <div class="border border-gray-200 rounded-lg mb-4 overflow-hidden">
17 <nut-input 12 <nut-input
18 v-model="form.name" 13 v-model="form.name"
19 placeholder="请输入客户姓名" 14 placeholder="请输入客户姓名"
20 - class="!border !border-gray-200 !rounded-lg !px-3 !py-2 mb-4" 15 + class="!p-0 !bg-transparent !text-sm !text-gray-900"
21 :border="false" 16 :border="false"
22 /> 17 />
23 -
24 - <!-- 性别 -->
25 - <div class="text-sm text-gray-700 mb-2">性别</div>
26 - <div class="flex items-center mb-4">
27 - <div
28 - class="flex items-center mr-8 cursor-pointer"
29 - @click="form.gender = 'male'"
30 - >
31 - <img
32 - class="w-5 h-5 mr-2"
33 - src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngaa89ac8577908dfb2901e1067741dcdc9a5b58739da04a5243e45c296275f5ef"
34 - />
35 - <span :class="form.gender === 'male' ? 'text-blue-600 font-bold' : 'text-gray-800'">男</span>
36 - </div>
37 - <div
38 - class="flex items-center cursor-pointer"
39 - @click="form.gender = 'female'"
40 - >
41 - <img
42 - class="w-5 h-5 mr-2"
43 - src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng86258dc38e0dde555b09ba68a94fb042ce0172628791dc178dd1a7c0c89a824f"
44 - />
45 - <span :class="form.gender === 'female' ? 'text-blue-600 font-bold' : 'text-gray-800'">女</span>
46 - </div>
47 </div> 18 </div>
48 19
49 - <!-- 年龄 --> 20 + <div class="text-sm text-gray-600 mb-2">性别</div>
50 - <div class="text-sm text-gray-700 mb-2">年龄</div> 21 + <nut-radio-group v-model="form.gender" direction="horizontal" class="mb-4">
22 + <nut-radio label="male" class="mr-8">男</nut-radio>
23 + <nut-radio label="female">女</nut-radio>
24 + </nut-radio-group>
25 +
26 + <div class="text-sm text-gray-600 mb-2">年龄</div>
27 + <div class="border border-gray-200 rounded-lg mb-4 overflow-hidden">
51 <nut-input 28 <nut-input
52 v-model="form.age" 29 v-model="form.age"
53 type="digit" 30 type="digit"
54 placeholder="请输入年龄" 31 placeholder="请输入年龄"
55 - class="!border !border-gray-200 !rounded-lg !px-3 !py-2 mb-4" 32 + class="!p-0 !bg-transparent !text-sm !text-gray-900"
56 :border="false" 33 :border="false"
57 /> 34 />
35 + </div>
58 36
59 - <!-- 行业 --> 37 + <div class="text-sm text-gray-600 mb-2">行业</div>
60 - <div class="text-sm text-gray-700 mb-2">行业</div>
61 <div 38 <div
62 - class="flex justify-between items-center p-3 border border-gray-200 rounded-lg mb-4 bg-white" 39 + class="flex justify-between items-center border border-gray-200 rounded-lg p-3 mb-4 overflow-hidden"
63 @click="showIndustryPicker = true" 40 @click="showIndustryPicker = true"
64 > 41 >
65 <span :class="form.industry ? 'text-gray-900' : 'text-gray-400'" class="text-sm"> 42 <span :class="form.industry ? 'text-gray-900' : 'text-gray-400'" class="text-sm">
66 {{ form.industry || '请选择职业' }} 43 {{ form.industry || '请选择职业' }}
67 </span> 44 </span>
68 - <img 45 + <IconFont name="right" size="14" color="#9CA3AF" />
69 - class="w-3.5 h-3.5"
70 - src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngcf768ccd4a7e2a9d761be1bbd425d7c09e15f44c66570d21e5e9121448ccada5"
71 - />
72 </div> 46 </div>
73 47
74 - <!-- 年收入区间 --> 48 + <div class="text-sm text-gray-600 mb-2">年收入区间</div>
75 - <div class="text-sm text-gray-700 mb-2">年收入区间</div> 49 + <div class="border border-gray-200 rounded-lg mb-4 flex items-center overflow-hidden">
76 - <div class="relative mb-4">
77 <nut-input 50 <nut-input
78 v-model="form.income" 51 v-model="form.income"
79 type="digit" 52 type="digit"
80 placeholder="请输入年收入" 53 placeholder="请输入年收入"
81 - class="!border !border-gray-200 !rounded-lg !px-3 !py-2 !pr-10" 54 + class="!p-0 !bg-transparent flex-1 !text-sm !text-gray-900"
82 :border="false" 55 :border="false"
83 /> 56 />
84 - <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm">万元</span> 57 + <span class="text-sm text-gray-500 shrink-0 ml-2 mr-5">万元</span>
85 </div> 58 </div>
86 59
87 - <!-- 家庭结构 --> 60 + <div class="text-sm text-gray-600 mb-3">家庭结构(多选)</div>
88 - <div class="text-sm text-gray-700 mb-2">家庭结构</div> 61 + <div class="flex flex-wrap gap-3 mb-5">
89 - <div class="flex flex-wrap gap-4 mb-4">
90 <div 62 <div
91 v-for="item in familyOptions" 63 v-for="item in familyOptions"
92 :key="item.value" 64 :key="item.value"
93 - class="flex items-center cursor-pointer min-w-[60px]" 65 + class="px-4 py-2 rounded-lg text-sm cursor-pointer transition-colors border"
66 + :class="form.family.includes(item.value) ? 'bg-blue-600 text-white border-blue-600' : 'bg-gray-50 text-gray-600 border-gray-200'"
94 @click="toggleSelection('family', item.value)" 67 @click="toggleSelection('family', item.value)"
95 > 68 >
96 - <img :src="item.icon" class="w-5 h-5 mr-2" />
97 - <span :class="form.family.includes(item.value) ? 'text-blue-600 font-bold' : 'text-gray-800'" class="text-sm">
98 {{ item.label }} 69 {{ item.label }}
99 - </span>
100 </div> 70 </div>
101 </div> 71 </div>
102 72
103 - <!-- 保险需求 --> 73 + <div class="text-sm text-gray-600 mb-3">保险需求(多选)</div>
104 - <div class="text-sm text-gray-700 mb-2">保险需求</div> 74 + <div class="flex flex-wrap gap-3 mb-5">
105 - <div class="flex flex-wrap gap-4 mb-4">
106 <div 75 <div
107 v-for="item in insuranceOptions" 76 v-for="item in insuranceOptions"
108 :key="item.value" 77 :key="item.value"
109 - class="flex items-center cursor-pointer min-w-[85px]" 78 + class="px-4 py-2 rounded-lg text-sm cursor-pointer transition-colors border"
79 + :class="form.insurance.includes(item.value) ? 'bg-blue-600 text-white border-blue-600' : 'bg-gray-50 text-gray-600 border-gray-200'"
110 @click="toggleSelection('insurance', item.value)" 80 @click="toggleSelection('insurance', item.value)"
111 > 81 >
112 - <img :src="item.icon" class="w-5 h-5 mr-2" />
113 - <span :class="form.insurance.includes(item.value) ? 'text-blue-600 font-bold' : 'text-gray-800'" class="text-sm">
114 {{ item.label }} 82 {{ item.label }}
115 - </span>
116 </div> 83 </div>
117 </div> 84 </div>
118 85
119 - <!-- 期望收益率 --> 86 + <div class="text-sm text-gray-600 mb-2">期望收益率</div>
120 - <div class="text-sm text-gray-700 mb-2">期望收益率</div> 87 + <div class="border border-gray-200 rounded-lg mb-4 flex items-center overflow-hidden">
121 - <div class="relative mb-8">
122 <nut-input 88 <nut-input
123 v-model="form.returnRate" 89 v-model="form.returnRate"
124 type="digit" 90 type="digit"
125 placeholder="请输入期望收益率" 91 placeholder="请输入期望收益率"
126 - class="!border !border-gray-200 !rounded-lg !px-3 !py-2 !pr-10" 92 + class="!p-0 !bg-transparent flex-1 !text-sm !text-gray-900"
127 :border="false" 93 :border="false"
128 /> 94 />
129 - <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm">%</span> 95 + <span class="text-sm text-gray-500 shrink-0 ml-2 mr-5">%</span>
96 + </div>
130 </div> 97 </div>
131 </div> 98 </div>
132 99
133 - <!-- Footer Buttons --> 100 + <div class="p-4 pt-2 pb-8 flex justify-between gap-4 bg-gray-50">
134 - <div class="p-6 pt-2 pb-8 flex justify-between gap-4 border-t border-gray-100 bg-white">
135 <div 101 <div
136 - class="flex-1 py-3 text-center border border-blue-600 text-blue-600 rounded-lg text-base" 102 + class="flex-1 py-3 text-center border border-blue-600 text-blue-600 rounded-lg text-base bg-white"
137 @click="close" 103 @click="close"
138 > 104 >
139 取消 105 取消
...@@ -190,19 +156,17 @@ const industryColumns = [ ...@@ -190,19 +156,17 @@ const industryColumns = [
190 ]; 156 ];
191 157
192 const familyOptions = [ 158 const familyOptions = [
193 - { label: '配偶', value: 'spouse', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng78cf3ef069859580d9e4f17fc5095d6fbf460f1437ac3deaa43ab0a5a71a775e' }, 159 + { label: '配偶', value: 'spouse' },
194 - { label: '子女', value: 'children', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' }, 160 + { label: '子女', value: 'children' },
195 - { label: '父母', value: 'parents', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' }, // Using same icon as placeholder from design if needed, or check if unique one exists. Design uses same for parents/others in reference code snippet (lines 70, 78) but distinct in variable name logic? Actually design uses specific URLs. I copied from reference. 161 + { label: '父母', value: 'parents' },
196 - { label: '其他', value: 'others', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' }, 162 + { label: '其他', value: 'others' },
197 ]; 163 ];
198 164
199 -// Reference code lines 70, 78 use the same URL as 62 (children). I'll use them as is.
200 -
201 const insuranceOptions = [ 165 const insuranceOptions = [
202 - { label: '人身保障', value: 'life', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng78cf3ef069859580d9e4f17fc5095d6fbf460f1437ac3deaa43ab0a5a71a775e' }, 166 + { label: '人身保障', value: 'life' },
203 - { label: '财富传承', value: 'wealth', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' }, 167 + { label: '财富传承', value: 'wealth' },
204 - { label: '子女教育', value: 'education', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' }, 168 + { label: '子女教育', value: 'education' },
205 - { label: '养老规划', value: 'pension', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' }, 169 + { label: '养老规划', value: 'pension' },
206 ]; 170 ];
207 171
208 const toggleSelection = (field, value) => { 172 const toggleSelection = (field, value) => {
...@@ -235,5 +199,6 @@ const submit = () => { ...@@ -235,5 +199,6 @@ const submit = () => {
235 :deep(.nut-input) { 199 :deep(.nut-input) {
236 padding: 0; 200 padding: 0;
237 background: transparent; 201 background: transparent;
202 + border-radius: inherit;
238 } 203 }
239 </style> 204 </style>
......
...@@ -3,11 +3,7 @@ ...@@ -3,11 +3,7 @@
3 <!-- Header --> 3 <!-- Header -->
4 <div class="flex justify-between items-center px-5 py-5 bg-white rounded-t-xl"> 4 <div class="flex justify-between items-center px-5 py-5 bg-white rounded-t-xl">
5 <span class="text-lg font-normal text-gray-900">保险计划书申请</span> 5 <span class="text-lg font-normal text-gray-900">保险计划书申请</span>
6 - <img 6 + <IconFont name="close" size="16" color="#9CA3AF" @click="close" />
7 - class="w-5 h-5"
8 - src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng43284a8c3fc98c60509d6d415fed8113414c4c0b072fa0f3b41fc26e76a03b15"
9 - @click="close"
10 - />
11 </div> 7 </div>
12 8
13 <!-- Scrollable Content --> 9 <!-- Scrollable Content -->
...@@ -29,54 +25,28 @@ ...@@ -29,54 +25,28 @@
29 </div> 25 </div>
30 </div> 26 </div>
31 27
32 - <!-- 附加计划 & 性别 --> 28 + <!-- 附加计划 -->
33 - <div class="flex justify-between items-center mb-5"> 29 + <div class="mb-5">
34 <span class="text-base text-gray-900">附加计划</span> 30 <span class="text-base text-gray-900">附加计划</span>
35 - <div class="flex items-center">
36 - <span class="text-sm text-gray-600 mr-4">性别</span>
37 - <div class="flex items-center">
38 - <div
39 - class="flex items-center mr-4 cursor-pointer"
40 - @click="form.gender = 'female'"
41 - >
42 - <img
43 - class="w-4.5 h-4.5 mr-1"
44 - src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng1015590381802ed3f770814c3e05e4b73e6534f72e97a9a0721c459ed1dbac6a"
45 - />
46 - <span :class="form.gender === 'female' ? 'text-blue-600 font-bold' : 'text-gray-800'" class="text-sm">女</span>
47 - </div>
48 - <div
49 - class="flex items-center cursor-pointer"
50 - @click="form.gender = 'male'"
51 - >
52 - <img
53 - class="w-4.5 h-4.5 mr-1"
54 - src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb0bb17420dba3691281e919f69d1e06a69d343e53ee68ad570ec2fe340cdb09c"
55 - />
56 - <span :class="form.gender === 'male' ? 'text-blue-600 font-bold' : 'text-gray-500'" class="text-sm">男</span>
57 - </div>
58 - </div>
59 - </div>
60 </div> 31 </div>
61 32
33 + <!-- 性别 -->
34 + <div class="text-sm text-gray-600 mb-2">性别</div>
35 + <nut-radio-group v-model="form.gender" direction="horizontal" class="mb-4">
36 + <nut-radio label="female" class="mr-8">女</nut-radio>
37 + <nut-radio label="male">男</nut-radio>
38 + </nut-radio-group>
39 +
62 <!-- 年龄 --> 40 <!-- 年龄 -->
63 - <div class="flex justify-between items-center mb-5"> 41 + <div class="text-sm text-gray-600 mb-2">年龄</div>
64 - <span class="text-sm text-gray-600">年龄</span> 42 + <div class="border border-gray-200 rounded-lg mb-4 overflow-hidden">
65 - <div class="flex items-center">
66 <nut-input 43 <nut-input
67 v-model="form.age" 44 v-model="form.age"
68 type="digit" 45 type="digit"
69 - placeholder="请输入" 46 + placeholder="请输入年龄"
70 - class="!p-0 !bg-transparent !w-16 !text-right !text-gray-900 !text-sm" 47 + class="!p-0 !bg-transparent !text-sm !text-gray-900"
71 :border="false" 48 :border="false"
72 - input-align="right"
73 /> 49 />
74 - <span class="text-sm text-gray-900 mx-1">周岁</span>
75 - <img
76 - class="w-4 h-4"
77 - src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4f1ca24a37fc014649249f2a5db80cdec300bf86076429fb76cc42dff9b59f3d"
78 - />
79 - </div>
80 </div> 50 </div>
81 51
82 <!-- 保险期间 --> 52 <!-- 保险期间 -->
...@@ -89,45 +59,39 @@ ...@@ -89,45 +59,39 @@
89 59
90 <!-- 交费期间 --> 60 <!-- 交费期间 -->
91 <div class="text-sm text-gray-600 mb-3">交费期间</div> 61 <div class="text-sm text-gray-600 mb-3">交费期间</div>
92 - <div class="flex flex-wrap gap-3 mb-5"> 62 + <nut-radio-group v-model="form.paymentPeriod" direction="horizontal" class="mb-4">
93 - <div 63 + <nut-radio
94 v-for="period in paymentPeriods" 64 v-for="period in paymentPeriods"
95 :key="period" 65 :key="period"
96 - class="px-4 py-2 rounded-lg text-sm cursor-pointer transition-colors border" 66 + :label="period"
97 - :class="form.paymentPeriod === period ? 'bg-blue-600 text-white border-blue-600' : 'bg-gray-50 text-gray-600 border-gray-200'" 67 + class="mr-6"
98 - @click="form.paymentPeriod = period"
99 > 68 >
100 {{ period }} 69 {{ period }}
101 - </div> 70 + </nut-radio>
102 - </div> 71 + </nut-radio-group>
103 72
104 <!-- 年交保费 --> 73 <!-- 年交保费 -->
105 <div class="text-sm text-gray-600 mb-2">年交保费</div> 74 <div class="text-sm text-gray-600 mb-2">年交保费</div>
106 - <div class="bg-gray-50 rounded-lg border border-gray-200 p-3 flex justify-between items-center"> 75 + <div class="border border-gray-200 rounded-lg mb-4 flex items-center overflow-hidden">
107 <nut-input 76 <nut-input
108 v-model="form.premium" 77 v-model="form.premium"
109 type="digit" 78 type="digit"
110 placeholder="请输入保费" 79 placeholder="请输入保费"
111 - class="!p-0 !bg-transparent flex-1 !text-base !text-gray-900" 80 + class="!p-0 !bg-transparent flex-1 !text-sm !text-gray-900"
112 :border="false" 81 :border="false"
113 /> 82 />
114 - <span class="text-sm text-gray-500 ml-2">美元</span> 83 + <span class="text-sm text-gray-500 shrink-0 ml-2 mr-5">美元</span>
115 </div> 84 </div>
116 </div> 85 </div>
117 </div> 86 </div>
118 87
119 <!-- Footer Buttons --> 88 <!-- Footer Buttons -->
120 <div class="p-4 pt-2 pb-8 flex justify-between gap-4 bg-gray-50"> 89 <div class="p-4 pt-2 pb-8 flex justify-between gap-4 bg-gray-50">
121 - <div 90 + <div class="flex-1 py-3 text-center border border-blue-600 text-blue-600 rounded-lg text-base bg-white"
122 - class="flex-1 py-3 text-center border border-blue-600 text-blue-600 rounded-lg text-base bg-white" 91 + @click="close">
123 - @click="close"
124 - >
125 取消 92 取消
126 </div> 93 </div>
127 - <div 94 + <div class="flex-1 py-3 text-center bg-blue-600 text-white rounded-lg text-base" @click="submit">
128 - class="flex-1 py-3 text-center bg-blue-600 text-white rounded-lg text-base"
129 - @click="submit"
130 - >
131 提交申请 95 提交申请
132 </div> 96 </div>
133 </div> 97 </div>
...@@ -154,7 +118,7 @@ const form = reactive({ ...@@ -154,7 +118,7 @@ const form = reactive({
154 premium: '100000', 118 premium: '100000',
155 }); 119 });
156 120
157 -const paymentPeriods = ['10年交', '3年交', '5年交', '躸交', '2年交']; 121 +const paymentPeriods = ['10年交', '3年交', '5年交', '2年交'];
158 122
159 const close = () => { 123 const close = () => {
160 emit('close'); 124 emit('close');
...@@ -170,5 +134,6 @@ const submit = () => { ...@@ -170,5 +134,6 @@ const submit = () => {
170 :deep(.nut-input) { 134 :deep(.nut-input) {
171 padding: 0; 135 padding: 0;
172 background: transparent; 136 background: transparent;
137 + border-radius: inherit;
173 } 138 }
174 </style> 139 </style>
......