使用vue 写一个移动端登录界面

<template>
<div class="login">
<div class="logo"></div>
<div class="form">
<input type="text" placeholder="请输入账号" v-model="username">
<input type="password" placeholder="请输入密码" v-model="password">
<button @click="login">登录</button>
</div>
</div>
</template>

<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// TODO: 登录逻辑
}
}
}
</script>

<style scoped>
.login {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
.logo {
width: 120px;
height: 120px;
background-image: url(logo.png);
background-size: contain;
margin-bottom: 20px;
}
.form {
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
input {
width: 100%;
height: 40px;
padding: 10px;
margin-bottom: 20px;
background-color: #fff;
border: none;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button {
width: 100%;
height: 40px;
color: #fff;
background-color: #007aff;
border: none;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
</style>