vue2+vant写一个登录页面注重样式
时间: 2023-05-20 16:05:22 浏览: 70
好的,以下是一个简单的 Vue2 Vant 登录页面的代码示例,注重样式:
```
<template>
<div class="login-container">
<van-cell-group>
<van-field v-model="username" label="用户名" placeholder="请输入用户名" />
<van-field v-model="password" label="密码" placeholder="请输入密码" type="password" />
</van-cell-group>
<van-button type="primary" @click="login">登录</van-button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 处理登录逻辑
}
}
}
</script>
<style scoped>
.login-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.van-cell-group {
width: 80%;
margin-bottom: 20px;
}
.van-button {
width: 80%;
}
</style>
```
希望这个示例可以帮助你实现一个漂亮的登录页面!