用flex布局加element-ui写一个登录页面
时间: 2023-12-04 10:22:42 浏览: 29
这是一个简单的登录页面,使用了flex布局和element-ui组件库。
代码如下:
```html
<template>
<div class="login-container">
<el-card class="login-card">
<div class="login-title">登录</div>
<el-form :model="form" ref="form" :rules="rules" label-width="80px" class="login-form">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">登录</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: "",
password: "",
},
rules: {
username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
},
};
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 登录逻辑
} else {
console.log("error submit!!");
return false;
}
});
},
},
};
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-card {
width: 400px;
}
.login-title {
font-size: 24px;
text-align: center;
padding: 10px;
}
.login-form {
margin: 20px;
}
</style>
```
效果如图所示:
![image.png](https://cdn.nlark.com/yuque/0/2021/png/2442150/1621455911964-4c4a4e5b-7d4c-4b5a-a1d6-3955f5ddfc76.png)