uniapp写一个登录注册界面
时间: 2023-05-15 10:06:21 浏览: 72
好的,以下是一个简单的 uniapp 登录注册界面的代码:
<template>
<div class="login-container">
<div class="login-form">
<div class="form-title">用户登录</div>
<div class="form-item">
<input type="text" placeholder="请输入用户名" v-model="username" />
</div>
<div class="form-item">
<input type="password" placeholder="请输入密码" v-model="password" />
</div>
<div class="form-item">
<button class="login-btn" @click="login">登录</button>
</div>
<div class="form-item">
<div class="register-link" @click="toRegister">没有账号?去注册</div>
</div>
</div>
<div class="register-form" v-show="showRegister">
<div class="form-title">用户注册</div>
<div class="form-item">
<input type="text" placeholder="请输入用户名" v-model="newUsername" />
</div>
<div class="form-item">
<input type="password" placeholder="请输入密码" v-model="newPassword" />
</div>
<div class="form-item">
<button class="register-btn" @click="register">注册</button>
</div>
<div class="form-item">
<div class="login-link" @click="toLogin">已有账号?去登录</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
newUsername: '',
newPassword: '',
showRegister: false
}
},
methods: {
login() {
// 登录逻辑
},
register() {
// 注册逻辑
},
toRegister() {
this.showRegister = true
},
toLogin() {
this.showRegister = false
}
}
}
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form,
.register-form {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-title {
font-size: 20px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
.form-item {
margin-bottom: 10px;
}
input[type='text'],
input[type='password'] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.login-btn,
.register-btn {
width: 100%;
padding: 10px;
background-color: #409eff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.register-link,
.login-link {
text-align: center;
color: #409eff;
cursor: pointer;
}
</style>
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)