sundongyu/dykj-college-back-office-management-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://gitea.dykj.co/sundongyu/dykj-college-back-office-management-system into dev

Browse Source
This commit is contained in:
ycy 2024-04-06 14:18:21 +08:00
commit 47929faa04
1 changed files with 92 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/pages/login/index.vue
View File

@ -1,16 +1,19 @@
<template> <template>
<div class="login-container"> <div class="login-container">
<t-space style="width: 350px"> <div style="width: 100%" class="login-right">
<div class="login-form">
<div class="login-box">
<t-form <t-form
:data="formData" :data="formData"
:rules="rules"
ref="form" ref="form"
@reset="onReset" @reset="onReset"
@submit="onSubmit" @submit="onSubmit"
:colon="true" :colon="true"
:labelWidth="80" :labelWidth="0"
class="login-form"
> >
<h2 class="login-title">登录</h2> <h2 class="login-title">登录</h2>
<t-form-item name="account"> <t-form-item name="account">
<t-input <t-input
clearable clearable
@ -31,28 +34,60 @@
</t-input> </t-input>
</t-form-item> </t-form-item>
<t-form-item> <t-form-item>
<t-button theme="primary" type="submit" block @click="Login" <t-button theme="primary" type="submit" block>登录</t-button>
>登录</t-button
>
</t-form-item> </t-form-item>
</t-form> </t-form>
</t-space> </div>
</div>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { MessagePlugin } from "tdesign-vue-next"; import { MessagePlugin } from "tdesign-vue-next";
import { reactive } from "vue"; import { reactive, ref } from "vue";
import { reqLogin } from "@/api/login/index";
// import { DesktopIcon, LockOnIcon } from "tdesign-icons-vue"; // import { DesktopIcon, LockOnIcon } from "tdesign-icons-vue";
const INITIAL_DATA = { const INITIAL_DATA = {
account: "", account: "",
password: "", password: "",
}; };
const from = ref();
const formData = reactive({ const formData = reactive({
...INITIAL_DATA, ...INITIAL_DATA,
}); });
const rules = reactive({
account: [
{
required: true,
message: "必须填写",
},
{
min: 10,
message: "输入不正确",
},
{
max: 10,
message: "输入不正确",
},
],
password: [
{
required: true,
message: "密码必填",
},
{
len: 8,
message: "请输入 8 位密码",
},
{
pattern: /[A-Z]+/,
message: "密码必须包含大写字母",
},
],
});
const onReset = () => { const onReset = () => {
MessagePlugin.success("重置成功"); MessagePlugin.success("重置成功");
}; };
@ -72,6 +107,7 @@ const Login = async () => {
<style lang="less" scoped> <style lang="less" scoped>
.login-container { .login-container {
display: flex;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -80,16 +116,28 @@ const Login = async () => {
overflow: hidden; overflow: hidden;
} }
.login-form { .login-form {
width: 450px; width: 26%;
margin: 200px; height: 40%;
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
padding: 80px; border-radius: 1.25rem;
border-radius: 20px;
} }
.login-title { .login-title {
text-align: center; text-align: center;
font-size: 24px; font-size: 1.5rem;
margin-bottom: 40px; margin-bottom: 4rem;
color: #333; color: #333;
} }
.login-box {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.login-right {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
}
</style> </style>