hxx/vuex-ht
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

username 改为mobile

Browse Source
This commit is contained in:
jqtmviyu@gmail.com 2021-01-13 16:41:21 +08:00
parent 940cc302a8
commit aa82a9d8ac
1 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/login/index.vue
View File

@ -3,17 +3,19 @@
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
<div class="title-container"> <div class="title-container">
<h3 class="title">Login Form</h3> <h3 class="title">
<img src="@/assets/common/login-logo.png" alt="">
</h3>
</div> </div>
<el-form-item prop="username"> <el-form-item prop="mobile">
<span class="svg-container"> <span class="svg-container">
<svg-icon icon-class="user" /> <svg-icon icon-class="user" />
</span> </span>
<el-input <el-input
ref="username" ref="username"
v-model="loginForm.username" v-model="loginForm.mobile"
placeholder="Username" placeholder="用户名"
name="username" name="username"
type="text" type="text"
tabindex="1" tabindex="1"
@ -30,7 +32,7 @@
ref="password" ref="password"
v-model="loginForm.password" v-model="loginForm.password"
:type="passwordType" :type="passwordType"
placeholder="Password" placeholder="密码"
name="password" name="password"
tabindex="2" tabindex="2"
auto-complete="on" auto-complete="on"
@ -41,11 +43,12 @@
</span> </span>
</el-form-item> </el-form-item>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button> <el-button class="loginBtn" :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
<!-- .native监听原生事件 -->
<div class="tips"> <div class="tips">
<span style="margin-right:20px;">username: admin</span> <span style="margin-right:20px;">账号: 13800000002</span>
<span> password: any</span> <span> 密码: 123456</span>
</div> </div>
</el-form> </el-form>
@ -74,11 +77,11 @@ export default {
} }
return { return {
loginForm: { loginForm: {
username: 'admin', mobile: '13800000002',
password: '111111' password: '123456'
}, },
loginRules: { loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }], mobile: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }] password: [{ required: true, trigger: 'blur', validator: validatePassword }]
}, },
loading: false, loading: false,
@ -130,7 +133,7 @@ export default {
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg:#283443; $bg:#283443;
$light_gray:#fff; $light_gray:#68b0fe;
$cursor: #fff; $cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) { @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
@ -165,10 +168,21 @@ $cursor: #fff;
.el-form-item { .el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.7); // 输入登录表单的背景色
border-radius: 5px; border-radius: 5px;
color: #454545; color: #454545;
} }
.loginBtn {
background: #407ffe;
height: 64px;
line-height: 32px;
font-size: 24px;
}
.el-form-item__error {
color: #fff
}
} }
</style> </style>
@ -178,6 +192,8 @@ $dark_gray:#889aa4;
$light_gray:#eee; $light_gray:#eee;
.login-container { .login-container {
background-image: url('~@/assets/common/login.jpg');
background-position: center;
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
background-color: $bg; background-color: $bg;