用uniapp 写一个登录页面
时间: 2024-03-09 18:24:09 浏览: 18
以下是一个简单的UniApp登录页面的示例代码:
```html
<template>
<view class="container">
<form class="login-form" @submit.prevent="login">
<view class="input-wrapper">
<input type="text" v-model="username" placeholder="请输入用户名" />
</view>
<view class="input-wrapper">
<input type="password" v-model="password" placeholder="请输入密码" />
</view>
<button type="submit" class="login-button">登录</button>
</form>
</view>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
login() {
console.log('用户名:', this.username);
console.log('密码:', this.password);
// 这里可以写登录的逻辑
},
},
};
</script>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form {
width: 300rpx;
padding: 30rpx;
background-color: #fff;
border-radius: 10rpx;
}
.input-wrapper {
margin-bottom: 20rpx;
}
input {
width: 100%;
height: 60rpx;
padding: 10rpx;
border: 1rpx solid #ccc;
border-radius: 5rpx;
}
button {
width: 100%;
height: 60rpx;
background-color: #007aff;
color: #fff;
font-size: 28rpx;
border: none;
border-radius: 5rpx;
}
</style>
```
这个页面包含一个表单,其中包含一个用户名输入框和一个密码输入框,以及一个登录按钮。当用户点击登录按钮时,会触发 `login` 方法,你可以在该方法中编写登录的逻辑。在这个示例中,我们只是简单地将用户名和密码打印到控制台。你需要根据实际情况更改这个方法。