elementui 优美登录首页
时间: 2023-08-22 14:09:11 浏览: 42
Element UI 提供了一些优美的登录首页模板,可以用来快速搭建漂亮的登录页面。以下是一个示例:
```vue
<template>
<div class="login-page">
<el-row class="login-container" justify="center" align="middle">
<el-col :span="8">
<el-card class="login-card">
<h3 class="login-title">Welcome Back!</h3>
<el-form :model="loginForm" class="login-form">
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="Username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
placeholder="Password"
type="password"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">Log In</el-button>
</el-form-item>
</el-form>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
}
}
},
methods: {
login() {
// 登录逻辑
}
}
}
</script>
<style scoped>
.login-page {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login-container {
height: 400px;
}
.login-card {
width: 300px;
padding: 20px;
}
.login-title {
text-align: center;
}
.login-form {
margin-top: 20px;
}
</style>
```
这是一个基于 Vue 和 Element UI 的登录页面模板,使用了 Element UI 提供的组件和样式,可以根据自己的需求进行个性化定制。希望对你有所帮助!