style: 样式修改

src/assets/languages/en.js

@@ -7,7 +7,8 @@ export default {
     submitText: 'Log in',
     pwdLogin: 'Password login',
     codeLogin: 'Verification code login',
-    forgetPassword: 'Forget password'
+    forgetPassword: 'Forget password',
+    register: 'New account'
   },
   loginPwd: {
     account: { placeholder: 'Mobile / Email', rule: 'Please input user ID' },

src/assets/languages/zh-CN.js

@@ -6,8 +6,9 @@ export default {
     rememberMe: '记住我',
     submitText: '登录',
     pwdLogin: '密码登录',
-    codeLogin: '验证码登录',
-    forgetPassword: '忘记密码'
+    codeLogin: '其他登录方式',
+    forgetPassword: '忘记了密码？',
+    register: '创建账号'
   },
   loginPwd: {
     account: { placeholder: '邮箱/手机号', rule: '请输入邮箱/手机号' },
@@ -22,11 +23,11 @@ export default {
     successMessage: '登录成功'
   },
   password: {
-    title: '忘记密码',
-    backText: '返回登录',
+    title: '更改密码',
+    backText: '登录现有账号',
     account: { title: '账号', placeholder: '邮箱/手机号', rule: '请输入邮箱/手机号' },
     code: { title: '验证码', placeholder: '验证码', rule: '请输入验证码' },
-    newPassword: { title: '密码', placeholder: '密码', rule: '请输入登录密码', rule2: '长度为6-20个字符' },
+    newPassword: { title: '设置密码', placeholder: '设置新密码', rule: '请输入登录密码', rule2: '长度为6-20个字符' },
     confirmPassword: {
       title: '确认密码',
       placeholder: '确认密码',
@@ -35,9 +36,18 @@ export default {
     },
     sendCodeText: '获取验证码',
     sendCodeMessage: '验证码已发送',
-    submitText: '提交',
+    submitText: '保存密码',
     alertTitle: '提示',
     successMessage: '密码修改成功，快去登录吧',
     confirmButtonText: '去登录'
+  },
+  register: {
+    title: '注册',
+    backText: '登录现有账号',
+    nickname: { title: '昵称', placeholder: '请输入昵称', rule: '请输入昵称' },
+    account: { title: '账号', placeholder: '邮箱/手机号', rule: '请输入邮箱/手机号' },
+    code: { title: '验证码', placeholder: '验证码', rule: '请输入验证码' },
+    password: { title: '密码', placeholder: '设置新密码', rule: '请输入登录密码', rule2: '长度为6-20个字符' },
+    confirmButtonText: '注册'
   }
 }

src/components/loginAccount.vue

@@ -20,17 +20,21 @@
           <i slot="prefix" class="el-input__icon el-icon-lock"></i>
         </el-input>
       </el-form-item>
-      <el-checkbox v-if="hasRemember" v-model="ruleForm.RememberMe" style="margin-bottom: 10px">{{ $t('login.rememberMe') }}</el-checkbox>
-      <el-button type="primary" class="submit-button" :loading="loading" @click="handleSubmit">
+      <router-link
+        :to="{ path: '../password', query: $route.query }"
+        class="forget-password-text"
+        v-if="hasForgetPassword"
+      >
+        {{ $t('login.forgetPassword') }}
+      </router-link>
+      <!-- <el-checkbox v-if="hasRemember" v-model="ruleForm.RememberMe" style="margin-bottom: 10px">{{ $t('login.rememberMe') }}</el-checkbox> -->
+      <el-button type="primary" size="medium" class="submit-button" :loading="loading" @click="handleSubmit">
         {{ $t('login.submitText') }}
       </el-button>
+      <router-link :to="{ path: 'code', query: $route.query }" class="login-method-text" v-if="hasCodeLogin">
+        {{ $t('login.codeLogin') }}
+      </router-link>
     </el-form>
-    <div class="login-footer">
-      <router-link :to="{ path: 'code', query: $route.query }" v-if="hasCodeLogin">{{
-        $t('login.codeLogin')
-      }}</router-link>
-      <router-link :to="{ path: '../password', query: $route.query }" v-if="hasForgetPassword">{{ $t('login.forgetPassword') }}</router-link>
-    </div>
   </div>
 </template>
 
@@ -47,7 +51,7 @@ export default {
   },
   data() {
     return {
-      ruleForm: { type: 1, account: '', password: '', RememberMe: false, service: 'https://h5.ezijing.com' },
+      ruleForm: { type: 1, account: '', password: '', RememberMe: true, service: 'https://h5.ezijing.com' },
       rules: {
         account: [{ required: true, message: this.$t('loginPwd.account.rule'), trigger: 'change' }],
         password: [{ required: true, message: this.$t('loginPwd.password.rule'), trigger: 'change' }]

src/components/loginCode.vue

@@ -26,13 +26,14 @@
           ></countdown>
         </el-input>
       </el-form-item>
-      <el-checkbox v-model="ruleForm.RememberMe" style="margin-bottom: 10px">{{ $t('login.rememberMe') }}</el-checkbox>
-      <el-button type="primary" class="submit-button" @click="handleSubmit">{{ $t('login.submitText') }}</el-button>
+      <!-- <el-checkbox v-model="ruleForm.RememberMe" style="margin-bottom: 10px">{{ $t('login.rememberMe') }}</el-checkbox> -->
+      <el-button type="primary" size="medium" class="submit-button" @click="handleSubmit">
+        {{ $t('login.submitText') }}
+      </el-button>
+      <router-link :to="{ path: 'index', query: $route.query }" class="login-method-text">
+        {{ $t('login.codeLogin') }}
+      </router-link>
     </el-form>
-    <div class="login-footer">
-      <router-link :to="{ path: 'index', query: $route.query }">{{ $t('login.pwdLogin') }}</router-link>
-      <router-link :to="{ path: '../password', query: $route.query }">{{ $t('login.forgetPassword') }}</router-link>
-    </div>
   </div>
 </template>
 

src/pages/auth/components/layout.vue

 <template>
   <div class="wrapper">
-    <header class="header">
-      <div class="header-logo">
+    <section class="main">
+      <div class="main-box">
+        <div class="logo">
           <a href="https://www.ezijing.com">
-          <img src="https://zws-imgs-pub.ezijing.com/pc/base/logo.svg" height="50" />
+            <img src="https://zws-imgs-pub.ezijing.com/pc/base/favicon.svg" width="40px" />
           </a>
         </div>
-    </header>
-    <section class="main">
-      <div class="main-box">
         <router-view></router-view>
       </div>
+      <language-switch />
     </section>
-    <footer class="footer"><p class="t1">Copyright © 2020 Zijing Education. All rights reserved.</p></footer>
   </div>
 </template>
 
+<script>
+import languageSwitch from '@/components/languageSwitch.vue'
+export default {
+  components: { languageSwitch }
+}
+</script>
+
 <style lang="scss" scoped>
 .wrapper {
-  padding: 60px;
-  min-height: 100vh;
   display: flex;
-  flex-direction: column;
-  background: url('../assets/bg.jpg') no-repeat 50%;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  // background: url(https://logincdn.msauth.net/shared/1.0/content/images/backgrounds/2_bc3d32a696895f78c19df6c717586a5d.svg);
   background-size: cover;
-  box-sizing: border-box;
 }
 .main {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 .main-box {
-  width: 380px;
-  padding: 60px 40px;
+  width: 450px;
+  min-height: 500px;
+  padding: 48px 40px 36px;
   margin: 0 auto;
   background-color: #fff;
-  box-shadow: 0 2px 10px #999;
-  border-radius: 4px;
+  border-radius: 8px;
+  border: 1px solid #dadce0;
   box-sizing: border-box;
 }
+.logo {
+  text-align: center;
+  padding-bottom: 16px;
+}
 .footer {
   padding: 20px 10px;
   .t1 {
@@ -53,11 +58,31 @@
   text-align: center;
   font-size: 20px;
   color: #353535;
-  margin-bottom: 23px;
+  margin-bottom: 24px;
 }
 @media (max-width: 768px) {
   .wrapper {
+    display: block;
+  }
+  .main {
     padding: 20px;
   }
+  .main-box {
+    width: 100%;
+    min-height: calc(100vh - 100px);
+    border: 0;
+    padding: 0;
+  }
+}
+::v-deep .language-switch {
+  margin: 10px 0;
+  width: 80px;
+  .el-input__inner {
+    border: none;
+    padding-left: 0;
+  }
+  .el-select .el-input .el-select__caret {
+    color: #606266;
+  }
 }
 </style>

src/pages/auth/login.vue

 <template>
   <div class="login">
-    <h1 class="title">登录</h1>
+    <h1 class="title">{{ $t('main.title') }}</h1>
     <div class="login-box">
       <router-view @success="handleSuccess"></router-view>
     </div>
-    <p class="footer" @click="$router.push({ path: '../register', query: $route.query })">注册</p>
+    <p class="footer" @click="$router.push({ path: '../register', query: $route.query })">{{ $t('login.register') }}</p>
   </div>
 </template>
 
@@ -20,15 +20,10 @@ export default {
 
 <style lang="scss" scoped>
 .footer {
-  margin-top: 40px;
+  margin-top: 30px;
   clear: both;
-  color: #007bad;
+  color: #bb4767;
   line-height: 52px;
-  text-align: center;
-  border-top: 1px solid #c2c8d0;
   cursor: pointer;
-  margin-left: -40px;
-  margin-right: -40px;
-  margin-bottom: -60px;
 }
 </style>

src/pages/auth/password.vue

 <template>
   <div class="password">
-    <h1 class="title">忘记密码</h1>
+    <h1 class="title">{{ $t('password.title') }}</h1>
     <router-view></router-view>
     <p class="back" @click="$router.push({ path: 'login', query: $route.query })">{{ $t('password.backText') }}</p>
   </div>
@@ -9,7 +9,7 @@
 <style lang="scss" scoped>
 .back {
   margin-top: 10px;
-  color: #007bad;
+  color: #bb4767;
   line-height: 52px;
   cursor: pointer;
 }

src/pages/auth/register.vue

@@ -9,7 +9,7 @@
 <style lang="scss" scoped>
 .back {
   margin-top: 10px;
-  color: #007bad;
+  color: #bb4767;
   line-height: 52px;
   cursor: pointer;
 }

src/pages/xlearn/login.vue

@@ -28,7 +28,7 @@ export default {
 <style lang="scss" scoped>
 .back {
   margin-top: 10px;
-  color: #007bad;
+  color: #bb4767;
   text-align: right;
   a {
     color: currentColor;

src/pages/xlearn/password.vue

@@ -23,7 +23,7 @@ export default {
 <style lang="scss" scoped>
 .back {
   margin-top: 10px;
-  color: #007bad;
+  color: #bb4767;
   text-align: right;
   a {
     color: currentColor;

src/pages/xlearn/register.vue

@@ -249,7 +249,7 @@ export default {
 }
 .back {
   margin-top: 10px;
-  color: #007bad;
+  color: #bb4767;
   text-align: right;
   a {
     color: currentColor;

src/pages/xtraining/password.vue

@@ -21,7 +21,7 @@ export default {
 <style lang="scss" scoped>
 .back {
   margin-top: 10px;
-  color: #007bad;
+  color: #bb4767;
   line-height: 52px;
   cursor: pointer;
 }

src/style.scss

@@ -11,7 +11,7 @@ body {
 }
 
 /* 改变主题色变量 */
-$--color-primary: #b80037;
+$--color-primary: #aa1941;
 /* 改变 icon 字体路径变量，必需 */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 /* 引入element-ui对应scss文件，重新编译 */
@@ -19,12 +19,33 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 /* 引入隐藏显示样式 */
 @import '~element-ui/lib/theme-chalk/display.css';
 
+a {
+  text-decoration: none;
+  color: currentColor;
+}
+
+.forget-password-text {
+  color: #bb4767;
+  font-weight: 500;
+  font-size: 15px;
+}
+.login-method-text {
+  margin-top: 10px;
+  color: #bb4767;
+  line-height: 52px;
+  cursor: pointer;
+}
+.submit-button-wrapper {
+  position: relative;
+  margin-top: 32px;
+}
 .submit-button {
-  width: 100%;
   display: block;
+  width: 100%;
+  margin-top: 34px;
 }
 .login-footer {
-  margin-top: 10px;
+  margin-top: 14px;
   display: flex;
   justify-content: space-between;
 }