| | |
| | | <template> |
| | | <div class="login-right-new"> |
| | | <div class="user-login">用户登录</div> |
| | | <el-form |
| | | class="login-form" |
| | | status-icon |
| | |
| | | :model="loginForm" |
| | | label-width="0" |
| | | > |
| | | <!-- <el-form-item v-if="tenantMode" prop="tenantId"> |
| | | <el-input |
| | | @keyup.enter="handleLogin" |
| | | v-model="loginForm.tenantId" |
| | | auto-complete="off" |
| | | :placeholder="$t('login.tenantId')" |
| | | > |
| | | <template #prefix> |
| | | <i class="icon-quanxian" /> |
| | | </template> |
| | | </el-input> |
| | | </el-form-item> --> |
| | | <el-form-item prop="username"> |
| | | <div class="username"> |
| | | <div> |
| | | <el-form-item prop="username"> |
| | | <el-input |
| | | @keyup.enter="handleLogin" |
| | | v-model="loginForm.username" |
| | | autocomplete="off" |
| | | :placeholder="$t('login.username')" |
| | | > |
| | | <template #prefix> |
| | | <i class="icon-yonghu" /> |
| | | </template> |
| | | </el-input> |
| | | </el-form-item> |
| | | </div> |
| | | </div> |
| | | <div class="password"> |
| | | <el-form-item prop="password"> |
| | | <el-input |
| | | @keyup.enter="handleLogin" |
| | |
| | | autocomplete="off" |
| | | :placeholder="$t('login.password')" |
| | | > |
| | | <template #suffix> |
| | | <!-- <template #suffix> |
| | | <i class="el-icon-view el-input__icon" @click="showPassword" /> |
| | | </template> |
| | | <template #prefix> |
| | | <i class="icon-mima" /> |
| | | </template> |
| | | </template> --> |
| | | </el-input> |
| | | </el-form-item> |
| | | <!-- <el-form-item prop="code" class="login-code" v-if="captchaMode"> |
| | | <el-input |
| | | @keyup.enter="handleLogin" |
| | | v-model="loginForm.code" |
| | | auto-complete="off" |
| | | :placeholder="$t('login.code')" |
| | | > |
| | | <template #prefix> |
| | | <i class="icon-yanzhengma"></i> |
| | | </template> |
| | | <template #append> |
| | | <div class="login-code-box"> |
| | | <img :src="loginForm.image" class="login-code-img" @click="refreshCode" /> |
| | | </div> |
| | | </template> |
| | | </el-input> |
| | | </el-form-item> --> |
| | | </div> |
| | | <div class="forgot-password">忘记密码</div> |
| | | <div class=""> |
| | | <el-form-item> |
| | | <el-button type="primary" @click.prevent="handleLogin" class="login-submit" |
| | | >{{ $t('login.submit') }} |
| | | <el-button type="primary" @click.prevent="handleLogin" class="login-submit"> |
| | | {{ $t('login.submit') }} |
| | | </el-button> |
| | | <!-- <el-button |
| | | v-if="this.registerMode" |
| | | type="danger" |
| | | @click.prevent="handleRegister" |
| | | class="register-submit" |
| | | >{{ $t('login.register') }} |
| | | </el-button> --> |
| | | </el-form-item> |
| | | <!-- <el-dialog title="请选择身份信息后登录" append-to-body v-model="userBox" width="400px"> |
| | | <avue-form :option="userOption" v-model="userForm" @submit="submitLogin" /> |
| | | </el-dialog> --> |
| | | </div> |
| | | </el-form> |
| | | |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | }; |
| | | </script> |
| | | |
| | | <style></style> |
| | | <style lang="scss" scoped> |
| | | .login-right-new { |
| | | .login-form { |
| | | :deep(.el-form-item) { |
| | | width: 300px; |
| | | margin: 15px 0px 0px 86px; |
| | | } |
| | | |
| | | :deep(.el-input) { |
| | | width: 100%; |
| | | .el-input__wrapper { |
| | | background: rgba(17, 64, 136, 0.1); |
| | | box-shadow: 0 0 0 1px rgba(17, 64, 136, 0.2); |
| | | height: 42px; |
| | | } |
| | | |
| | | .el-input__inner { |
| | | color: #fff; |
| | | &::placeholder { |
| | | color: rgba(255, 255, 255, 0.6); |
| | | } |
| | | } |
| | | } |
| | | :deep(.el-button) { |
| | | position: absolute; |
| | | width: 390px; |
| | | height: 48px; |
| | | top: 320px; |
| | | left: -26px; |
| | | background: linear-gradient( 270deg, rgba(103,209,251,0.8) 0%, rgba(0,82,248,0.58) 100%); |
| | | box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.3); |
| | | border: none; |
| | | font-size: 16px; |
| | | |
| | | &:hover { |
| | | background: linear-gradient(270deg, #0070FF 0%, rgba(0,112,255,0.5) 100%); |
| | | } |
| | | } |
| | | } |
| | | |
| | | .username, .password { |
| | | margin-bottom: 20px; |
| | | } |
| | | .login-click { |
| | | margin-top: 30px; |
| | | } |
| | | } |
| | | </style> |