帮我写一个uniapp的社交登陆注册页面
时间: 2024-03-06 16:40:59 浏览: 30
很高兴为您提供这个Uniapp的社交登录注册页面的例子。
您可以在下面的代码片段中找到完整的代码。
HTML代码:
```
<template>
<view class="container">
<view class="logo">
<image src="../../static/logo.png"></image>
<text>社交登录</text>
</view>
<view class="form">
<view class="input">
<input type="text" placeholder="用户名"></input>
</view>
<view class="input">
<input type="password" placeholder="密码"></input>
</view>
<<view class="input">
<input type="password" placeholder="确认密码"></input>
</view>
<view class="buttons">
<button class="button" @click="login">登录</button>
<button class="button register" @click="register">注册</button>
</view>
<view class="social-login">
<text>或使用社交账号登录</text>
<view class="social-buttons">
<button class="social-button wechat" @click="wechatLogin">
<i class="iconfont icon-weixin"></i>
<text>微信登录</text>
</button>
<button class="social-button qq" @click="qqLogin">
<i class="iconfont icon-qq"></i>
<text>QQ登录</text>
</button>
</view>
</view>
</view>
</view>
</template>
```
CSS代码:
```
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.logo {
display: flex;
align-items: center;
margin-bottom: 40px;
}
.logo image {
width: 80px;
height: 80px;
}
.logo text {
font-size: 24px;
margin-left: 20px;
font-weight: bold;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
width: 80%;
max-width: 400px;
padding: 30px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
.input {
width: 100%;
margin-bottom: 20px;
}
.input input {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #f5f5f5;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.buttons {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 20px;
}
.button {
width: 48%;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #ff9f1c;
color: #fff;
font-weight: bold;
text-align: center;
transition: all 0.3s ease;
}
.button:hover {
background-color: #ffbf69;
}
.register {
background-color: #3498db;
}
.social-login {
width: 100%;
margin-top: 30px;
text-align: center;
}
.social-login text {
font-size: 16px;
margin-bottom: 10px;
}
.social-buttons {
display: flex;
justify-content: center;
}
.social-button {
display: flex;
align-items: center;
margin-right: 20px;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #fff;
color: #333;
font-weight: bold;
text-align: center;
transition: all 0.3s ease;
}
.social-button:hover {
background-color: #f5f5f5;
}
.social-button i {
font-size: 24px;
margin-right: 10px;
}
.social-button.wechat {
background-color: #7bb32e;
color: #fff;
}
.social-button.wechat:hover {
background-color: #8dc63f;
}
.social-button.qq {
background-color: #29a9e1;
color: #fff;
}
.social-button.qq:hover {
background-color: #3dbbee;
}
</style>
```
JavaScript代码:
```
<script>
export default {
methods: {
login() {
// 登录逻辑
},
register() {
// 注册逻辑
},
wechatLogin() {
// 微信登录逻辑
},
qqLogin() {
// QQ登录逻辑
},
},
};
</script>
```
这个例子包括了一个基本的登录注册表单,以及两个社交登录按钮(微信和QQ)。
您可以根据自己的需求进行修改和扩展。