Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
60cf8b29 1 parent dc7b2b17

chore: 重命名设计文件目录并更新相关代码文件路径 

- 将中文目录名改为英文，例如“我的”改为“done/我的”
- 更新对应的Vue组件和CSS文件路径
- 删除旧的目录结构，保持项目文件组织一致性
Inline Side-by-side
Showing 33 changed files with 1208 additions and 0 deletions
1 +.page {
2 + position: relative;
3 + width: 393px;
4 + height: 999px;
5 + overflow: hidden;
6 +}
7 +
8 +.block_1 {
9 + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
10 + background-color: rgba(255, 255, 255, 1);
11 + border-radius: 16px;
12 + padding: 24px 24px 31px 24px;
13 +}
14 +
15 +.box_1 {
16 + width: 345px;
17 +}
18 +
19 +.text_1 {
20 + overflow-wrap: break-word;
21 + color: rgba(31, 41, 55, 1);
22 + font-size: 16px;
23 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
24 + font-weight: normal;
25 + text-align: left;
26 + white-space: nowrap;
27 + line-height: 24px;
28 +}
29 +
30 +.label_1 {
31 + width: 24px;
32 + height: 24px;
33 +}
34 +
35 +.text_2 {
36 + overflow-wrap: break-word;
37 + color: rgba(55, 65, 81, 1);
38 + font-size: 14px;
39 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
40 + font-weight: normal;
41 + text-align: left;
42 + white-space: nowrap;
43 + line-height: 20px;
44 + margin: 24px 289px 0 0;
45 +}
46 +
47 +.text-wrapper_1 {
48 + background-color: rgba(255, 255, 255, 1);
49 + border-radius: 8px;
50 + border: 1px solid rgba(229, 231, 235, 1);
51 + margin-top: 8px;
52 + padding: 1px 234px 21px 11px;
53 +}
54 +
55 +.text_3 {
56 + overflow-wrap: break-word;
57 + color: rgba(156, 163, 175, 1);
58 + font-size: 14px;
59 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
60 + font-weight: normal;
61 + text-align: left;
62 + white-space: nowrap;
63 + line-height: 20px;
64 +}
65 +
66 +.text_4 {
67 + overflow-wrap: break-word;
68 + color: rgba(55, 65, 81, 1);
69 + font-size: 14px;
70 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
71 + font-weight: normal;
72 + text-align: left;
73 + white-space: nowrap;
74 + line-height: 20px;
75 + margin: 16px 317px 0 0;
76 +}
77 +
78 +.box_2 {
79 + margin: 8px 237px 0 0;
80 +}
81 +
82 +.thumbnail_1 {
83 + width: 20px;
84 + height: 20px;
85 +}
86 +
87 +.text_5 {
88 + overflow-wrap: break-word;
89 + color: rgba(31, 41, 55, 1);
90 + font-size: 14px;
91 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
92 + font-weight: normal;
93 + text-align: left;
94 + white-space: nowrap;
95 + line-height: 20px;
96 + margin-left: 8px;
97 +}
98 +
99 +.thumbnail_2 {
100 + width: 20px;
101 + height: 20px;
102 + margin-left: 24px;
103 +}
104 +
105 +.text_6 {
106 + overflow-wrap: break-word;
107 + color: rgba(31, 41, 55, 1);
108 + font-size: 14px;
109 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
110 + font-weight: normal;
111 + text-align: left;
112 + white-space: nowrap;
113 + line-height: 20px;
114 + margin-left: 8px;
115 +}
116 +
117 +.text_7 {
118 + overflow-wrap: break-word;
119 + color: rgba(55, 65, 81, 1);
120 + font-size: 14px;
121 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
122 + font-weight: normal;
123 + text-align: left;
124 + white-space: nowrap;
125 + line-height: 20px;
126 + margin: 16px 317px 0 0;
127 +}
128 +
129 +.text-wrapper_2 {
130 + background-color: rgba(255, 255, 255, 1);
131 + border-radius: 8px;
132 + border: 1px solid rgba(229, 231, 235, 1);
133 + margin-top: 8px;
134 + padding: 1px 262px 21px 11px;
135 +}
136 +
137 +.text_8 {
138 + overflow-wrap: break-word;
139 + color: rgba(156, 163, 175, 1);
140 + font-size: 14px;
141 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
142 + font-weight: normal;
143 + text-align: left;
144 + white-space: nowrap;
145 + line-height: 20px;
146 +}
147 +
148 +.text_9 {
149 + overflow-wrap: break-word;
150 + color: rgba(55, 65, 81, 1);
151 + font-size: 14px;
152 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
153 + font-weight: normal;
154 + text-align: left;
155 + white-space: nowrap;
156 + line-height: 20px;
157 + margin: 16px 317px 0 0;
158 +}
159 +
160 +.box_3 {
161 + background-color: rgba(255, 255, 255, 1);
162 + border-radius: 8px;
163 + width: 345px;
164 + border: 1px solid rgba(229, 231, 235, 1);
165 + margin-top: 8px;
166 + padding: 0 1px 14px 11px;
167 +}
168 +
169 +.text_10 {
170 + overflow-wrap: break-word;
171 + color: rgba(31, 41, 55, 1);
172 + font-size: 14px;
173 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
174 + font-weight: normal;
175 + text-align: left;
176 + white-space: nowrap;
177 + line-height: 17px;
178 +}
179 +
180 +.thumbnail_3 {
181 + width: 14px;
182 + height: 14px;
183 + margin-top: 15px;
184 +}
185 +
186 +.text_11 {
187 + overflow-wrap: break-word;
188 + color: rgba(55, 65, 81, 1);
189 + font-size: 14px;
190 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
191 + font-weight: normal;
192 + text-align: left;
193 + white-space: nowrap;
194 + line-height: 20px;
195 + margin: 16px 275px 0 0;
196 +}
197 +
198 +.text-wrapper_3 {
199 + background-color: rgba(255, 255, 255, 1);
200 + border-radius: 8px;
201 + width: 345px;
202 + border: 1px solid rgba(229, 231, 235, 1);
203 + margin-top: 8px;
204 + padding: 1px 11px 11px 11px;
205 +}
206 +
207 +.text_12 {
208 + overflow-wrap: break-word;
209 + color: rgba(156, 163, 175, 1);
210 + font-size: 14px;
211 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
212 + font-weight: normal;
213 + text-align: left;
214 + white-space: nowrap;
215 + line-height: 20px;
216 +}
217 +
218 +.text_13 {
219 + overflow-wrap: break-word;
220 + color: rgba(107, 114, 128, 1);
221 + font-size: 14px;
222 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
223 + font-weight: normal;
224 + text-align: left;
225 + white-space: nowrap;
226 + line-height: 20px;
227 + margin-top: 10px;
228 +}
229 +
230 +.text_14 {
231 + overflow-wrap: break-word;
232 + color: rgba(55, 65, 81, 1);
233 + font-size: 14px;
234 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
235 + font-weight: normal;
236 + text-align: left;
237 + white-space: nowrap;
238 + line-height: 20px;
239 + margin: 16px 289px 0 0;
240 +}
241 +
242 +.image-text_1 {
243 + width: 56px;
244 + margin: 8px 289px 0 0;
245 +}
246 +
247 +.thumbnail_4 {
248 + width: 20px;
249 + height: 20px;
250 +}
251 +
252 +.text-group_1 {
253 + overflow-wrap: break-word;
254 + color: rgba(31, 41, 55, 1);
255 + font-size: 14px;
256 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
257 + font-weight: normal;
258 + text-align: left;
259 + white-space: nowrap;
260 + line-height: 20px;
261 +}
262 +
263 +.image-text_2 {
264 + width: 56px;
265 + margin: 8px 289px 0 0;
266 +}
267 +
268 +.thumbnail_5 {
269 + width: 20px;
270 + height: 20px;
271 +}
272 +
273 +.text-group_2 {
274 + overflow-wrap: break-word;
275 + color: rgba(31, 41, 55, 1);
276 + font-size: 14px;
277 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
278 + font-weight: normal;
279 + text-align: left;
280 + white-space: nowrap;
281 + line-height: 20px;
282 +}
283 +
284 +.image-text_3 {
285 + width: 56px;
286 + margin: 8px 289px 0 0;
287 +}
288 +
289 +.thumbnail_6 {
290 + width: 20px;
291 + height: 20px;
292 +}
293 +
294 +.text-group_3 {
295 + overflow-wrap: break-word;
296 + color: rgba(31, 41, 55, 1);
297 + font-size: 14px;
298 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
299 + font-weight: normal;
300 + text-align: left;
301 + white-space: nowrap;
302 + line-height: 20px;
303 +}
304 +
305 +.box_4 {
306 + width: 56px;
307 + margin: 8px 289px 0 0;
308 +}
309 +
310 +.thumbnail_7 {
311 + width: 20px;
312 + height: 20px;
313 +}
314 +
315 +.text_15 {
316 + overflow-wrap: break-word;
317 + color: rgba(31, 41, 55, 1);
318 + font-size: 14px;
319 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
320 + font-weight: normal;
321 + text-align: left;
322 + white-space: nowrap;
323 + line-height: 20px;
324 +}
325 +
326 +.text_16 {
327 + overflow-wrap: break-word;
328 + color: rgba(55, 65, 81, 1);
329 + font-size: 14px;
330 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
331 + font-weight: normal;
332 + text-align: left;
333 + white-space: nowrap;
334 + line-height: 20px;
335 + margin: 16px 289px 0 0;
336 +}
337 +
338 +.image-text_4 {
339 + width: 84px;
340 + margin: 8px 261px 0 0;
341 +}
342 +
343 +.thumbnail_8 {
344 + width: 20px;
345 + height: 20px;
346 +}
347 +
348 +.text-group_4 {
349 + overflow-wrap: break-word;
350 + color: rgba(31, 41, 55, 1);
351 + font-size: 14px;
352 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
353 + font-weight: normal;
354 + text-align: left;
355 + white-space: nowrap;
356 + line-height: 20px;
357 +}
358 +
359 +.image-text_5 {
360 + width: 84px;
361 + margin: 8px 261px 0 0;
362 +}
363 +
364 +.thumbnail_9 {
365 + width: 20px;
366 + height: 20px;
367 +}
368 +
369 +.text-group_5 {
370 + overflow-wrap: break-word;
371 + color: rgba(31, 41, 55, 1);
372 + font-size: 14px;
373 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
374 + font-weight: normal;
375 + text-align: left;
376 + white-space: nowrap;
377 + line-height: 20px;
378 +}
379 +
380 +.image-text_6 {
381 + width: 84px;
382 + margin: 8px 261px 0 0;
383 +}
384 +
385 +.thumbnail_10 {
386 + width: 20px;
387 + height: 20px;
388 +}
389 +
390 +.text-group_6 {
391 + overflow-wrap: break-word;
392 + color: rgba(31, 41, 55, 1);
393 + font-size: 14px;
394 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
395 + font-weight: normal;
396 + text-align: left;
397 + white-space: nowrap;
398 + line-height: 20px;
399 +}
400 +
401 +.image-text_7 {
402 + width: 84px;
403 + margin: 8px 261px 0 0;
404 +}
405 +
406 +.thumbnail_11 {
407 + width: 20px;
408 + height: 20px;
409 +}
410 +
411 +.text-group_7 {
412 + overflow-wrap: break-word;
413 + color: rgba(31, 41, 55, 1);
414 + font-size: 14px;
415 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
416 + font-weight: normal;
417 + text-align: left;
418 + white-space: nowrap;
419 + line-height: 20px;
420 +}
421 +
422 +.text_17 {
423 + overflow-wrap: break-word;
424 + color: rgba(55, 65, 81, 1);
425 + font-size: 14px;
426 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
427 + font-weight: normal;
428 + text-align: left;
429 + white-space: nowrap;
430 + line-height: 20px;
431 + margin: 23px 275px 0 0;
432 +}
433 +
434 +.text-wrapper_4 {
435 + background-color: rgba(255, 255, 255, 1);
436 + border-radius: 8px;
437 + width: 345px;
438 + border: 1px solid rgba(229, 231, 235, 1);
439 + margin-top: 8px;
440 + padding: 1px 11px 11px 11px;
441 +}
442 +
443 +.text_18 {
444 + overflow-wrap: break-word;
445 + color: rgba(156, 163, 175, 1);
446 + font-size: 14px;
447 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
448 + font-weight: normal;
449 + text-align: left;
450 + white-space: nowrap;
451 + line-height: 20px;
452 +}
453 +
454 +.text_19 {
455 + overflow-wrap: break-word;
456 + color: rgba(107, 114, 128, 1);
457 + font-size: 14px;
458 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
459 + font-weight: normal;
460 + text-align: left;
461 + white-space: nowrap;
462 + line-height: 20px;
463 + margin-top: 10px;
464 +}
465 +
466 +.box_5 {
467 + width: 345px;
468 + margin-top: 61px;
469 +}
470 +
471 +.text-wrapper_5 {
472 + background-color: rgba(255, 255, 255, 1);
473 + border-radius: 6px;
474 + border: 1px solid rgba(0, 122, 255, 1);
475 + padding: 9px 67px 9px 67px;
476 +}
477 +
478 +.text_20 {
479 + overflow-wrap: break-word;
480 + color: rgba(0, 122, 255, 1);
481 + font-size: 16px;
482 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
483 + font-weight: normal;
484 + text-align: center;
485 + white-space: nowrap;
486 + line-height: 24px;
487 +}
488 +
489 +.text-wrapper_6 {
490 + background-color: rgba(0, 122, 255, 1);
491 + border-radius: 6px;
492 + padding: 10px 51px 10px 51px;
493 +}
494 +
495 +.text_21 {
496 + overflow-wrap: break-word;
497 + color: rgba(255, 255, 255, 1);
498 + font-size: 16px;
499 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
500 + font-weight: normal;
501 + text-align: center;
502 + white-space: nowrap;
503 + line-height: 24px;
504 +}
1 +<template>
2 + <div class="page flex-col">
3 + <div class="block_1 flex-col">
4 + <div class="box_1 flex-row justify-between">
5 + <span class="text_1">申请计划书</span>
6 + <img
7 + class="label_1"
8 + referrerpolicy="no-referrer"
9 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9edea6fd27cf6cb2ff57c90a0834dcda1f86b6072ce07f5e7e07069c2d3b3e9e"
10 + />
11 + </div>
12 + <span class="text_2">客户姓名</span>
13 + <div class="text-wrapper_1 flex-col">
14 + <span class="text_3">请输入客户姓名</span>
15 + </div>
16 + <span class="text_4">性别</span>
17 + <div class="box_2 flex-row">
18 + <img
19 + class="thumbnail_1"
20 + referrerpolicy="no-referrer"
21 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngaa89ac8577908dfb2901e1067741dcdc9a5b58739da04a5243e45c296275f5ef"
22 + />
23 + <span class="text_5">男</span>
24 + <img
25 + class="thumbnail_2"
26 + referrerpolicy="no-referrer"
27 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng86258dc38e0dde555b09ba68a94fb042ce0172628791dc178dd1a7c0c89a824f"
28 + />
29 + <span class="text_6">女</span>
30 + </div>
31 + <span class="text_7">年龄</span>
32 + <div class="text-wrapper_2 flex-col">
33 + <span class="text_8">请输入年龄</span>
34 + </div>
35 + <span class="text_9">行业</span>
36 + <div class="box_3 flex-row justify-between">
37 + <span class="text_10">请选择职业</span>
38 + <img
39 + class="thumbnail_3"
40 + referrerpolicy="no-referrer"
41 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngcf768ccd4a7e2a9d761be1bbd425d7c09e15f44c66570d21e5e9121448ccada5"
42 + />
43 + </div>
44 + <span class="text_11">年收入区间</span>
45 + <div class="text-wrapper_3 flex-row justify-between">
46 + <span class="text_12">请输入年收入</span>
47 + <span class="text_13">万元</span>
48 + </div>
49 + <span class="text_14">家庭结构</span>
50 + <div class="image-text_1 flex-row justify-between">
51 + <img
52 + class="thumbnail_4"
53 + referrerpolicy="no-referrer"
54 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng78cf3ef069859580d9e4f17fc5095d6fbf460f1437ac3deaa43ab0a5a71a775e"
55 + />
56 + <span class="text-group_1">配偶</span>
57 + </div>
58 + <div class="image-text_2 flex-row justify-between">
59 + <img
60 + class="thumbnail_5"
61 + referrerpolicy="no-referrer"
62 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9"
63 + />
64 + <span class="text-group_2">子女</span>
65 + </div>
66 + <div class="image-text_3 flex-row justify-between">
67 + <img
68 + class="thumbnail_6"
69 + referrerpolicy="no-referrer"
70 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9"
71 + />
72 + <span class="text-group_3">父母</span>
73 + </div>
74 + <div class="box_4 flex-row justify-between">
75 + <img
76 + class="thumbnail_7"
77 + referrerpolicy="no-referrer"
78 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9"
79 + />
80 + <span class="text_15">其他</span>
81 + </div>
82 + <span class="text_16">保险需求</span>
83 + <div class="image-text_4 flex-row justify-between">
84 + <img
85 + class="thumbnail_8"
86 + referrerpolicy="no-referrer"
87 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng78cf3ef069859580d9e4f17fc5095d6fbf460f1437ac3deaa43ab0a5a71a775e"
88 + />
89 + <span class="text-group_4">人身保障</span>
90 + </div>
91 + <div class="image-text_5 flex-row justify-between">
92 + <img
93 + class="thumbnail_9"
94 + referrerpolicy="no-referrer"
95 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9"
96 + />
97 + <span class="text-group_5">财富传承</span>
98 + </div>
99 + <div class="image-text_6 flex-row justify-between">
100 + <img
101 + class="thumbnail_10"
102 + referrerpolicy="no-referrer"
103 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9"
104 + />
105 + <span class="text-group_6">子女教育</span>
106 + </div>
107 + <div class="image-text_7 flex-row justify-between">
108 + <img
109 + class="thumbnail_11"
110 + referrerpolicy="no-referrer"
111 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9"
112 + />
113 + <span class="text-group_7">养老规划</span>
114 + </div>
115 + <span class="text_17">期望收益率</span>
116 + <div class="text-wrapper_4 flex-row justify-between">
117 + <span class="text_18">请输入期望收益率</span>
118 + <span class="text_19">%</span>
119 + </div>
120 + <div class="box_5 flex-row justify-between">
121 + <div class="text-wrapper_5 flex-col">
122 + <span class="text_20">取消</span>
123 + </div>
124 + <div class="text-wrapper_6 flex-col">
125 + <span class="text_21">提交申请</span>
126 + </div>
127 + </div>
128 + </div>
129 + </div>
130 +</template>
131 +<script>
132 +export default {
133 + data() {
134 + return {
135 + constants: {},
136 + };
137 + },
138 + methods: {},
139 +};
140 +</script>
141 +<style src="./common.css" />
142 +<style src="./index.css" />
1 +.page {
2 + position: relative;
3 + width: 393px;
4 + height: 852px;
5 + overflow: hidden;
6 + padding-top: 0;
7 + padding-bottom: 78px;
8 + padding-left: 0;
9 + padding-right: 0;
10 +}
11 +
12 +.block_1 {
13 + background-color: rgba(249, 250, 251, 1);
14 + padding: 16px 16px 49px 16px;
15 +}
16 +
17 +.section_1 {
18 + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
19 + background-color: rgba(255, 255, 255, 1);
20 + border-radius: 12px;
21 + padding: 20px 20px 20px 20px;
22 +}
23 +
24 +.box_1 {
25 + width: 321px;
26 +}
27 +
28 +.text_1 {
29 + overflow-wrap: break-word;
30 + color: rgba(17, 24, 39, 1);
31 + font-size: 18px;
32 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
33 + font-weight: normal;
34 + text-align: left;
35 + white-space: nowrap;
36 + line-height: 28px;
37 +}
38 +
39 +.thumbnail_1 {
40 + width: 20px;
41 + height: 20px;
42 + margin: 4px 0 4px 0;
43 +}
44 +
45 +.box_2 {
46 + width: 120px;
47 + margin: 20px 201px 0 0;
48 +}
49 +
50 +.text_2 {
51 + overflow-wrap: break-word;
52 + color: rgba(55, 65, 81, 1);
53 + font-size: 14px;
54 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
55 + font-weight: normal;
56 + text-align: left;
57 + white-space: nowrap;
58 + line-height: 20px;
59 + margin-top: 6px;
60 +}
61 +
62 +.text-wrapper_1 {
63 + background-color: rgba(239, 246, 255, 1);
64 + border-radius: 6px;
65 + padding: 6px 12px 6px 12px;
66 +}
67 +
68 +.text_3 {
69 + overflow-wrap: break-word;
70 + color: rgba(0, 122, 255, 1);
71 + font-size: 14px;
72 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
73 + font-weight: normal;
74 + text-align: left;
75 + white-space: nowrap;
76 + line-height: 20px;
77 +}
78 +
79 +.box_3 {
80 + width: 120px;
81 + margin: 20px 201px 0 0;
82 +}
83 +
84 +.text_4 {
85 + overflow-wrap: break-word;
86 + color: rgba(55, 65, 81, 1);
87 + font-size: 14px;
88 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
89 + font-weight: normal;
90 + text-align: left;
91 + white-space: nowrap;
92 + line-height: 20px;
93 + margin-top: 6px;
94 +}
95 +
96 +.text-wrapper_2 {
97 + background-color: rgba(239, 246, 255, 1);
98 + border-radius: 6px;
99 + padding: 6px 12px 6px 12px;
100 +}
101 +
102 +.text_5 {
103 + overflow-wrap: break-word;
104 + color: rgba(0, 122, 255, 1);
105 + font-size: 14px;
106 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
107 + font-weight: normal;
108 + text-align: left;
109 + white-space: nowrap;
110 + line-height: 20px;
111 +}
112 +
113 +.text_6 {
114 + overflow-wrap: break-word;
115 + color: rgba(17, 24, 39, 1);
116 + font-size: 16px;
117 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
118 + font-weight: normal;
119 + text-align: left;
120 + white-space: nowrap;
121 + line-height: 24px;
122 + margin: 20px 257px 0 0;
123 +}
124 +
125 +.text_7 {
126 + overflow-wrap: break-word;
127 + color: rgba(55, 65, 81, 1);
128 + font-size: 14px;
129 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
130 + font-weight: normal;
131 + text-align: left;
132 + white-space: nowrap;
133 + line-height: 20px;
134 + margin: 20px 293px 0 0;
135 +}
136 +
137 +.box_4 {
138 + margin: 8px 217px 0 0;
139 +}
140 +
141 +.thumbnail_2 {
142 + width: 18px;
143 + height: 18px;
144 + margin: 1px 0 1px 0;
145 +}
146 +
147 +.text_8 {
148 + overflow-wrap: break-word;
149 + color: rgba(31, 41, 55, 1);
150 + font-size: 14px;
151 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
152 + font-weight: normal;
153 + text-align: left;
154 + white-space: nowrap;
155 + line-height: 20px;
156 + margin-left: 8px;
157 +}
158 +
159 +.image-text_1 {
160 + width: 40px;
161 + margin-left: 24px;
162 +}
163 +
164 +.thumbnail_3 {
165 + width: 18px;
166 + height: 18px;
167 + margin: 1px 0 1px 0;
168 +}
169 +
170 +.text-group_1 {
171 + overflow-wrap: break-word;
172 + color: rgba(107, 114, 128, 1);
173 + font-size: 14px;
174 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
175 + font-weight: normal;
176 + text-align: left;
177 + white-space: nowrap;
178 + line-height: 20px;
179 +}
180 +
181 +.box_5 {
182 + width: 321px;
183 + margin-top: 20px;
184 +}
185 +
186 +.text_9 {
187 + overflow-wrap: break-word;
188 + color: rgba(55, 65, 81, 1);
189 + font-size: 14px;
190 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
191 + font-weight: normal;
192 + text-align: left;
193 + white-space: nowrap;
194 + line-height: 20px;
195 +}
196 +
197 +.image-text_2 {
198 + width: 68px;
199 +}
200 +
201 +.text-group_2 {
202 + overflow-wrap: break-word;
203 + color: rgba(31, 41, 55, 1);
204 + font-size: 14px;
205 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
206 + font-weight: normal;
207 + text-align: left;
208 + white-space: nowrap;
209 + line-height: 20px;
210 +}
211 +
212 +.thumbnail_4 {
213 + width: 16px;
214 + height: 16px;
215 + margin: 2px 0 2px 0;
216 +}
217 +
218 +.box_6 {
219 + width: 120px;
220 + margin: 20px 201px 0 0;
221 +}
222 +
223 +.text_10 {
224 + overflow-wrap: break-word;
225 + color: rgba(55, 65, 81, 1);
226 + font-size: 14px;
227 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
228 + font-weight: normal;
229 + text-align: left;
230 + white-space: nowrap;
231 + line-height: 20px;
232 + margin-top: 6px;
233 +}
234 +
235 +.text-wrapper_3 {
236 + background-color: rgba(239, 246, 255, 1);
237 + border-radius: 6px;
238 + padding: 6px 12px 6px 12px;
239 +}
240 +
241 +.text_11 {
242 + overflow-wrap: break-word;
243 + color: rgba(0, 122, 255, 1);
244 + font-size: 14px;
245 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
246 + font-weight: normal;
247 + text-align: left;
248 + white-space: nowrap;
249 + line-height: 20px;
250 +}
251 +
252 +.text_12 {
253 + overflow-wrap: break-word;
254 + color: rgba(55, 65, 81, 1);
255 + font-size: 14px;
256 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
257 + font-weight: normal;
258 + text-align: left;
259 + white-space: nowrap;
260 + line-height: 20px;
261 + margin: 20px 265px 0 0;
262 +}
263 +
264 +.grid_1 {
265 + width: 236px;
266 + height: 88px;
267 + flex-wrap: wrap;
268 + margin: 12px 85px 0 0;
269 +}
270 +
271 +.text-wrapper_4 {
272 + background-color: rgba(0, 122, 255, 1);
273 + border-radius: 8px;
274 + height: 38px;
275 + width: 76px;
276 + margin: 0 12px 12px 0;
277 + padding: 8px 16px 10px 16px;
278 +}
279 +
280 +.text_13 {
281 + overflow-wrap: break-word;
282 + color: rgba(255, 255, 255, 1);
283 + font-size: 14px;
284 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
285 + font-weight: normal;
286 + text-align: left;
287 + white-space: nowrap;
288 + line-height: 20px;
289 +}
290 +
291 +.text-wrapper_5 {
292 + background-color: rgba(249, 250, 251, 1);
293 + border-radius: 8px;
294 + height: 38px;
295 + border: 1px solid rgba(229, 231, 235, 1);
296 + width: 68px;
297 + margin: 0 12px 12px 0;
298 + padding: 8px 15px 8px 15px;
299 +}
300 +
301 +.text_14 {
302 + overflow-wrap: break-word;
303 + color: rgba(55, 65, 81, 1);
304 + font-size: 14px;
305 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
306 + font-weight: normal;
307 + text-align: left;
308 + white-space: nowrap;
309 + line-height: 20px;
310 +}
311 +
312 +.text-wrapper_6 {
313 + background-color: rgba(249, 250, 251, 1);
314 + border-radius: 8px;
315 + height: 38px;
316 + border: 1px solid rgba(229, 231, 235, 1);
317 + margin-bottom: 12px;
318 + width: 68px;
319 + padding: 8px 15px 8px 15px;
320 +}
321 +
322 +.text_15 {
323 + overflow-wrap: break-word;
324 + color: rgba(55, 65, 81, 1);
325 + font-size: 14px;
326 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
327 + font-weight: normal;
328 + text-align: left;
329 + white-space: nowrap;
330 + line-height: 20px;
331 +}
332 +
333 +.text-wrapper_7 {
334 + background-color: rgba(249, 250, 251, 1);
335 + border-radius: 8px;
336 + height: 38px;
337 + border: 1px solid rgba(229, 231, 235, 1);
338 + width: 60px;
339 + margin: 0 12px 12px 0;
340 + padding: 8px 15px 8px 15px;
341 +}
342 +
343 +.text_16 {
344 + overflow-wrap: break-word;
345 + color: rgba(55, 65, 81, 1);
346 + font-size: 14px;
347 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
348 + font-weight: normal;
349 + text-align: left;
350 + white-space: nowrap;
351 + line-height: 20px;
352 +}
353 +
354 +.text-wrapper_8 {
355 + background-color: rgba(249, 250, 251, 1);
356 + border-radius: 8px;
357 + height: 38px;
358 + border: 1px solid rgba(229, 231, 235, 1);
359 + margin-right: NaNpx;
360 + margin-bottom: 12px;
361 + width: 68px;
362 + padding: 8px 15px 8px 15px;
363 +}
364 +
365 +.text_17 {
366 + overflow-wrap: break-word;
367 + color: rgba(55, 65, 81, 1);
368 + font-size: 14px;
369 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
370 + font-weight: normal;
371 + text-align: left;
372 + white-space: nowrap;
373 + line-height: 20px;
374 +}
375 +
376 +.text_18 {
377 + overflow-wrap: break-word;
378 + color: rgba(55, 65, 81, 1);
379 + font-size: 14px;
380 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
381 + font-weight: normal;
382 + text-align: left;
383 + white-space: nowrap;
384 + line-height: 20px;
385 + margin: 20px 265px 0 0;
386 +}
387 +
388 +.text-wrapper_9 {
389 + background-color: rgba(249, 250, 251, 1);
390 + border-radius: 8px;
391 + width: 321px;
392 + border: 1px solid rgba(229, 231, 235, 1);
393 + margin-top: 8px;
394 + padding: 12px 12px 12px 12px;
395 +}
396 +
397 +.text_19 {
398 + overflow-wrap: break-word;
399 + color: rgba(31, 41, 55, 1);
400 + font-size: 16px;
401 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
402 + font-weight: normal;
403 + text-align: left;
404 + white-space: nowrap;
405 + line-height: 24px;
406 +}
407 +
408 +.text_20 {
409 + overflow-wrap: break-word;
410 + color: rgba(107, 114, 128, 1);
411 + font-size: 14px;
412 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
413 + font-weight: normal;
414 + text-align: left;
415 + white-space: nowrap;
416 + line-height: 20px;
417 + margin-top: 2px;
418 +}
419 +
420 +.section_2 {
421 + width: 345px;
422 + margin: 51px 13px 0 3px;
423 +}
424 +
425 +.text-wrapper_10 {
426 + background-color: rgba(255, 255, 255, 1);
427 + border-radius: 6px;
428 + border: 1px solid rgba(0, 122, 255, 1);
429 + padding: 9px 67px 9px 67px;
430 +}
431 +
432 +.text_21 {
433 + overflow-wrap: break-word;
434 + color: rgba(0, 122, 255, 1);
435 + font-size: 16px;
436 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
437 + font-weight: normal;
438 + text-align: center;
439 + white-space: nowrap;
440 + line-height: 24px;
441 +}
442 +
443 +.text-wrapper_11 {
444 + background-color: rgba(0, 122, 255, 1);
445 + border-radius: 6px;
446 + padding: 10px 51px 10px 51px;
447 +}
448 +
449 +.text_22 {
450 + overflow-wrap: break-word;
451 + color: rgba(255, 255, 255, 1);
452 + font-size: 16px;
453 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
454 + font-weight: normal;
455 + text-align: center;
456 + white-space: nowrap;
457 + line-height: 24px;
458 +}
1 +<template>
2 + <div class="page flex-col">
3 + <div class="block_1 flex-col">
4 + <div class="section_1 flex-col">
5 + <div class="box_1 flex-row justify-between">
6 + <span class="text_1">保险计划书申请</span>
7 + <img
8 + class="thumbnail_1"
9 + referrerpolicy="no-referrer"
10 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng43284a8c3fc98c60509d6d415fed8113414c4c0b072fa0f3b41fc26e76a03b15"
11 + />
12 + </div>
13 + <div class="box_2 flex-row justify-between">
14 + <span class="text_2">币种</span>
15 + <div class="text-wrapper_1 flex-col">
16 + <span class="text_3">美元保单</span>
17 + </div>
18 + </div>
19 + <div class="box_3 flex-row justify-between">
20 + <span class="text_4">计划</span>
21 + <div class="text-wrapper_2 flex-col">
22 + <span class="text_5">基础情景</span>
23 + </div>
24 + </div>
25 + <span class="text_6">附加计划</span> <span class="text_7">性别</span>
26 + <div class="box_4 flex-row">
27 + <img
28 + class="thumbnail_2"
29 + referrerpolicy="no-referrer"
30 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng1015590381802ed3f770814c3e05e4b73e6534f72e97a9a0721c459ed1dbac6a"
31 + />
32 + <span class="text_8">女</span>
33 + <div class="image-text_1 flex-row justify-between">
34 + <img
35 + class="thumbnail_3"
36 + referrerpolicy="no-referrer"
37 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb0bb17420dba3691281e919f69d1e06a69d343e53ee68ad570ec2fe340cdb09c"
38 + />
39 + <span class="text-group_1">男</span>
40 + </div>
41 + </div>
42 + <div class="box_5 flex-row justify-between">
43 + <span class="text_9">年龄</span>
44 + <div class="image-text_2 flex-row justify-between">
45 + <span class="text-group_2">30周岁</span>
46 + <img
47 + class="thumbnail_4"
48 + referrerpolicy="no-referrer"
49 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4f1ca24a37fc014649249f2a5db80cdec300bf86076429fb76cc42dff9b59f3d"
50 + />
51 + </div>
52 + </div>
53 + <div class="box_6 flex-row justify-between">
54 + <span class="text_10">保险期间</span>
55 + <div class="text-wrapper_3 flex-col">
56 + <span class="text_11">终身</span>
57 + </div>
58 + </div>
59 + <span class="text_12">交费期间</span>
60 + <div class="grid_1 flex-row">
61 + <div class="text-wrapper_4 flex-col">
62 + <span class="text_13">10年交</span>
63 + </div>
64 + <div class="text-wrapper_5 flex-col">
65 + <span class="text_14">3年交</span>
66 + </div>
67 + <div class="text-wrapper_6 flex-col">
68 + <span class="text_15">5年交</span>
69 + </div>
70 + <div class="text-wrapper_7 flex-col">
71 + <span class="text_16">躸交</span>
72 + </div>
73 + <div class="text-wrapper_8 flex-col">
74 + <span class="text_17">2年交</span>
75 + </div>
76 + </div>
77 + <span class="text_18">年交保费</span>
78 + <div class="text-wrapper_9 flex-row justify-between">
79 + <span class="text_19">100000</span> <span class="text_20">美元</span>
80 + </div>
81 + </div>
82 + <div class="section_2 flex-row justify-between">
83 + <div class="text-wrapper_10 flex-col">
84 + <span class="text_21">取消</span>
85 + </div>
86 + <div class="text-wrapper_11 flex-col">
87 + <span class="text_22">提交申请</span>
88 + </div>
89 + </div>
90 + </div>
91 + </div>
92 +</template>
93 +<script>
94 +export default {
95 + data() {
96 + return {
97 + constants: {},
98 + };
99 + },
100 + methods: {},
101 +};
102 +</script>
103 +<style src="./common.css" />
104 +<style src="./index.css" />