✨ add image blur detection and background management pages
This commit is contained in:
243
src/views/Admin/Auth/Login.vue
Normal file
243
src/views/Admin/Auth/Login.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="main">
|
||||
<div class="main-container">
|
||||
<div class="main-header">
|
||||
<div class="title">
|
||||
<img
|
||||
src="@/assets/svgs/logo-album.svg"
|
||||
class="logo"
|
||||
alt="logo"
|
||||
>
|
||||
<span>系统管理</span>
|
||||
</div>
|
||||
<div class="description">
|
||||
<span>欢迎使用系统管理</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<AForm>
|
||||
<div style="padding: 1px; margin: 5px 0">
|
||||
<AFormItem v-bind="formUse.validateInfos.username">
|
||||
<AInput
|
||||
v-model:value="formModel.username"
|
||||
placeholder="请输入账号"
|
||||
size="large"
|
||||
type="text"
|
||||
@pressEnter="doLogin"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined :style="formStates.username ? { color: '#c0c0c0' } : {}"/>
|
||||
</template>
|
||||
</AInput>
|
||||
</AFormItem>
|
||||
</div>
|
||||
|
||||
<div style="padding: 1px">
|
||||
<AFormItem v-bind="formUse.validateInfos.password">
|
||||
<AInput
|
||||
v-model:value="formModel.password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
type="password"
|
||||
@pressEnter="doLogin"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined :style="formStates.password ? { color: '#c0c0c0' } : {}"/>
|
||||
</template>
|
||||
</AInput>
|
||||
</AFormItem>
|
||||
</div>
|
||||
|
||||
<div style="padding: 0 5px; overflow: hidden">
|
||||
<ACheckbox v-model:checked="formModel.rememberMe">
|
||||
自动登录
|
||||
</ACheckbox>
|
||||
</div>
|
||||
|
||||
<AFormItem style="margin: 30px 0 0">
|
||||
<AButton
|
||||
size="large"
|
||||
type="primary"
|
||||
class="login-button"
|
||||
:loading="loading"
|
||||
:disabled="loading"
|
||||
@click="doLogin"
|
||||
>
|
||||
登录
|
||||
</AButton>
|
||||
</AFormItem>
|
||||
</AForm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="copyright">
|
||||
Copyright © 2025 Schisandra Cloud Album Admin. All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {UserOutlined, LockOutlined} from '@ant-design/icons-vue';
|
||||
// import {notification} from 'ant-design-vue';
|
||||
import Form from 'ant-design-vue/es/form';
|
||||
|
||||
|
||||
defineOptions({name: 'Login'});
|
||||
|
||||
const loading = ref(false);
|
||||
// const router = useRouter();
|
||||
|
||||
const formModel = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
rememberMe: true,
|
||||
});
|
||||
|
||||
const formRules = reactive({
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const formStates = reactive({
|
||||
username: computed(() => formUse.validateInfos.username.validateStatus !== 'error'),
|
||||
password: computed(() => formUse.validateInfos.password.validateStatus !== 'error'),
|
||||
});
|
||||
|
||||
const formUse = Form.useForm(
|
||||
formModel,
|
||||
formRules,
|
||||
);
|
||||
|
||||
const doLogin = async () => {
|
||||
try {
|
||||
await formUse.validate();
|
||||
|
||||
// const success = (_: any) => {
|
||||
// notification.success({
|
||||
// message: '系统提示',
|
||||
// duration: 0.8,
|
||||
// description: `欢迎回来`,
|
||||
// onClose: () => {
|
||||
// loading.value = false;
|
||||
// router.push({path: '/'});
|
||||
// },
|
||||
// });
|
||||
// };
|
||||
//
|
||||
// const failure = (err: any) => {
|
||||
// if (err.message) {
|
||||
// notification.error({
|
||||
// message: '系统提示',
|
||||
// duration: 0.8,
|
||||
// description: err.message,
|
||||
// onClose: () => {
|
||||
// loading.value = false;
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
// setTimeout(() => {
|
||||
// loading.value = false;
|
||||
// }, 500);
|
||||
// };
|
||||
|
||||
loading.value = true;
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.login-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
background: #f0f2f5 url(@/assets/svgs/background.svg);
|
||||
|
||||
& > .main {
|
||||
width: 420px;
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
|
||||
& > .main-container {
|
||||
height: 450px;
|
||||
margin: auto 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 45px;
|
||||
right: 45px;
|
||||
bottom: 90px;
|
||||
|
||||
& > .main-header {
|
||||
width: calc(100% - 64px);
|
||||
height: auto;
|
||||
margin: 0 auto 48px;
|
||||
|
||||
& > .title {
|
||||
font-size: 33px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
text-align: center;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
|
||||
& > .logo {
|
||||
height: 44px;
|
||||
vertical-align: top;
|
||||
margin-right: 16px;
|
||||
border-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > .description {
|
||||
font-size: 15px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
& > .main-content {
|
||||
button.login-button {
|
||||
padding: 0 15px;
|
||||
width: calc(100% - 6px);
|
||||
margin: 0 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .footer {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
margin: 48px 0 24px;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
.copyright {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user