feat: 登录样式修改
This commit is contained in:
wangdan-fit2cloud
parent
f182754823
commit
9cd63be114
@ -7,10 +7,9 @@
|
|||||||
:rules="rules"
|
:rules="rules"
|
||||||
>
|
>
|
||||||
<p class="mb-8">新密码</p>
|
<p class="mb-8">新密码</p>
|
||||||
<el-form-item prop="password">
|
<el-form-item prop="password" style="margin-bottom: 8px">
|
||||||
<el-input
|
<el-input
|
||||||
type="password"
|
type="password"
|
||||||
size="large"
|
|
||||||
class="input-item"
|
class="input-item"
|
||||||
v-model="resetPasswordForm.password"
|
v-model="resetPasswordForm.password"
|
||||||
placeholder="请输入密码"
|
placeholder="请输入密码"
|
||||||
@ -21,7 +20,6 @@
|
|||||||
<el-form-item prop="re_password">
|
<el-form-item prop="re_password">
|
||||||
<el-input
|
<el-input
|
||||||
type="password"
|
type="password"
|
||||||
size="large"
|
|
||||||
class="input-item"
|
class="input-item"
|
||||||
v-model="resetPasswordForm.re_password"
|
v-model="resetPasswordForm.re_password"
|
||||||
placeholder="请输入确认密码"
|
placeholder="请输入确认密码"
|
||||||
@ -30,9 +28,8 @@
|
|||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<p class="mb-8">使用邮箱</p>
|
<p class="mb-8">使用邮箱</p>
|
||||||
<el-form-item>
|
<el-form-item style="margin-bottom: 8px">
|
||||||
<el-input
|
<el-input
|
||||||
size="large"
|
|
||||||
class="input-item"
|
class="input-item"
|
||||||
:disabled="true"
|
:disabled="true"
|
||||||
v-bind:modelValue="user.userInfo?.email"
|
v-bind:modelValue="user.userInfo?.email"
|
||||||
@ -42,18 +39,9 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="code">
|
<el-form-item prop="code">
|
||||||
<div class="flex-between w-full">
|
<div class="flex-between w-full">
|
||||||
<el-input
|
<el-input class="code-input" v-model="resetPasswordForm.code" placeholder="请输入验证码">
|
||||||
size="large"
|
|
||||||
class="code-input"
|
|
||||||
v-model="resetPasswordForm.code"
|
|
||||||
placeholder="请输入验证码"
|
|
||||||
>
|
|
||||||
</el-input>
|
</el-input>
|
||||||
<el-button
|
<el-button class="send-email-button ml-8" @click="sendEmail" :loading="loading"
|
||||||
size="large"
|
|
||||||
class="send-email-button ml-16"
|
|
||||||
@click="sendEmail"
|
|
||||||
:loading="loading"
|
|
||||||
>获取验证码</el-button
|
>获取验证码</el-button
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -144,6 +144,9 @@ h4 {
|
|||||||
.ml-8 {
|
.ml-8 {
|
||||||
margin-left: var(--app-base-px);
|
margin-left: var(--app-base-px);
|
||||||
}
|
}
|
||||||
|
.ml-12 {
|
||||||
|
margin-left: calc(var(--app-base-px) + 4px);
|
||||||
|
}
|
||||||
.ml-16 {
|
.ml-16 {
|
||||||
margin-left: calc(var(--app-base-px) * 2);
|
margin-left: calc(var(--app-base-px) * 2);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,6 +8,7 @@
|
|||||||
|
|
||||||
.el-button {
|
.el-button {
|
||||||
padding: 5px 12px;
|
padding: 5px 12px;
|
||||||
|
|
||||||
&.is-text {
|
&.is-text {
|
||||||
padding: 4px !important;
|
padding: 4px !important;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@ -22,6 +23,9 @@
|
|||||||
border-color: var(--el-button-border-color);
|
border-color: var(--el-button-border-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.el-button--large {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
.el-avatar {
|
.el-avatar {
|
||||||
--el-avatar-bg-color: var(--el-color-primary);
|
--el-avatar-bg-color: var(--el-color-primary);
|
||||||
--el-avatar-size-small: 33px;
|
--el-avatar-size-small: 33px;
|
||||||
@ -34,25 +38,37 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-form-item {
|
.el-form-item {
|
||||||
margin-bottom: 18px;
|
margin-bottom: 16px;
|
||||||
.el-form-item {
|
.el-form-item {
|
||||||
margin-bottom: 18px;
|
margin-bottom: 16px;
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.el-form-item__error {
|
||||||
|
position: unset;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
.el-dialog {
|
.el-dialog {
|
||||||
--el-dialog-title-font-size: 16px;
|
--el-dialog-title-font-size: 16px;
|
||||||
|
--el-dialog-padding-primary: 24px;
|
||||||
|
--el-dialog-content-font-size: 14px;
|
||||||
.dialog-sub-title {
|
.dialog-sub-title {
|
||||||
color: var(--el-text-color-regular);
|
color: var(--el-text-color-regular);
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
}
|
}
|
||||||
.el-dialog__body {
|
.el-dialog__body {
|
||||||
padding: 15px var(--el-dialog-padding-primary) 10px !important;
|
padding: 16px var(--el-dialog-padding-primary) 8px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.el-dialog__header {
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
.el-dialog__footer {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.el-message-box {
|
.el-message-box {
|
||||||
--el-messagebox-font-size: 16px;
|
--el-messagebox-font-size: 16px;
|
||||||
@ -191,10 +207,21 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-textarea__inner {
|
.el-textarea__inner {
|
||||||
font-size: 13px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-input__inner {
|
.el-input__inner {
|
||||||
font-size: 13px;
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input__wrapper {
|
||||||
|
padding: 1px 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input--large {
|
||||||
|
.el-input__inner {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-select-group .el-select-dropdown__item {
|
.el-select-group .el-select-dropdown__item {
|
||||||
|
|||||||
@ -1,44 +1,47 @@
|
|||||||
<template>
|
<template>
|
||||||
<login-layout>
|
<login-layout>
|
||||||
<LoginContainer subTitle="欢迎使用 MaxKB 智能知识库">
|
<LoginContainer subTitle="欢迎使用 MaxKB 智能知识库">
|
||||||
<h4 class="mb-24">忘记密码</h4>
|
<h2 class="mb-24">忘记密码</h2>
|
||||||
<el-form
|
<el-form
|
||||||
class="register-form"
|
class="register-form"
|
||||||
ref="resetPasswordFormRef"
|
ref="resetPasswordFormRef"
|
||||||
:model="CheckEmailForm"
|
:model="CheckEmailForm"
|
||||||
:rules="rules"
|
:rules="rules"
|
||||||
>
|
>
|
||||||
<el-form-item prop="email">
|
<div class="mb-24">
|
||||||
<el-input
|
<el-form-item prop="email">
|
||||||
size="large"
|
|
||||||
class="input-item"
|
|
||||||
v-model="CheckEmailForm.email"
|
|
||||||
placeholder="请输入邮箱"
|
|
||||||
>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="code">
|
|
||||||
<div class="flex-between w-full">
|
|
||||||
<el-input
|
<el-input
|
||||||
size="large"
|
size="large"
|
||||||
class="code-input"
|
class="input-item"
|
||||||
v-model="CheckEmailForm.code"
|
v-model="CheckEmailForm.email"
|
||||||
placeholder="请输入验证码"
|
placeholder="请输入邮箱"
|
||||||
>
|
>
|
||||||
</el-input>
|
</el-input>
|
||||||
<el-button
|
</el-form-item>
|
||||||
size="large"
|
</div>
|
||||||
class="send-email-button ml-16"
|
<div class="mb-24">
|
||||||
@click="sendEmail"
|
<el-form-item prop="code">
|
||||||
:loading="loading"
|
<div class="flex-between w-full">
|
||||||
>获取验证码</el-button
|
<el-input
|
||||||
>
|
size="large"
|
||||||
</div>
|
class="code-input"
|
||||||
</el-form-item>
|
v-model="CheckEmailForm.code"
|
||||||
|
placeholder="请输入验证码"
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
<el-button
|
||||||
|
:disabled="CheckEmailForm.email"
|
||||||
|
size="large"
|
||||||
|
class="send-email-button ml-12"
|
||||||
|
@click="sendEmail"
|
||||||
|
:loading="loading"
|
||||||
|
>获取验证码</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
<el-button type="primary" class="login-submit-button w-full mt-4" @click="checkCode"
|
<el-button size="large" type="primary" class="w-full" @click="checkCode">立即验证</el-button>
|
||||||
>立即验证</el-button
|
|
||||||
>
|
|
||||||
<div class="operate-container mt-12">
|
<div class="operate-container mt-12">
|
||||||
<el-button
|
<el-button
|
||||||
class="register"
|
class="register"
|
||||||
@ -107,6 +110,4 @@ const sendEmail = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scope>
|
<style lang="scss" scope></style>
|
||||||
@import '../index.scss';
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,3 +0,0 @@
|
|||||||
.login-submit-button {
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
@ -9,30 +9,32 @@
|
|||||||
ref="loginFormRef"
|
ref="loginFormRef"
|
||||||
@keyup.enter="login"
|
@keyup.enter="login"
|
||||||
>
|
>
|
||||||
<el-form-item prop="username">
|
<div class="mb-24">
|
||||||
<el-input
|
<el-form-item prop="username">
|
||||||
size="large"
|
<el-input
|
||||||
class="input-item"
|
size="large"
|
||||||
v-model="loginForm.username"
|
class="input-item"
|
||||||
placeholder="请输入用户名"
|
v-model="loginForm.username"
|
||||||
>
|
placeholder="请输入用户名"
|
||||||
</el-input>
|
>
|
||||||
</el-form-item>
|
</el-input>
|
||||||
<el-form-item prop="password">
|
</el-form-item>
|
||||||
<el-input
|
</div>
|
||||||
type="password"
|
<div class="mb-24">
|
||||||
size="large"
|
<el-form-item prop="password">
|
||||||
class="input-item"
|
<el-input
|
||||||
v-model="loginForm.password"
|
type="password"
|
||||||
placeholder="请输入密码"
|
size="large"
|
||||||
show-password
|
class="input-item"
|
||||||
>
|
v-model="loginForm.password"
|
||||||
</el-input>
|
placeholder="请输入密码"
|
||||||
</el-form-item>
|
show-password
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
<el-button type="primary" class="login-submit-button mt-4 w-full" @click="login"
|
<el-button size="large" type="primary" class="w-full" @click="login">登录</el-button>
|
||||||
>登录</el-button
|
|
||||||
>
|
|
||||||
<div class="operate-container flex-between mt-12">
|
<div class="operate-container flex-between mt-12">
|
||||||
<el-button class="register" @click="router.push('/register')" link type="primary">
|
<el-button class="register" @click="router.push('/register')" link type="primary">
|
||||||
注册
|
注册
|
||||||
@ -43,7 +45,7 @@
|
|||||||
link
|
link
|
||||||
type="primary"
|
type="primary"
|
||||||
>
|
>
|
||||||
忘记密码
|
忘记密码?
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
</LoginContainer>
|
</LoginContainer>
|
||||||
@ -100,6 +102,4 @@ const login = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scope>
|
<style lang="scss" scope></style>
|
||||||
@import './index.scss';
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,70 +1,78 @@
|
|||||||
<template>
|
<template>
|
||||||
<login-layout>
|
<login-layout>
|
||||||
<LoginContainer subTitle="欢迎使用 MaxKB 智能知识库">
|
<LoginContainer subTitle="欢迎使用 MaxKB 智能知识库">
|
||||||
<h4 class="mb-24">用户注册</h4>
|
<h2 class="mb-24">用户注册</h2>
|
||||||
<el-form class="register-form" :model="registerForm" :rules="rules" ref="registerFormRef">
|
<el-form class="register-form" :model="registerForm" :rules="rules" ref="registerFormRef">
|
||||||
<el-form-item prop="username">
|
<div class="mb-24">
|
||||||
<el-input
|
<el-form-item prop="username">
|
||||||
size="large"
|
|
||||||
class="input-item"
|
|
||||||
v-model="registerForm.username"
|
|
||||||
placeholder="请输入用户名"
|
|
||||||
>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="password">
|
|
||||||
<el-input
|
|
||||||
type="password"
|
|
||||||
size="large"
|
|
||||||
class="input-item"
|
|
||||||
v-model="registerForm.password"
|
|
||||||
placeholder="请输入密码"
|
|
||||||
show-password
|
|
||||||
>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="repassword">
|
|
||||||
<el-input
|
|
||||||
type="password"
|
|
||||||
size="large"
|
|
||||||
class="input-item"
|
|
||||||
v-model="registerForm.re_password"
|
|
||||||
placeholder="请输入确认密码"
|
|
||||||
show-password
|
|
||||||
>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="email">
|
|
||||||
<el-input
|
|
||||||
size="large"
|
|
||||||
class="input-item"
|
|
||||||
v-model="registerForm.email"
|
|
||||||
placeholder="请输入邮箱"
|
|
||||||
>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="code">
|
|
||||||
<div class="flex-between w-full">
|
|
||||||
<el-input
|
<el-input
|
||||||
size="large"
|
size="large"
|
||||||
class="code-input"
|
class="input-item"
|
||||||
v-model="registerForm.code"
|
v-model="registerForm.username"
|
||||||
placeholder="请输入验证码"
|
placeholder="请输入用户名"
|
||||||
>
|
>
|
||||||
</el-input>
|
</el-input>
|
||||||
<el-button
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div class="mb-24">
|
||||||
|
<el-form-item prop="password">
|
||||||
|
<el-input
|
||||||
|
type="password"
|
||||||
size="large"
|
size="large"
|
||||||
class="send-email-button ml-16"
|
class="input-item"
|
||||||
@click="sendEmail"
|
v-model="registerForm.password"
|
||||||
:loading="sendEmailLoading"
|
placeholder="请输入密码"
|
||||||
>获取验证码</el-button
|
show-password
|
||||||
>
|
>
|
||||||
</div>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div class="mb-24">
|
||||||
|
<el-form-item prop="re_password">
|
||||||
|
<el-input
|
||||||
|
type="password"
|
||||||
|
size="large"
|
||||||
|
class="input-item"
|
||||||
|
v-model="registerForm.re_password"
|
||||||
|
placeholder="请输入确认密码"
|
||||||
|
show-password
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div class="mb-24">
|
||||||
|
<el-form-item prop="email">
|
||||||
|
<el-input
|
||||||
|
size="large"
|
||||||
|
class="input-item"
|
||||||
|
v-model="registerForm.email"
|
||||||
|
placeholder="请输入邮箱"
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div class="mb-24">
|
||||||
|
<el-form-item prop="code">
|
||||||
|
<div class="flex-between w-full">
|
||||||
|
<el-input
|
||||||
|
size="large"
|
||||||
|
class="code-input"
|
||||||
|
v-model="registerForm.code"
|
||||||
|
placeholder="请输入验证码"
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
<el-button
|
||||||
|
size="large"
|
||||||
|
class="send-email-button ml-12"
|
||||||
|
@click="sendEmail"
|
||||||
|
:loading="sendEmailLoading"
|
||||||
|
>获取验证码</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
<el-button type="primary" class="login-submit-button w-full mt-4" @click="register"
|
<el-button size="large" type="primary" class="w-full" @click="register">注册</el-button>
|
||||||
>注册</el-button
|
|
||||||
>
|
|
||||||
<div class="operate-container mt-12">
|
<div class="operate-container mt-12">
|
||||||
<el-button
|
<el-button
|
||||||
class="register"
|
class="register"
|
||||||
@ -82,7 +90,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import type { RegisterRequest } from '@/api/type/user'
|
import type { RegisterRequest } from '@/api/type/user'
|
||||||
import { UserFilled, Lock, Message, Key } from '@element-plus/icons-vue'
|
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import UserApi from '@/api/user'
|
import UserApi from '@/api/user'
|
||||||
import { MsgSuccess } from '@/utils/message'
|
import { MsgSuccess } from '@/utils/message'
|
||||||
@ -183,6 +190,4 @@ const sendEmail = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scope>
|
<style lang="scss" scope></style>
|
||||||
@import '../index.scss';
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,41 +1,46 @@
|
|||||||
<template>
|
<template>
|
||||||
<login-layout>
|
<login-layout>
|
||||||
<LoginContainer subTitle="欢迎使用 MaxKB 智能知识库">
|
<LoginContainer subTitle="欢迎使用 MaxKB 智能知识库">
|
||||||
<h4 class="mb-24">修改密码</h4>
|
<h2 class="mb-24">修改密码</h2>
|
||||||
<el-form
|
<el-form
|
||||||
class="reset-password-form"
|
class="reset-password-form"
|
||||||
ref="resetPasswordFormRef"
|
ref="resetPasswordFormRef"
|
||||||
:model="resetPasswordForm"
|
:model="resetPasswordForm"
|
||||||
:rules="rules"
|
:rules="rules"
|
||||||
>
|
>
|
||||||
<el-form-item prop="password">
|
<div class="mb-24">
|
||||||
<el-input
|
<el-form-item prop="password">
|
||||||
type="password"
|
<el-input
|
||||||
size="large"
|
type="password"
|
||||||
class="input-item"
|
size="large"
|
||||||
v-model="resetPasswordForm.password"
|
class="input-item"
|
||||||
placeholder="请输入密码"
|
v-model="resetPasswordForm.password"
|
||||||
show-password
|
placeholder="请输入密码"
|
||||||
>
|
show-password
|
||||||
</el-input>
|
>
|
||||||
</el-form-item>
|
</el-input>
|
||||||
<el-form-item prop="re_password">
|
</el-form-item>
|
||||||
<el-input
|
</div>
|
||||||
type="password"
|
<div class="mb-24">
|
||||||
size="large"
|
<el-form-item prop="re_password">
|
||||||
class="input-item"
|
<el-input
|
||||||
v-model="resetPasswordForm.re_password"
|
type="password"
|
||||||
placeholder="请输入确认密码"
|
size="large"
|
||||||
show-password
|
class="input-item"
|
||||||
>
|
v-model="resetPasswordForm.re_password"
|
||||||
</el-input>
|
placeholder="请输入确认密码"
|
||||||
</el-form-item>
|
show-password
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
<el-button type="primary" class="login-submit-button w-full mt-4" @click="resetPassword"
|
<el-button size="large" type="primary" class="w-full" @click="resetPassword"
|
||||||
>确认修改</el-button
|
>确认修改</el-button
|
||||||
>
|
>
|
||||||
<div class="operate-container mt-12">
|
<div class="operate-container mt-12">
|
||||||
<el-button
|
<el-button
|
||||||
|
size="large"
|
||||||
class="register"
|
class="register"
|
||||||
@click="router.push('/login')"
|
@click="router.push('/login')"
|
||||||
link
|
link
|
||||||
@ -126,6 +131,4 @@ const resetPassword = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scope>
|
<style lang="scss" scope></style>
|
||||||
@import '../index.scss';
|
|
||||||
</style>
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user