注册页面/下载页面更新

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

View File

@ -125,9 +125,10 @@
"path": "pages/login/registerApp",
"style": {
"navigationBarTitleText": "注册",
"navigationBarBackgroundColor": "#f1a48a",
"h5": {
"titleNView": {
"backgroundColor": "#FFFFFF"
"backgroundColor": "#f1a48a"
}
}
// #ifdef H5
@ -159,13 +160,19 @@
},
{
"path": "pages/login/register",
"style": {
"navigationBarTitleText": "注册",
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#f1a48a",
"h5": {
"titleNView": {
"backgroundColor": "#FFFFFF"
"backgroundColor": "#f1a48a"
}
}
// #ifdef H5
,
"navigationStyle": "custom"
// #endif
}
},
{

View File

@ -1,17 +1,13 @@
<template>
<view
style="background-image: url(https://renwu.xiansqx.com/img/20210809/71fcac577b1945a7aeb724c8bd12a171.png);background-size: 100%;">
<view style="text-align: center;">
<image
style="width: 160upx;height: 160upx;margin-top: 200upx;border-radius:20upx;border: 2px solid #FFFFFF;"
src="../../static/images/appLogo.png"></image>
<view style="font-size: 46upx;margin-top: 20upx;color: #FFFFFF;font-weight: 500;">短剧APP</view>
<view style="font-size: 28upx;margin-top: 8upx;color: #FFFFFF;font-weight: 300;">{{message}}</view>
<button class="confirm-btn" @click="taobaoLogin">下载斯耀短剧APP</button>
<view style="margin-top: 300upx;text-align: center"><text
style="color: #666666;font-size: 32upx;font-weight: 400;"></text></view>
<view style="color: #333333;margin-top: 20upx;font-weight: 600;font-size: 38upx;"></view>
<view style="margin-top: 40upx;background: #FF0223;height: 10upx;width: 60upx;margin-left: 46%;"></view>
<view class="containers">
<image style="width: 100%;position: absolute;" src="../../static/images/appeq_bg.png" mode="widthFix"></image>
<view style="text-align: center;position: relative;height: 100%;">
<image style="width: 124rpx;height: 124rpx;margin-top: 162rpx;border-radius:20upx;" src="../../static/images/appLogo.png"></image>
<view style="font-size: 40rpx;margin-top: 32rpx;color: #FFFFFF;font-weight: bold;">斯耀短剧APP</view>
<view style="font-size: 28rpx;margin-top: 16rpx;color: #FFFFFF;font-weight: bold;">海量电子榨菜 免费又过瘾</view>
<button class="confirm-btn" @click="taobaoLogin">斯耀短剧APP</button>
</view>
<view id="shareit" v-if="show_share" @tap="closeShare">
<image class="arrow" src="https://renwu.xiansqx.com/img/20210813/9aa484db4c60458f86deb2a8ab6fe400.png">
@ -128,7 +124,15 @@
};
</script>
<style lang="scss">
<style lang="scss" scoped>
uni-page-body{
width: 100%;
height: 100%;
}
.containers {
width: 100%;
height: 100%;
}
#shareit {
-webkit-user-select: none;
position: fixed;
@ -260,16 +264,18 @@
}
.confirm-btn {
width: 500upx;
height: 100upx;
line-height: 100upx;
margin-top: 200upx;
color: #FE0122;
font-size: 38upx;
font-weight: 500;
// &:after {
// border-radius: 60px;
// }
width: 416rpx;
height: 90rpx;
line-height: 90rpx;
background: #FD5775;
color: #fff;
font-size: 32rpx;
font-weight: bold;
font-size: 32rpx;
color: #FFFFFF;
position: absolute;
left: 0;
right: 0;
bottom: 160rpx;
}
</style>

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>

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>
<!-- 协议地址 -->
<navigator url="/me/setting/mimi" open-type="navigate">隐私政策</navigator>
<navigator url="/me/setting/mimi" open-type="navigate" style="color: #37A6FF;">隐私政策</navigator>
<navigator url="/me/setting/xieyi" open-type="navigate">用户协议</navigator>
<navigator url="/me/setting/xieyi" open-type="navigate" style="color: #37A6FF;">用户协议</navigator>
</view>
</view>
</view>
@ -344,33 +348,44 @@
}
.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: #5074FF;
line-height: initial;
font-weight: 400;
font-size: 28rpx;
color: #EC6F48;
border: none;
background-color: transparent!important;
}
.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%;
@ -381,27 +396,46 @@
.wrapper {
position: relative;
z-index: 90;
background: #fff;
padding-bottom: 20px;
min-height: 100vh;
}
.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: #5074FF;
color: #fff;
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>

BIN
static/images/appeq_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 676 KiB

BIN
static/images/i_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 591 KiB