|
|
@@ -6,54 +6,41 @@
|
|
|
:rules="loginRules"
|
|
|
class="login-form"
|
|
|
>
|
|
|
- <div class="flex text-white items-center py-4">
|
|
|
- <span class="text-2xl flex-1 text-center">水母智脑-数据看板系统</span>
|
|
|
+ <div class="title">
|
|
|
+ <span>登录</span>
|
|
|
</div>
|
|
|
-
|
|
|
<el-form-item prop="username">
|
|
|
- <div class="p-2 text-white">
|
|
|
- <svg-icon icon-class="user" />
|
|
|
- </div>
|
|
|
+ <span class="m-2">
|
|
|
+ <svg-icon size="30px" icon-class="username" /> </span
|
|
|
+ >|
|
|
|
<el-input
|
|
|
ref="username"
|
|
|
v-model="loginData.username"
|
|
|
class="flex-1"
|
|
|
- size="large"
|
|
|
placeholder="请输入登录账号"
|
|
|
name="username"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
- <el-tooltip
|
|
|
- :disabled="isCapslock === false"
|
|
|
- content="Caps lock is On"
|
|
|
- placement="right"
|
|
|
- >
|
|
|
- <el-form-item prop="password">
|
|
|
- <span class="p-2 text-white">
|
|
|
- <svg-icon icon-class="password" />
|
|
|
- </span>
|
|
|
- <el-input
|
|
|
- v-model="loginData.password"
|
|
|
- class="flex-1"
|
|
|
- placeholder="请输入登录密码"
|
|
|
- :type="passwordVisible === false ? 'password' : 'input'"
|
|
|
- size="large"
|
|
|
- name="password"
|
|
|
- @keyup="checkCapslock"
|
|
|
- @keyup.enter="handleLogin"
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <span class="m-2">
|
|
|
+ <svg-icon size="30px" icon-class="password" /> </span
|
|
|
+ >|
|
|
|
+ <el-input
|
|
|
+ v-model="loginData.password"
|
|
|
+ class="flex-1"
|
|
|
+ placeholder="请输入登录密码"
|
|
|
+ :type="passwordVisible === false ? 'password' : 'input'"
|
|
|
+ name="password"
|
|
|
+ @keyup.enter="handleLogin"
|
|
|
+ />
|
|
|
+ <span class="mr-3" @click="passwordVisible = !passwordVisible">
|
|
|
+ <svg-icon
|
|
|
+ size="18px"
|
|
|
+ :icon-class="!passwordVisible ? 'eye' : 'eye-open'"
|
|
|
+ class="cursor-pointer"
|
|
|
/>
|
|
|
- <span class="mr-2" @click="passwordVisible = !passwordVisible">
|
|
|
- <svg-icon
|
|
|
- :icon-class="!passwordVisible ? 'eye' : 'eye-open'"
|
|
|
- class="text-white cursor-pointer"
|
|
|
- />
|
|
|
- </span>
|
|
|
- </el-form-item>
|
|
|
- </el-tooltip>
|
|
|
-
|
|
|
- <el-checkbox v-model="loginData.auto" label="自动登录" size="large" />
|
|
|
-
|
|
|
+ </span>
|
|
|
+ </el-form-item>
|
|
|
<el-button
|
|
|
size="default"
|
|
|
:loading="loading"
|
|
|
@@ -63,6 +50,13 @@
|
|
|
>登录
|
|
|
</el-button>
|
|
|
|
|
|
+ <el-checkbox
|
|
|
+ v-model="loginData.auto"
|
|
|
+ label="自动登录"
|
|
|
+ size="small"
|
|
|
+ fill="#727272"
|
|
|
+ />
|
|
|
+
|
|
|
<!-- 账号密码提示 -->
|
|
|
<div class="mt-4 text-white text-sm">
|
|
|
<span>admin</span>，
|
|
|
@@ -91,14 +85,9 @@ const route = useRoute();
|
|
|
*/
|
|
|
const loading = ref(false);
|
|
|
/**
|
|
|
- * 是否大写锁定
|
|
|
- */
|
|
|
-const isCapslock = ref(false);
|
|
|
-/**
|
|
|
* 密码是否可见
|
|
|
*/
|
|
|
const passwordVisible = ref(false);
|
|
|
-
|
|
|
/**
|
|
|
* 登录表单引用
|
|
|
*/
|
|
|
@@ -119,7 +108,7 @@ const loginRules = {
|
|
|
* 用户名校验
|
|
|
*/
|
|
|
function usernameValidator(rule: any, value: any, callback: any) {
|
|
|
- callback();
|
|
|
+ callback();
|
|
|
}
|
|
|
/**
|
|
|
* 密码校验器
|
|
|
@@ -131,15 +120,6 @@ function passwordValidator(rule: any, value: any, callback: any) {
|
|
|
callback();
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-/**
|
|
|
- * 检查输入大小写状态
|
|
|
- */
|
|
|
-function checkCapslock(e: any) {
|
|
|
- const { key } = e;
|
|
|
- isCapslock.value = key && key.length === 1 && key >= "A" && key <= "Z";
|
|
|
-}
|
|
|
-
|
|
|
/**
|
|
|
* 登录
|
|
|
*/
|
|
|
@@ -177,59 +157,76 @@ function handleLogin() {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.login-container {
|
|
|
+ box-sizing: border-box;
|
|
|
width: 100%;
|
|
|
- min-height: 100%;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 750px;
|
|
|
overflow: hidden;
|
|
|
- background-color: #2d3a4b;
|
|
|
-
|
|
|
+ background: #eaf7fd url("../../assets/login/login.jpg") no-repeat left top;
|
|
|
+ background-size: auto 100%;
|
|
|
.login-form {
|
|
|
- width: 520px;
|
|
|
+ width: 500px;
|
|
|
max-width: 100%;
|
|
|
- padding: 160px 35px 0;
|
|
|
- margin: 0 auto;
|
|
|
+ padding: 0 42px;
|
|
|
+ margin: 260px auto;
|
|
|
overflow: hidden;
|
|
|
-
|
|
|
- .captcha {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 120px;
|
|
|
- height: 48px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 0 10px #f2f3f5;
|
|
|
+ .title {
|
|
|
+ height: 98px;
|
|
|
+ line-height: 98px;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #151515;
|
|
|
+ }
|
|
|
+ .svg-icon {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
}
|
|
|
}
|
|
|
+ .el-form-item {
|
|
|
+ background: #f2f3f5;
|
|
|
+ border: 1px solid #f2f3f5;
|
|
|
+ border-radius: 5px;
|
|
|
+ height: 54px;
|
|
|
+ line-height: 54px;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #747474;
|
|
|
+ }
|
|
|
+ .el-button {
|
|
|
+ background: #006eff;
|
|
|
+ height: 54px;
|
|
|
+ line-height: 54px;
|
|
|
+ font-size: 18px;
|
|
|
+ margin: 20px auto;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
-.el-form-item {
|
|
|
- background: rgb(0 0 0 / 10%);
|
|
|
- border: 1px solid rgb(255 255 255 / 10%);
|
|
|
- border-radius: 5px;
|
|
|
+@media only screen and (min-width: 1200px) {
|
|
|
+ .login-container {
|
|
|
+ padding-left: 660px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.el-input {
|
|
|
background: transparent;
|
|
|
-
|
|
|
+ height: 54px;
|
|
|
+ line-height: 54px;
|
|
|
// 子组件 scoped 无效，使用 :deep
|
|
|
:deep(.el-input__wrapper) {
|
|
|
padding: 0;
|
|
|
background: transparent;
|
|
|
box-shadow: none;
|
|
|
-
|
|
|
+ height: 54px;
|
|
|
.el-input__inner {
|
|
|
- color: #fff;
|
|
|
background: transparent;
|
|
|
+ height: 54px;
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
- caret-color: #fff;
|
|
|
-
|
|
|
+ text-indent: 1.5em;
|
|
|
&:-webkit-autofill {
|
|
|
box-shadow: 0 0 0 1000px transparent inset !important;
|
|
|
-webkit-text-fill-color: #fff !important;
|
|
|
}
|
|
|
-
|
|
|
// 设置输入框自动填充的延迟属性
|
|
|
&:-webkit-autofill,
|
|
|
&:-webkit-autofill:hover,
|
|
|
@@ -241,4 +238,11 @@ function handleLogin() {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
|
|
|
+ background-color: #727272;
|
|
|
+ border-color: #727272;
|
|
|
+}
|
|
|
+:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
|
|
|
+ color: #727272;
|
|
|
+}
|
|
|
</style>
|
