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> <template>
<div class="login-container"> <div class="login-container">
<t-space style="width: 350px"> <div style="width: 100%" class="login-right">
<t-form <div class="login-form">
:data="formData" <div class="login-box">
ref="form" <t-form
@reset="onReset" :data="formData"
@submit="onSubmit" :rules="rules"
:colon="true" ref="form"
:labelWidth="80" @reset="onReset"
class="login-form" @submit="onSubmit"
> :colon="true"
<h2 class="login-title">登录</h2> :labelWidth="0"
<t-form-item name="account">
<t-input
clearable
v-model="formData.account"
placeholder="请输入工号或学号"
> >
<desktop-icon slot:string="prefix-icon"></desktop-icon> <h2 class="login-title">登录</h2>
</t-input>
</t-form-item> <t-form-item name="account">
<t-form-item name="password"> <t-input
<t-input clearable
type="password" v-model="formData.account"
clearable placeholder="请输入工号或学号"
v-model="formData.password" >
placeholder="请输入密码" <desktop-icon slot:string="prefix-icon"></desktop-icon>
> </t-input>
<lock-on-icon slot:string="prefix-icon"></lock-on-icon> </t-form-item>
</t-input> <t-form-item name="password">
</t-form-item> <t-input
<t-form-item> type="password"
<t-button theme="primary" type="submit" block>登录</t-button> clearable
</t-form-item> v-model="formData.password"
</t-form> placeholder="请输入密码"
</t-space> >
<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> </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 { 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("重置成功");
}; };
@ -63,8 +101,9 @@ const onSubmit = ({ validateResult, firstError }) => {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
.login-container { .login-container {
display: flex;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -73,16 +112,28 @@ const onSubmit = ({ validateResult, firstError }) => {
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>