用uni-app写一个简单的登录页面的示例代码
时间: 2024-02-16 17:03:16 浏览: 18
好的,以下是一个简单的uni-app登录页面示例代码:
```html
<template>
<view class="container">
<form class="login-form">
<view class="form-group">
<text class="label">用户名:</text>
<input class="input" type="text" v-model="username" />
</view>
<view class="form-group">
<text class="label">密码:</text>
<input class="input" type="password" v-model="password" />
</view>
<view class="form-group">
<button class="btn" type="submit" @tap="login">登录</button>
</view>
</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: 80%;
max-width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 20px;
}
.label {
display: inline-block;
width: 80px;
font-size: 16px;
font-weight: bold;
}
.input {
display: inline-block;
width: calc(100% - 80px);
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
.btn {
display: inline-block;
padding: 8px 16px;
font-size: 16px;
color: #fff;
background-color: #007aff;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
```
这个示例代码实现了一个简单的登录页面,包含一个用户名和密码输入框,以及一个登录按钮。当用户点击登录按钮时,会触发 `login` 方法,我们可以在这个方法中处理登录逻辑。在这个示例中,我们只是简单地将用户名和密码打印到控制台上。