模板一
代码部分
1.Login.vue
<template>
<view class="page">
<view class="title">
<view>Hello！<br>欢迎来到XXX</view>
</view>
<view class="form">
<view class="inputs">
<view class="account">
<view>+86</view> <input type="number" v-model="account" :adjust-position="false"
placeholder="手机号" />
</view>
<view class="vcode">
<input type="number" v-model="vcode" :adjust-position="false" placeholder="请输入验证码" />
<text v-if="vcodeTime==0" style="color:#3ba662" @click="getVcode">获取验证码</text>
<text v-else style="color:#ccc">重新获取({{vcodeTime}}s)</text>
</view>
</view>
<view class="button">
<view @click="login">
立即登录
</view>
</view>
<view class="tip">
<text>未注册的手机号验证后即可完成注册</text>
</view>
</view>
<view class="other">
<view class="tip">
其他登录方式
</view>
<view class="items">
<view @click="otherLogin('weixin')"><uni-icons type="weixin" color="#fff" size="30"></uni-icons></view>
<view @click="otherLogin('qq')"><uni-icons type="qq" color="#fff" size="30"></uni-icons></view>
<view @click="otherLogin('weibo')"><uni-icons type="weibo" color="#fff" size="30"></uni-icons></view>
</view>
</view>
<view class="pact">
<radio :checked="pactChecked" activeBackgroundColor="#3ba662" activeBorderColor="#3ba662"
borderColor="#3ba662" color="#fff" @click="pactChange" />
<view>我已阅读并同意<text @click="toPact">《用户协议》</text>和<text @click="toPact">《隐私协议》</text></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
account: "",
vcode: "",
pactChecked: false,
vcodeTime: 0,
vcodeTimer: null
}
},
onLoad() {
},
methods: {
login() {
uni.showToast({
title: "登录",
icon: 'none'
})
},
getVcode() {
this.vcodeTime = 60
this.vcodeTimer = setInterval(() => {
if (this.vcodeTime > 0) {
this.vcodeTime--
} else {
clearInterval(this.vcodeTimer)
this.vcodeTimer = null
}
}, 1000)
uni.showToast({
title: "获取验证码",
icon: 'none'
})
},
otherLogin(type) {
uni.showToast({
title: type + "登录",
icon: 'none'
})
},
pactChange() {
this.pactChecked = !this.pactChecked
},
toPact() {
uni.showToast({
title: "协议",
icon: 'none'
})
}
}
}
</script>
<style lang="scss" scoped>
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
background: linear-gradient(180deg, rgba(255, 250, 235, 1) 0%, rgba(227, 255, 224, 0) 40%, #ffffff 100%);
.title {
padding-top: 220rpx;
padding-bottom: 130rpx;
view {
padding-left: 64rpx;
font-size: 48rpx;
font-weight: 700;
color: #383838;
}
}
.form {
flex: 1;
padding: 0 64rpx;
.inputs {
margin-bottom: 132rpx;
>view {
height: 96rpx;
border-bottom: 1rpx solid #cdcdcd;
display: flex;
align-items: center;
input {
flex: 1;
}
}
.account {
margin-bottom: 48rpx;
view {
padding-right: 20rpx;
margin-right: 20rpx;
border-right: 1rpx solid #cdcdcd;
}
}
.vcode {
text {
text-wrap: nowrap;
}
}
}
.button {
view {
line-height: 96rpx;
border-radius: 20rpx;
text-align: center;
font-size: 32rpx;
color: #ffffff;
background-color: #3ba662;
}
}
.tip {
font-size: 28rpx;
text-align: center;
margin-top: 30rpx;
color: #808080;
}
}
.other {
padding: 0 160rpx;
margin-bottom: 60rpx;
.tip {
font-size: 28rpx;
text-align: center;
margin-top: 30rpx;
color: #808080;
position: relative;
margin-bottom: 40rpx;
}
.tip::before,
.tip::after {
content: '';
width: 116rpx;
height: 2rpx;
position: absolute;
top: calc(50% - 1rpx);
}
.tip::before {
background: linear-gradient(90deg, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 1) 100%);
left: 0;
}
.tip::after {
background: linear-gradient(90deg, rgba(204, 204, 204, 1) 0%, rgba(204, 204, 204, 0) 100%);
right: 0;
}
.items {
display: flex;
align-items: center;
justify-content: space-around;
view {
padding: 6rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
view:nth-child(1) {
background-color: #00C800;
}
view:nth-child(2) {
background: #4cafe9;
}
view:nth-child(3) {
background: #e34c46;
}
view:active {
opacity: .9;
transform: scale(1.02);
}
}
}
.pact {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 70rpx;
font-size: 24rpx;
text {
color: #3ba662;
}
radio {
:deep(.uni-radio-input) {
border: 1rpx solid #3ba662;
}
transform:scale(0.6)
}
}
}
</style>2.loginByPhone.vue
<template>
<view class="page">
<view class="logo">
<image src="../../static/login-A/logo.png" mode="aspectFill"></image>
</view>
<view class="phone">
{{phone}}
</view>
<view class="tip">
认证服务由{{operator}}提供
</view>
<view class="button">
<view @click="login">
本机号码一键登录
</view>
<view @click="other">
其他手机号登录
</view>
</view>
<view class="pact">
<radio :checked="pactChecked" activeBackgroundColor="#3ba662" activeBorderColor="#3ba662"
borderColor="#3ba662" color="#fff" @click="pactChange" />
<view>我已阅读并同意<text @click="toPact">《用户协议》</text>和<text @click="toPact">《隐私协议》</text></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
phone: "150****6868",
operator: "中国移动",
pactChecked: false
}
},
onLoad() {
},
methods: {
login() {
uni.showToast({
title: "一键登录",
icon: 'none'
})
},
other() {
uni.redirectTo({
url: "./login"
})
},
pactChange() {
this.pactChecked = !this.pactChecked
},
toPact() {
uni.showToast({
title: "协议",
icon: 'none'
})
}
}
}
</script>
<style lang="scss" scoped>
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
background: url("../../static/login-A/pageBg.png") no-repeat top center;
background-size: 100%;
.logo {
display: flex;
align-items: center;
justify-content: center;
height: 600rpx;
padding-top: 80rpx;
image {
width: 200rpx;
height: 200rpx;
}
}
.title {
padding-top: 220rpx;
padding-bottom: 130rpx;
view {
padding-left: 64rpx;
font-size: 48rpx;
font-weight: 700;
color: #383838;
}
}
.phone {
font-size: 72rpx;
color: #383838;
text-align: center;
margin-bottom: 20rpx;
}
.tip {
font-size: 28rpx;
text-align: center;
margin-top: 30rpx;
color: #808080;
margin-bottom: 100rpx;
}
.button {
padding: 0 64rpx;
flex: 1;
view {
line-height: 96rpx;
border-radius: 20rpx;
text-align: center;
font-size: 32rpx;
color: #ffffff;
background-color: #3ba662;
margin-bottom: 48rpx;
}
}
.pact {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 70rpx;
font-size: 24rpx;
text {
color: #3ba662;
}
radio {
:deep(.uni-radio-input) {
border: 1rpx solid #3ba662;
}
transform:scale(0.6)
}
}
}
</style>模板二
代码部分
<template>
<view class="page">
<view class="title">
<view>Hello！<br>欢迎来到XXX</view>
</view>
<view class="form">
<view class="tab">
<view :class="loginType==1? 'select type1' : 'type1'" @click="loginType=1">快捷登录</view>
<view :class="loginType==2? 'select type2' : 'type2'" @click="loginType=2">账号登陆</view>
</view>
<view class="inputs_button">
<view class="inputs">
<view class="account">
<input type="number" v-model="account" :adjust-position="false" placeholder="手机号" />
</view>
<view class="password" v-if="loginType==2">
<input :type="pwdShow? 'text' : 'password'" v-model="password" :adjust-position="false"
placeholder="密码" />
<uni-icons :type="pwdShow? 'eye-filled' : 'eye-slash-filled'" size="24" color="#cccccc"
@click="pwdShow=!pwdShow"></uni-icons>
</view>
<view class="vcode" v-if="loginType==1">
<input type="number" v-model="vcode" :adjust-position="false" placeholder="验证码" />
<text v-if="vcodeTime==0" style="color:#3264ed" @click="getVcode">获取验证码</text>
<text v-else style="color:#ccc">重新获取({{vcodeTime}}s)</text>
</view>
</view>
<view class="button">
<view @click="login">
登录
</view>
</view>
</view>
</view>
<view class="pact">
<radio :checked="pactChecked" activeBackgroundColor="#3264ed" activeBorderColor="#3264ed"
borderColor="#3264ed" color="#fff" @click="pactChange" />
<view>我已阅读并同意<text @click="toPact">《用户协议》</text>和<text @click="toPact">《隐私协议》</text></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
account: "",
password: "",
vcode: "",
loginType: 1,
pwdShow: false,
pactChecked: false,
vcodeTime: 0,
vcodeTimer: null
}
},
onLoad() {
},
methods: {
login() {
uni.showToast({
title: "登录方式" + this.loginType,
icon: 'none'
})
},
getVcode() {
this.vcodeTime = 60
this.vcodeTimer = setInterval(() => {
if (this.vcodeTime > 0) {
this.vcodeTime--
} else {
clearInterval(this.vcodeTimer)
this.vcodeTimer = null
}
}, 1000)
uni.showToast({
title: "获取验证码",
icon: 'none'
})
},
pactChange() {
this.pactChecked = !this.pactChecked
},
toPact() {
uni.showToast({
title: "协议",
icon: 'none'
})
}
}
}
</script>
<style lang="scss" scoped>
.page {
min-height: 100vh;
background: url("../../static/login-B/pageBg.png") no-repeat top center;
background-size: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
padding-top: 220rpx;
padding-bottom: 70rpx;
view {
padding-left: 64rpx;
font-size: 48rpx;
font-weight: 700;
color: #383838;
}
}
.form {
flex: 1;
margin: 0 32rpx;
border-radius: 40rpx;
background-color: #fff;
overflow: hidden;
.tab {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #ecf1fb;
height: 100rpx;
background: linear-gradient(180deg, #e3ebf9 0%, #ffffff 100%);
view {
width: 340rpx;
line-height: 100rpx;
text-align: center;
color: #9e9e9e;
position: relative;
}
view::after {
content: '';
width: 50rpx;
height: 8rpx;
display: block;
background-color: #3264ed;
border-radius: 4rpx;
position: absolute;
left: 50%;
bottom: 14rpx;
transform: translateX(-50%);
opacity: 0;
}
view.select {
background-color: #fff;
color: #3264ed;
}
view.type1.select {
border-radius: 0 40rpx 0 0;
}
view.type2.select {
border-radius: 40rpx 0 0;
}
view.select::after {
opacity: 1;
}
}
.inputs_button {
background-color: #fff;
.inputs {
padding: 150rpx 32rpx 0;
margin-bottom: 80rpx;
.account,
.password,
.vcode {
height: 96rpx;
border-radius: 20rpx;
padding: 0 48rpx;
display: flex;
align-items: center;
background-color: #f7fafc;
input {
flex: 1;
}
}
.account {
margin-bottom: 48rpx;
}
.vcode {
text {
text-wrap: nowrap;
font-size: 26rpx;
background-color: #fff;
padding: 14rpx 30rpx;
border-radius: 12rpx;
}
}
}
.button {
padding: 0 32rpx;
view {
line-height: 96rpx;
border-radius: 20rpx;
text-align: center;
font-size: 32rpx;
background-color: #3264ed;
color: #fff;
}
}
}
}
.pact {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 120rpx;
font-size: 24rpx;
text {
color: #3264ed;
}
radio {
:deep(.uni-radio-input) {
border: 1rpx solid #3264ed;
}
transform:scale(0.6)
}
}
}
</style>模板三
login.vue
<template>
<view class="page">
<view class="title">
<view>您好，欢迎登录！</view>
</view>
<view class="form">
<view class="inputs">
<view class="account">
<input type="number" v-model="account" :adjust-position="false" placeholder="账号" />
</view>
<view class="password">
<input :type="pwdShow? 'text' : 'password'" v-model="password" :adjust-position="false"
placeholder="密码" />
<uni-icons :type="pwdShow? 'eye-filled' : 'eye-slash-filled'" size="24" color="#cccccc"
@click="pwdShow=!pwdShow"></uni-icons>
</view>
<view class="forgetPwd"><text @click="forgetPwd">忘记密码？</text></view>
</view>
<view class="button">
<view @click="login">
登录
</view>
</view>
<view class="tip">
<text @click="toRegister">没有账号？去注册</text>
</view>
</view>
<view class="pact">
<checkbox :checked="pactChecked" activeBackgroundColor="#FFD640" activeBorderColor="#FFD640"
borderColor="#000000" color="#fff" @click="pactChange" />
<view>我已阅读并同意<text @click="toPact">《用户协议》</text>和<text @click="toPact">《隐私协议》</text></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
account: "",
password: "",
pwdShow: false,
pactChecked: false
}
},
onLoad() {
},
methods: {
login() {
uni.showToast({
title: "登录",
icon: 'none'
})
},
forgetPwd() {
uni.showToast({
title: "忘记密码",
icon: 'none'
})
},
toRegister() {
uni.redirectTo({
url: "./register"
})
},
pactChange() {
this.pactChecked = !this.pactChecked
},
toPact() {
uni.showToast({
title: "协议",
icon: 'none'
})
}
}
}
</script>
<style lang="scss" scoped>
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
padding-top: 500rpx;
padding-bottom: 120rpx;
background: url("../../static/login-C/pageBg.png") no-repeat top center;
background-size: 100%;
view {
padding-left: 64rpx;
font-size: 44rpx;
font-weight: 700;
line-height: 1;
}
}
.form {
flex: 1;
padding: 0 64rpx;
.inputs {
margin-bottom: 132rpx;
.account,
.password {
height: 96rpx;
border-radius: 48rpx;
border: 1rpx solid rgba(204, 204, 204, 1);
padding: 0 48rpx;
display: flex;
align-items: center;
input {
flex: 1;
}
}
.account {
margin-bottom: 48rpx;
}
.forgetPwd {
text-align: right;
padding: 20rpx 0;
}
}
.button {
view {
line-height: 96rpx;
border-radius: 48rpx;
text-align: center;
font-size: 32rpx;
background: linear-gradient(90deg, rgba(255, 222, 102, 1) 0%, rgba(202, 245, 253, 1) 100%);
}
}
.tip {
font-size: 28rpx;
text-align: center;
margin-top: 30rpx;
}
}
.pact {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 70rpx;
font-size: 24rpx;
text {
color: #ffde66;
}
checkbox {
:deep(.uni-checkbox-input) {
border: 1rpx solid #000000;
}
transform:scale(0.6)
}
}
}
</style>register.vue
<template>
<view class="page">
<view class="title">
<view>您好，一键注册！</view>
</view>
<view class="form">
<view class="inputs">
<view class="account">
<input type="number" v-model="account" :adjust-position="false" placeholder="手机号" />
</view>
<view class="vcode">
<input type="number" v-model="vcode" :adjust-position="false" placeholder="验证码" />
<text v-if="vcodeTime==0" style="color:#ffde66" @click="getVcode">获取验证码</text>
<text v-else style="color:#ccc">重新获取({{vcodeTime}}s)</text>
</view>
</view>
<view class="button">
<view @click="register">
立即注册
</view>
</view>
<view class="tip">
<text @click="toLogin">已有帐号？去登录</text>
</view>
</view>
<view class="pact">
<checkbox :checked="pactChecked" activeBackgroundColor="#FFD640" activeBorderColor="#FFD640"
borderColor="#000000" color="#fff" @click="pactChange" />
<view>我已阅读并同意<text @click="toPact">《用户协议》</text>和<text @click="toPact">《隐私协议》</text></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
account: "",
vcode: "",
pwdShow: false,
pactChecked: false,
vcodeTime: 0,
vcodeTimer: null
}
},
onLoad() {
},
methods: {
register() {
uni.showToast({
title: "注册",
icon: 'none'
})
},
toLogin() {
uni.redirectTo({
url: "./login"
})
},
getVcode() {
this.vcodeTime = 60
this.vcodeTimer = setInterval(() => {
if (this.vcodeTime > 0) {
this.vcodeTime--
} else {
clearInterval(this.vcodeTimer)
this.vcodeTimer = null
}
}, 1000)
uni.showToast({
title: "获取验证码",
icon: 'none'
})
},
pactChange() {
this.pactChecked = !this.pactChecked
},
toPact() {
uni.showToast({
title: "协议",
icon: 'none'
})
}
}
}
</script>
<style lang="scss" scoped>
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
padding-top: 500rpx;
padding-bottom: 120rpx;
background: url("../../static/login-C/pageBg.png") no-repeat top center;
background-size: 100%;
view {
padding-left: 64rpx;
font-size: 44rpx;
font-weight: 700;
line-height: 1;
}
}
.form {
flex: 1;
padding: 0 64rpx;
.inputs {
margin-bottom: 132rpx;
view {
height: 96rpx;
border-radius: 48rpx;
border: 1rpx solid rgba(204, 204, 204, 1);
padding: 0 48rpx;
display: flex;
align-items: center;
input {
flex: 1;
}
}
.account {
margin-bottom: 48rpx;
}
.vcode {
text {
text-wrap: nowrap;
font-size: 26rpx;
}
}
}
.button {
view {
line-height: 96rpx;
border-radius: 48rpx;
text-align: center;
font-size: 32rpx;
background: linear-gradient(90deg, rgba(255, 222, 102, 1) 0%, rgba(202, 245, 253, 1) 100%);
}
}
.tip {
font-size: 28rpx;
text-align: center;
margin-top: 30rpx;
}
}
.pact {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 70rpx;
font-size: 24rpx;
text {
color: #ffde66;
}
checkbox {
:deep(.uni-checkbox-input) {
border: 1rpx solid #000000;
}
transform:scale(0.6)
}
}
}
</style>图片素材
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容