| | |
| | | <template> |
| | | <div class="login"> |
| | | <div class="login" ref="hello_div"> |
| | | <!-- <div class="img-container"> |
| | | <img :src="loginImg" alt=""> |
| | | </div> --> |
| | | <el-form ref="loginForm" :model="loginForm" class="login-form" label-position="left"> |
| | | <el-form-item prop="loginName"> |
| | | <el-input |
| | | v-model="loginForm.loginName" |
| | | placeholder="输入用户名" |
| | | name="loginName" |
| | | type="text" |
| | | |
| | | > |
| | | |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="password"> |
| | | <el-input |
| | | :type="passwordType" |
| | | v-model="loginForm.password" |
| | | placeholder="输入密码" |
| | | name="password" |
| | | |
| | | @keyup.enter.native="handleLogin" |
| | | > |
| | | <span slot="suffix" class="suffix-icon" :class="{eyeOpen: isOpen}" @click="showPwd"> |
| | | <svg-icon :icon-class="eyeIconClass" /> |
| | | </span> |
| | | </el-input> |
| | | </el-form-item> |
| | | |
| | | <el-button :loading="loading" class="loginButton" type="primary" @click.native.prevent="handleLogin">登录</el-button> |
| | | </el-form> |
| | | <div class="login_" ref="logon_div"> |
| | | <el-form ref="loginForm" :model="loginForm" class="login-form" label-position="left"> |
| | | <el-form-item prop="loginName"> |
| | | <el-input |
| | | v-model="loginForm.loginName" |
| | | placeholder="输入用户名" |
| | | name="loginName" |
| | | type="text" |
| | | |
| | | > |
| | | |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="password"> |
| | | <el-input |
| | | :type="passwordType" |
| | | v-model="loginForm.password" |
| | | placeholder="输入密码" |
| | | name="password" |
| | | |
| | | @keyup.enter.native="handleLogin" |
| | | > |
| | | <span slot="suffix" class="suffix-icon" :class="{eyeOpen: isOpen}" @click="showPwd"> |
| | | <svg-icon :icon-class="eyeIconClass" /> |
| | | </span> |
| | | </el-input> |
| | | </el-form-item> |
| | | |
| | | <el-button :loading="loading" class="loginButton" type="primary" @click.native.prevent="handleLogin">登录</el-button> |
| | | </el-form> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | isOpen: false // 根据状态显示不同样式类名 |
| | | } |
| | | }, |
| | | |
| | | mounted() { |
| | | this.setWH(); |
| | | }, |
| | | |
| | | methods: { |
| | | setWH() { |
| | | //获取屏幕宽度 |
| | | let hello_Width = this.$refs.hello_div.offsetWidth; |
| | | // let hello_Height = this.$refs.hello_div.offsetHeight; |
| | | let hello_Height = document.documentElement.clientHeight; |
| | | //获取登录元素宽度 |
| | | let logon_Width = this.$refs.logon_div.offsetWidth; |
| | | let logon_Height = this.$refs.logon_div.offsetHeight; |
| | | //设置登录元素的magin-left |
| | | if (hello_Width>logon_Width) { |
| | | let margin_left = (hello_Width - logon_Width)/2; |
| | | this.$refs.logon_div.style['margin-left'] = margin_left + "px"; |
| | | } |
| | | |
| | | if (hello_Height>logon_Height) { |
| | | let margin_top = (hello_Height - logon_Height)/2; |
| | | this.$refs.logon_div.style['margin-top'] = margin_top + "px"; |
| | | } |
| | | }, |
| | | // 忘记密码回调 |
| | | |
| | | // 清除用户名 |
| | |
| | | console.log(data_); |
| | | if(data_.data.success) { |
| | | localStorage.setItem('userId',data_.data.data.id); |
| | | localStorage.setItem('userName',data_.data.data.id); |
| | | localStorage.setItem('userName',data_.data.data.name); |
| | | localStorage.setItem('roleId',data_.data.data.roleCode); |
| | | localStorage.setItem('roleName',data_.data.data.roleName); |
| | | localStorage.setItem('departId',data_.data.data.departCode); |
| | |
| | | </script> |
| | | |
| | | <style > |
| | | .login_ { |
| | | max-width: 350px; |
| | | background-color: #f9f9fb; |
| | | padding: 20px; |
| | | } |
| | | |
| | | </style> |