Sfoglia il codice sorgente

修改登录注册页面样式

zhanglb 3 anni fa
parent
commit
93d5c4e5b7

+ 3 - 1
front-vue/src/assets/styles/huyi.scss

@@ -64,7 +64,9 @@
 .m20 {
   margin-left: 20px;
 }
-
+.mt32{
+  margin-top: 32px;
+}
 .el-dialog:not(.is-fullscreen) {
   margin-top: 6vh !important;
 }

+ 10 - 2
front-vue/src/views/login.vue

@@ -40,7 +40,7 @@
                             </div>
                         </el-form-item>
                     </el-tab-pane>
-                    <el-tab-pane label="密码登录" name="login_password">
+                    <el-tab-pane label="账号密码登录" name="login_password">
                         <el-form-item prop="username">
                             <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                                 <img slot="prefix" class="zap-login__icon" src="../assets/images/login/icon_account.png" alt="">
@@ -71,7 +71,7 @@
                                 <span v-else>登 录 中...</span>
                             </el-button>
                         </el-form-item>
-                        <el-link style="margin-right:50px; font-size: 16px;margin-bottom: 30px;color: #4280F2;" href="/registerUser">还没账号?立即注册</el-link>
+                        <el-link style="margin-right:50px; font-size: 16px;margin-bottom: 30px;color: #4280F2;" href="/registerUser">还没账号?立即注册</el-link>
                         <el-form-item>
                             <div class="zap-agreement">
                                 <span class="zap-agreement__text">登录视为同意并遵守</span>
@@ -449,3 +449,11 @@ export default {
 };
 </script>
 
+<style lang="scss" scoped>
+::v-deep .el-tabs__item{
+  width: auto;
+}
+::v-deep .zap-login .zap-tabs .el-tabs__item:nth-of-type(3){
+  padding-left: 64px;
+}
+</style>

+ 27 - 21
front-vue/src/views/registerUser.vue

@@ -20,10 +20,10 @@
                             </el-input>
                         </el-form-item>
                         <el-form-item prop="shortMessageCode">
-                            <el-input v-model="loginForm.shortMessageCode" type="text"  maxlength="" auto-complete="off" placeholder="请输入验证码" id="" class="login-code-msg"  onkeydown="enterHandler(event)">
+                            <el-input v-model="loginForm.shortMessageCode" type="text" maxlength="" auto-complete="off" placeholder="请输入验证码" id="" class="login-code-msg"  onkeydown="enterHandler(event)">
                                 <img slot="prefix" class="zap-login__icon" src="../assets/images/register/icon_verify.png" alt="">
-                                <el-button class="zap-code-button" slot="suffix" @click="sendMessage" :disabled="sendShortMessageBtn">{{codeBtnWord}}</el-button>
                             </el-input>
+                            <el-button class="zap-code-button" @click="sendMessage" :disabled="sendShortMessageBtn">{{codeBtnWord}}</el-button>
                         </el-form-item>
                         <el-form-item prop="password">
                             <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" maxlength="12">
@@ -35,23 +35,19 @@
                                 <img slot="prefix" class="zap-login__icon" src="../assets/images/register/icon_pwd.png" alt="">
                             </el-input>
                         </el-form-item>
-                        <el-form-item>
-                            <el-checkbox v-model="loginForm.checked" style="margin-bottom: 10px;margin-right: 10px;">
-                            </el-checkbox>
-                            <div class="zap-agreement">
-                                <span class="zap-agreement__text">我已阅读</span>
-                                <div class="zap-agreement__link">
-                                    <span>《招采云链服务平台会员注册协议》</span>
-                                    <span>《招采云链服务平台隐私政策》</span>
-                                </div>
-                            </div>
-                        </el-form-item>
                         <el-form-item style="width:100%;">
                             <el-button :loading="loading"  class="zap-button" size="medium" type="primary" @click.native.prevent="handleLogin">
                                 <span v-if="!loading">注 册</span>
                                 <span v-else>请 稍 后...</span>
                             </el-button>
                         </el-form-item>
+                        <div class="zap-agreement">
+                            <span class="zap-agreement__text">登录视为同意并遵守</span>
+                            <div class="zap-agreement__link">
+                                <span>《招采云链服务平台会员注册协议》</span>
+                                <span>《招采云链服务平台隐私政策》</span>
+                            </div>
+                        </div>
                     </el-tab-pane>
                 </el-tabs>
             </template>
@@ -80,15 +76,15 @@
             width="30%">
             <div style="display:flex;">
                 <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" @keyup.enter.native="handleLogin">
-                    <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+                    <img slot="prefix" class="zap-login__icon" src="../assets/images/login/icon_verify.png" alt="">
                 </el-input>
                 <div class="login-code">
                     <img :src="codeUrl" @click="getCode" class="login-code-img" />
                 </div>
             </div>
-            <span slot="footer" class="dialog-footer">
+            <el-row slot="footer" type="flex" justify="center" class="mt32">
                 <el-button type="primary" @click="handleImgCodeSubmit">确 定</el-button>
-            </span>
+            </el-row>
         </el-dialog>
     </login-content>
 </template>
@@ -241,11 +237,7 @@ export default {
                     this.loading = false;
                     return;
                   }
-                  if (!this.loginForm.checked) {
-                    this.msgError("请阅读平台协议并确认");
-                    this.loading = false;
-                    return;
-                  }
+
                   this.loginForm.type = "2";
                   registerUser(this.loginForm).then((res) => {
                     this.loading = false;
@@ -351,3 +343,17 @@ export default {
 <style rel="stylesheet/scss" lang="scss">
   @import "~@/assets/styles/login.scss";
 </style>
+<style lang="scss" scoped>
+::v-deep .el-tabs__item{
+  width: auto;
+}
+.zap-login .zap-button {
+  margin-top: 0;
+}
+.zap-agreement{
+  margin-top: 0;
+}
+.zap-login .zap-agreement__text{
+  color: #333333;
+}
+</style>