用户体系样式/文案

simon
Showing 8 changed files with 81 additions and 38 deletions
src/common/lang/en.js
src/common/lang/tc.js
src/common/lang/zh.js
src/pages/login/login.scss
src/pages/login/login.vue
src/pages/register/register.js
src/pages/register/register.scss
src/pages/register/register.vue
--- a/src/common/lang/en.js
View file @12c9ed1
+++ b/src/common/lang/en.js
View file @12c9ed1
@@ -191,10 +191,10 @@ module.exports = {
    },
    login: {
        title: "PingAn Account Member Service",
-        loginType1: "Login with user name and password",
+        loginType1: "Dynamic password login",
        loginType2: "Dynamic password login",
        account: "Account",
-        accountPlaceholder: "Please enter Mobile no.",
+        accountPlaceholder: "Please enter user name",
        password: "Password",
        passwordPlaceholder: "Please enter password",
        verifyPlaceholder: "Please enter password",
@@ -206,8 +206,9 @@ module.exports = {
        mobile: "Mobile no.",
        mobilePlaceholder: "Please enter Mobile no",
        verifyCode: "SMS verification code",
-        verifyCodePlaceholder: "SMS verification code",
+        verifyCodePlaceholder: "Please enter verification code",
-        verifyCodeGet: "Get SMS verification code",
+        verifyCodeGet: "Get verification codee",
+        SMSVerificationCode:"SMS verification code",
        tips: {
            e1: "Please enter account",
            e2: "Please enter the password",
@@ -221,7 +222,8 @@ module.exports = {
            oe2: "Please enter the picture verification code",
            oe3: "Please enter the picture verification code",
            oe4: "Your verify code is not correct. Please try again",
-        }
+        },
+        accountPlaceholder:"Please setup user name ",
    },
    session: {
        sidExpire: "It has not been operated for a long time. For the sake of your account security, please restart",
--- a/src/common/lang/tc.js
View file @12c9ed1
+++ b/src/common/lang/tc.js
View file @12c9ed1
@@ -193,23 +193,24 @@ module.exports = {
    },
    login: {
        title: "平安賬戶",
-        loginType1: "賬密登入",
+        loginType1: "動態密碼登錄",
        loginType2: "動態密碼登入",
        account: "賬號",
-        accountPlaceholder: "請輸入手機號",
+        accountPlaceholder: "請輸入用戶名稱",
        password: "密碼",
        passwordPlaceholder: "輸入登入密碼",
        verifyPlaceholder: "請輸入驗證碼",
        agree: "同意",
        protocol: "《平安香港會員網上帳戶服務協定》",
-        login: "登入",
+        login: "登錄",
        register: "註冊",
        forget: "忘記密碼",
        mobile: "手機號",
        mobilePlaceholder: "手機號",
        verifyCode: "驗證碼",
-        verifyCodePlaceholder: "驗證碼",
+        verifyCodePlaceholder: "請輸入驗證碼",
        verifyCodeGet: "獲取驗證碼",
+        SMSVerificationCode:"手機短信驗證碼",
        tips: {
            e1: "請輸入賬號信息",
            e2: "請輸入密碼",
@@ -266,7 +267,8 @@ module.exports = {
            e10: "驗證碼過期，請重新申請驗證碼",
            e11: "註冊失敗，請聯繫工作人員",
            e12: "註冊成功"
-        }
+        },
+        accountPlaceholder:"請設置用戶名稱",
    },
    session: {
        sidExpire: "長時間未操作，為了您賬戶的安全，請登入後再操作"
--- a/src/common/lang/zh.js
View file @12c9ed1
+++ b/src/common/lang/zh.js
View file @12c9ed1
@@ -193,10 +193,10 @@ module.exports = {
    },
    login: {
        title: "平安账户",
-        loginType1: "账密登入",
+        loginType1: "动态密码登录",
        loginType2: "动态密码登入",
        account: "账号",
-        accountPlaceholder: "请输入手机号",
+        accountPlaceholder: "请输入用户名称",
        password: "密码",
        passwordPlaceholder: "输入登入密码",
        verifyPlaceholder: "请输入验证码",
@@ -208,8 +208,9 @@ module.exports = {
        mobile: "手机号",
        mobilePlaceholder: "手机号",
        verifyCode: "验证码",
-        verifyCodePlaceholder: "验证码",
+        verifyCodePlaceholder: "请输入验证码",
        verifyCodeGet: "获取验证码",
+        SMSVerificationCode:"手机短信验证码",
        tips: {
            e1: "请输入账号信息",
            e2: "请输入密码",
@@ -269,7 +270,8 @@ module.exports = {
            e10: "验证码过期，请重新申请验证码",
            e11: "注册失败，请联系工作人员",
            e12: "註冊成功"
-        }
+        },
+        accountPlaceholder:"请设置用户名称",
    },
    passwordCheck: {
        error1: "密码长度不少于8位",
--- a/src/pages/login/login.scss
View file @12c9ed1
+++ b/src/pages/login/login.scss
View file @12c9ed1
@@ -91,7 +91,9 @@
    &-tit {
      flex: 1;
-      font-size: $fontSizeTitle;
+      // font-size: $fontSizeTitle;
+      // font-size: $fontSizeTitle-M2;
+      font-size: $fontSize-M2;
      font-weight: bold;
    }
@@ -104,12 +106,13 @@
  &-protocol {
    margin: 36px auto 0;
    display: flex;
-    align-items: center;
+    // align-items: center;
    // padding-left: 12px;
    .check {
      height: 12px;
-      margin-right: 6px;
+      margin-right: 7.2px;
+      margin-top: 4px;
    }
    .protocol {
--- a/src/pages/login/login.vue
View file @12c9ed1
+++ b/src/pages/login/login.vue
View file @12c9ed1
@@ -74,7 +74,9 @@
            </div>
          </template>
          <template v-else>
-						<!-- 不接入一账通 -->
+            <!-- 不接入一账通 -OTP登陆 -->
            <div class="login-nav">
              <div class="login-nav-tit text-c pointer active">{{$t('login.loginType1')}}</div>
            </div>
@@ -90,7 +92,7 @@
                  <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
                </div>
              </div>
-							<div class="pure-u-1 form-item">
+              <!-- <div class="pure-u-1 form-item">
                <div class="label">
                  <img src="@/assets/images/login/icon-login-password.png"> {{$t('login.password')}}
                </div>
@@ -100,10 +102,10 @@
                <div class="validator" v-if="errorTips.e2.length > 0 ">
                  <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
                </div>
-							</div>
+              </div> -->
              <div class="pure-u-1 form-item">
                <div class="label">
-									<img src="@/assets/images/login/icon-login-message.png"> {{$t('login.verifyCode')}}
+                  <img src="@/assets/images/login/icon-login-phone.png"> {{$t('login.SMSVerificationCode')}}
                </div>
                <div class="ipt-wrap">
                  <div class="ipt ipt2" :class="{ err : errorTips.oe2.length > 0 }">
--- a/src/pages/register/register.js
View file @12c9ed1
+++ b/src/pages/register/register.js
View file @12c9ed1
--- a/src/pages/register/register.scss
View file @12c9ed1
+++ b/src/pages/register/register.scss
View file @12c9ed1
-@import '@/styles/_support.scss';
+@import "@/styles/_support.scss";
 .content {
  position: relative;
@@ -21,7 +21,7 @@
 }
 .ebg {
-  background: url('~@/assets/images/common/login-bg.png') center no-repeat;
+  background: url("~@/assets/images/common/login-bg.png") center no-repeat;
  width: 100%;
  height: 325px;
  position: absolute;
@@ -39,7 +39,6 @@
 }
 .login {
  @extend .bb;
  padding: 32px 75px 54px;
  border-bottom: solid 10.8px $cGreen;
@@ -51,8 +50,6 @@
  @extend .box-shadow;
  background-color: #ffffff;
  &-tit {
    color: $cOrange;
    display: flex;
@@ -70,7 +67,9 @@
  &-tit2 {
    color: $cOrange;
    text-align: center;
-    font-size: $fontSizeTitle;
+    // font-size: $fontSizeTitle;
+    // font-size: $fontSizeTitle-M2;
+    font-size: $fontSize-M2;
    font-weight: bold;
    text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
    margin-top: 24px;
@@ -80,7 +79,6 @@
    letter-spacing: 2.4px;
  }
  &-nav {
    margin: 32px auto 12px;
    display: flex;
@@ -96,7 +94,9 @@
    &-tit {
      flex: 1;
-      font-size: $fontSizeTitle;
+      // font-size: $fontSizeTitle;
+      // font-size: $fontSizeTitle-M2;
+      font-size: $fontSize-M2;
      font-weight: bold;
    }
@@ -109,12 +109,13 @@
  &-protocol {
    margin: 36px auto 0;
    display: flex;
-    align-items: center;
+    // align-items: center;
    // padding-left: 12px;
    .check {
      height: 12px;
      margin-right: 7.2px;
+      margin-top: 4px;
    }
    .protocol {
@@ -126,11 +127,9 @@
    padding-left: 12px;
  }
  &-submit {
    @include btc2(207px, 63px, 16px);
    margin: 50px auto 0;
  }
  &-submit:lang(zh) {
@@ -165,7 +164,8 @@
    }
  }
-  input {}
+  input {
+  }
  input:lang(zh) {
    letter-spacing: 1.2px;
@@ -221,7 +221,6 @@
        max-width: 30%;
      }
      .verify-btn {
        @extend .fcc;
        // font-family: Arial;
@@ -234,7 +233,6 @@
        color: $cFontGray;
      }
      // 框内按钮
      .ipt2 {
        display: flex;
@@ -275,7 +273,6 @@
        margin-right: 4.8px;
      }
    }
  }
 }
@@ -310,7 +307,6 @@
      &-item {
        margin-top: 24px;
      }
    }
    &-protocol {
--- a/src/pages/register/register.vue
View file @12c9ed1
+++ b/src/pages/register/register.vue
View file @12c9ed1
@@ -125,6 +125,7 @@
      </div>
    </div>
+    <!-- OPT -->
    <div class="content" v-else>
      <div class="top-space"></div>
      <div class="box">
@@ -133,6 +134,22 @@
          <div class="login-tit2">{{$t('register.title')}}</div>
          <div class="gird-g form">
+            <!-- 账号 -->
+            <div class="pure-u-1 form-item">
+              <div class="label">
+                <img src="@/assets/images/login/icon-login-user.png"> {{$t('login.account')}}
+              </div>
+              <div class="ipt-wrap">
+                <!-- <input v-model="registerForm.userId" :placeholder="$t('register.accountPlaceholder')" class="ipt" :class="{ err : errorTips.e1.length > 0 }" type="text" @blur="userIdLegalCheck"> -->
+                <input v-model="registerForm.userId" :placeholder="$t('register.accountPlaceholder')" class="ipt" :class="{ err : errorTips.e1.length > 0 }" type="text" >
+              </div>
+              <div class="validator" v-if="errorTips.p1.length > 0 ">
+                <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p1}}
+              </div>
+            </div>
+            <!-- 手机号  -->
            <div class="pure-u-1 form-item">
              <div class="label">
@@ -155,6 +172,25 @@
              </div>
            </div>
+            <!-- 短信验证 -->
+            <div class="pure-u-1 form-item">
+              <div class="label">
+                <img src="@/assets/images/register/icon-register-phone.png"> {{$t('login.SMSVerificationCode')}}
+              </div>
+              <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="registerForm.otp">
+                  <!-- <div v-if="times.remain == 0" class="veri-btn pointer" @click="sendOTPWhenOneAccountCenterOff">{{$t('register.verifyCodeGet')}}</div> -->
+                  <div v-if="times.remain == 0" class="veri-btn pointer" >{{$t('register.verifyCodeGet')}}</div>
+                  <div v-else class="veri-btn-default">{{times.tip}}</div>
+                </div>
+              </div>
+              <div class="validator" v-if="errorTips.oe2.length > 0 ">
+                <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.oe2}}
+              </div>
+            </div>
+            <!-- 
            <div class="pure-u-1 form-item">
              <div class="label">
                <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}}
@@ -176,7 +212,7 @@
              <div class="validator" v-if="errorTips.p5.length > 0 ">
                <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p5}}
              </div>
-						</div>
+            </div> -->
          </div>