登陆页面样式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