czg_team/video_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

注册页面/下载页面更新

Browse Source
This commit is contained in:
GaoHao
2024-12-07 14:41:23 +08:00
parent 665db9bb9a
commit ff96875de7
6 changed files with 202 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
pages/login/register.vue
View File

@@ -1,25 +1,29 @@
<template>
<view class="container">
<view class="wrapper">
<view class="bg u-absolute" style="width: 100%;height: 100%;overflow: hidden;top: 0;">
<u-image src="../../static/images/i_bg.png" style="width: 100%;height:100%" mode=""></u-image>
</view>
<view class="wrapper u-relative" style="padding-top: 48rpx;box-sizing: border-box;">
<view class="input-content">
<view class="cu-form-group"
style="border: 2upx solid whitesmoke;margin-bottom: 20px;border-radius: 30px">
<view style="font-size: 58rpx;font-weight: bold;color: #333;margin-bottom: 48rpx;">注册</view>
<view class="cu-form-group">
<view class="title">手机号</view>
<input type="number" :value="mobile" placeholder="请输入手机号" maxlength="11" data-key="mobile"
<input class="input" type="number" :value="mobile" placeholder="请输入手机号" maxlength="11" data-key="mobile"
@input="inputChange" />
</view>
<view class="cu-form-group"
style="border: 2upx solid whitesmoke;margin-bottom: 20px;border-radius: 30px">
<view class="cu-form-group">
<text class="title">验证码</text>
<input type="number" :value="code" placeholder="请输入验证码" maxlength="6" data-key="code"
<view class="input flex">
<input type="number" :value="code" placeholder="请输入验证码" maxlength="6" data-key="code"
@input="inputChange" @confirm="toLogin" />
<button class="send-msg" @click="sendMsg" :disabled="sending">{{ sendTime }}</button>
<button class="send-msg" @click="sendMsg" :disabled="sending">{{ sendTime }}</button>
</view>
</view>
<view class="cu-form-group"
style="border: 2upx solid whitesmoke;margin-bottom: 20px;border-radius: 30px">
<view class="cu-form-group">
<text class="title">设置密码</text>
<input type="password" :value="password" placeholder="请设置新密码" placeholder-class="input-empty"
<input class="input" type="password" :value="password" placeholder="请设置新密码" placeholder-class="input-empty"
maxlength="20" minlength="6" data-key="password" @input="inputChange" @confirm="toLogin" />
</view>
<!-- <view class="cu-form-group"
@@ -30,15 +34,15 @@
<input type="text" v-if="registerCode == '否'" :value="invitation" placeholder="请填写邀请码(选填)"
data-key="invitation" maxlength="20" @input="inputChange" @confirm="toLogin" />
</view> -->
<button class="confirm-btn" @click="toLogin">注册</button>
</view>
<button class="confirm-btn" @click="toLogin">立即注册</button>
<view class="footer">
<text @tap="isShowAgree" class="cuIcon"
:class="showAgree ? 'cuIcon-radiobox' : 'cuIcon-round'">同意</text>
:class="showAgree ? 'cuIcon-radiobox' : 'cuIcon-round'">注册即同意</text>
<!-- 协议地址 -->
<navigator url="/me/setting/mimi" open-type="navigate">《隐私政策》</navigator>
和
<navigator url="/me/setting/xieyi" open-type="navigate">《用户协议》</navigator>
<navigator url="/me/setting/mimi" open-type="navigate" style="color: #37A6FF;">《隐私政策》</navigator>
与
<navigator url="/me/setting/xieyi" open-type="navigate" style="color: #37A6FF;">《用户协议》</navigator>
</view>
</view>
</view>
@@ -340,70 +344,100 @@
};
</script>
<style lang="scss">
<style lang="scss" >
page {
background: #ffffff;
}
.footer {
padding-left: 140upx;
margin-top: 32upx;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 24rpx;
color: #333333;
position: absolute;
left: 0;
right: 0;
bottom: 78rpx;
.cuIcon::before{
width: 30rpx;
height: 30rpx;
margin-right: 12rpx;
}
.cuIcon-round::before {
content: "\e6d7";
}
.cuIcon-radiobox:before {
content: "\e75b";
color: #37A6FF;
}
}
.send-msg {
border-radius: 30px;
color: white;
height: 30px;
font-size: 14px;
line-height: 30px;
background: #ff7581;
line-height: initial;
font-weight: 400;
font-size: 28rpx;
color: #EC6F48;
border: none;
background-color: transparent;
}
.send-msgs {
border-radius: 30px;
color: #999999;
height: 30px;
font-size: 14px;
line-height: 30px;
background: white;
.send-msg::after{
border: none;
background-color: transparent;
}
.container {
padding-top: 32upx;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #ffffff;
box-sizing: border-box;
}
.wrapper {
min-height: 100vh;
position: relative;
z-index: 90;
background: #ffffff;
padding-bottom: 20px;
}
.input-content {
padding: 0 20px;
padding: 0 56rpx;
}
.cu-form-group{
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 48rpx;
background-color: transparent;
padding: 0;
.title{
margin-bottom: 32rpx;
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
.input{
width: 100%;
background-color: #fff;
padding: 22rpx 32rpx 22rpx 24rpx;
}
}
.confirm-btn {
width: 300px;
height: 42px;
line-height: 42px;
border-radius: 30px;
margin-top: 40px;
background: #ff7581;
color: #ffffff;
width: 100%;
height: 100rpx;
text-align: center;
line-height: 100rpx;
border-radius: 16rpx;
margin-top: 80rpx;
background: #EC6F48;
font-size: 32rpx;
color: #FFFFFF;
&:after {
border-radius: 60px;
border: none;
}
}
</style>