Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
bc6f2782 by simon
Options

登陆页面样式1200

1 parent 7d6affad
Inline Side-by-side
Showing 31 changed files with 464 additions and 514 deletions
......@@ -6,6 +6,7 @@ node_modules
.DS_Store
sync.sh
git.sh
/sandbox
# local env files
.env.local
......
......@@ -59,7 +59,8 @@ html {
word-spacing: 1px;
word-break: break-word;
text-rendering: optimizeLegibility;
color: #333;
// color: #333;
color: $cFontGray;
background-color: #ffffff;
// -ms-text-size-adjust: 100%;
// -webkit-text-size-adjust: 100%;
......

8.38 KB | W: | H:

13.7 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

192 KB | W: | H:

6.31 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

9.69 KB | W: | H:

4.34 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

4.97 KB | W: | H:

6.52 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -609,7 +609,7 @@ module.exports = {
m2: "登陸「微信」APP， 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼（放置二維碼）"
},
qrcode: {
title: "官方公眾號"
title: "社交媒體"
}
},
customService: {
......
......@@ -103,8 +103,8 @@ module.exports = {
]
},
footer: {
hkPhone: "客戶服務熱線（香港）",
cnPhone: "客戶服務熱線（內地）",
hkPhone: "香港号码",
cnPhone: "内地号码",
aboutUs: "關於我們",
companyIntroduction: "公司介紹",
news: "新聞資訊",
......@@ -607,7 +607,7 @@ module.exports = {
m2: "登陸「微信」APP， 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼（放置二維碼）"
},
qrcode: {
title: "官方公眾號"
title: "社交媒體"
}
},
customService: {
......
......@@ -16,95 +16,95 @@ module.exports = {
name: "登陆",
path: "",
list: [{
name: "注册",
path: "/register",
type: "noAuth",
value: ""
}, {
name: "登陆",
path: "/login",
type: "noAuth",
value: ""
},
{
name: "修改密码",
path: "/password/reset",
type: "auth",
value: ""
},
{
name: "登出",
path: "",
type: "auth",
value: "logout"
}
name: "注册",
path: "/register",
type: "noAuth",
value: ""
}, {
name: "登陆",
path: "/login",
type: "noAuth",
value: ""
},
{
name: "修改密码",
path: "/password/reset",
type: "auth",
value: ""
},
{
name: "登出",
path: "",
type: "auth",
value: "logout"
}
]
},
navList: [{
name: "产品介绍",
path: "/product",
list: []
},
{
name: "客户服务",
path: "/custom/product",
list: [{
name: "联系我们",
path: "/custom/service?q=m1"
},
{
name: "缴付保费",
path: "/custom/service?q=m2"
},
{
name: "保单查询",
path: "/custom/service?q=m3"
},
{
name: "保单变更",
path: "/custom/service?q=m41"
},
{
name: "理赔申请",
path: "/custom/service?q=m5"
},
{
name: "预约服务",
path: "/custom/service?q=m6"
name: "产品介绍",
path: "/product",
list: []
},
{
name: "投诉受理",
path: "/custom/service?q=m7"
name: "客户服务",
path: "/custom/product",
list: [{
name: "联系我们",
path: "/custom/service?q=m1"
},
{
name: "缴付保费",
path: "/custom/service?q=m2"
},
{
name: "保单查询",
path: "/custom/service?q=m3"
},
{
name: "保单变更",
path: "/custom/service?q=m41"
},
{
name: "理赔申请",
path: "/custom/service?q=m5"
},
{
name: "预约服务",
path: "/custom/service?q=m6"
},
{
name: "投诉受理",
path: "/custom/service?q=m7"
},
{
name: "常用表格",
path: "/custom/service?q=m8"
},
]
},
{
name: "常用表格",
path: "/custom/service?q=m8"
},
]
},
{
name: "新闻资讯",
path: "/news/list",
list: []
},
{
name: "关于平安人寿",
path: "",
list: [{
name: "公司简介",
path: "/profile"
name: "新闻资讯",
path: "/news/list",
list: []
},
{
name: "领导人概况",
path: ""
name: "关于平安人寿",
path: "",
list: [{
name: "公司简介",
path: "/profile"
},
{
name: "领导人概况",
path: ""
},
]
},
]
},
]
},
footer: {
hkPhone: "客户服务热线（香港）",
cnPhone: "客户服务热线（内地）",
hkPhone: "香港号码",
cnPhone: "内地号码",
aboutUs: "关于我们",
companyIntroduction: "公司介绍",
news: "新闻资讯",
......@@ -380,72 +380,72 @@ module.exports = {
head4: "附件",
download: "下载文档",
form: [{
type: "缴费类",
list: [{
name: "「电子入账服务」及银行户口<br>直接付款授权申请",
desc: "申请设立「电子入账服务」及银行户口<br>直接付款授权时须提供",
download: "",
type: "缴费类",
list: [{
name: "「电子入账服务」及银行户口<br>直接付款授权申请",
desc: "申请设立「电子入账服务」及银行户口<br>直接付款授权时须提供",
download: "",
},
{
name: "信用卡户口直接付款授权书",
desc: "申请信用卡户口直接付款授权时须提供",
download: "",
}
]
},
{
name: "信用卡户口直接付款授权书",
desc: "申请信用卡户口直接付款授权时须提供",
download: "",
}
]
},
{
type: "保单变更类",
list: [{
name: "保险合同解除申请书",
desc: "退保、犹豫期退保业务适用",
download: "",
},
{
name: "保险合同变更申请书（保单贷款还款类）",
desc: "保单贷款、还款业务适用",
download: "",
},
{
name: "保险合同变更申请书（保险合同计划变更类）",
desc: "加保、减保、新增附险、复效等业务适用",
download: "",
},
{
name: "保险合同变更申请书（客户信息变更类）",
desc: "基本信息变更业务适用",
download: "",
},
{
name: "保险合同变更申请书（客户权益变更类）",
desc: "交费方式、自垫选择权变更、补发等业务适用",
download: "",
},
{
name: "授权委托书",
desc: "委托他人代办时须提供",
download: "",
type: "保单变更类",
list: [{
name: "保险合同解除申请书",
desc: "退保、犹豫期退保业务适用",
download: "",
},
{
name: "保险合同变更申请书（保单贷款还款类）",
desc: "保单贷款、还款业务适用",
download: "",
},
{
name: "保险合同变更申请书（保险合同计划变更类）",
desc: "加保、减保、新增附险、复效等业务适用",
download: "",
},
{
name: "保险合同变更申请书（客户信息变更类）",
desc: "基本信息变更业务适用",
download: "",
},
{
name: "保险合同变更申请书（客户权益变更类）",
desc: "交费方式、自垫选择权变更、补发等业务适用",
download: "",
},
{
name: "授权委托书",
desc: "委托他人代办时须提供",
download: "",
},
{
name: "税收声明",
desc: "CRS要求",
download: "",
},
{
name: "健康告知",
desc: "须二次核保的业务须提供",
download: "",
}
]
},
{
name: "税收声明",
desc: "CRS要求",
download: "",
type: "理赔类",
list: [{
name: "理赔申请书",
desc: "纸质申请的应备文件",
download: "",
}]
},
{
name: "健康告知",
desc: "须二次核保的业务须提供",
download: "",
}
]
},
{
type: "理赔类",
list: [{
name: "理赔申请书",
desc: "纸质申请的应备文件",
download: "",
}]
},
]
},
policyChangeGuide: {
......@@ -457,100 +457,100 @@ module.exports = {
head5: "应备材料",
download: "下载文档",
form: [{
project: "退保",
content: "在犹豫期后解除合同，公司将退还保单现金价值或未满期净保费。（待产品精算确认）",
applicant: "投保人",
receptionTime: "保单效力终止前",
materialList: [{
name: "保险单",
project: "退保",
content: "在犹豫期后解除合同，公司将退还保单现金价值或未满期净保费。（待产品精算确认）",
applicant: "投保人",
receptionTime: "保单效力终止前",
materialList: [{
name: "保险单",
},
{
name: "申请书",
type: 1,
},
{
name: "投保人有效身份证件",
},
{
name: "存折银行卡相关",
}
],
},
{
name: "申请书",
type: 1,
project: "犹豫期退保",
content: "在犹豫期内提出解除合同，公司会无息退还全部保费",
applicant: "投保人",
receptionTime: "犹豫期结束前",
materialList: [{
name: "保险单",
},
{
name: "申请书",
type: 1,
},
{
name: "投保人有效身份证件",
},
{
name: "存折银行卡相关",
},
{
name: "首期保费发票",
}
],
},
{
name: "投保人有效身份证件",
project: "客户资料变更",
projectType: 1,
path: "/custom/service",
query: {
q: "m42"
},
content: "投保人、受保人、受益人的个人信息变更",
applicant: "投保人",
receptionTime: "不限",
materialList: [{
name: "申请书",
type: 1,
},
{
name: "必要的证明材料",
}
],
},
{
name: "存折银行卡相关",
}
],
},
{
project: "犹豫期退保",
content: "在犹豫期内提出解除合同，公司会无息退还全部保费",
applicant: "投保人",
receptionTime: "犹豫期结束前",
materialList: [{
name: "保险单",
},
{
name: "申请书",
type: 1,
project: "联系信息变更",
projectType: 1,
path: "/custom/service",
query: {
q: "m43"
},
content: "地址、电话等信息的变更",
applicant: "投保人",
receptionTime: "不限",
materialList: [{
name: "申请书",
type: 1,
},
{
name: "投保人有效身份证件",
}
],
},
{
name: "投保人有效身份证件",
project: "交费方式变更",
content: "更改保单的续期交费方式或交费账号",
applicant: "投保人",
receptionTime: "保单交费期满前",
materialList: [{
name: "申请书",
type: 1,
},
{
name: "保险单",
}
],
},
{
name: "存折银行卡相关",
},
{
name: "首期保费发票",
}
],
},
{
project: "客户资料变更",
projectType: 1,
path: "/custom/service",
query: {
q: "m42"
},
content: "投保人、受保人、受益人的个人信息变更",
applicant: "投保人",
receptionTime: "不限",
materialList: [{
name: "申请书",
type: 1,
},
{
name: "必要的证明材料",
}
],
},
{
project: "联系信息变更",
projectType: 1,
path: "/custom/service",
query: {
q: "m43"
},
content: "地址、电话等信息的变更",
applicant: "投保人",
receptionTime: "不限",
materialList: [{
name: "申请书",
type: 1,
},
{
name: "投保人有效身份证件",
}
],
},
{
project: "交费方式变更",
content: "更改保单的续期交费方式或交费账号",
applicant: "投保人",
receptionTime: "保单交费期满前",
materialList: [{
name: "申请书",
type: 1,
},
{
name: "保险单",
}
],
},
]
},
policyChangeContact: {
......@@ -608,7 +608,7 @@ module.exports = {
m2: "登陆「微信」APP， 按右上角的「+」按钮並选择「扫一扫」扫描下方二维码（放置二维码）"
},
qrcode: {
title: "官方公众号"
title: "社交媒体"
}
},
customService: {
......
......@@ -2,9 +2,10 @@
.drop-list {
display: inline-block;
min-width: 6.25rem;
min-width: 8rem;
position: relative;
margin: 0 1rem;
font-size: $fontSize;
.list {
position: absolute;
......@@ -42,7 +43,7 @@
}
li:hover {
color: #ec6429;
color: $cOrange;
}
}
}
......@@ -50,8 +51,8 @@
.user {
width: 7.333333rem;
height: 2.25rem;
background-color: #f05a23;
border-radius: 1.333333rem;
background-color: $cOrange;
border-radius: 2.25rem;
display: flex;
align-items: center;
justify-content: center;
......
......@@ -4,17 +4,16 @@
font-family: MicrosoftYaHei;
color: #ffffff;
background-color: #2e2b2a;
font-size: $fontSizeSmall;
font-size: $fontSize;
.footer-containter {
margin: 0 auto;
// max-width: 1200px;
width: 1200px;
.cont {
margin-left: 3.166667rem;
.logo-wrap {
padding: 1.75rem 0;
padding: 2.166667rem 0;
.logo-img {
cursor: pointer;
......@@ -30,12 +29,12 @@
// 信息
.info {
padding: 1.25rem 0 1.5rem;
padding: 2rem 0 2rem;
display: flex;
// 热线
.hotline {
min-width: 280px;
min-width: 24.5rem;
.contact {
.n-item {
......@@ -43,7 +42,7 @@
}
.phone {
color: #ea5a26;
color: $cOrange;
font-size: $fontSizeTitle;
font-weight: bold;
}
......@@ -57,38 +56,36 @@
// 导航
.nav {
flex: 1;
// flex: 1;
display: flex;
.nav-v {
// margin: 0 5.2rem;
}
.n-item {
cursor: pointer;
min-width: 14rem;
min-width: 14.75rem;
}
}
.public {
width: 6.25rem;
text-align: center;
margin-right: 3rem;
text-align: left;
margin-left: 5.32rem;
.qrcode {
margin-top: .75rem;
margin-right: 1rem;
display: inline-block;
}
}
// 公共组件
.n-item {
margin-bottom: 1.416667rem;
color: rgba(179, 177, 168, 0.5);
margin-bottom: 2rem;
color: #dcdddd;
&:first-child {
color: #ffffff;
margin-bottom: 2rem;
margin-bottom: 2.666667rem;
}
&:last-child {
......@@ -102,6 +99,7 @@
color: rgba(179, 177, 168, 0.5);
padding: 1.5rem 0;
line-height: 1.58;
font-size: $fontSizeSmall;
}
}
......@@ -125,7 +123,7 @@
width: 100%;
}
.n-item{
.n-item {
min-width: 0;
}
}
......
<template>
<footer class="v-footer ">
<div class="content footer-containter ">
<div class="footer-containter ">
<div class="cont">
<div class="logo-wrap">
<img class="logo-img" src="@/assets/images/home/footer-logo.png" alt="中国平安人寿保险">
......@@ -41,7 +41,10 @@
</div>
<div class="public">
<div class="tit">{{$t('footer.qrcode')}}</div>
<img class="qrcode" src="@/assets/images/home/qrcode-focus.png" alt="">
<!-- <img class="qrcode" src="@/assets/images/home/qrcode-focus.png" alt=""> -->
<img class="qrcode" src="@/assets/images/home/footer-icon-1.png" alt="">
<img class="qrcode" src="@/assets/images/home/footer-icon-2.png" alt="">
<img class="qrcode" src="@/assets/images/home/footer-icon-3.png" alt="">
</div>
</div>
......
@import '@/styles/_support';
.v-header {
// font-family: SourceHanSansCN;
height: 5.833333rem;
height: 7.666667rem;
background-color: #fff;
color: #4c4948;
color: $cFontGray;
position: relative;
z-index: 11;
font-size: $fontSize;
.header-container {
max-width: 950px;
// max-width: 1024px;
max-width: 1200px;
height: 100%;
margin: auto;
display: flex;
......@@ -39,8 +40,6 @@
align-items: center;
height: 100%;
margin: 0;
font-size: 1rem;
// padding: 0 4.166667rem;
-ms-flex-pack: center;
justify-content: center;
position: relative;
......@@ -68,7 +67,7 @@
.user {
width: 7.333333rem;
height: 2.25rem;
background-color: #f05a23;
background-color: $cOrange;
border-radius: 1.333333rem;
display: flex;
align-items: center;
......@@ -81,7 +80,7 @@
}
.lang {
color: #f05a23;
color: $cOrange;
}
}
......
......@@ -19,8 +19,10 @@
.modal {
position: relative;
@extend .bb;
width: 36rem;
min-height: 22.5rem;
width: 46.25rem;
height: 28.5rem;
// width: 36rem;
// min-height: 22.5rem;
border-radius: 1.25rem;
background-color: #ffffff;
padding: 4.5rem 2rem 2.5rem;
......@@ -28,17 +30,19 @@
&-title {
margin-bottom: 3rem;
color: $cOrange;
font-size: 24px;
font-size: $fontSizeTitle;
font-weight: bold;
}
&-icon-wrap {
@extend .fcc;
height: 12rem;
}
&-content {
margin-top: 1rem;
color: $cOrange;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
}
......@@ -48,7 +52,7 @@
.btn {
@include btc2(12rem, 3.6rem, 16px);
margin: 2rem 1rem 0;
margin: 3rem 1rem 0;
@extend .pointer;
}
}
......
......@@ -2,11 +2,14 @@
.content {
position: relative;
padding-bottom: 2.25rem;
min-height: 50rem;
padding-bottom: $marginMedium;
color: $cFontGray;
font-size: $fontSize;
}
.top-space {
height: 2.25rem;
height: $marginMedium;
}
.box {
......@@ -16,12 +19,9 @@
.ebg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
img {
max-width: 100%;
}
left: 50%;
margin-left: -960px;
width: 1920px;
}
.step {
......@@ -30,16 +30,14 @@
}
.login {
color: #4c4948;
color: $cFontGray;
@extend .bb;
padding: 1.416667rem 6rem 2.25rem;
border-bottom: solid .666667rem #006441;
padding: 2.75rem 6.25rem 3.75rem;
border-bottom: solid 0.9rem $cGreen;
margin: auto;
max-width: 40.25rem;
// height: 49.25rem;
border-radius: .75rem;
max-width: 51rem;
border-radius: $borderRadius;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
background-color: #ffffff;
......@@ -106,14 +104,8 @@
}
&-submit {
@include btc2(13.2rem, 4rem, 16px);
// margin: 2rem 1rem 0;
@include btc2(17.25rem, 5.25rem, 16px);
letter-spacing: 1.6px;
// position: absolute;
// left: 0;
// right: 0;
// margin: 0 auto;
// bottom: 2.25rem;
}
&-func {
......@@ -166,6 +158,7 @@
}
.ipt-wrap {
position: relative;
display: flex;
justify-content: space-between;
......@@ -173,12 +166,13 @@
.ipt {
@extend .bb;
width: 100%;
height: 3.5rem;
height: 4.5rem;
border-radius: 4.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 1.75rem;
padding: 0 2rem;
flex: 1;
letter-spacing: .1rem;
}
// 长文本
......@@ -189,13 +183,8 @@
.down-arrow {
position: absolute;
top: 1.6rem;
top: 2.2rem;
right: 2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow.png');
width: 1rem;
height: .666667rem;
pointer-events: none;
cursor: default;
}
......@@ -208,29 +197,23 @@
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
color: #4c4948;
color: $cFontGray;
}
// 框内按钮
.ipt2 {
display: flex;
justify-content: space-between;
align-items: center;
.ipt-tel {
flex: 1;
padding-left: 1.75rem;
}
.ipt-code {
flex: 1;
padding-right: 1.75rem;
}
.region-tel {}
.veri-btn {
color: #f05a23;
color: $cOrange;
text-decoration: underline;
}
......@@ -238,7 +221,6 @@
color: #aaaaaa;
}
}
}
.validator {
......
<template>
<div class="content">
......@@ -31,7 +31,7 @@
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt" :class="{err : errorTips.e2.length > 0}" v-model="information.sex">
<select class="ipt" :class="{err : errorTips.e2.length > 0}" v-model="information.sex">
<template v-if="sexCandidates">
<option v-for="(item,index) in sexCandidates" :key="index" :value="item.value">{{item.name}}</option>
</template>
......@@ -50,7 +50,7 @@
<input class="ipt" type="date" :class="{err : errorTips.e3.length > 0}" v-model="birthDate">
</div>
<div class="validator" v-if="errorTips.e3.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e3}}
<img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e3}}
</div>
</div>
......@@ -60,14 +60,14 @@
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt" :class="{err : errorTips.e4.length > 0}" v-model="information.idType">
<select class="ipt" :class="{err : errorTips.e4.length > 0}" v-model="information.idType">
<template v-if="idTypeCandidates">
<option v-for="(item,index) in idTypeCandidates" :key="index" :value="item.value">{{item.name}}</option>
</template>
</select>
</div>
<div class="validator" v-if="errorTips.e4.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e4}}
<img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e4}}
</div>
</div>
......@@ -76,10 +76,10 @@
<img src="@/assets/images/improve-infomation/icon-improve-infomation-card.png"> {{$t('infomationImprove.t5')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text" :class="{err : errorTips.e5.length > 0}" v-model="information.idNo">
<input class="ipt" type="text" :class="{err : errorTips.e5.length > 0}" v-model="information.idNo">
</div>
<div class="validator" v-if="errorTips.e5.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e5}}
<img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e5}}
</div>
</div>
......
......@@ -3,11 +3,13 @@
.content {
position: relative;
min-height: 50rem;
padding-bottom: 2.25rem;
padding-bottom: $marginMedium;
color: $cFontGray;
font-size: $fontSize;
}
.top-space {
height: 2.25rem;
height: $marginMedium;
}
.box {
......@@ -17,38 +19,34 @@
.ebg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
img {
max-width: 100%;
}
left: 50%;
margin-left: -960px;
width: 1920px;
}
.login {
color: #4c4948;
color: $cFontGray;
@extend .bb;
padding: 2rem 5rem 3.5rem;
border-bottom: solid .666667rem #006441;
padding: 2.75rem 6.25rem 4.5rem;
border-bottom: solid 0.9rem $cGreen;
margin: auto;
max-width: 40.25rem;
border-radius: .75rem;
max-width: 51rem;
border-radius: $borderRadius;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
background-color: #ffffff;
&-tit {
// font-family: MicrosoftYaHei;
color: #f05a23;
color: $cOrange;
text-align: center;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
letter-spacing: .2rem;
display: flex;
justify-content: center;
img{
height: 1.416667rem; /* 17/12 */
img {
height: 1.75rem;
}
.img-en {
......@@ -57,35 +55,32 @@
}
&-nav {
margin: 2.25rem 0 auto;
margin: 2.75rem auto 1rem;
display: flex;
justify-content: center;
align-items: center;
&-v-line {
width: .2rem;
height: 1.25rem;
background-color: #4c4948;
width: 2px;
height: 1.2rem;
background-color: $cFontGray;
margin: 0 2.25rem;
}
&-tit {
// font-family: MicrosoftYaHei;
flex: 1;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
color: #4c4948;
// text-shadow: 3px 5.2px 9px rgba(76, 73, 72, 0.27);
}
.active {
color: #f05a23;
color: $cOrange;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
}
}
&-protocol {
margin: 2.5rem auto 0;
margin: 3rem auto 0;
display: flex;
align-items: center;
padding-left: 1rem;
......@@ -96,23 +91,23 @@
}
.protocol {
color: #f05a23;
color: $cOrange;
}
}
&-submit {
@include btc2(13.5rem, 4rem, 16px);
margin: 3.25rem auto 0;
@include btc2(17.25rem, 5.25rem, 16px);
margin: 4rem auto 0;
letter-spacing: 1.6px;
}
&-func {
margin: 1.5rem auto 0;
margin: 2rem auto 0;
display: flex;
justify-content: center;
&-btn {
margin: 0 1.25rem;
margin: 0 1.5rem;
text-decoration: underline;
}
}
......@@ -128,6 +123,7 @@
background-color: transparent !important;
padding: 0 !important;
overflow: hidden;
img {
width: 100%;
height: 100%;
......@@ -136,14 +132,12 @@
&-item {
position: relative;
// margin-top: 2.75rem;
margin-top: 2.5rem;
margin-top: 3.25rem;
.label {
// font-family: MicrosoftYaHei;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
color: #f05a23;
color: $cOrange;
display: flex;
align-items: center;
margin-bottom: 1.25rem;
......@@ -163,14 +157,13 @@
.ipt {
@extend .bb;
width: 100%;
height: 3.5rem;
height: 4.5rem;
border-radius: 4.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 1.75rem;
padding: 0 2rem;
flex: 1;
font-size: 1.166667rem; /* 14/12 */
letter-spacing: .1rem;/* 1.2/12 */
letter-spacing: .1rem;
}
// 长文本
......@@ -181,7 +174,7 @@
.down-arrow {
position: absolute;
top: 1.6rem;
top: 2.2rem;
right: 2rem;
}
......@@ -195,7 +188,7 @@
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
color: #4c4948;
color: $cFontGray;
}
......@@ -211,7 +204,7 @@
}
.veri-btn {
color: #f05a23;
color: $cOrange;
text-decoration: underline;
}
......
......@@ -16,7 +16,7 @@
</div>
<div class="login-nav">
<div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer active">{{$t('login.loginType1')}}</div>
<div class="login-nav-v-line">|</div>
<div class="login-nav-v-line"></div>
<div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer">{{$t('login.loginType2')}}</div>
</div>
<div class="gird-g form">
......@@ -54,10 +54,9 @@
</div>
</div>
</div>
<div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol" >
<div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol">
<img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
<img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png">
{{$t('login.agree')}}
<img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}}
<span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
</div>
<div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div>
......@@ -76,7 +75,7 @@
</div>
<div class="login-nav">
<div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer"> {{$t('login.loginType1')}}</div>
<div class="login-nav-v-line">|</div>
<div class="login-nav-v-line"></div>
<div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer active"> {{$t('login.loginType2')}}</div>
</div>
<div class="gird-g form">
......@@ -93,7 +92,7 @@
</div>
<div class="pure-u-1 form-item" v-if="type == 2 && loginCheck.showImageCode">
<div class="ipt-wrap">
<input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{ err : errorTips.oe3.length > 0 }" type="text" v-model="loginForm.imageValue">
<input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{ err : errorTips.oe3.length > 0 }" type="text" v-model="loginForm.imageValue">
<div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue">
<img :src="values.imageBase64">
</div>
......@@ -109,7 +108,7 @@
<div class="ipt-wrap">
<div class="ipt ipt2" :class="{ err : errorTips.oe2.length > 0 }">
<input :placeholder="$t('login.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="loginForm.otp">
<div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP" >{{$t('register.verifyCodeGet')}}</div>
<div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP">{{$t('register.verifyCodeGet')}}</div>
<div v-else class="veri-btn-default">{{times.tip}}</div>
</div>
</div>
......@@ -118,10 +117,9 @@
</div>
</div>
</div>
<div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol" >
<div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol">
<img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
<img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png">
{{$t('login.agree')}}
<img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}}
<span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
</div>
<div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div>
......
......@@ -3,10 +3,14 @@
.content {
position: relative;
padding-bottom: 2.25rem;
position: relative;
padding-bottom: $paddingMedium;
color: $cFontGray;
font-size: $fontSize;
}
.top-space {
height: 2.25rem;
height: $marginMedium;
}
.box {
......@@ -16,12 +20,9 @@
.ebg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
img {
max-width: 100%;
}
left: 50%;
margin-left: -960px;
width: 1920px;
}
.step {
......@@ -30,23 +31,21 @@
}
.login {
color: #4c4948;
@extend .bb;
padding: 1.416667rem 5rem 0;
border-bottom: solid .666667rem #006441;
padding: 2rem 6.25rem 4.5rem;
border-bottom: solid 0.9rem $cGreen;
height: 38rem;
margin: auto;
max-width: 40.25rem;
height: 31rem;
border-radius: .75rem;
max-width: 51rem;
border-radius: $borderRadius;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
background-color: #ffffff;
&-tit {
color: #f05a23;
color: $cOrange;
text-align: center;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
letter-spacing: .2rem;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
......@@ -69,19 +68,19 @@
&-v-line {
width: .2rem;
height: 1.25rem;
background-color: #4c4948;
background-color: $cFontGray;
margin: 0 2.25rem;
}
&-tit {
flex: 1;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
color: #4c4948;
color: $cFontGray;
}
.active {
color: #f05a23;
color: $cOrange;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
}
}
......@@ -98,19 +97,19 @@
}
.protocol {
color: #f05a23;
color: $cOrange;
}
}
&-submit {
@include btc2(13.5rem, 4rem, 16px);
@include btc2(17.25rem, 5.25rem, 16px);
margin: 4.166667rem auto 0;
letter-spacing: 1.6px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 2.25rem;
bottom: 3rem;
}
&-func {
......@@ -148,12 +147,12 @@
&-item {
position: relative;
margin-bottom: 2.25rem;
margin-bottom: 3rem;
.label {
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
color: #f05a23;
color: $cOrange;
display: flex;
align-items: center;
margin-bottom: 1.25rem;
......@@ -173,12 +172,13 @@
.ipt {
@extend .bb;
width: 100%;
height: 3.5rem;
height: 4.5rem;
border-radius: 4.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 1.75rem;
padding: 0 2rem;
flex: 1;
letter-spacing: .1rem;
}
// 长文本
......@@ -189,7 +189,7 @@
.down-arrow {
position: absolute;
top: 1.6rem;
top: 2.2rem;
right: 2rem;
}
......@@ -203,29 +203,23 @@
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
color: #4c4948;
color: $cFontGray;
}
// 框内按钮
.ipt2 {
display: flex;
justify-content: space-between;
align-items: center;
.ipt-tel {
flex: 1;
padding-left: 1.75rem;
}
.ipt-code {
flex: 1;
padding-right: 1.75rem;
}
.region-tel {}
.veri-btn {
color: #f05a23;
color: $cOrange;
text-decoration: underline;
}
......@@ -233,7 +227,6 @@
color: #aaaaaa;
}
}
}
.validator {
......@@ -265,5 +258,5 @@
.disable {
background-color: #dcdddd !important;
// color: $cFontGray;
color: #4c4948;
color: $cFontGray;
}
......
......@@ -3,7 +3,7 @@
<div class="content">
<modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
<div class="ebg">
<img src="@/assets/images/password-reset/password-reset-bg.png">
<img src="@/assets/images/common/login-bg.png">
</div>
<div class="top-space"></div>
<div class="box">
......
......@@ -14,7 +14,7 @@ export default {
data() {
return {
key: 'value',
type: 4, // 1:输入用户信息 2:找回密码 3:核对信息 4.重置密码
type: 1, // 1:输入用户信息 2:找回密码 3:核对信息 4.重置密码
values: {
cid: "",
oldPwd: "",
......
......@@ -3,10 +3,14 @@
.content {
position: relative;
padding-bottom: 2.25rem;
position: relative;
padding-bottom: $paddingMedium;
color: $cFontGray;
font-size: $fontSize;
}
.top-space {
height: 2.25rem;
height: $marginMedium;
}
.box {
......@@ -16,12 +20,9 @@
.ebg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
img {
max-width: 100%;
}
left: 50%;
margin-left: -960px;
width: 1920px;
}
.step {
......@@ -30,23 +31,21 @@
}
.login {
color: #4c4948;
@extend .bb;
padding: 1.416667rem 5rem 0;
border-bottom: solid .666667rem #006441;
padding: 2rem 6.25rem 4.5rem;
border-bottom: solid 0.9rem $cGreen;
height: 48rem;
margin: auto;
max-width: 40.25rem;
height: 41rem;
border-radius: .75rem;
max-width: 51rem;
border-radius: $borderRadius;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
background-color: #ffffff;
&-tit {
color: #f05a23;
color: $cOrange;
text-align: center;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
letter-spacing: .2rem;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
......@@ -69,19 +68,19 @@
&-v-line {
width: .2rem;
height: 1.25rem;
background-color: #4c4948;
background-color: $cFontGray;
margin: 0 2.25rem;
}
&-tit {
flex: 1;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
color: #4c4948;
color: $cFontGray;
}
.active {
color: #f05a23;
color: $cOrange;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
}
}
......@@ -98,19 +97,19 @@
}
.protocol {
color: #f05a23;
color: $cOrange;
}
}
&-submit {
@include btc2(13.5rem, 4rem, 16px);
@include btc2(17.25rem, 5.25rem, 16px);
margin: 4.166667rem auto 0;
letter-spacing: 1.6px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 2.25rem;
bottom: 3rem;
}
&-func {
......@@ -148,12 +147,12 @@
&-item {
position: relative;
margin-bottom: 2.25rem;
margin-bottom: 3rem;
.label {
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
color: #f05a23;
color: $cOrange;
display: flex;
align-items: center;
margin-bottom: 1.25rem;
......@@ -173,12 +172,13 @@
.ipt {
@extend .bb;
width: 100%;
height: 3.5rem;
height: 4.5rem;
border-radius: 4.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 1.75rem;
padding: 0 2rem;
flex: 1;
letter-spacing: .1rem;
}
// 长文本
......@@ -189,7 +189,7 @@
.down-arrow {
position: absolute;
top: 1.6rem;
top: 2.2rem;
right: 2rem;
}
......@@ -203,29 +203,23 @@
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
color: #4c4948;
color: $cFontGray;
}
// 框内按钮
.ipt2 {
display: flex;
justify-content: space-between;
align-items: center;
.ipt-tel {
flex: 1;
padding-left: 1.75rem;
}
.ipt-code {
flex: 1;
padding-right: 1.75rem;
}
.region-tel {}
.veri-btn {
color: #f05a23;
color: $cOrange;
text-decoration: underline;
}
......@@ -233,7 +227,6 @@
color: #aaaaaa;
}
}
}
.validator {
......@@ -265,5 +258,5 @@
.disable {
background-color: #dcdddd !important;
// color: $cFontGray;
color: #4c4948;
color: $cFontGray;
}
......
......@@ -3,7 +3,7 @@
<div class="content">
<modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
<div class="ebg">
<img src="@/assets/images/password-reset/password-reset-bg.png">
<img src="@/assets/images/common/login-bg.png">
</div>
<div class="top-space"></div>
<div class="box">
......
......@@ -3,11 +3,13 @@
.content {
position: relative;
min-height: 50rem;
padding-bottom: 2.25rem;
padding-bottom: $paddingMedium;
color: $cFontGray;
font-size: $fontSize;
}
.top-space {
height: 2.75rem;
height: $marginMedium;
}
.box {
......@@ -17,41 +19,39 @@
.ebg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
img {
max-width: 100%;
}
left: 50%;
margin-left: -960px;
width: 1920px;
}
.step {
@extend .fcc;
margin-bottom: 3rem;
margin-bottom: 4.25rem;
img {
height: 4.25rem;
}
}
.login {
color: #4c4948;
@extend .bb;
padding: 2.75rem 5rem 4.25rem;
border-bottom: solid .666667rem #006441;
padding: 2.75rem 6.25rem 4.5rem;
border-bottom: solid 0.9rem $cGreen;
margin: auto;
max-width: 40.25rem;
border-radius: .75rem;
max-width: 51rem;
border-radius: $borderRadius;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
background-color: #ffffff;
&-tit {
// font-family: MicrosoftYaHei;
color: $cOrange;
display: flex;
justify-content: center;
img {
height: 1.416667rem;
/* 17/12 */
}
.img-en {
......@@ -62,7 +62,7 @@
&-tit2 {
color: $cOrange;
text-align: center;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
letter-spacing: .2rem;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
......@@ -71,35 +71,32 @@
&-nav {
margin: 2.25rem 0 auto;
margin: 2.75rem auto 1rem;
display: flex;
justify-content: center;
align-items: center;
&-v-line {
width: .2rem;
height: 1.25rem;
background-color: #4c4948;
width: 2px;
height: 1.2rem;
background-color: $cFontGray;
margin: 0 2.25rem;
}
&-tit {
// font-family: MicrosoftYaHei;
flex: 1;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
color: #4c4948;
// text-shadow: 3px 5.2px 9px rgba(76, 73, 72, 0.27);
}
.active {
color: #f05a23;
color: $cOrange;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
}
}
&-protocol {
margin: 2.5rem auto 0;
margin: 3rem auto 0;
display: flex;
align-items: center;
padding-left: 1rem;
......@@ -110,23 +107,23 @@
}
.protocol {
color: #f05a23;
color: $cOrange;
}
}
&-submit {
@include btc2(13.5rem, 4rem, 16px);
@include btc2(17.25rem, 5.25rem, 16px);
margin: 4.166667rem auto 0;
letter-spacing: 1.6px;
}
&-func {
margin: 1.5rem auto 0;
margin: 2rem auto 0;
display: flex;
justify-content: center;
&-btn {
margin: 0 1.25rem;
margin: 0 1.5rem;
text-decoration: underline;
}
}
......@@ -149,21 +146,17 @@
}
input {
font-size: 1.166667rem;
/* 14/12 */
letter-spacing: .1rem;
/* 1.2/12 */
}
&-item {
position: relative;
margin-top: 3.75rem;
margin-top: 3.25rem;
.label {
// font-family: MicrosoftYaHei;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
color: #f05a23;
color: $cOrange;
display: flex;
align-items: center;
margin-bottom: 1.25rem;
......@@ -183,12 +176,13 @@
.ipt {
@extend .bb;
width: 100%;
height: 3.5rem;
height: 4.5rem;
border-radius: 4.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 1.75rem;
padding: 0 2rem;
flex: 1;
letter-spacing: .1rem;
}
// 长文本
......@@ -199,7 +193,7 @@
.down-arrow {
position: absolute;
top: 1.6rem;
top: 2.2rem;
right: 2rem;
}
......@@ -213,29 +207,23 @@
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
color: #4c4948;
color: $cFontGray;
}
// 框内按钮
.ipt2 {
display: flex;
justify-content: space-between;
align-items: center;
.ipt-tel {
flex: 1;
padding-left: 1.75rem;
}
.ipt-code {
flex: 1;
padding-right: 1.75rem;
}
.region-tel {}
.veri-btn {
color: #f05a23;
color: $cOrange;
text-decoration: underline;
}
......@@ -243,7 +231,6 @@
color: #aaaaaa;
}
}
}
.validator {
......
......@@ -75,13 +75,12 @@
</div>
<!-- 输入密码 -->
<div v-if="type == 2" class="login">
<div class="login-tit">
<img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png">
<img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png">
<img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png">
</div>
<div class="login-tit">{{$t('register.title2')}}</div>
<div class="login-tit2">{{$t('register.title2')}}</div>
<div class="gird-g form">
<div class="pure-u-1 form-item">
<div class="label">
......@@ -108,7 +107,6 @@
</div>
<div @click="onRegisterHandler()" class="login-submit pointer">{{$t('register.sure')}}</div>
</div>
<!-- 输入密码 -->
</div>
</div>
</template>
......
......@@ -26,13 +26,12 @@ $fontSize:14px;
$fontSizeSmall:12px;
// Color
$colorGray: #475669;
$cOrange:#f05a23;
$cFontGray: #4c4948;
$cGreen:#006441;
$cGray:#bfbfbf;
$cDark:#dcdcdc;
$cLightBlack:#333333;
$cFontGray: #4c4948;
// 移动端
......