燕成杰 / Bitcoin · 提交

转到一个项目

作者 卢胜
提交 caa87b6fa8f224a40ac44015cb83d530dbb1b384 1 个父辈 9d3a2377

登录，注册，忘记密码

内嵌 并排对比
正在显示 7 个修改的文件 包含 461 行增加 和 1 行删除
... ... @@ -147,7 +147,34 @@
}
}
],
,{
"path" : "pages/login/login",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/login/register",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/login/password",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "元届印象",
... ...
<template>
<view class="login">
<view class="icon">
<image class="bgimg" src="../../static/ic_logo.png" mode=""></image>
<view class="bar flexwrap">
<view class="name">
用户名：
</view>
<view class="last name">
<input type="text" value="" placeholder="请输入用户名" />
</view>
</view>
<view class="bar flexwrap">
<view class="name">
密码：
</view>
<view class="last name">
<input type="text" value="" placeholder="密码：" />
</view>
</view>
<view class="loginbtn">
登录
</view>
<view class="passway">
<text>忘记密码</text>
<text>没有账号，去注册</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.login {
padding: 0 48rpx;
box-sizing: border-box;
.icon {
.bgimg {
margin-top: 100rpx;
margin-left: 50%;
transform: translate(-50%);
margin-bottom: 24rpx;
width: 184rpx;
height: 184rpx;
}
.bar {
border-bottom: 1px solid #f0f0f0;
padding: 40rpx 0;
color: rgba(0, 0, 0, 1);
font-size: 32rpx;
font-weight: 500;
font-family: "PingFang SC";
.name {
width: 180rpx;
}
.lastname {
width: 300rpx;
}
}
.loginbtn {
margin-top: 100rpx;
width: 654rpx;
height: 88rpx;
border-radius: 28rpx;
opacity: 1;
color: rgba(0, 0, 0, 0.9);
font-size: 32rpx;
font-weight: 600;
font-family: "PingFang SC";
text-align: center;
line-height: 88rpx;
background: rgba(254, 208, 0, 1);
}
.passway {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16rpx;
text {
&:first-child {
color: rgba(0, 0, 0, 0.26);
font-size: 24rpx;
font-weight: 400;
font-family: "PingFang SC";
}
&:last-child {
color: rgba(254, 208, 0, 1);
font-size: 26rpx;
font-weight: 400;
font-family: "PingFang SC";
}
}
}
}
}
</style>
... ...
<template>
<view class="login">
<view class="icon">
<view class="icontitle">
忘记密码
</view>
<view class="bar flexwrap">
<view class="name">
用户名：
</view>
<view class="lastname">
<input type="text" value="" placeholder="请输入用户名" />
</view>
</view>
<view class="bar flexwrap">
<view class="name">
验证码：
</view>
<view class="lastname">
<input type="text" value="" placeholder="请输入验证码" />
<view class="code">
获取验证码
</view>
</view>
</view>
<view class="bar flexwrap">
<view class="name">
密码：
</view>
<view class="lastname">
<input type="text" value="" placeholder="请输入密码" />
</view>
</view>
<view class="bar flexwrap">
<view class="name">
确认密码：
</view>
<view class="lastname">
<input type="text" value="" placeholder="请确认密码" />
</view>
</view>
<view class="loginbtn">
确认
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.login {
padding: 0 48rpx;
box-sizing: border-box;
.icon {
.icontitle {
margin-top: 152rpx;
margin-left: 16rpx;
margin-bottom: 80rpx;
color: rgba(50, 50, 51, 1);
font-size: 52rpx;
font-weight: 700;
font-family: "PingFang SC";
}
.bar {
border-bottom: 1px solid #f0f0f0;
padding: 40rpx 0;
color: rgba(0, 0, 0, 1);
font-size: 32rpx;
font-weight: 500;
font-family: "PingFang SC";
.name {
width: 180rpx;
}
.lastname {
flex: 1;
position: relative;
input {
width: 260rpx;
}
.code {
position: absolute;
right: 0;
top: 50%;
transform: translate(-10%, -50%);
color: rgba(0, 0, 0, 0.26);
font-size: 32rpx;
font-weight: 400;
font-family: "PingFang SC";
}
}
}
.loginbtn {
margin-top: 100rpx;
width: 654rpx;
height: 88rpx;
border-radius: 28rpx;
opacity: 1;
color: rgba(0, 0, 0, 0.9);
font-size: 32rpx;
font-weight: 600;
font-family: "PingFang SC";
text-align: center;
line-height: 88rpx;
background: rgba(254, 208, 0, 1);
}
.passway {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16rpx;
text {
&:first-child {
color: rgba(0, 0, 0, 0.26);
font-size: 24rpx;
font-weight: 400;
font-family: "PingFang SC";
}
&:last-child {
color: rgba(254, 208, 0, 1);
font-size: 26rpx;
font-weight: 400;
font-family: "PingFang SC";
}
}
}
}
}
</style>
... ...
<template>
<view class="login">
<view class="icon">
<image class="bgimg" src="../../static/ic_logo.png" mode=""></image>
<view class="bar flexwrap">
<view class="name">
用户名：
</view>
<view class="lastname">
<input type="text" value="" placeholder="请输入用户名" />
</view>
</view>
<view class="bar flexwrap">
<view class="name">
密码：
</view>
<view class="lastname">
<input type="text" value="" placeholder="请输入密码" />
</view>
</view>
<view class="bar flexwrap">
<view class="name">
手机号：
</view>
<view class="lastname">
<input type="text" value="" placeholder="请输入手机号" />
</view>
</view>
<view class="bar flexwrap">
<view class="name">
验证码：
</view>
<view class="lastname">
<input type="text" value="" placeholder="请输入验证码" />
<view class="code">
获取验证码
</view>
</view>
</view>
<view class="loginbtn">
注册
</view>
<view class="passway">
<text>已有账号，直接登录</text>
</view>
<view class="user">
<image src="../../static/icon24.png" mode=""></image>
<image src="../../static/icon25.png" mode=""></image>
我已阅读并同意
<text>用户协议、</text><text>隐私政策</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.login {
padding: 0 48rpx;
box-sizing: border-box;
.icon {
.bgimg {
margin-top: 100rpx;
margin-left: 50%;
transform: translate(-50%);
margin-bottom: 24rpx;
width: 184rpx;
height: 184rpx;
}
.bar {
border-bottom: 1px solid #f0f0f0;
padding: 40rpx 0;
color: rgba(0, 0, 0, 1);
font-size: 32rpx;
font-weight: 500;
font-family: "PingFang SC";
.name {
width: 180rpx;
}
.lastname {
flex: 1;
position: relative;
input {
width: 260rpx;
}
.code {
position: absolute;
right: 0;
top: 50%;
transform: translate(-10%, -50%);
color: rgba(0, 0, 0, 0.26);
font-size: 32rpx;
font-weight: 400;
font-family: "PingFang SC";
}
}
}
.loginbtn {
margin-top: 100rpx;
height: 88rpx;
border-radius: 28rpx;
opacity: 1;
color: rgba(0, 0, 0, 0.9);
font-size: 32rpx;
font-weight: 600;
font-family: "PingFang SC";
text-align: center;
line-height: 88rpx;
background: rgba(254, 208, 0, 1);
}
.passway {
text-align: right;
margin-top: 16rpx;
text {
color: rgba(254, 208, 0, 1);
font-size: 26rpx;
font-weight: 400;
font-family: "PingFang SC";
}
}
.user {
position: fixed;
bottom: 28rpx;
left: 50%;
width: 100%;
text-align: center;
transform: translate(-50%);
display: flex;
align-items: center;
justify-content: center;
color: rgba(100, 101, 102, 1);
font-size: 24rpx;
font-weight: 400;
font-family: "PingFang SC";
image {
margin-right: 22rpx;
width: 36rpx;
height: 36rpx;
}
text {
margin-right: 24rpx;
color: rgba(87, 107, 149, 1);
font-size: 24rpx;
font-weight: 400;
font-family: "PingFang SC";
}
}
}
}
</style>
... ...