Python全系列 教程
3567个小节阅读:5930.2k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
修改src/views/LoginView.vue
文件
xxxxxxxxxx
<template>
<!--要显示主体内容-->
<div class="main">
<div class="login">
<div class="logo">
<img src="../assets/logo1.png" alt="">
</div>
<el-form :model="user" class="user_form" :rules="userRules">
<el-form-item prop="name">
<el-input v-model="user.name" placeholder="用户名" :prefix-icon="User" />
</el-form-item>
<el-form-item prop="pwd">
<el-input v-model="user.pwd" placeholder="密码" :prefix-icon="Lock"/>
</el-form-item>
<el-form-item class="btns">
<el-button type="primary">登录</el-button>
<el-button type="success">重置密码</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script setup>
import { reactive} from 'vue'
import { Lock, User } from '@element-plus/icons-vue'
// 定义表单数据
const user = reactive({
name: 'baizhan',
pwd: '123'
})
// 定义表单规则
const userRules = reactive({
name: [
{ required: true, message: '用户名不能为空', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
],
pwd: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
]
})
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
background-color: rgb(233, 188, 8);
display: flex;
justify-content: center;
align-items: center;
}
.login {
width: 450px;
height: 300px;
background-color: white;
border-radius: 5px;
}
.logo {
width: 200px;
border: 1px solid #eee;
margin: 0 auto;
margin-top: -65px;
padding: 5px;
border-radius: 5px;
box-shadow: 0 0 10px #ddd;
}
img {
width: 100%;
height: 100%;
}
.user_form {
padding: 50px;
}
.btns {
display: flex;
justify-content: space-between;
}
.btns button {
flex: 1;
}
</style>