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

81
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
@ -34,22 +37,57 @@
<t-button theme="primary" type="submit" block>登录</t-button> <t-button theme="primary" type="submit" block>登录</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 { 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>