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

登陆

Browse Source
This commit is contained in:
吕才卓 2024-04-06 13:25:05 +08:00
parent c888946994
commit 2dd7937e77
1 changed files with 96 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,55 +1,93 @@
<template>
<div class="login-container">
<t-space style="width: 350px">
<t-form
:data="formData"
ref="form"
@reset="onReset"
@submit="onSubmit"
:colon="true"
:labelWidth="80"
class="login-form"
>
<h2 class="login-title">登录</h2>
<t-form-item name="account">
<t-input
clearable
v-model="formData.account"
placeholder="请输入工号或学号"
<div style="width: 100%" class="login-right">
<div class="login-form">
<div class="login-box">
<t-form
:data="formData"
:rules="rules"
ref="form"
@reset="onReset"
@submit="onSubmit"
:colon="true"
:labelWidth="0"
>
<desktop-icon slot:string="prefix-icon"></desktop-icon>
</t-input>
</t-form-item>
<t-form-item name="password">
<t-input
type="password"
clearable
v-model="formData.password"
placeholder="请输入密码"
>
<lock-on-icon slot:string="prefix-icon"></lock-on-icon>
</t-input>
</t-form-item>
<t-form-item>
<t-button theme="primary" type="submit" block>登录</t-button>
</t-form-item>
</t-form>
</t-space>
<h2 class="login-title">登录</h2>
<t-form-item name="account">
<t-input
clearable
v-model="formData.account"
placeholder="请输入工号或学号"
>
<desktop-icon slot:string="prefix-icon"></desktop-icon>
</t-input>
</t-form-item>
<t-form-item name="password">
<t-input
type="password"
clearable
v-model="formData.password"
placeholder="请输入密码"
>
<lock-on-icon slot:string="prefix-icon"></lock-on-icon>
</t-input>
</t-form-item>
<t-form-item>
<t-button theme="primary" type="submit" block>登录</t-button>
</t-form-item>
</t-form>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { MessagePlugin } from "tdesign-vue-next";
import { reactive } from "vue";
import { reactive,ref } from "vue";
// import { DesktopIcon, LockOnIcon } from "tdesign-icons-vue";
const INITIAL_DATA = {
account: "",
password: "",
};
const from = ref()
const formData = reactive({
...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 = () => {
MessagePlugin.success("重置成功");
};
@ -63,8 +101,9 @@ const onSubmit = ({ validateResult, firstError }) => {
};
</script>
<style lang="scss" scoped>
<style lang="less" scoped>
.login-container {
display: flex;
position: absolute;
width: 100%;
height: 100%;
@ -73,16 +112,28 @@ const onSubmit = ({ validateResult, firstError }) => {
overflow: hidden;
}
.login-form {
width:450px;
margin:200px;
background-color:rgba(255,255,255,0.8);
padding:80px;
border-radius:20px;
width: 26%;
height: 40%;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 1.25rem;
}
.login-title {
text-align:center;
font-size:24px;
margin-bottom:40px;
color:#333
text-align: center;
font-size: 1.5rem;
margin-bottom: 4rem;
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>