当前文件目录结构
│ App.vue
│ env.d.ts
│ index.css
│ main.ts
│
├─assets
│ logo.png
│
├─components
│ HelloWorld.vue
│
├─router
│ index.ts
│
├─store
├─utils
└─view
├─home
│ index.vue
│
└─login
index.vue
登录页实现
<template>
<div class="base flex flex-col items-center">
<h1 class="text-5xl m-32">XXX后台管理登录页面</h1>
<div class="bg-gray-50 min-h-270 w-1/4 rounded-3xl p-10 shadow-xl">
<p class="text-xl pb-5 ...">请输入账号密码</p>
<el-form
label-position="left"
label-width="60px"
:model="formLabelAlign"
:rules="rules"
>
<el-form-item label="账号" prop="username" >
<el-input v-model="formLabelAlign.username" clearable placeholder="请输入账号,admin" />
</el-form-item>
<el-form-item label="密码" prop="passwrod" >
<el-input type="passwrod" show-password v-model="formLabelAlign.passwrod" clearable placeholder="请输入密码,123456"/>
</el-form-item>
</el-form>
<el-button class="w-1/2 mt-6" type="primary">登录</el-button>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import type { FormRules } from 'element-plus'
interface user {
username: string,
passwrod: string
}
const formLabelAlign = reactive<user>({
username: '',
passwrod: '',
})
const rules = reactive<FormRules>({
username:[
{ required: true, message: '账号不能为空', trigger: 'blur' },
],
passwrod:[
{
required:true,message: '密码不能为空', trigger: 'blur'
}
]
})
</script>
<style lang="less">
.base {
background: rgba(64, 64, 194, 0.1);
width: 100%;
height: 100vh;
overflow: hidden;
}
</style>
页面效果