From 0bbc5abeab6a1cb504b36bcd620fcb55e496d989 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期一, 21 三月 2022 10:32:50 +0800 Subject: [PATCH] '登录页' --- src/views/login/components/login-form.vue | 276 +++++++++++++++++++++++++++++------------------------- 1 files changed, 149 insertions(+), 127 deletions(-) diff --git a/src/views/login/components/login-form.vue b/src/views/login/components/login-form.vue index 62e50d5..2aeede9 100644 --- a/src/views/login/components/login-form.vue +++ b/src/views/login/components/login-form.vue @@ -1,43 +1,89 @@ <template> - <el-form ref="loginForm" :model="loginForm" :rules="loginRules" :inline="false" class="loginForm" @keydown.enter.native="handleSubmit"> - <div class="title-container"> - <h3 class="title">登录</h3> + <div class="login-form"> + <div class="login-form-title"><span>登录</span></div> + <div class="login-form-main"> + <el-form ref="loginForm" :model="loginForm" :rules="loginRules" :inline="false" class="loginForm" @keydown.enter.native="handleSubmit"> + <div class="login-form-main-user"><span>用户名</span></div> + <div class="login-form-main-user_input"> + <el-form-item prop="username"> + <el-input + v-model="loginForm.username" + placeholder="请输入用户名" + name="username" + type="text" + auto-complete="on" + /> + </el-form-item> + </div> + <div class="login-form-main-password"><span>密码</span></div> + <div class="login-form-main-password_input"> + <el-row> + <el-col :span="21"> + <el-form-item prop="password"> + <el-input + v-model="loginForm.password" + :type="loginPasswordType" + placeholder="请输入密码" + name="password" + auto-complete="on" + @keyup.enter.native="handleSubmit" + /> + </el-form-item> + </el-col> + <el-col :span="3"> + <img src="../../../assets/icon_visible.png" style="margin:0 auto;padding-top: 9px;padding-left: 10px;" @click="showLoginPwd"></img> + </el-col> + </el-row> + </div> + </el-form> </div> - <el-form-item prop="username"> - <span class="svg-container"> - <svg-icon icon-class="user" /> - </span> - <el-input - v-model="loginForm.username" - placeholder="请输入用户名" - name="username" - type="text" - auto-complete="on" - /> - </el-form-item> - <el-form-item prop="password"> - <span class="svg-container"> - <svg-icon icon-class="password" /> - </span> - <el-input - v-model="loginForm.password" - :type="loginPasswordType" - placeholder="请输入密码" - name="password" - auto-complete="on" - @keyup.enter.native="handleSubmit" - /> - <span class="show-pwd" @click="showLoginPwd"> - <svg-icon :icon-class="loginPasswordType === 'password' ? 'eye' : 'eye-open'" /> - </span> - </el-form-item> - <div style="text-align:center;"> - <el-button :loading="logingLoading" class="login-button" type="primary" @click.native.prevent="handleSubmit"> - 登录 + <div class="login-form-button"> + <el-button class="login-form-login-button" :loading="logingLoading" :disabled="submitLoading" type="primary" @click.native.prevent="handleSubmit"> + <span> + 登录 + </span> </el-button> - <br> </div> - </el-form> + </div> + <!-- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" :inline="false" class="loginForm" @keydown.enter.native="handleSubmit">--> +<!-- <div class="title-container">--> +<!-- <h3 class="title">登录</h3>--> +<!-- </div>--> +<!-- <el-form-item prop="username">--> +<!-- <span class="svg-container">--> +<!-- <svg-icon icon-class="user" />--> +<!-- </span>--> +<!-- <el-input--> +<!-- v-model="loginForm.username"--> +<!-- placeholder="请输入用户名"--> +<!-- name="username"--> +<!-- type="text"--> +<!-- auto-complete="on"--> +<!-- />--> +<!-- </el-form-item>--> +<!-- <el-form-item prop="password">--> +<!-- <span class="svg-container">--> +<!-- <svg-icon icon-class="password" />--> +<!-- </span>--> +<!-- <el-input--> +<!-- v-model="loginForm.password"--> +<!-- :type="loginPasswordType"--> +<!-- placeholder="请输入密码"--> +<!-- name="password"--> +<!-- auto-complete="on"--> +<!-- @keyup.enter.native="handleSubmit"--> +<!-- />--> +<!-- <span class="show-pwd" @click="showLoginPwd">--> +<!-- <svg-icon :icon-class="loginPasswordType === 'password' ? 'eye' : 'eye-open'" />--> +<!-- </span>--> +<!-- </el-form-item>--> +<!-- <div style="text-align:center;">--> +<!-- <el-button :loading="logingLoading" class="login-button" type="primary" @click.native.prevent="handleSubmit">--> +<!-- 登录--> +<!-- </el-button>--> +<!-- <br>--> +<!-- </div>--> +<!-- </el-form>--> </template> <script> import Cookies from "js-cookie"; @@ -85,7 +131,6 @@ }, created(){ - this.test() }, methods: { showLoginPwd() { @@ -123,95 +168,72 @@ } </script> -<style rel="stylesheet/scss" lang="scss"> - $cursor: #fff; - $bg:#2d3a4b; - $dark_gray:#889aa4; - $light_gray:#eee; - .loginForm { - .el-input { - display: inline-block; - height: 47px; - width: 85%; - input { - background: transparent; - background-color: #eee; - border: 0px; - -webkit-appearance: none; - border-radius: 0px; - padding: 12px 5px 12px 15px; - color: #333333; - height: 47px; - caret-color:#333333; - &:-webkit-autofill { - -webkit-box-shadow: 0 0 0px 1000px #cfd5da inset !important; - -webkit-text-fill-color: #fff !important; - } - } - } - .el-form-item { - border: 1px solid rgba(255, 255, 255, 0.1); - background: rgba(0, 0, 0, 0.1); - border-radius: 5px; - color: #454545; - } - .tips { - font-size: 14px; - color: #fff; - margin-bottom: 10px; - span { - &:first-of-type { - margin-right: 16px; - } - } - } - .svg-container { - padding: 6px 5px 6px 15px; - color: $dark_gray; - vertical-align: middle; - width: 30px; - display: inline-block; - } - .title-container { - position: relative; - .title { - font-size: 26px; - color: #333333; - margin: 0px auto 40px auto; - text-align: center; - font-weight: bold; - } - .set-language { - color: #fff; - position: absolute; - top: 3px; - font-size:18px; - right: 0px; - cursor: pointer; - } - } - .show-pwd { - position: absolute; - right: 10px; - top: 7px; - font-size: 16px; - color: $dark_gray; - cursor: pointer; - user-select: none; - } - .thirdparty-button { - position: absolute; - right: 0; - bottom: 6px; - } - .login-button { - height:36px; - margin-bottom:30px; - margin-top:10px; - width:100px; - border-radius:25px; - background-color: #034EA2; - } +<style scoped> + .login-form{ + min-height: 100%; + width:100%; } - + .login-form-main{ + margin-left:50px; + } + .login-form-title{ + width: 60px; + height: 143px; + font-size: 30px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 600; + color: #1851DC; + line-height: 42px; + padding-top: 53px; + margin:0 auto; + } + .login-form-main-user{ + height: 20px; + font-size: 16px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 500; + color: #333333; + line-height: 20px; + } + .login-form-main-password{ + height: 20px; + font-size: 16px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 500; + color: #333333; + line-height: 20px; + margin-top: 24px; + } + /deep/.el-input__inner{ + height: 40px; + border:0px; + background: #F0F0F0; + } + .login-form-main-user_input{ + margin-top: 8px; + width: 364px; + height: 40px; + background: #FFFFFF !important; + border-radius: 4px; + border: 0px solid; + } + .login-form-main-password_input{ + margin-top: 8px; + width: 364px; + height: 40px; + background: #F0F0F0; + border-radius: 4px; + border: 0px solid; + } + .login-form-button{ + width:100%; + text-align: center; + padding-top: 40px; + } + .login-form-login-button { + width: 364px; + height: 48px; + background: #4778FF; + border-radius: 4px; + } </style> -- Gitblit v1.9.2