| | |
| | | <template> |
| | | <div class="login"> |
| | | <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> |
| | | <h3 class="title">云通OA办公系统</h3> |
| | | <el-form-item prop="username"> |
| | | <el-input |
| | | v-model="loginForm.username" |
| | | type="text" |
| | | auto-complete="off" |
| | | placeholder="账号" |
| | | > |
| | | <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="password"> |
| | | <el-input |
| | | v-model="loginForm.password" |
| | | type="password" |
| | | auto-complete="off" |
| | | placeholder="密码" |
| | | @keyup.enter.native="handleLogin" |
| | | > |
| | | <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="code" v-if="captchaOnOff"> |
| | | <el-input |
| | | v-model="loginForm.code" |
| | | auto-complete="off" |
| | | placeholder="验证码" |
| | | style="width: 63%" |
| | | @keyup.enter.native="handleLogin" |
| | | > |
| | | <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> |
| | | </el-input> |
| | | <div class="login-code"> |
| | | <img :src="codeUrl" @click="getCode" class="login-code-img"/> |
| | | </div> |
| | | </el-form-item> |
| | | <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> |
| | | <el-form-item style="width:100%;"> |
| | | <el-button |
| | | :loading="loading" |
| | | size="medium" |
| | | type="primary" |
| | | style="width:100%;" |
| | | @click.native.prevent="handleLogin" |
| | | > |
| | | <span v-if="!loading">登 录</span> |
| | | <span v-else>登 录 中...</span> |
| | | </el-button> |
| | | <div style="float: right;" v-if="register"> |
| | | <router-link class="link-type" :to="'/register'">立即注册</router-link> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div class="login-main"> |
| | | <div class="login-title"> |
| | | <img src="../assets/logo/login-logo.png" style="display: block; width: 400px;"> |
| | | </div> |
| | | <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> |
| | | <h3 class="title"></h3> |
| | | <el-form-item prop="username"> |
| | | <el-input |
| | | v-model="loginForm.username" |
| | | type="text" |
| | | auto-complete="off" |
| | | placeholder="账号" |
| | | > |
| | | <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="password"> |
| | | <el-input |
| | | v-model="loginForm.password" |
| | | type="password" |
| | | auto-complete="off" |
| | | placeholder="密码" |
| | | @keyup.enter.native="handleLogin" |
| | | > |
| | | <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="code" v-if="captchaOnOff"> |
| | | <el-input |
| | | v-model="loginForm.code" |
| | | auto-complete="off" |
| | | placeholder="验证码" |
| | | style="width: 320px" |
| | | @keyup.enter.native="handleLogin" |
| | | > |
| | | <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> |
| | | </el-input> |
| | | <div class="login-code"> |
| | | <img :src="codeUrl" @click="getCode" class="login-code-img"/> |
| | | </div> |
| | | </el-form-item> |
| | | <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> |
| | | <el-form-item style="width:100%;"> |
| | | <el-button |
| | | :loading="loading" |
| | | size="medium" |
| | | type="primary" |
| | | style="width:100%; height: 44px; font-size: 16px;" |
| | | @click.native.prevent="handleLogin" |
| | | > |
| | | <span v-if="!loading">登 录</span> |
| | | <span v-else>登 录 中...</span> |
| | | </el-button> |
| | | <div style="float: right;" v-if="register"> |
| | | <router-link class="link-type" :to="'/register'">立即注册</router-link> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | |
| | | <!-- 底部 --> |
| | | <div class="el-login-footer"> |
| | | <span>Copyright © 2018-2021 ruoyi.vip All Rights Reserved.</span> |
| | | <span>Copyright © 2018-2021 吉林云通数链科技有限公司 版权所有</span> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | text-align: center; |
| | | color: #707070; |
| | | } |
| | | |
| | | .login-main { |
| | | display: flex; |
| | | flex-direction: column; |
| | | .login-title { |
| | | display: flex; |
| | | justify-content: center; |
| | | margin-bottom: 25px; |
| | | } |
| | | } |
| | | .login-form { |
| | | border-radius: 6px; |
| | | background: #ffffff; |
| | | width: 400px; |
| | | padding: 25px 25px 5px 25px; |
| | | background: rgba(255, 255, 255, 0.5); |
| | | width: 510px; |
| | | padding: 25px 40px 5px 40px; |
| | | box-sizing: border-box; |
| | | .el-input { |
| | | height: 38px; |
| | | input { |
| | |
| | | color: #bfbfbf; |
| | | } |
| | | .login-code { |
| | | width: 33%; |
| | | width: 103px; |
| | | height: 38px; |
| | | float: right; |
| | | img { |