登陆页面样式1200
Showing
31 changed files
with
464 additions
and
514 deletions
... | @@ -59,7 +59,8 @@ html { | ... | @@ -59,7 +59,8 @@ html { |
59 | word-spacing: 1px; | 59 | word-spacing: 1px; |
60 | word-break: break-word; | 60 | word-break: break-word; |
61 | text-rendering: optimizeLegibility; | 61 | text-rendering: optimizeLegibility; |
62 | color: #333; | 62 | // color: #333; |
63 | color: $cFontGray; | ||
63 | background-color: #ffffff; | 64 | background-color: #ffffff; |
64 | // -ms-text-size-adjust: 100%; | 65 | // -ms-text-size-adjust: 100%; |
65 | // -webkit-text-size-adjust: 100%; | 66 | // -webkit-text-size-adjust: 100%; | ... | ... |
src/assets/images/common/login-bg-bk.png
0 → 100644
192 KB
src/assets/images/home/footer-icon-1.png
0 → 100644
799 Bytes
src/assets/images/home/footer-icon-2.png
0 → 100644
408 Bytes
src/assets/images/home/footer-icon-3.png
0 → 100644
481 Bytes
3.36 KB
... | @@ -609,7 +609,7 @@ module.exports = { | ... | @@ -609,7 +609,7 @@ module.exports = { |
609 | m2: "登陸「微信」APP, 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼(放置二維碼)" | 609 | m2: "登陸「微信」APP, 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼(放置二維碼)" |
610 | }, | 610 | }, |
611 | qrcode: { | 611 | qrcode: { |
612 | title: "官方公眾號" | 612 | title: "社交媒體" |
613 | } | 613 | } |
614 | }, | 614 | }, |
615 | customService: { | 615 | customService: { | ... | ... |
... | @@ -103,8 +103,8 @@ module.exports = { | ... | @@ -103,8 +103,8 @@ module.exports = { |
103 | ] | 103 | ] |
104 | }, | 104 | }, |
105 | footer: { | 105 | footer: { |
106 | hkPhone: "客戶服務熱線(香港)", | 106 | hkPhone: "香港号码", |
107 | cnPhone: "客戶服務熱線(內地)", | 107 | cnPhone: "内地号码", |
108 | aboutUs: "關於我們", | 108 | aboutUs: "關於我們", |
109 | companyIntroduction: "公司介紹", | 109 | companyIntroduction: "公司介紹", |
110 | news: "新聞資訊", | 110 | news: "新聞資訊", |
... | @@ -607,7 +607,7 @@ module.exports = { | ... | @@ -607,7 +607,7 @@ module.exports = { |
607 | m2: "登陸「微信」APP, 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼(放置二維碼)" | 607 | m2: "登陸「微信」APP, 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼(放置二維碼)" |
608 | }, | 608 | }, |
609 | qrcode: { | 609 | qrcode: { |
610 | title: "官方公眾號" | 610 | title: "社交媒體" |
611 | } | 611 | } |
612 | }, | 612 | }, |
613 | customService: { | 613 | customService: { | ... | ... |
... | @@ -16,95 +16,95 @@ module.exports = { | ... | @@ -16,95 +16,95 @@ module.exports = { |
16 | name: "登陆", | 16 | name: "登陆", |
17 | path: "", | 17 | path: "", |
18 | list: [{ | 18 | list: [{ |
19 | name: "注册", | 19 | name: "注册", |
20 | path: "/register", | 20 | path: "/register", |
21 | type: "noAuth", | 21 | type: "noAuth", |
22 | value: "" | 22 | value: "" |
23 | }, { | 23 | }, { |
24 | name: "登陆", | 24 | name: "登陆", |
25 | path: "/login", | 25 | path: "/login", |
26 | type: "noAuth", | 26 | type: "noAuth", |
27 | value: "" | 27 | value: "" |
28 | }, | 28 | }, |
29 | { | 29 | { |
30 | name: "修改密码", | 30 | name: "修改密码", |
31 | path: "/password/reset", | 31 | path: "/password/reset", |
32 | type: "auth", | 32 | type: "auth", |
33 | value: "" | 33 | value: "" |
34 | }, | 34 | }, |
35 | { | 35 | { |
36 | name: "登出", | 36 | name: "登出", |
37 | path: "", | 37 | path: "", |
38 | type: "auth", | 38 | type: "auth", |
39 | value: "logout" | 39 | value: "logout" |
40 | } | 40 | } |
41 | ] | 41 | ] |
42 | }, | 42 | }, |
43 | navList: [{ | 43 | navList: [{ |
44 | name: "产品介绍", | 44 | name: "产品介绍", |
45 | path: "/product", | 45 | path: "/product", |
46 | list: [] | 46 | list: [] |
47 | }, | ||
48 | { | ||
49 | name: "客户服务", | ||
50 | path: "/custom/product", | ||
51 | list: [{ | ||
52 | name: "联系我们", | ||
53 | path: "/custom/service?q=m1" | ||
54 | }, | ||
55 | { | ||
56 | name: "缴付保费", | ||
57 | path: "/custom/service?q=m2" | ||
58 | }, | ||
59 | { | ||
60 | name: "保单查询", | ||
61 | path: "/custom/service?q=m3" | ||
62 | }, | ||
63 | { | ||
64 | name: "保单变更", | ||
65 | path: "/custom/service?q=m41" | ||
66 | }, | ||
67 | { | ||
68 | name: "理赔申请", | ||
69 | path: "/custom/service?q=m5" | ||
70 | }, | ||
71 | { | ||
72 | name: "预约服务", | ||
73 | path: "/custom/service?q=m6" | ||
74 | }, | 47 | }, |
75 | { | 48 | { |
76 | name: "投诉受理", | 49 | name: "客户服务", |
77 | path: "/custom/service?q=m7" | 50 | path: "/custom/product", |
51 | list: [{ | ||
52 | name: "联系我们", | ||
53 | path: "/custom/service?q=m1" | ||
54 | }, | ||
55 | { | ||
56 | name: "缴付保费", | ||
57 | path: "/custom/service?q=m2" | ||
58 | }, | ||
59 | { | ||
60 | name: "保单查询", | ||
61 | path: "/custom/service?q=m3" | ||
62 | }, | ||
63 | { | ||
64 | name: "保单变更", | ||
65 | path: "/custom/service?q=m41" | ||
66 | }, | ||
67 | { | ||
68 | name: "理赔申请", | ||
69 | path: "/custom/service?q=m5" | ||
70 | }, | ||
71 | { | ||
72 | name: "预约服务", | ||
73 | path: "/custom/service?q=m6" | ||
74 | }, | ||
75 | { | ||
76 | name: "投诉受理", | ||
77 | path: "/custom/service?q=m7" | ||
78 | }, | ||
79 | { | ||
80 | name: "常用表格", | ||
81 | path: "/custom/service?q=m8" | ||
82 | }, | ||
83 | ] | ||
78 | }, | 84 | }, |
79 | { | 85 | { |
80 | name: "常用表格", | 86 | name: "新闻资讯", |
81 | path: "/custom/service?q=m8" | 87 | path: "/news/list", |
82 | }, | 88 | list: [] |
83 | ] | ||
84 | }, | ||
85 | { | ||
86 | name: "新闻资讯", | ||
87 | path: "/news/list", | ||
88 | list: [] | ||
89 | }, | ||
90 | { | ||
91 | name: "关于平安人寿", | ||
92 | path: "", | ||
93 | list: [{ | ||
94 | name: "公司简介", | ||
95 | path: "/profile" | ||
96 | }, | 89 | }, |
97 | { | 90 | { |
98 | name: "领导人概况", | 91 | name: "关于平安人寿", |
99 | path: "" | 92 | path: "", |
93 | list: [{ | ||
94 | name: "公司简介", | ||
95 | path: "/profile" | ||
96 | }, | ||
97 | { | ||
98 | name: "领导人概况", | ||
99 | path: "" | ||
100 | }, | ||
101 | ] | ||
100 | }, | 102 | }, |
101 | ] | ||
102 | }, | ||
103 | ] | 103 | ] |
104 | }, | 104 | }, |
105 | footer: { | 105 | footer: { |
106 | hkPhone: "客户服务热线(香港)", | 106 | hkPhone: "香港号码", |
107 | cnPhone: "客户服务热线(内地)", | 107 | cnPhone: "内地号码", |
108 | aboutUs: "关于我们", | 108 | aboutUs: "关于我们", |
109 | companyIntroduction: "公司介绍", | 109 | companyIntroduction: "公司介绍", |
110 | news: "新闻资讯", | 110 | news: "新闻资讯", |
... | @@ -380,72 +380,72 @@ module.exports = { | ... | @@ -380,72 +380,72 @@ module.exports = { |
380 | head4: "附件", | 380 | head4: "附件", |
381 | download: "下载文档", | 381 | download: "下载文档", |
382 | form: [{ | 382 | form: [{ |
383 | type: "缴费类", | 383 | type: "缴费类", |
384 | list: [{ | 384 | list: [{ |
385 | name: "「电子入账服务」及银行户口<br>直接付款授权申请", | 385 | name: "「电子入账服务」及银行户口<br>直接付款授权申请", |
386 | desc: "申请设立「电子入账服务」及银行户口<br>直接付款授权时须提供", | 386 | desc: "申请设立「电子入账服务」及银行户口<br>直接付款授权时须提供", |
387 | download: "", | 387 | download: "", |
388 | }, | ||
389 | { | ||
390 | name: "信用卡户口直接付款授权书", | ||
391 | desc: "申请信用卡户口直接付款授权时须提供", | ||
392 | download: "", | ||
393 | } | ||
394 | ] | ||
388 | }, | 395 | }, |
389 | { | 396 | { |
390 | name: "信用卡户口直接付款授权书", | 397 | type: "保单变更类", |
391 | desc: "申请信用卡户口直接付款授权时须提供", | 398 | list: [{ |
392 | download: "", | 399 | name: "保险合同解除申请书", |
393 | } | 400 | desc: "退保、犹豫期退保业务适用", |
394 | ] | 401 | download: "", |
395 | }, | 402 | }, |
396 | { | 403 | { |
397 | type: "保单变更类", | 404 | name: "保险合同变更申请书(保单贷款还款类)", |
398 | list: [{ | 405 | desc: "保单贷款、还款业务适用", |
399 | name: "保险合同解除申请书", | 406 | download: "", |
400 | desc: "退保、犹豫期退保业务适用", | 407 | }, |
401 | download: "", | 408 | { |
402 | }, | 409 | name: "保险合同变更申请书(保险合同计划变更类)", |
403 | { | 410 | desc: "加保、减保、新增附险、复效等业务适用", |
404 | name: "保险合同变更申请书(保单贷款还款类)", | 411 | download: "", |
405 | desc: "保单贷款、还款业务适用", | 412 | }, |
406 | download: "", | 413 | { |
407 | }, | 414 | name: "保险合同变更申请书(客户信息变更类)", |
408 | { | 415 | desc: "基本信息变更业务适用", |
409 | name: "保险合同变更申请书(保险合同计划变更类)", | 416 | download: "", |
410 | desc: "加保、减保、新增附险、复效等业务适用", | 417 | }, |
411 | download: "", | 418 | { |
412 | }, | 419 | name: "保险合同变更申请书(客户权益变更类)", |
413 | { | 420 | desc: "交费方式、自垫选择权变更、补发等业务适用", |
414 | name: "保险合同变更申请书(客户信息变更类)", | 421 | download: "", |
415 | desc: "基本信息变更业务适用", | 422 | }, |
416 | download: "", | 423 | { |
417 | }, | 424 | name: "授权委托书", |
418 | { | 425 | desc: "委托他人代办时须提供", |
419 | name: "保险合同变更申请书(客户权益变更类)", | 426 | download: "", |
420 | desc: "交费方式、自垫选择权变更、补发等业务适用", | 427 | }, |
421 | download: "", | 428 | { |
422 | }, | 429 | name: "税收声明", |
423 | { | 430 | desc: "CRS要求", |
424 | name: "授权委托书", | 431 | download: "", |
425 | desc: "委托他人代办时须提供", | 432 | }, |
426 | download: "", | 433 | { |
434 | name: "健康告知", | ||
435 | desc: "须二次核保的业务须提供", | ||
436 | download: "", | ||
437 | } | ||
438 | |||
439 | ] | ||
427 | }, | 440 | }, |
428 | { | 441 | { |
429 | name: "税收声明", | 442 | type: "理赔类", |
430 | desc: "CRS要求", | 443 | list: [{ |
431 | download: "", | 444 | name: "理赔申请书", |
445 | desc: "纸质申请的应备文件", | ||
446 | download: "", | ||
447 | }] | ||
432 | }, | 448 | }, |
433 | { | ||
434 | name: "健康告知", | ||
435 | desc: "须二次核保的业务须提供", | ||
436 | download: "", | ||
437 | } | ||
438 | |||
439 | ] | ||
440 | }, | ||
441 | { | ||
442 | type: "理赔类", | ||
443 | list: [{ | ||
444 | name: "理赔申请书", | ||
445 | desc: "纸质申请的应备文件", | ||
446 | download: "", | ||
447 | }] | ||
448 | }, | ||
449 | ] | 449 | ] |
450 | }, | 450 | }, |
451 | policyChangeGuide: { | 451 | policyChangeGuide: { |
... | @@ -457,100 +457,100 @@ module.exports = { | ... | @@ -457,100 +457,100 @@ module.exports = { |
457 | head5: "应备材料", | 457 | head5: "应备材料", |
458 | download: "下载文档", | 458 | download: "下载文档", |
459 | form: [{ | 459 | form: [{ |
460 | project: "退保", | 460 | project: "退保", |
461 | content: "在犹豫期后解除合同,公司将退还保单现金价值或未满期净保费。(待产品精算确认)", | 461 | content: "在犹豫期后解除合同,公司将退还保单现金价值或未满期净保费。(待产品精算确认)", |
462 | applicant: "投保人", | 462 | applicant: "投保人", |
463 | receptionTime: "保单效力终止前", | 463 | receptionTime: "保单效力终止前", |
464 | materialList: [{ | 464 | materialList: [{ |
465 | name: "保险单", | 465 | name: "保险单", |
466 | }, | ||
467 | { | ||
468 | name: "申请书", | ||
469 | type: 1, | ||
470 | }, | ||
471 | { | ||
472 | name: "投保人有效身份证件", | ||
473 | }, | ||
474 | { | ||
475 | name: "存折银行卡相关", | ||
476 | } | ||
477 | ], | ||
466 | }, | 478 | }, |
467 | { | 479 | { |
468 | name: "申请书", | 480 | project: "犹豫期退保", |
469 | type: 1, | 481 | content: "在犹豫期内提出解除合同,公司会无息退还全部保费", |
482 | applicant: "投保人", | ||
483 | receptionTime: "犹豫期结束前", | ||
484 | materialList: [{ | ||
485 | name: "保险单", | ||
486 | }, | ||
487 | { | ||
488 | name: "申请书", | ||
489 | type: 1, | ||
490 | }, | ||
491 | { | ||
492 | name: "投保人有效身份证件", | ||
493 | }, | ||
494 | { | ||
495 | name: "存折银行卡相关", | ||
496 | }, | ||
497 | { | ||
498 | name: "首期保费发票", | ||
499 | } | ||
500 | ], | ||
470 | }, | 501 | }, |
471 | { | 502 | { |
472 | name: "投保人有效身份证件", | 503 | project: "客户资料变更", |
504 | projectType: 1, | ||
505 | path: "/custom/service", | ||
506 | query: { | ||
507 | q: "m42" | ||
508 | }, | ||
509 | content: "投保人、受保人、受益人的个人信息变更", | ||
510 | applicant: "投保人", | ||
511 | receptionTime: "不限", | ||
512 | materialList: [{ | ||
513 | name: "申请书", | ||
514 | type: 1, | ||
515 | }, | ||
516 | { | ||
517 | name: "必要的证明材料", | ||
518 | } | ||
519 | ], | ||
473 | }, | 520 | }, |
474 | { | 521 | { |
475 | name: "存折银行卡相关", | 522 | project: "联系信息变更", |
476 | } | 523 | projectType: 1, |
477 | ], | 524 | path: "/custom/service", |
478 | }, | 525 | query: { |
479 | { | 526 | q: "m43" |
480 | project: "犹豫期退保", | 527 | }, |
481 | content: "在犹豫期内提出解除合同,公司会无息退还全部保费", | 528 | content: "地址、电话等信息的变更", |
482 | applicant: "投保人", | 529 | applicant: "投保人", |
483 | receptionTime: "犹豫期结束前", | 530 | receptionTime: "不限", |
484 | materialList: [{ | 531 | materialList: [{ |
485 | name: "保险单", | 532 | name: "申请书", |
486 | }, | 533 | type: 1, |
487 | { | 534 | }, |
488 | name: "申请书", | 535 | { |
489 | type: 1, | 536 | name: "投保人有效身份证件", |
537 | } | ||
538 | ], | ||
490 | }, | 539 | }, |
491 | { | 540 | { |
492 | name: "投保人有效身份证件", | 541 | project: "交费方式变更", |
542 | content: "更改保单的续期交费方式或交费账号", | ||
543 | applicant: "投保人", | ||
544 | receptionTime: "保单交费期满前", | ||
545 | materialList: [{ | ||
546 | name: "申请书", | ||
547 | type: 1, | ||
548 | }, | ||
549 | { | ||
550 | name: "保险单", | ||
551 | } | ||
552 | ], | ||
493 | }, | 553 | }, |
494 | { | ||
495 | name: "存折银行卡相关", | ||
496 | }, | ||
497 | { | ||
498 | name: "首期保费发票", | ||
499 | } | ||
500 | ], | ||
501 | }, | ||
502 | { | ||
503 | project: "客户资料变更", | ||
504 | projectType: 1, | ||
505 | path: "/custom/service", | ||
506 | query: { | ||
507 | q: "m42" | ||
508 | }, | ||
509 | content: "投保人、受保人、受益人的个人信息变更", | ||
510 | applicant: "投保人", | ||
511 | receptionTime: "不限", | ||
512 | materialList: [{ | ||
513 | name: "申请书", | ||
514 | type: 1, | ||
515 | }, | ||
516 | { | ||
517 | name: "必要的证明材料", | ||
518 | } | ||
519 | ], | ||
520 | }, | ||
521 | { | ||
522 | project: "联系信息变更", | ||
523 | projectType: 1, | ||
524 | path: "/custom/service", | ||
525 | query: { | ||
526 | q: "m43" | ||
527 | }, | ||
528 | content: "地址、电话等信息的变更", | ||
529 | applicant: "投保人", | ||
530 | receptionTime: "不限", | ||
531 | materialList: [{ | ||
532 | name: "申请书", | ||
533 | type: 1, | ||
534 | }, | ||
535 | { | ||
536 | name: "投保人有效身份证件", | ||
537 | } | ||
538 | ], | ||
539 | }, | ||
540 | { | ||
541 | project: "交费方式变更", | ||
542 | content: "更改保单的续期交费方式或交费账号", | ||
543 | applicant: "投保人", | ||
544 | receptionTime: "保单交费期满前", | ||
545 | materialList: [{ | ||
546 | name: "申请书", | ||
547 | type: 1, | ||
548 | }, | ||
549 | { | ||
550 | name: "保险单", | ||
551 | } | ||
552 | ], | ||
553 | }, | ||
554 | ] | 554 | ] |
555 | }, | 555 | }, |
556 | policyChangeContact: { | 556 | policyChangeContact: { |
... | @@ -608,7 +608,7 @@ module.exports = { | ... | @@ -608,7 +608,7 @@ module.exports = { |
608 | m2: "登陆「微信」APP, 按右上角的「+」按钮並选择「扫一扫」扫描下方二维码(放置二维码)" | 608 | m2: "登陆「微信」APP, 按右上角的「+」按钮並选择「扫一扫」扫描下方二维码(放置二维码)" |
609 | }, | 609 | }, |
610 | qrcode: { | 610 | qrcode: { |
611 | title: "官方公众号" | 611 | title: "社交媒体" |
612 | } | 612 | } |
613 | }, | 613 | }, |
614 | customService: { | 614 | customService: { | ... | ... |
... | @@ -2,9 +2,10 @@ | ... | @@ -2,9 +2,10 @@ |
2 | 2 | ||
3 | .drop-list { | 3 | .drop-list { |
4 | display: inline-block; | 4 | display: inline-block; |
5 | min-width: 6.25rem; | 5 | min-width: 8rem; |
6 | position: relative; | 6 | position: relative; |
7 | margin: 0 1rem; | 7 | margin: 0 1rem; |
8 | font-size: $fontSize; | ||
8 | 9 | ||
9 | .list { | 10 | .list { |
10 | position: absolute; | 11 | position: absolute; |
... | @@ -42,7 +43,7 @@ | ... | @@ -42,7 +43,7 @@ |
42 | } | 43 | } |
43 | 44 | ||
44 | li:hover { | 45 | li:hover { |
45 | color: #ec6429; | 46 | color: $cOrange; |
46 | } | 47 | } |
47 | } | 48 | } |
48 | } | 49 | } |
... | @@ -50,8 +51,8 @@ | ... | @@ -50,8 +51,8 @@ |
50 | .user { | 51 | .user { |
51 | width: 7.333333rem; | 52 | width: 7.333333rem; |
52 | height: 2.25rem; | 53 | height: 2.25rem; |
53 | background-color: #f05a23; | 54 | background-color: $cOrange; |
54 | border-radius: 1.333333rem; | 55 | border-radius: 2.25rem; |
55 | display: flex; | 56 | display: flex; |
56 | align-items: center; | 57 | align-items: center; |
57 | justify-content: center; | 58 | justify-content: center; | ... | ... |
... | @@ -4,17 +4,16 @@ | ... | @@ -4,17 +4,16 @@ |
4 | font-family: MicrosoftYaHei; | 4 | font-family: MicrosoftYaHei; |
5 | color: #ffffff; | 5 | color: #ffffff; |
6 | background-color: #2e2b2a; | 6 | background-color: #2e2b2a; |
7 | font-size: $fontSizeSmall; | 7 | font-size: $fontSize; |
8 | 8 | ||
9 | .footer-containter { | 9 | .footer-containter { |
10 | margin: 0 auto; | 10 | margin: 0 auto; |
11 | // max-width: 1200px; | 11 | width: 1200px; |
12 | 12 | ||
13 | .cont { | 13 | .cont { |
14 | margin-left: 3.166667rem; | ||
15 | 14 | ||
16 | .logo-wrap { | 15 | .logo-wrap { |
17 | padding: 1.75rem 0; | 16 | padding: 2.166667rem 0; |
18 | 17 | ||
19 | .logo-img { | 18 | .logo-img { |
20 | cursor: pointer; | 19 | cursor: pointer; |
... | @@ -30,12 +29,12 @@ | ... | @@ -30,12 +29,12 @@ |
30 | 29 | ||
31 | // 信息 | 30 | // 信息 |
32 | .info { | 31 | .info { |
33 | padding: 1.25rem 0 1.5rem; | 32 | padding: 2rem 0 2rem; |
34 | display: flex; | 33 | display: flex; |
35 | 34 | ||
36 | // 热线 | 35 | // 热线 |
37 | .hotline { | 36 | .hotline { |
38 | min-width: 280px; | 37 | min-width: 24.5rem; |
39 | 38 | ||
40 | .contact { | 39 | .contact { |
41 | .n-item { | 40 | .n-item { |
... | @@ -43,7 +42,7 @@ | ... | @@ -43,7 +42,7 @@ |
43 | } | 42 | } |
44 | 43 | ||
45 | .phone { | 44 | .phone { |
46 | color: #ea5a26; | 45 | color: $cOrange; |
47 | font-size: $fontSizeTitle; | 46 | font-size: $fontSizeTitle; |
48 | font-weight: bold; | 47 | font-weight: bold; |
49 | } | 48 | } |
... | @@ -57,38 +56,36 @@ | ... | @@ -57,38 +56,36 @@ |
57 | 56 | ||
58 | // 导航 | 57 | // 导航 |
59 | .nav { | 58 | .nav { |
60 | flex: 1; | 59 | // flex: 1; |
61 | display: flex; | 60 | display: flex; |
62 | 61 | ||
63 | .nav-v { | 62 | .nav-v { |
64 | // margin: 0 5.2rem; | ||
65 | } | 63 | } |
66 | 64 | ||
67 | .n-item { | 65 | .n-item { |
68 | cursor: pointer; | 66 | cursor: pointer; |
69 | min-width: 14rem; | 67 | min-width: 14.75rem; |
70 | } | 68 | } |
71 | } | 69 | } |
72 | 70 | ||
73 | .public { | 71 | .public { |
74 | width: 6.25rem; | 72 | text-align: left; |
75 | text-align: center; | 73 | margin-left: 5.32rem; |
76 | margin-right: 3rem; | ||
77 | 74 | ||
78 | .qrcode { | 75 | .qrcode { |
79 | margin-top: .75rem; | 76 | margin-top: .75rem; |
77 | margin-right: 1rem; | ||
78 | display: inline-block; | ||
80 | } | 79 | } |
81 | |||
82 | } | 80 | } |
83 | 81 | ||
84 | // 公共组件 | 82 | // 公共组件 |
85 | .n-item { | 83 | .n-item { |
86 | margin-bottom: 1.416667rem; | 84 | margin-bottom: 2rem; |
87 | color: rgba(179, 177, 168, 0.5); | 85 | color: #dcdddd; |
88 | 86 | ||
89 | &:first-child { | 87 | &:first-child { |
90 | color: #ffffff; | 88 | margin-bottom: 2.666667rem; |
91 | margin-bottom: 2rem; | ||
92 | } | 89 | } |
93 | 90 | ||
94 | &:last-child { | 91 | &:last-child { |
... | @@ -102,6 +99,7 @@ | ... | @@ -102,6 +99,7 @@ |
102 | color: rgba(179, 177, 168, 0.5); | 99 | color: rgba(179, 177, 168, 0.5); |
103 | padding: 1.5rem 0; | 100 | padding: 1.5rem 0; |
104 | line-height: 1.58; | 101 | line-height: 1.58; |
102 | font-size: $fontSizeSmall; | ||
105 | } | 103 | } |
106 | } | 104 | } |
107 | 105 | ||
... | @@ -125,7 +123,7 @@ | ... | @@ -125,7 +123,7 @@ |
125 | width: 100%; | 123 | width: 100%; |
126 | } | 124 | } |
127 | 125 | ||
128 | .n-item{ | 126 | .n-item { |
129 | min-width: 0; | 127 | min-width: 0; |
130 | } | 128 | } |
131 | } | 129 | } | ... | ... |
1 | 1 | ||
2 | <template> | 2 | <template> |
3 | <footer class="v-footer "> | 3 | <footer class="v-footer "> |
4 | <div class="content footer-containter "> | 4 | <div class="footer-containter "> |
5 | <div class="cont"> | 5 | <div class="cont"> |
6 | <div class="logo-wrap"> | 6 | <div class="logo-wrap"> |
7 | <img class="logo-img" src="@/assets/images/home/footer-logo.png" alt="中国平安人寿保险"> | 7 | <img class="logo-img" src="@/assets/images/home/footer-logo.png" alt="中国平安人寿保险"> |
... | @@ -41,7 +41,10 @@ | ... | @@ -41,7 +41,10 @@ |
41 | </div> | 41 | </div> |
42 | <div class="public"> | 42 | <div class="public"> |
43 | <div class="tit">{{$t('footer.qrcode')}}</div> | 43 | <div class="tit">{{$t('footer.qrcode')}}</div> |
44 | <img class="qrcode" src="@/assets/images/home/qrcode-focus.png" alt=""> | 44 | <!-- <img class="qrcode" src="@/assets/images/home/qrcode-focus.png" alt=""> --> |
45 | <img class="qrcode" src="@/assets/images/home/footer-icon-1.png" alt=""> | ||
46 | <img class="qrcode" src="@/assets/images/home/footer-icon-2.png" alt=""> | ||
47 | <img class="qrcode" src="@/assets/images/home/footer-icon-3.png" alt=""> | ||
45 | </div> | 48 | </div> |
46 | 49 | ||
47 | </div> | 50 | </div> | ... | ... |
1 | @import '@/styles/_support'; | ||
2 | |||
1 | .v-header { | 3 | .v-header { |
2 | // font-family: SourceHanSansCN; | 4 | height: 7.666667rem; |
3 | height: 5.833333rem; | ||
4 | background-color: #fff; | 5 | background-color: #fff; |
5 | color: #4c4948; | 6 | color: $cFontGray; |
6 | position: relative; | 7 | position: relative; |
7 | z-index: 11; | 8 | z-index: 11; |
9 | font-size: $fontSize; | ||
8 | 10 | ||
9 | .header-container { | 11 | .header-container { |
10 | max-width: 950px; | 12 | max-width: 1200px; |
11 | // max-width: 1024px; | ||
12 | height: 100%; | 13 | height: 100%; |
13 | margin: auto; | 14 | margin: auto; |
14 | display: flex; | 15 | display: flex; |
... | @@ -39,8 +40,6 @@ | ... | @@ -39,8 +40,6 @@ |
39 | align-items: center; | 40 | align-items: center; |
40 | height: 100%; | 41 | height: 100%; |
41 | margin: 0; | 42 | margin: 0; |
42 | font-size: 1rem; | ||
43 | // padding: 0 4.166667rem; | ||
44 | -ms-flex-pack: center; | 43 | -ms-flex-pack: center; |
45 | justify-content: center; | 44 | justify-content: center; |
46 | position: relative; | 45 | position: relative; |
... | @@ -68,7 +67,7 @@ | ... | @@ -68,7 +67,7 @@ |
68 | .user { | 67 | .user { |
69 | width: 7.333333rem; | 68 | width: 7.333333rem; |
70 | height: 2.25rem; | 69 | height: 2.25rem; |
71 | background-color: #f05a23; | 70 | background-color: $cOrange; |
72 | border-radius: 1.333333rem; | 71 | border-radius: 1.333333rem; |
73 | display: flex; | 72 | display: flex; |
74 | align-items: center; | 73 | align-items: center; |
... | @@ -81,7 +80,7 @@ | ... | @@ -81,7 +80,7 @@ |
81 | } | 80 | } |
82 | 81 | ||
83 | .lang { | 82 | .lang { |
84 | color: #f05a23; | 83 | color: $cOrange; |
85 | 84 | ||
86 | } | 85 | } |
87 | } | 86 | } | ... | ... |
... | @@ -19,8 +19,10 @@ | ... | @@ -19,8 +19,10 @@ |
19 | .modal { | 19 | .modal { |
20 | position: relative; | 20 | position: relative; |
21 | @extend .bb; | 21 | @extend .bb; |
22 | width: 36rem; | 22 | width: 46.25rem; |
23 | min-height: 22.5rem; | 23 | height: 28.5rem; |
24 | // width: 36rem; | ||
25 | // min-height: 22.5rem; | ||
24 | border-radius: 1.25rem; | 26 | border-radius: 1.25rem; |
25 | background-color: #ffffff; | 27 | background-color: #ffffff; |
26 | padding: 4.5rem 2rem 2.5rem; | 28 | padding: 4.5rem 2rem 2.5rem; |
... | @@ -28,17 +30,19 @@ | ... | @@ -28,17 +30,19 @@ |
28 | &-title { | 30 | &-title { |
29 | margin-bottom: 3rem; | 31 | margin-bottom: 3rem; |
30 | color: $cOrange; | 32 | color: $cOrange; |
31 | font-size: 24px; | 33 | font-size: $fontSizeTitle; |
32 | font-weight: bold; | 34 | font-weight: bold; |
33 | } | 35 | } |
34 | 36 | ||
35 | &-icon-wrap { | 37 | &-icon-wrap { |
36 | @extend .fcc; | 38 | @extend .fcc; |
39 | height: 12rem; | ||
37 | } | 40 | } |
38 | 41 | ||
39 | &-content { | 42 | &-content { |
43 | margin-top: 1rem; | ||
40 | color: $cOrange; | 44 | color: $cOrange; |
41 | font-size: 18px; | 45 | font-size: $fontSizeTitle; |
42 | font-weight: bold; | 46 | font-weight: bold; |
43 | } | 47 | } |
44 | 48 | ||
... | @@ -48,7 +52,7 @@ | ... | @@ -48,7 +52,7 @@ |
48 | 52 | ||
49 | .btn { | 53 | .btn { |
50 | @include btc2(12rem, 3.6rem, 16px); | 54 | @include btc2(12rem, 3.6rem, 16px); |
51 | margin: 2rem 1rem 0; | 55 | margin: 3rem 1rem 0; |
52 | @extend .pointer; | 56 | @extend .pointer; |
53 | } | 57 | } |
54 | } | 58 | } | ... | ... |
... | @@ -2,11 +2,14 @@ | ... | @@ -2,11 +2,14 @@ |
2 | 2 | ||
3 | .content { | 3 | .content { |
4 | position: relative; | 4 | position: relative; |
5 | padding-bottom: 2.25rem; | 5 | min-height: 50rem; |
6 | padding-bottom: $marginMedium; | ||
7 | color: $cFontGray; | ||
8 | font-size: $fontSize; | ||
6 | } | 9 | } |
7 | 10 | ||
8 | .top-space { | 11 | .top-space { |
9 | height: 2.25rem; | 12 | height: $marginMedium; |
10 | } | 13 | } |
11 | 14 | ||
12 | .box { | 15 | .box { |
... | @@ -16,12 +19,9 @@ | ... | @@ -16,12 +19,9 @@ |
16 | .ebg { | 19 | .ebg { |
17 | position: absolute; | 20 | position: absolute; |
18 | bottom: 0; | 21 | bottom: 0; |
19 | left: 0; | 22 | left: 50%; |
20 | right: 0; | 23 | margin-left: -960px; |
21 | 24 | width: 1920px; | |
22 | img { | ||
23 | max-width: 100%; | ||
24 | } | ||
25 | } | 25 | } |
26 | 26 | ||
27 | .step { | 27 | .step { |
... | @@ -30,16 +30,14 @@ | ... | @@ -30,16 +30,14 @@ |
30 | } | 30 | } |
31 | 31 | ||
32 | .login { | 32 | .login { |
33 | color: #4c4948; | 33 | color: $cFontGray; |
34 | @extend .bb; | 34 | @extend .bb; |
35 | padding: 1.416667rem 6rem 2.25rem; | 35 | padding: 2.75rem 6.25rem 3.75rem; |
36 | border-bottom: solid .666667rem #006441; | 36 | border-bottom: solid 0.9rem $cGreen; |
37 | 37 | ||
38 | margin: auto; | 38 | margin: auto; |
39 | max-width: 40.25rem; | 39 | max-width: 51rem; |
40 | // height: 49.25rem; | 40 | border-radius: $borderRadius; |
41 | |||
42 | border-radius: .75rem; | ||
43 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); | 41 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); |
44 | background-color: #ffffff; | 42 | background-color: #ffffff; |
45 | 43 | ||
... | @@ -106,14 +104,8 @@ | ... | @@ -106,14 +104,8 @@ |
106 | } | 104 | } |
107 | 105 | ||
108 | &-submit { | 106 | &-submit { |
109 | @include btc2(13.2rem, 4rem, 16px); | 107 | @include btc2(17.25rem, 5.25rem, 16px); |
110 | // margin: 2rem 1rem 0; | ||
111 | letter-spacing: 1.6px; | 108 | letter-spacing: 1.6px; |
112 | // position: absolute; | ||
113 | // left: 0; | ||
114 | // right: 0; | ||
115 | // margin: 0 auto; | ||
116 | // bottom: 2.25rem; | ||
117 | } | 109 | } |
118 | 110 | ||
119 | &-func { | 111 | &-func { |
... | @@ -166,6 +158,7 @@ | ... | @@ -166,6 +158,7 @@ |
166 | } | 158 | } |
167 | 159 | ||
168 | .ipt-wrap { | 160 | .ipt-wrap { |
161 | position: relative; | ||
169 | display: flex; | 162 | display: flex; |
170 | justify-content: space-between; | 163 | justify-content: space-between; |
171 | 164 | ||
... | @@ -173,12 +166,13 @@ | ... | @@ -173,12 +166,13 @@ |
173 | .ipt { | 166 | .ipt { |
174 | @extend .bb; | 167 | @extend .bb; |
175 | width: 100%; | 168 | width: 100%; |
176 | height: 3.5rem; | 169 | height: 4.5rem; |
170 | border-radius: 4.5rem; | ||
177 | border: solid 1px #dcdddd; | 171 | border: solid 1px #dcdddd; |
178 | background-color: #ffffff; | 172 | background-color: #ffffff; |
179 | border-radius: 3.5rem; | 173 | padding: 0 2rem; |
180 | padding: 0 1.75rem; | ||
181 | flex: 1; | 174 | flex: 1; |
175 | letter-spacing: .1rem; | ||
182 | } | 176 | } |
183 | 177 | ||
184 | // 长文本 | 178 | // 长文本 |
... | @@ -189,13 +183,8 @@ | ... | @@ -189,13 +183,8 @@ |
189 | 183 | ||
190 | .down-arrow { | 184 | .down-arrow { |
191 | position: absolute; | 185 | position: absolute; |
192 | top: 1.6rem; | 186 | top: 2.2rem; |
193 | right: 2rem; | 187 | right: 2rem; |
194 | background-image: url('~@/assets/images/reservation/re-down-arrow.png'); | ||
195 | width: 1rem; | ||
196 | height: .666667rem; | ||
197 | pointer-events: none; | ||
198 | cursor: default; | ||
199 | } | 188 | } |
200 | 189 | ||
201 | 190 | ||
... | @@ -208,29 +197,23 @@ | ... | @@ -208,29 +197,23 @@ |
208 | background-color: #f2f2f2; | 197 | background-color: #f2f2f2; |
209 | flex: none; | 198 | flex: none; |
210 | margin-left: 1.5rem; | 199 | margin-left: 1.5rem; |
211 | color: #4c4948; | 200 | color: $cFontGray; |
212 | } | 201 | } |
213 | 202 | ||
203 | |||
214 | // 框内按钮 | 204 | // 框内按钮 |
215 | .ipt2 { | 205 | .ipt2 { |
216 | display: flex; | 206 | display: flex; |
217 | justify-content: space-between; | 207 | justify-content: space-between; |
218 | align-items: center; | 208 | align-items: center; |
219 | 209 | ||
220 | .ipt-tel { | ||
221 | flex: 1; | ||
222 | padding-left: 1.75rem; | ||
223 | } | ||
224 | |||
225 | .ipt-code { | 210 | .ipt-code { |
226 | flex: 1; | 211 | flex: 1; |
227 | padding-right: 1.75rem; | 212 | padding-right: 1.75rem; |
228 | } | 213 | } |
229 | 214 | ||
230 | .region-tel {} | ||
231 | |||
232 | .veri-btn { | 215 | .veri-btn { |
233 | color: #f05a23; | 216 | color: $cOrange; |
234 | text-decoration: underline; | 217 | text-decoration: underline; |
235 | } | 218 | } |
236 | 219 | ||
... | @@ -238,7 +221,6 @@ | ... | @@ -238,7 +221,6 @@ |
238 | color: #aaaaaa; | 221 | color: #aaaaaa; |
239 | } | 222 | } |
240 | } | 223 | } |
241 | |||
242 | } | 224 | } |
243 | 225 | ||
244 | .validator { | 226 | .validator { | ... | ... |
1 | 1 | ||
2 | 2 | ||
3 | <template> | 3 | <template> |
4 | <div class="content"> | 4 | <div class="content"> |
... | @@ -31,7 +31,7 @@ | ... | @@ -31,7 +31,7 @@ |
31 | </div> | 31 | </div> |
32 | <div class="ipt-wrap"> | 32 | <div class="ipt-wrap"> |
33 | <div class="down-arrow"></div> | 33 | <div class="down-arrow"></div> |
34 | <select class="ipt" :class="{err : errorTips.e2.length > 0}" v-model="information.sex"> | 34 | <select class="ipt" :class="{err : errorTips.e2.length > 0}" v-model="information.sex"> |
35 | <template v-if="sexCandidates"> | 35 | <template v-if="sexCandidates"> |
36 | <option v-for="(item,index) in sexCandidates" :key="index" :value="item.value">{{item.name}}</option> | 36 | <option v-for="(item,index) in sexCandidates" :key="index" :value="item.value">{{item.name}}</option> |
37 | </template> | 37 | </template> |
... | @@ -50,7 +50,7 @@ | ... | @@ -50,7 +50,7 @@ |
50 | <input class="ipt" type="date" :class="{err : errorTips.e3.length > 0}" v-model="birthDate"> | 50 | <input class="ipt" type="date" :class="{err : errorTips.e3.length > 0}" v-model="birthDate"> |
51 | </div> | 51 | </div> |
52 | <div class="validator" v-if="errorTips.e3.length > 0 "> | 52 | <div class="validator" v-if="errorTips.e3.length > 0 "> |
53 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e3}} | 53 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e3}} |
54 | </div> | 54 | </div> |
55 | </div> | 55 | </div> |
56 | 56 | ||
... | @@ -60,14 +60,14 @@ | ... | @@ -60,14 +60,14 @@ |
60 | </div> | 60 | </div> |
61 | <div class="ipt-wrap"> | 61 | <div class="ipt-wrap"> |
62 | <div class="down-arrow"></div> | 62 | <div class="down-arrow"></div> |
63 | <select class="ipt" :class="{err : errorTips.e4.length > 0}" v-model="information.idType"> | 63 | <select class="ipt" :class="{err : errorTips.e4.length > 0}" v-model="information.idType"> |
64 | <template v-if="idTypeCandidates"> | 64 | <template v-if="idTypeCandidates"> |
65 | <option v-for="(item,index) in idTypeCandidates" :key="index" :value="item.value">{{item.name}}</option> | 65 | <option v-for="(item,index) in idTypeCandidates" :key="index" :value="item.value">{{item.name}}</option> |
66 | </template> | 66 | </template> |
67 | </select> | 67 | </select> |
68 | </div> | 68 | </div> |
69 | <div class="validator" v-if="errorTips.e4.length > 0 "> | 69 | <div class="validator" v-if="errorTips.e4.length > 0 "> |
70 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e4}} | 70 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e4}} |
71 | </div> | 71 | </div> |
72 | </div> | 72 | </div> |
73 | 73 | ||
... | @@ -76,10 +76,10 @@ | ... | @@ -76,10 +76,10 @@ |
76 | <img src="@/assets/images/improve-infomation/icon-improve-infomation-card.png"> {{$t('infomationImprove.t5')}} | 76 | <img src="@/assets/images/improve-infomation/icon-improve-infomation-card.png"> {{$t('infomationImprove.t5')}} |
77 | </div> | 77 | </div> |
78 | <div class="ipt-wrap"> | 78 | <div class="ipt-wrap"> |
79 | <input class="ipt" type="text" :class="{err : errorTips.e5.length > 0}" v-model="information.idNo"> | 79 | <input class="ipt" type="text" :class="{err : errorTips.e5.length > 0}" v-model="information.idNo"> |
80 | </div> | 80 | </div> |
81 | <div class="validator" v-if="errorTips.e5.length > 0 "> | 81 | <div class="validator" v-if="errorTips.e5.length > 0 "> |
82 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e5}} | 82 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e5}} |
83 | </div> | 83 | </div> |
84 | </div> | 84 | </div> |
85 | 85 | ... | ... |
... | @@ -3,11 +3,13 @@ | ... | @@ -3,11 +3,13 @@ |
3 | .content { | 3 | .content { |
4 | position: relative; | 4 | position: relative; |
5 | min-height: 50rem; | 5 | min-height: 50rem; |
6 | padding-bottom: 2.25rem; | 6 | padding-bottom: $marginMedium; |
7 | color: $cFontGray; | ||
8 | font-size: $fontSize; | ||
7 | } | 9 | } |
8 | 10 | ||
9 | .top-space { | 11 | .top-space { |
10 | height: 2.25rem; | 12 | height: $marginMedium; |
11 | } | 13 | } |
12 | 14 | ||
13 | .box { | 15 | .box { |
... | @@ -17,38 +19,34 @@ | ... | @@ -17,38 +19,34 @@ |
17 | .ebg { | 19 | .ebg { |
18 | position: absolute; | 20 | position: absolute; |
19 | bottom: 0; | 21 | bottom: 0; |
20 | left: 0; | 22 | left: 50%; |
21 | right: 0; | 23 | margin-left: -960px; |
22 | 24 | width: 1920px; | |
23 | img { | ||
24 | max-width: 100%; | ||
25 | } | ||
26 | } | 25 | } |
27 | 26 | ||
28 | .login { | 27 | .login { |
29 | color: #4c4948; | 28 | color: $cFontGray; |
30 | @extend .bb; | 29 | @extend .bb; |
31 | padding: 2rem 5rem 3.5rem; | 30 | padding: 2.75rem 6.25rem 4.5rem; |
32 | border-bottom: solid .666667rem #006441; | 31 | border-bottom: solid 0.9rem $cGreen; |
33 | 32 | ||
34 | margin: auto; | 33 | margin: auto; |
35 | max-width: 40.25rem; | 34 | max-width: 51rem; |
36 | border-radius: .75rem; | 35 | border-radius: $borderRadius; |
37 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); | 36 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); |
38 | background-color: #ffffff; | 37 | background-color: #ffffff; |
39 | 38 | ||
40 | &-tit { | 39 | &-tit { |
41 | // font-family: MicrosoftYaHei; | 40 | color: $cOrange; |
42 | color: #f05a23; | ||
43 | text-align: center; | 41 | text-align: center; |
44 | font-size: 18px; | 42 | font-size: $fontSizeTitle; |
45 | font-weight: bold; | 43 | font-weight: bold; |
46 | letter-spacing: .2rem; | 44 | letter-spacing: .2rem; |
47 | display: flex; | 45 | display: flex; |
48 | justify-content: center; | 46 | justify-content: center; |
49 | 47 | ||
50 | img{ | 48 | img { |
51 | height: 1.416667rem; /* 17/12 */ | 49 | height: 1.75rem; |
52 | } | 50 | } |
53 | 51 | ||
54 | .img-en { | 52 | .img-en { |
... | @@ -57,35 +55,32 @@ | ... | @@ -57,35 +55,32 @@ |
57 | } | 55 | } |
58 | 56 | ||
59 | &-nav { | 57 | &-nav { |
60 | margin: 2.25rem 0 auto; | 58 | margin: 2.75rem auto 1rem; |
61 | display: flex; | 59 | display: flex; |
62 | justify-content: center; | 60 | justify-content: center; |
63 | align-items: center; | 61 | align-items: center; |
64 | 62 | ||
65 | &-v-line { | 63 | &-v-line { |
66 | width: .2rem; | 64 | width: 2px; |
67 | height: 1.25rem; | 65 | height: 1.2rem; |
68 | background-color: #4c4948; | 66 | background-color: $cFontGray; |
69 | margin: 0 2.25rem; | 67 | margin: 0 2.25rem; |
70 | } | 68 | } |
71 | 69 | ||
72 | &-tit { | 70 | &-tit { |
73 | // font-family: MicrosoftYaHei; | ||
74 | flex: 1; | 71 | flex: 1; |
75 | font-size: 18px; | 72 | font-size: $fontSizeTitle; |
76 | font-weight: bold; | 73 | font-weight: bold; |
77 | color: #4c4948; | ||
78 | // text-shadow: 3px 5.2px 9px rgba(76, 73, 72, 0.27); | ||
79 | } | 74 | } |
80 | 75 | ||
81 | .active { | 76 | .active { |
82 | color: #f05a23; | 77 | color: $cOrange; |
83 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); | 78 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); |
84 | } | 79 | } |
85 | } | 80 | } |
86 | 81 | ||
87 | &-protocol { | 82 | &-protocol { |
88 | margin: 2.5rem auto 0; | 83 | margin: 3rem auto 0; |
89 | display: flex; | 84 | display: flex; |
90 | align-items: center; | 85 | align-items: center; |
91 | padding-left: 1rem; | 86 | padding-left: 1rem; |
... | @@ -96,23 +91,23 @@ | ... | @@ -96,23 +91,23 @@ |
96 | } | 91 | } |
97 | 92 | ||
98 | .protocol { | 93 | .protocol { |
99 | color: #f05a23; | 94 | color: $cOrange; |
100 | } | 95 | } |
101 | } | 96 | } |
102 | 97 | ||
103 | &-submit { | 98 | &-submit { |
104 | @include btc2(13.5rem, 4rem, 16px); | 99 | @include btc2(17.25rem, 5.25rem, 16px); |
105 | margin: 3.25rem auto 0; | 100 | margin: 4rem auto 0; |
106 | letter-spacing: 1.6px; | 101 | letter-spacing: 1.6px; |
107 | } | 102 | } |
108 | 103 | ||
109 | &-func { | 104 | &-func { |
110 | margin: 1.5rem auto 0; | 105 | margin: 2rem auto 0; |
111 | display: flex; | 106 | display: flex; |
112 | justify-content: center; | 107 | justify-content: center; |
113 | 108 | ||
114 | &-btn { | 109 | &-btn { |
115 | margin: 0 1.25rem; | 110 | margin: 0 1.5rem; |
116 | text-decoration: underline; | 111 | text-decoration: underline; |
117 | } | 112 | } |
118 | } | 113 | } |
... | @@ -128,6 +123,7 @@ | ... | @@ -128,6 +123,7 @@ |
128 | background-color: transparent !important; | 123 | background-color: transparent !important; |
129 | padding: 0 !important; | 124 | padding: 0 !important; |
130 | overflow: hidden; | 125 | overflow: hidden; |
126 | |||
131 | img { | 127 | img { |
132 | width: 100%; | 128 | width: 100%; |
133 | height: 100%; | 129 | height: 100%; |
... | @@ -136,14 +132,12 @@ | ... | @@ -136,14 +132,12 @@ |
136 | 132 | ||
137 | &-item { | 133 | &-item { |
138 | position: relative; | 134 | position: relative; |
139 | // margin-top: 2.75rem; | 135 | margin-top: 3.25rem; |
140 | margin-top: 2.5rem; | ||
141 | 136 | ||
142 | .label { | 137 | .label { |
143 | // font-family: MicrosoftYaHei; | 138 | font-size: $fontSizeTitle; |
144 | font-size: 18px; | ||
145 | font-weight: bold; | 139 | font-weight: bold; |
146 | color: #f05a23; | 140 | color: $cOrange; |
147 | display: flex; | 141 | display: flex; |
148 | align-items: center; | 142 | align-items: center; |
149 | margin-bottom: 1.25rem; | 143 | margin-bottom: 1.25rem; |
... | @@ -163,14 +157,13 @@ | ... | @@ -163,14 +157,13 @@ |
163 | .ipt { | 157 | .ipt { |
164 | @extend .bb; | 158 | @extend .bb; |
165 | width: 100%; | 159 | width: 100%; |
166 | height: 3.5rem; | 160 | height: 4.5rem; |
161 | border-radius: 4.5rem; | ||
167 | border: solid 1px #dcdddd; | 162 | border: solid 1px #dcdddd; |
168 | background-color: #ffffff; | 163 | background-color: #ffffff; |
169 | border-radius: 3.5rem; | 164 | padding: 0 2rem; |
170 | padding: 0 1.75rem; | ||
171 | flex: 1; | 165 | flex: 1; |
172 | font-size: 1.166667rem; /* 14/12 */ | 166 | letter-spacing: .1rem; |
173 | letter-spacing: .1rem;/* 1.2/12 */ | ||
174 | } | 167 | } |
175 | 168 | ||
176 | // 长文本 | 169 | // 长文本 |
... | @@ -181,7 +174,7 @@ | ... | @@ -181,7 +174,7 @@ |
181 | 174 | ||
182 | .down-arrow { | 175 | .down-arrow { |
183 | position: absolute; | 176 | position: absolute; |
184 | top: 1.6rem; | 177 | top: 2.2rem; |
185 | right: 2rem; | 178 | right: 2rem; |
186 | } | 179 | } |
187 | 180 | ||
... | @@ -195,7 +188,7 @@ | ... | @@ -195,7 +188,7 @@ |
195 | background-color: #f2f2f2; | 188 | background-color: #f2f2f2; |
196 | flex: none; | 189 | flex: none; |
197 | margin-left: 1.5rem; | 190 | margin-left: 1.5rem; |
198 | color: #4c4948; | 191 | color: $cFontGray; |
199 | } | 192 | } |
200 | 193 | ||
201 | 194 | ||
... | @@ -211,7 +204,7 @@ | ... | @@ -211,7 +204,7 @@ |
211 | } | 204 | } |
212 | 205 | ||
213 | .veri-btn { | 206 | .veri-btn { |
214 | color: #f05a23; | 207 | color: $cOrange; |
215 | text-decoration: underline; | 208 | text-decoration: underline; |
216 | } | 209 | } |
217 | 210 | ... | ... |
... | @@ -16,7 +16,7 @@ | ... | @@ -16,7 +16,7 @@ |
16 | </div> | 16 | </div> |
17 | <div class="login-nav"> | 17 | <div class="login-nav"> |
18 | <div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer active">{{$t('login.loginType1')}}</div> | 18 | <div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer active">{{$t('login.loginType1')}}</div> |
19 | <div class="login-nav-v-line">|</div> | 19 | <div class="login-nav-v-line"></div> |
20 | <div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer">{{$t('login.loginType2')}}</div> | 20 | <div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer">{{$t('login.loginType2')}}</div> |
21 | </div> | 21 | </div> |
22 | <div class="gird-g form"> | 22 | <div class="gird-g form"> |
... | @@ -54,10 +54,9 @@ | ... | @@ -54,10 +54,9 @@ |
54 | </div> | 54 | </div> |
55 | </div> | 55 | </div> |
56 | </div> | 56 | </div> |
57 | <div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol" > | 57 | <div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol"> |
58 | <img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png"> | 58 | <img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png"> |
59 | <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> | 59 | <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}} |
60 | {{$t('login.agree')}} | ||
61 | <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span> | 60 | <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span> |
62 | </div> | 61 | </div> |
63 | <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div> | 62 | <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div> |
... | @@ -76,7 +75,7 @@ | ... | @@ -76,7 +75,7 @@ |
76 | </div> | 75 | </div> |
77 | <div class="login-nav"> | 76 | <div class="login-nav"> |
78 | <div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer"> {{$t('login.loginType1')}}</div> | 77 | <div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer"> {{$t('login.loginType1')}}</div> |
79 | <div class="login-nav-v-line">|</div> | 78 | <div class="login-nav-v-line"></div> |
80 | <div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer active"> {{$t('login.loginType2')}}</div> | 79 | <div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer active"> {{$t('login.loginType2')}}</div> |
81 | </div> | 80 | </div> |
82 | <div class="gird-g form"> | 81 | <div class="gird-g form"> |
... | @@ -93,7 +92,7 @@ | ... | @@ -93,7 +92,7 @@ |
93 | </div> | 92 | </div> |
94 | <div class="pure-u-1 form-item" v-if="type == 2 && loginCheck.showImageCode"> | 93 | <div class="pure-u-1 form-item" v-if="type == 2 && loginCheck.showImageCode"> |
95 | <div class="ipt-wrap"> | 94 | <div class="ipt-wrap"> |
96 | <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{ err : errorTips.oe3.length > 0 }" type="text" v-model="loginForm.imageValue"> | 95 | <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{ err : errorTips.oe3.length > 0 }" type="text" v-model="loginForm.imageValue"> |
97 | <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue"> | 96 | <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue"> |
98 | <img :src="values.imageBase64"> | 97 | <img :src="values.imageBase64"> |
99 | </div> | 98 | </div> |
... | @@ -109,7 +108,7 @@ | ... | @@ -109,7 +108,7 @@ |
109 | <div class="ipt-wrap"> | 108 | <div class="ipt-wrap"> |
110 | <div class="ipt ipt2" :class="{ err : errorTips.oe2.length > 0 }"> | 109 | <div class="ipt ipt2" :class="{ err : errorTips.oe2.length > 0 }"> |
111 | <input :placeholder="$t('login.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="loginForm.otp"> | 110 | <input :placeholder="$t('login.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="loginForm.otp"> |
112 | <div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP" >{{$t('register.verifyCodeGet')}}</div> | 111 | <div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP">{{$t('register.verifyCodeGet')}}</div> |
113 | <div v-else class="veri-btn-default">{{times.tip}}</div> | 112 | <div v-else class="veri-btn-default">{{times.tip}}</div> |
114 | </div> | 113 | </div> |
115 | </div> | 114 | </div> |
... | @@ -118,10 +117,9 @@ | ... | @@ -118,10 +117,9 @@ |
118 | </div> | 117 | </div> |
119 | </div> | 118 | </div> |
120 | </div> | 119 | </div> |
121 | <div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol" > | 120 | <div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol"> |
122 | <img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png"> | 121 | <img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png"> |
123 | <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> | 122 | <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}} |
124 | {{$t('login.agree')}} | ||
125 | <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span> | 123 | <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span> |
126 | </div> | 124 | </div> |
127 | <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div> | 125 | <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div> | ... | ... |
... | @@ -3,10 +3,14 @@ | ... | @@ -3,10 +3,14 @@ |
3 | .content { | 3 | .content { |
4 | position: relative; | 4 | position: relative; |
5 | padding-bottom: 2.25rem; | 5 | padding-bottom: 2.25rem; |
6 | position: relative; | ||
7 | padding-bottom: $paddingMedium; | ||
8 | color: $cFontGray; | ||
9 | font-size: $fontSize; | ||
6 | } | 10 | } |
7 | 11 | ||
8 | .top-space { | 12 | .top-space { |
9 | height: 2.25rem; | 13 | height: $marginMedium; |
10 | } | 14 | } |
11 | 15 | ||
12 | .box { | 16 | .box { |
... | @@ -16,12 +20,9 @@ | ... | @@ -16,12 +20,9 @@ |
16 | .ebg { | 20 | .ebg { |
17 | position: absolute; | 21 | position: absolute; |
18 | bottom: 0; | 22 | bottom: 0; |
19 | left: 0; | 23 | left: 50%; |
20 | right: 0; | 24 | margin-left: -960px; |
21 | 25 | width: 1920px; | |
22 | img { | ||
23 | max-width: 100%; | ||
24 | } | ||
25 | } | 26 | } |
26 | 27 | ||
27 | .step { | 28 | .step { |
... | @@ -30,23 +31,21 @@ | ... | @@ -30,23 +31,21 @@ |
30 | } | 31 | } |
31 | 32 | ||
32 | .login { | 33 | .login { |
33 | color: #4c4948; | ||
34 | @extend .bb; | 34 | @extend .bb; |
35 | padding: 1.416667rem 5rem 0; | 35 | padding: 2rem 6.25rem 4.5rem; |
36 | border-bottom: solid .666667rem #006441; | 36 | border-bottom: solid 0.9rem $cGreen; |
37 | height: 38rem; | ||
37 | 38 | ||
38 | margin: auto; | 39 | margin: auto; |
39 | max-width: 40.25rem; | 40 | max-width: 51rem; |
40 | height: 31rem; | 41 | border-radius: $borderRadius; |
41 | |||
42 | border-radius: .75rem; | ||
43 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); | 42 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); |
44 | background-color: #ffffff; | 43 | background-color: #ffffff; |
45 | 44 | ||
46 | &-tit { | 45 | &-tit { |
47 | color: #f05a23; | 46 | color: $cOrange; |
48 | text-align: center; | 47 | text-align: center; |
49 | font-size: 18px; | 48 | font-size: $fontSizeTitle; |
50 | font-weight: bold; | 49 | font-weight: bold; |
51 | letter-spacing: .2rem; | 50 | letter-spacing: .2rem; |
52 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); | 51 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); |
... | @@ -69,19 +68,19 @@ | ... | @@ -69,19 +68,19 @@ |
69 | &-v-line { | 68 | &-v-line { |
70 | width: .2rem; | 69 | width: .2rem; |
71 | height: 1.25rem; | 70 | height: 1.25rem; |
72 | background-color: #4c4948; | 71 | background-color: $cFontGray; |
73 | margin: 0 2.25rem; | 72 | margin: 0 2.25rem; |
74 | } | 73 | } |
75 | 74 | ||
76 | &-tit { | 75 | &-tit { |
77 | flex: 1; | 76 | flex: 1; |
78 | font-size: 18px; | 77 | font-size: $fontSizeTitle; |
79 | font-weight: bold; | 78 | font-weight: bold; |
80 | color: #4c4948; | 79 | color: $cFontGray; |
81 | } | 80 | } |
82 | 81 | ||
83 | .active { | 82 | .active { |
84 | color: #f05a23; | 83 | color: $cOrange; |
85 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); | 84 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); |
86 | } | 85 | } |
87 | } | 86 | } |
... | @@ -98,19 +97,19 @@ | ... | @@ -98,19 +97,19 @@ |
98 | } | 97 | } |
99 | 98 | ||
100 | .protocol { | 99 | .protocol { |
101 | color: #f05a23; | 100 | color: $cOrange; |
102 | } | 101 | } |
103 | } | 102 | } |
104 | 103 | ||
105 | &-submit { | 104 | &-submit { |
106 | @include btc2(13.5rem, 4rem, 16px); | 105 | @include btc2(17.25rem, 5.25rem, 16px); |
107 | margin: 4.166667rem auto 0; | 106 | margin: 4.166667rem auto 0; |
108 | letter-spacing: 1.6px; | 107 | letter-spacing: 1.6px; |
109 | position: absolute; | 108 | position: absolute; |
110 | left: 0; | 109 | left: 0; |
111 | right: 0; | 110 | right: 0; |
112 | margin: 0 auto; | 111 | margin: 0 auto; |
113 | bottom: 2.25rem; | 112 | bottom: 3rem; |
114 | } | 113 | } |
115 | 114 | ||
116 | &-func { | 115 | &-func { |
... | @@ -148,12 +147,12 @@ | ... | @@ -148,12 +147,12 @@ |
148 | 147 | ||
149 | &-item { | 148 | &-item { |
150 | position: relative; | 149 | position: relative; |
151 | margin-bottom: 2.25rem; | 150 | margin-bottom: 3rem; |
152 | 151 | ||
153 | .label { | 152 | .label { |
154 | font-size: 18px; | 153 | font-size: $fontSizeTitle; |
155 | font-weight: bold; | 154 | font-weight: bold; |
156 | color: #f05a23; | 155 | color: $cOrange; |
157 | display: flex; | 156 | display: flex; |
158 | align-items: center; | 157 | align-items: center; |
159 | margin-bottom: 1.25rem; | 158 | margin-bottom: 1.25rem; |
... | @@ -173,12 +172,13 @@ | ... | @@ -173,12 +172,13 @@ |
173 | .ipt { | 172 | .ipt { |
174 | @extend .bb; | 173 | @extend .bb; |
175 | width: 100%; | 174 | width: 100%; |
176 | height: 3.5rem; | 175 | height: 4.5rem; |
176 | border-radius: 4.5rem; | ||
177 | border: solid 1px #dcdddd; | 177 | border: solid 1px #dcdddd; |
178 | background-color: #ffffff; | 178 | background-color: #ffffff; |
179 | border-radius: 3.5rem; | 179 | padding: 0 2rem; |
180 | padding: 0 1.75rem; | ||
181 | flex: 1; | 180 | flex: 1; |
181 | letter-spacing: .1rem; | ||
182 | } | 182 | } |
183 | 183 | ||
184 | // 长文本 | 184 | // 长文本 |
... | @@ -189,7 +189,7 @@ | ... | @@ -189,7 +189,7 @@ |
189 | 189 | ||
190 | .down-arrow { | 190 | .down-arrow { |
191 | position: absolute; | 191 | position: absolute; |
192 | top: 1.6rem; | 192 | top: 2.2rem; |
193 | right: 2rem; | 193 | right: 2rem; |
194 | } | 194 | } |
195 | 195 | ||
... | @@ -203,29 +203,23 @@ | ... | @@ -203,29 +203,23 @@ |
203 | background-color: #f2f2f2; | 203 | background-color: #f2f2f2; |
204 | flex: none; | 204 | flex: none; |
205 | margin-left: 1.5rem; | 205 | margin-left: 1.5rem; |
206 | color: #4c4948; | 206 | color: $cFontGray; |
207 | } | 207 | } |
208 | 208 | ||
209 | |||
209 | // 框内按钮 | 210 | // 框内按钮 |
210 | .ipt2 { | 211 | .ipt2 { |
211 | display: flex; | 212 | display: flex; |
212 | justify-content: space-between; | 213 | justify-content: space-between; |
213 | align-items: center; | 214 | align-items: center; |
214 | 215 | ||
215 | .ipt-tel { | ||
216 | flex: 1; | ||
217 | padding-left: 1.75rem; | ||
218 | } | ||
219 | |||
220 | .ipt-code { | 216 | .ipt-code { |
221 | flex: 1; | 217 | flex: 1; |
222 | padding-right: 1.75rem; | 218 | padding-right: 1.75rem; |
223 | } | 219 | } |
224 | 220 | ||
225 | .region-tel {} | ||
226 | |||
227 | .veri-btn { | 221 | .veri-btn { |
228 | color: #f05a23; | 222 | color: $cOrange; |
229 | text-decoration: underline; | 223 | text-decoration: underline; |
230 | } | 224 | } |
231 | 225 | ||
... | @@ -233,7 +227,6 @@ | ... | @@ -233,7 +227,6 @@ |
233 | color: #aaaaaa; | 227 | color: #aaaaaa; |
234 | } | 228 | } |
235 | } | 229 | } |
236 | |||
237 | } | 230 | } |
238 | 231 | ||
239 | .validator { | 232 | .validator { |
... | @@ -265,5 +258,5 @@ | ... | @@ -265,5 +258,5 @@ |
265 | .disable { | 258 | .disable { |
266 | background-color: #dcdddd !important; | 259 | background-color: #dcdddd !important; |
267 | // color: $cFontGray; | 260 | // color: $cFontGray; |
268 | color: #4c4948; | 261 | color: $cFontGray; |
269 | } | 262 | } | ... | ... |
... | @@ -3,7 +3,7 @@ | ... | @@ -3,7 +3,7 @@ |
3 | <div class="content"> | 3 | <div class="content"> |
4 | <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> | 4 | <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> |
5 | <div class="ebg"> | 5 | <div class="ebg"> |
6 | <img src="@/assets/images/password-reset/password-reset-bg.png"> | 6 | <img src="@/assets/images/common/login-bg.png"> |
7 | </div> | 7 | </div> |
8 | <div class="top-space"></div> | 8 | <div class="top-space"></div> |
9 | <div class="box"> | 9 | <div class="box"> | ... | ... |
... | @@ -14,7 +14,7 @@ export default { | ... | @@ -14,7 +14,7 @@ export default { |
14 | data() { | 14 | data() { |
15 | return { | 15 | return { |
16 | key: 'value', | 16 | key: 'value', |
17 | type: 4, // 1:输入用户信息 2:找回密码 3:核对信息 4.重置密码 | 17 | type: 1, // 1:输入用户信息 2:找回密码 3:核对信息 4.重置密码 |
18 | values: { | 18 | values: { |
19 | cid: "", | 19 | cid: "", |
20 | oldPwd: "", | 20 | oldPwd: "", | ... | ... |
... | @@ -3,10 +3,14 @@ | ... | @@ -3,10 +3,14 @@ |
3 | .content { | 3 | .content { |
4 | position: relative; | 4 | position: relative; |
5 | padding-bottom: 2.25rem; | 5 | padding-bottom: 2.25rem; |
6 | position: relative; | ||
7 | padding-bottom: $paddingMedium; | ||
8 | color: $cFontGray; | ||
9 | font-size: $fontSize; | ||
6 | } | 10 | } |
7 | 11 | ||
8 | .top-space { | 12 | .top-space { |
9 | height: 2.25rem; | 13 | height: $marginMedium; |
10 | } | 14 | } |
11 | 15 | ||
12 | .box { | 16 | .box { |
... | @@ -16,12 +20,9 @@ | ... | @@ -16,12 +20,9 @@ |
16 | .ebg { | 20 | .ebg { |
17 | position: absolute; | 21 | position: absolute; |
18 | bottom: 0; | 22 | bottom: 0; |
19 | left: 0; | 23 | left: 50%; |
20 | right: 0; | 24 | margin-left: -960px; |
21 | 25 | width: 1920px; | |
22 | img { | ||
23 | max-width: 100%; | ||
24 | } | ||
25 | } | 26 | } |
26 | 27 | ||
27 | .step { | 28 | .step { |
... | @@ -30,23 +31,21 @@ | ... | @@ -30,23 +31,21 @@ |
30 | } | 31 | } |
31 | 32 | ||
32 | .login { | 33 | .login { |
33 | color: #4c4948; | ||
34 | @extend .bb; | 34 | @extend .bb; |
35 | padding: 1.416667rem 5rem 0; | 35 | padding: 2rem 6.25rem 4.5rem; |
36 | border-bottom: solid .666667rem #006441; | 36 | border-bottom: solid 0.9rem $cGreen; |
37 | height: 48rem; | ||
37 | 38 | ||
38 | margin: auto; | 39 | margin: auto; |
39 | max-width: 40.25rem; | 40 | max-width: 51rem; |
40 | height: 41rem; | 41 | border-radius: $borderRadius; |
41 | |||
42 | border-radius: .75rem; | ||
43 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); | 42 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); |
44 | background-color: #ffffff; | 43 | background-color: #ffffff; |
45 | 44 | ||
46 | &-tit { | 45 | &-tit { |
47 | color: #f05a23; | 46 | color: $cOrange; |
48 | text-align: center; | 47 | text-align: center; |
49 | font-size: 18px; | 48 | font-size: $fontSizeTitle; |
50 | font-weight: bold; | 49 | font-weight: bold; |
51 | letter-spacing: .2rem; | 50 | letter-spacing: .2rem; |
52 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); | 51 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); |
... | @@ -69,19 +68,19 @@ | ... | @@ -69,19 +68,19 @@ |
69 | &-v-line { | 68 | &-v-line { |
70 | width: .2rem; | 69 | width: .2rem; |
71 | height: 1.25rem; | 70 | height: 1.25rem; |
72 | background-color: #4c4948; | 71 | background-color: $cFontGray; |
73 | margin: 0 2.25rem; | 72 | margin: 0 2.25rem; |
74 | } | 73 | } |
75 | 74 | ||
76 | &-tit { | 75 | &-tit { |
77 | flex: 1; | 76 | flex: 1; |
78 | font-size: 18px; | 77 | font-size: $fontSizeTitle; |
79 | font-weight: bold; | 78 | font-weight: bold; |
80 | color: #4c4948; | 79 | color: $cFontGray; |
81 | } | 80 | } |
82 | 81 | ||
83 | .active { | 82 | .active { |
84 | color: #f05a23; | 83 | color: $cOrange; |
85 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); | 84 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); |
86 | } | 85 | } |
87 | } | 86 | } |
... | @@ -98,19 +97,19 @@ | ... | @@ -98,19 +97,19 @@ |
98 | } | 97 | } |
99 | 98 | ||
100 | .protocol { | 99 | .protocol { |
101 | color: #f05a23; | 100 | color: $cOrange; |
102 | } | 101 | } |
103 | } | 102 | } |
104 | 103 | ||
105 | &-submit { | 104 | &-submit { |
106 | @include btc2(13.5rem, 4rem, 16px); | 105 | @include btc2(17.25rem, 5.25rem, 16px); |
107 | margin: 4.166667rem auto 0; | 106 | margin: 4.166667rem auto 0; |
108 | letter-spacing: 1.6px; | 107 | letter-spacing: 1.6px; |
109 | position: absolute; | 108 | position: absolute; |
110 | left: 0; | 109 | left: 0; |
111 | right: 0; | 110 | right: 0; |
112 | margin: 0 auto; | 111 | margin: 0 auto; |
113 | bottom: 2.25rem; | 112 | bottom: 3rem; |
114 | } | 113 | } |
115 | 114 | ||
116 | &-func { | 115 | &-func { |
... | @@ -148,12 +147,12 @@ | ... | @@ -148,12 +147,12 @@ |
148 | 147 | ||
149 | &-item { | 148 | &-item { |
150 | position: relative; | 149 | position: relative; |
151 | margin-bottom: 2.25rem; | 150 | margin-bottom: 3rem; |
152 | 151 | ||
153 | .label { | 152 | .label { |
154 | font-size: 18px; | 153 | font-size: $fontSizeTitle; |
155 | font-weight: bold; | 154 | font-weight: bold; |
156 | color: #f05a23; | 155 | color: $cOrange; |
157 | display: flex; | 156 | display: flex; |
158 | align-items: center; | 157 | align-items: center; |
159 | margin-bottom: 1.25rem; | 158 | margin-bottom: 1.25rem; |
... | @@ -173,12 +172,13 @@ | ... | @@ -173,12 +172,13 @@ |
173 | .ipt { | 172 | .ipt { |
174 | @extend .bb; | 173 | @extend .bb; |
175 | width: 100%; | 174 | width: 100%; |
176 | height: 3.5rem; | 175 | height: 4.5rem; |
176 | border-radius: 4.5rem; | ||
177 | border: solid 1px #dcdddd; | 177 | border: solid 1px #dcdddd; |
178 | background-color: #ffffff; | 178 | background-color: #ffffff; |
179 | border-radius: 3.5rem; | 179 | padding: 0 2rem; |
180 | padding: 0 1.75rem; | ||
181 | flex: 1; | 180 | flex: 1; |
181 | letter-spacing: .1rem; | ||
182 | } | 182 | } |
183 | 183 | ||
184 | // 长文本 | 184 | // 长文本 |
... | @@ -189,7 +189,7 @@ | ... | @@ -189,7 +189,7 @@ |
189 | 189 | ||
190 | .down-arrow { | 190 | .down-arrow { |
191 | position: absolute; | 191 | position: absolute; |
192 | top: 1.6rem; | 192 | top: 2.2rem; |
193 | right: 2rem; | 193 | right: 2rem; |
194 | } | 194 | } |
195 | 195 | ||
... | @@ -203,29 +203,23 @@ | ... | @@ -203,29 +203,23 @@ |
203 | background-color: #f2f2f2; | 203 | background-color: #f2f2f2; |
204 | flex: none; | 204 | flex: none; |
205 | margin-left: 1.5rem; | 205 | margin-left: 1.5rem; |
206 | color: #4c4948; | 206 | color: $cFontGray; |
207 | } | 207 | } |
208 | 208 | ||
209 | |||
209 | // 框内按钮 | 210 | // 框内按钮 |
210 | .ipt2 { | 211 | .ipt2 { |
211 | display: flex; | 212 | display: flex; |
212 | justify-content: space-between; | 213 | justify-content: space-between; |
213 | align-items: center; | 214 | align-items: center; |
214 | 215 | ||
215 | .ipt-tel { | ||
216 | flex: 1; | ||
217 | padding-left: 1.75rem; | ||
218 | } | ||
219 | |||
220 | .ipt-code { | 216 | .ipt-code { |
221 | flex: 1; | 217 | flex: 1; |
222 | padding-right: 1.75rem; | 218 | padding-right: 1.75rem; |
223 | } | 219 | } |
224 | 220 | ||
225 | .region-tel {} | ||
226 | |||
227 | .veri-btn { | 221 | .veri-btn { |
228 | color: #f05a23; | 222 | color: $cOrange; |
229 | text-decoration: underline; | 223 | text-decoration: underline; |
230 | } | 224 | } |
231 | 225 | ||
... | @@ -233,7 +227,6 @@ | ... | @@ -233,7 +227,6 @@ |
233 | color: #aaaaaa; | 227 | color: #aaaaaa; |
234 | } | 228 | } |
235 | } | 229 | } |
236 | |||
237 | } | 230 | } |
238 | 231 | ||
239 | .validator { | 232 | .validator { |
... | @@ -265,5 +258,5 @@ | ... | @@ -265,5 +258,5 @@ |
265 | .disable { | 258 | .disable { |
266 | background-color: #dcdddd !important; | 259 | background-color: #dcdddd !important; |
267 | // color: $cFontGray; | 260 | // color: $cFontGray; |
268 | color: #4c4948; | 261 | color: $cFontGray; |
269 | } | 262 | } | ... | ... |
... | @@ -3,7 +3,7 @@ | ... | @@ -3,7 +3,7 @@ |
3 | <div class="content"> | 3 | <div class="content"> |
4 | <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> | 4 | <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> |
5 | <div class="ebg"> | 5 | <div class="ebg"> |
6 | <img src="@/assets/images/password-reset/password-reset-bg.png"> | 6 | <img src="@/assets/images/common/login-bg.png"> |
7 | </div> | 7 | </div> |
8 | <div class="top-space"></div> | 8 | <div class="top-space"></div> |
9 | <div class="box"> | 9 | <div class="box"> | ... | ... |
... | @@ -3,11 +3,13 @@ | ... | @@ -3,11 +3,13 @@ |
3 | .content { | 3 | .content { |
4 | position: relative; | 4 | position: relative; |
5 | min-height: 50rem; | 5 | min-height: 50rem; |
6 | padding-bottom: 2.25rem; | 6 | padding-bottom: $paddingMedium; |
7 | color: $cFontGray; | ||
8 | font-size: $fontSize; | ||
7 | } | 9 | } |
8 | 10 | ||
9 | .top-space { | 11 | .top-space { |
10 | height: 2.75rem; | 12 | height: $marginMedium; |
11 | } | 13 | } |
12 | 14 | ||
13 | .box { | 15 | .box { |
... | @@ -17,41 +19,39 @@ | ... | @@ -17,41 +19,39 @@ |
17 | .ebg { | 19 | .ebg { |
18 | position: absolute; | 20 | position: absolute; |
19 | bottom: 0; | 21 | bottom: 0; |
20 | left: 0; | 22 | left: 50%; |
21 | right: 0; | 23 | margin-left: -960px; |
22 | 24 | width: 1920px; | |
23 | img { | ||
24 | max-width: 100%; | ||
25 | } | ||
26 | } | 25 | } |
27 | 26 | ||
28 | .step { | 27 | .step { |
29 | @extend .fcc; | 28 | @extend .fcc; |
30 | margin-bottom: 3rem; | 29 | margin-bottom: 4.25rem; |
30 | |||
31 | img { | ||
32 | height: 4.25rem; | ||
33 | } | ||
31 | } | 34 | } |
32 | 35 | ||
33 | .login { | 36 | .login { |
34 | color: #4c4948; | 37 | |
35 | @extend .bb; | 38 | @extend .bb; |
36 | padding: 2.75rem 5rem 4.25rem; | 39 | padding: 2.75rem 6.25rem 4.5rem; |
37 | border-bottom: solid .666667rem #006441; | 40 | border-bottom: solid 0.9rem $cGreen; |
38 | 41 | ||
39 | margin: auto; | 42 | margin: auto; |
40 | max-width: 40.25rem; | 43 | max-width: 51rem; |
41 | border-radius: .75rem; | 44 | border-radius: $borderRadius; |
42 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); | 45 | box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); |
43 | background-color: #ffffff; | 46 | background-color: #ffffff; |
44 | 47 | ||
45 | &-tit { | 48 | &-tit { |
46 | // font-family: MicrosoftYaHei; | ||
47 | color: $cOrange; | 49 | color: $cOrange; |
48 | display: flex; | 50 | display: flex; |
49 | justify-content: center; | 51 | justify-content: center; |
50 | 52 | ||
51 | |||
52 | img { | 53 | img { |
53 | height: 1.416667rem; | 54 | height: 1.416667rem; |
54 | /* 17/12 */ | ||
55 | } | 55 | } |
56 | 56 | ||
57 | .img-en { | 57 | .img-en { |
... | @@ -62,7 +62,7 @@ | ... | @@ -62,7 +62,7 @@ |
62 | &-tit2 { | 62 | &-tit2 { |
63 | color: $cOrange; | 63 | color: $cOrange; |
64 | text-align: center; | 64 | text-align: center; |
65 | font-size: 18px; | 65 | font-size: $fontSizeTitle; |
66 | font-weight: bold; | 66 | font-weight: bold; |
67 | letter-spacing: .2rem; | 67 | letter-spacing: .2rem; |
68 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); | 68 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); |
... | @@ -71,35 +71,32 @@ | ... | @@ -71,35 +71,32 @@ |
71 | 71 | ||
72 | 72 | ||
73 | &-nav { | 73 | &-nav { |
74 | margin: 2.25rem 0 auto; | 74 | margin: 2.75rem auto 1rem; |
75 | display: flex; | 75 | display: flex; |
76 | justify-content: center; | 76 | justify-content: center; |
77 | align-items: center; | 77 | align-items: center; |
78 | 78 | ||
79 | &-v-line { | 79 | &-v-line { |
80 | width: .2rem; | 80 | width: 2px; |
81 | height: 1.25rem; | 81 | height: 1.2rem; |
82 | background-color: #4c4948; | 82 | background-color: $cFontGray; |
83 | margin: 0 2.25rem; | 83 | margin: 0 2.25rem; |
84 | } | 84 | } |
85 | 85 | ||
86 | &-tit { | 86 | &-tit { |
87 | // font-family: MicrosoftYaHei; | ||
88 | flex: 1; | 87 | flex: 1; |
89 | font-size: 18px; | 88 | font-size: $fontSizeTitle; |
90 | font-weight: bold; | 89 | font-weight: bold; |
91 | color: #4c4948; | ||
92 | // text-shadow: 3px 5.2px 9px rgba(76, 73, 72, 0.27); | ||
93 | } | 90 | } |
94 | 91 | ||
95 | .active { | 92 | .active { |
96 | color: #f05a23; | 93 | color: $cOrange; |
97 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); | 94 | text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27); |
98 | } | 95 | } |
99 | } | 96 | } |
100 | 97 | ||
101 | &-protocol { | 98 | &-protocol { |
102 | margin: 2.5rem auto 0; | 99 | margin: 3rem auto 0; |
103 | display: flex; | 100 | display: flex; |
104 | align-items: center; | 101 | align-items: center; |
105 | padding-left: 1rem; | 102 | padding-left: 1rem; |
... | @@ -110,23 +107,23 @@ | ... | @@ -110,23 +107,23 @@ |
110 | } | 107 | } |
111 | 108 | ||
112 | .protocol { | 109 | .protocol { |
113 | color: #f05a23; | 110 | color: $cOrange; |
114 | } | 111 | } |
115 | } | 112 | } |
116 | 113 | ||
117 | &-submit { | 114 | &-submit { |
118 | @include btc2(13.5rem, 4rem, 16px); | 115 | @include btc2(17.25rem, 5.25rem, 16px); |
119 | margin: 4.166667rem auto 0; | 116 | margin: 4.166667rem auto 0; |
120 | letter-spacing: 1.6px; | 117 | letter-spacing: 1.6px; |
121 | } | 118 | } |
122 | 119 | ||
123 | &-func { | 120 | &-func { |
124 | margin: 1.5rem auto 0; | 121 | margin: 2rem auto 0; |
125 | display: flex; | 122 | display: flex; |
126 | justify-content: center; | 123 | justify-content: center; |
127 | 124 | ||
128 | &-btn { | 125 | &-btn { |
129 | margin: 0 1.25rem; | 126 | margin: 0 1.5rem; |
130 | text-decoration: underline; | 127 | text-decoration: underline; |
131 | } | 128 | } |
132 | } | 129 | } |
... | @@ -149,21 +146,17 @@ | ... | @@ -149,21 +146,17 @@ |
149 | } | 146 | } |
150 | 147 | ||
151 | input { | 148 | input { |
152 | font-size: 1.166667rem; | ||
153 | /* 14/12 */ | ||
154 | letter-spacing: .1rem; | 149 | letter-spacing: .1rem; |
155 | /* 1.2/12 */ | ||
156 | } | 150 | } |
157 | 151 | ||
158 | &-item { | 152 | &-item { |
159 | position: relative; | 153 | position: relative; |
160 | margin-top: 3.75rem; | 154 | margin-top: 3.25rem; |
161 | 155 | ||
162 | .label { | 156 | .label { |
163 | // font-family: MicrosoftYaHei; | 157 | font-size: $fontSizeTitle; |
164 | font-size: 18px; | ||
165 | font-weight: bold; | 158 | font-weight: bold; |
166 | color: #f05a23; | 159 | color: $cOrange; |
167 | display: flex; | 160 | display: flex; |
168 | align-items: center; | 161 | align-items: center; |
169 | margin-bottom: 1.25rem; | 162 | margin-bottom: 1.25rem; |
... | @@ -183,12 +176,13 @@ | ... | @@ -183,12 +176,13 @@ |
183 | .ipt { | 176 | .ipt { |
184 | @extend .bb; | 177 | @extend .bb; |
185 | width: 100%; | 178 | width: 100%; |
186 | height: 3.5rem; | 179 | height: 4.5rem; |
180 | border-radius: 4.5rem; | ||
187 | border: solid 1px #dcdddd; | 181 | border: solid 1px #dcdddd; |
188 | background-color: #ffffff; | 182 | background-color: #ffffff; |
189 | border-radius: 3.5rem; | 183 | padding: 0 2rem; |
190 | padding: 0 1.75rem; | ||
191 | flex: 1; | 184 | flex: 1; |
185 | letter-spacing: .1rem; | ||
192 | } | 186 | } |
193 | 187 | ||
194 | // 长文本 | 188 | // 长文本 |
... | @@ -199,7 +193,7 @@ | ... | @@ -199,7 +193,7 @@ |
199 | 193 | ||
200 | .down-arrow { | 194 | .down-arrow { |
201 | position: absolute; | 195 | position: absolute; |
202 | top: 1.6rem; | 196 | top: 2.2rem; |
203 | right: 2rem; | 197 | right: 2rem; |
204 | } | 198 | } |
205 | 199 | ||
... | @@ -213,29 +207,23 @@ | ... | @@ -213,29 +207,23 @@ |
213 | background-color: #f2f2f2; | 207 | background-color: #f2f2f2; |
214 | flex: none; | 208 | flex: none; |
215 | margin-left: 1.5rem; | 209 | margin-left: 1.5rem; |
216 | color: #4c4948; | 210 | color: $cFontGray; |
217 | } | 211 | } |
218 | 212 | ||
213 | |||
219 | // 框内按钮 | 214 | // 框内按钮 |
220 | .ipt2 { | 215 | .ipt2 { |
221 | display: flex; | 216 | display: flex; |
222 | justify-content: space-between; | 217 | justify-content: space-between; |
223 | align-items: center; | 218 | align-items: center; |
224 | 219 | ||
225 | .ipt-tel { | ||
226 | flex: 1; | ||
227 | padding-left: 1.75rem; | ||
228 | } | ||
229 | |||
230 | .ipt-code { | 220 | .ipt-code { |
231 | flex: 1; | 221 | flex: 1; |
232 | padding-right: 1.75rem; | 222 | padding-right: 1.75rem; |
233 | } | 223 | } |
234 | 224 | ||
235 | .region-tel {} | ||
236 | |||
237 | .veri-btn { | 225 | .veri-btn { |
238 | color: #f05a23; | 226 | color: $cOrange; |
239 | text-decoration: underline; | 227 | text-decoration: underline; |
240 | } | 228 | } |
241 | 229 | ||
... | @@ -243,7 +231,6 @@ | ... | @@ -243,7 +231,6 @@ |
243 | color: #aaaaaa; | 231 | color: #aaaaaa; |
244 | } | 232 | } |
245 | } | 233 | } |
246 | |||
247 | } | 234 | } |
248 | 235 | ||
249 | .validator { | 236 | .validator { | ... | ... |
... | @@ -75,13 +75,12 @@ | ... | @@ -75,13 +75,12 @@ |
75 | </div> | 75 | </div> |
76 | <!-- 输入密码 --> | 76 | <!-- 输入密码 --> |
77 | <div v-if="type == 2" class="login"> | 77 | <div v-if="type == 2" class="login"> |
78 | |||
79 | <div class="login-tit"> | 78 | <div class="login-tit"> |
80 | <img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png"> | 79 | <img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png"> |
81 | <img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png"> | 80 | <img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png"> |
82 | <img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png"> | 81 | <img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png"> |
83 | </div> | 82 | </div> |
84 | <div class="login-tit">{{$t('register.title2')}}</div> | 83 | <div class="login-tit2">{{$t('register.title2')}}</div> |
85 | <div class="gird-g form"> | 84 | <div class="gird-g form"> |
86 | <div class="pure-u-1 form-item"> | 85 | <div class="pure-u-1 form-item"> |
87 | <div class="label"> | 86 | <div class="label"> |
... | @@ -108,7 +107,6 @@ | ... | @@ -108,7 +107,6 @@ |
108 | </div> | 107 | </div> |
109 | <div @click="onRegisterHandler()" class="login-submit pointer">{{$t('register.sure')}}</div> | 108 | <div @click="onRegisterHandler()" class="login-submit pointer">{{$t('register.sure')}}</div> |
110 | </div> | 109 | </div> |
111 | <!-- 输入密码 --> | ||
112 | </div> | 110 | </div> |
113 | </div> | 111 | </div> |
114 | </template> | 112 | </template> | ... | ... |
... | @@ -26,13 +26,12 @@ $fontSize:14px; | ... | @@ -26,13 +26,12 @@ $fontSize:14px; |
26 | $fontSizeSmall:12px; | 26 | $fontSizeSmall:12px; |
27 | 27 | ||
28 | // Color | 28 | // Color |
29 | $colorGray: #475669; | ||
30 | $cOrange:#f05a23; | 29 | $cOrange:#f05a23; |
30 | $cFontGray: #4c4948; | ||
31 | $cGreen:#006441; | 31 | $cGreen:#006441; |
32 | $cGray:#bfbfbf; | 32 | $cGray:#bfbfbf; |
33 | $cDark:#dcdcdc; | 33 | $cDark:#dcdcdc; |
34 | $cLightBlack:#333333; | 34 | $cLightBlack:#333333; |
35 | $cFontGray: #4c4948; | ||
36 | 35 | ||
37 | 36 | ||
38 | // 移动端 | 37 | // 移动端 | ... | ... |
-
Please register or sign in to post a comment