UNI-APP高颜值登陆注册页面！！附源码！！
UNI-APP高颜值登陆注册页面！！附源码！！
老K博客
发布于 2024-09-09 11:04:10
发布于 2024-09-09 11:04:10
代码可运行
运行总次数：0
代码可运行
酷炫的登陆界面是应用的首要门面。而在我们的开发小程序过程中，由于显示条件的限制我们几乎都是自己一个人既要保证接口的高可用，还要尽力去美化小程序的样式。所以这个时候，寻找到靠谱且贴合需求的样式模板，这就显得尤其重要。
效果图：
6e2721f94db6ae7f.gif
完整源码：
export default { data() { return { url: 'https://ext.dcloud.net.cn/plugin?id=1931', cur: 0 } } }
.container { position: relative; }
.bg { position: relative; width: 750rpx; height: 400rpx; }
.tab { position: absolute; top: 250rpx; left: 20rpx; right: 20rpx; height: 150rpx; padding: 0 50rpx; background-color: #fff; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx;
&-bg { position: absolute; top: -200rpx; right: -50rpx; width: 440rpx; height: 285rpx; } }
.line { width: 25rpx; height: 7rpx; }
.login, .register { padding: 0 60rpx; }
.input { width: 580rpx; height: 90rpx; padding: 0 30rpx; background-color: rgba(80, 100, 235, 0.1); border-radius: 100rpx;
&-icon { width: 30rpx; height: 38rpx; }
&-placeholder { color: #5064eb; } }
.button { width: 630rpx; height: 90rpx; margin-left: 60rpx; border-radius: 100rpx; }
.separator { height: 2rpx; margin: 0 30rpx; background-color: #f5f5f5; }
.other { &-items { padding: 0 200rpx; }
&-icon { width: 50rpx; height: 50rpx; } }
// 下边距 .margin-b5 { margin-bottom: 5rpx; }
.margin-b10 { margin-bottom: 10rpx; }
.margin-b15 { margin-bottom: 15rpx; }
.margin-b20 { margin-bottom: 20rpx; }
.margin-b25 { margin-bottom: 25rpx; }
.margin-b30 { margin-bottom: 30rpx; }
.margin-b40 { margin-bottom: 40rpx; }
.margin-b60 { margin-bottom: 60rpx; }
.margin-b80 { margin-bottom: 80rpx; }
.margin-b100 { margin-bottom: 100rpx; }
// 右边距 .margin-r5 { margin-right: 5rpx; }
.margin-r10 { margin-right: 10rpx; }
.margin-r15 { margin-right: 15rpx; }
.margin-r20 { margin-right: 20rpx; }
.margin-r25 { margin-right: 25rpx; }
.margin-r30 { margin-right: 30rpx; }
.margin-r40 { margin-right: 40rpx; }
.margin-r60 { margin-right: 60rpx; }
// 字体大小 .font-18 { font-style: normal; font-size: 18rpx; font-family: Droid Sans Fallback; }
.font-20 { font-style: normal; font-size: 20rpx; font-family: Droid Sans Fallback; }
.font-22 { font-style: normal; font-size: 22rpx; font-family: Droid Sans Fallback; }
.font-24 { font-style: normal; font-size: 24rpx; font-family: Droid Sans Fallback; }
.font-26 { font-style: normal; font-size: 26rpx; font-family: Droid Sans Fallback; }
.font-28 { font-style: normal; font-size: 28rpx; font-family: Droid Sans Fallback; }
.font-30 { font-style: normal; font-size: 30rpx; font-family: Droid Sans Fallback; }
.font-32 { font-style: normal; font-size: 32rpx; font-family: Droid Sans Fallback; }
.font-34 { font-style: normal; font-size: 34rpx; font-family: Droid Sans Fallback; }
.font-36 { font-style: normal; font-size: 36rpx; font-family: Droid Sans Fallback; }
.font-38 { font-style: normal; font-size: 38rpx; font-family: Droid Sans Fallback; }
.font-40 { font-style: normal; font-size: 40rpx; font-family: Droid Sans Fallback; }
.font-46 { font-style: normal; font-size: 46rpx; font-family: Droid Sans Fallback; }
.font-50 { font-style: normal; font-size: 50rpx; font-family: Droid Sans Fallback; }
.font-60 { font-style: normal; font-size: 60rpx; font-family: Droid Sans Fallback; }
.font-80 { font-style: normal; font-size: 80rpx; font-family: Droid Sans Fallback; }
// 字体对齐 .text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
// color相关 .color-white { color: #FFFFFF; }
.color-red { color: #dc0000; }
// 黑色色阶向下 .color-black { color: #000; }
.color-black-3 { color: #333; }
.color-black-6 { color: #666; }
.color-black-9 { color: #999; }
// 字体宽度 .font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: bold; }
// 间隔 .spacing-20 { width: 750rpx; height: 20rpx; background-color: #f8f8f8; }
// 圆角 .radius-10 { border-radius: 10rpx; }
.radius-20 { border-radius: 20rpx; }
.radius-30 { border-radius: 30rpx; }
.radius-circle { border-radius: 50%; }
.radius-height { border-radius: 10000px; }
// flex相关 .vs-flex-item { flex: 1; }
.vs-space-between { justify-content: space-between; }
.vs-space-around { justify-content: space-around; }
.vs-space-center { justify-content: center; }
.vs-space-end { justify-content: flex-end; }
.vs-row { flex-direction: row; }
.vs-column { flex-direction: column; }
.vs-align-end { align-items: flex-end; }
.vs-align-center { display: flex; align-items: center; }
.vs-align-start { align-items: flex-start; }
.vs-item-hover { background-color: rgba(0, 0, 0, 0.05); }
.vs-btn-hover { opacity: 0.8; }
.color-base { color: #5064eb; }
.bg-color-base { background-color: #5064eb; }效果图：
15e1054164dc0ee8.gif
完整源码： 1.登录模块：
export default { data() { return {} }, onLoad() {
}, methods: { // 注册 register() { uni.navigateTo({ url: '/pages/login1/register' }) },
// 忘记密码 forget() { uni.navigateTo({ url: '/pages/login1/forget' }) } } }
.content { padding: 100rpx 60rpx; display: flex; flex-direction: column; }
.row-input { display: flex; justify-content: flex-start; align-items: center; padding-top: 30rpx; height: 100rpx; border-bottom: 1rpx solid #818181;
image { width: 45rpx; height: 45rpx; }
input { font-size: 30rpx; padding-left: 30rpx; width: 500rpx; } }
.login-btn { display: flex; justify-content: center; align-items: center; border-radius: 10rpx; margin-top: 80rpx; height: 80rpx; font-size: 30rpx; background-color: #fd661f; color: #FFFFFF; }
.function-link { margin: 0 20rpx; height: 70rpx; display: flex; justify-content: space-between; align-items: center; font-size: 26rpx; color: #fd661f; }2.注册模块：
export default { data() {return {} }, onLoad() { },methods: { } } .content { padding: 100rpx 60rpx; display: flex; flex-direction: column; } .row-input { display: flex; justify-content: flex-start; align-items: center; padding-top: 30rpx; height: 100rpx; border-bottom: 1rpx solid #818181; image { width: 45rpx; height: 45rpx; } input { font-size: 30rpx; padding-left: 30rpx; width: 500rpx; } } .login-btn { display: flex; justify-content: center; align-items: center; border-radius: 10rpx; margin-top: 80rpx; height: 80rpx; font-size: 30rpx; background-color: #fd661f; color: #FFFFFF; }3.忘记密码模块：
export default { data() {return {} }, onLoad() { },methods: { } } .content { padding: 100rpx 60rpx; display: flex; flex-direction: column; } .row-input { display: flex; justify-content: flex-start; align-items: center; padding-top: 30rpx; height: 100rpx; border-bottom: 1rpx solid #818181; image { width: 45rpx; height: 45rpx; } input { font-size: 30rpx; padding-left: 30rpx; width: 500rpx; } } .login-btn { display: flex; justify-content: center; align-items: center; border-radius: 10rpx; margin-top: 80rpx; height: 80rpx; font-size: 30rpx; background-color: #fd661f; color: #FFFFFF; }效果图：
14d5e648f81f2940.gif
完整源码：
export default { data() { return { tabIndex: 0 //登录注册下标 } }, methods: { // tab切换 tabChange(id) { this.tabIndex = id }, // 获取验证码 getCode() { uni.showToast({ title: "获取验证码" }) } } }
page { background-color: #5de97f; }
.logo { height: 25vh; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 120rpx; letter-spacing: 5rpx; font-weight: bold; }
.form-box { padding: 0 50rpx; margin: 0 70rpx; height: 750rpx; background-color: #FFFFFF; border-radius: 20rpx;
.tab-menu { padding-top: 50rpx; display: flex; justify-content: flex-start; align-items: center; height: 100rpx;
.tab-name { height: 100%; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 150rpx; font-size: 40rpx; font-weight: bold; color: #afafaf; }
.tab-txt { color: #5b5b5b; }
.tab-active { margin-top: 10rpx; width: 100rpx; height: 13rpx; background-color: #6bb3fe; border-radius: 15rpx; } }
.row-input { margin: 60rpx 0 0 0; padding: 0 20rpx; display: flex; justify-content: flex-start; align-items: center; height: 80rpx; border: 5rpx solid #bbf7c8; border-radius: 8rpx;
image { width: 30rpx; height: 30rpx; }
input { padding-left: 20rpx; font-size: 28rpx; width: 400rpx; } }
.row-input-code { margin-top: 20rpx; width: 100%; display: flex; justify-content: space-between; align-items: center; height: 80rpx; font-size: 28rpx;
.input-box { padding: 0 20rpx; width: 60%; display: flex; justify-content: flex-start; align-items: center; height: 100%; border: 5rpx solid #bbf7c8; border-top-left-radius: 8rpx; border-bottom-left-radius: 8rpx; box-sizing: border-box;
.img { width: 40rpx; height: 30rpx; }
input { padding-left: 20rpx; font-size: 28rpx; width: 300rpx; } }
.code-box { display: flex; justify-content: center; align-items: center; width: 40%; height: 100%; color: #FFFFFF; border-top-right-radius: 8rpx; border-bottom-right-radius: 8rpx; background: linear-gradient(#44aae8, #4889e2); } }
.menu-link { display: flex; justify-content: flex-end; align-items: center; height: 70rpx; color: #007AFF; font-size: 24rpx; }
.login-btn { margin-top: 30rpx; display: flex; justify-content: center; align-items: center; height: 80rpx; background: linear-gradient(#44aae8, #4889e2); border-radius: 50rpx; color: #FFFFFF; font-size: 35rpx; font-weight: bold; letter-spacing: 4rpx; }
.register { margin-top: 50rpx; }
.agree-txt { display: flex; justify-content: center; align-items: center; height: 70rpx; font-size: 24rpx;
text { color: #007AFF; } } }</code></pre><h3 id="cl-4"><span>效果图：</span></h3><p><img src="https://s3.bmp.ovh/imgs/2024/09/08/40616b695eeadbdd.gif" alt="40616b695eeadbdd.gif" title="40616b695eeadbdd.gif"> </p><p>完整源码：<br>1.登陆模块：</p><pre><code class="lang-css"><template> <view class="content"> <view class="head"> <view class="logo"> logo </view> <text class="tip">欢迎登录老K博客</text> </view> <view class="form-box"> <view class="tab-box"> <view class="row-tab" @click="tabClick(0)"> <text :class="tabIndex==0?'tab-active':''">账号登录</text> <text class="thing" v-show="tabIndex==0?true:false"></text> </view> <view class="row-tab" @click="tabClick(1)"> <text :class="tabIndex==1?'tab-active':''">验证码登录</text> <text class="thing" v-show="tabIndex==1?true:false"></text> </view> </view> <view v-show="tabIndex==0"> <view class="row-input"> <input maxlength="11" placeholder="手机号码" /> </view> <view class="row-input"> <input password maxlength="18" placeholder="密码" /> </view> </view> <view v-show="tabIndex==1"> <view class="row-input"> <input maxlength="11" placeholder="手机号码" /> <view class="code"> <text @click="getCode">获取验证码</text> </view> </view> <view class="row-input"> <input maxlength="6" placeholder="验证码" /> </view> </view> <view class="login-btn"> 登录 </view> <view class="menu-link"> <text @click="register">注册</text> <text>找回密码</text> </view> </view> </view></template>
<script> export default { data() { return { tabIndex: 0, //tab下标 } }, methods: { // tab点击 tabClick(id) { this.tabIndex = id },
// 获取验证码 getCode() { uni.showToast({ title: "获取验证码" }) },
// 注册 register() { uni.navigateTo({ url: '/pages/login4/register' }) } } }</script>
<style lang="scss"> page { background-color: #007AFF; }
.head { padding-left: 80rpx; height: 30vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
.logo { display: flex; justify-content: center; align-items: center; border-radius: 8rpx; width: 110rpx; height: 110rpx; font-size: 40rpx; color: #007AFF; font-weight: bold; background-color: #FFFFFF; }
.tip { padding-top: 50rpx; color: #FFFFFF; font-size: 40rpx; letter-spacing: 5rpx; font-weight: bold; } }
.form-box { padding: 0rpx 80rpx; height: 70vh; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx; background-color: #FFFFFF;
.tab-box { padding-top: 40rpx; display: flex; justify-content: space-between; align-items: center; height: 80rpx; color: #929293; font-weight: bold;
.row-tab { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; font-weight: bold; font-size: 35rpx; width: 50%; height: 100%;
.tab-active { color: #4d88f8; }
.thing { margin-top: 20rpx; width: 50rpx; height: 6rpx; background-color: #3884f6; } } }
.row-input { display: flex; justify-content: space-between; align-items: center; padding-top: 50rpx; font-size: 30rp; height: 100rpx; border-bottom: 1rpx solid #cfcfd0;
input { flex: 1; }
.code { display: flex; justify-content: flex-end; font-weight: bold; color: #0b77f7; width: 200rpx; font-size: 26rpx; } }
.login-btn { margin-top: 80rpx; display: flex; justify-content: center; align-items: center; height: 100rpx; letter-spacing: 10rpx; background: linear-gradient(to right, #0a7df7, #0f62f3); color: #FFFFFF; border-radius: 10rpx; font-size: 30rpx; }
.menu-link { position: fixed; left: 80rpx; right: 80rpx; bottom: 50rpx; display: flex; justify-content: space-between; font-size: 28rpx; font-weight: bold; } }2.注册模块：
export default { data() { return {} }, }
.content { padding: 0 40rpx;
.row-input { display: flex; flex-direction: column; font-size: 30rpx;
text { font-size: 28rpx; line-height: 100rpx; font-weight: bold; }
.input-box { display: flex; justify-content: space-between; align-items: center; padding: 0 20rpx; height: 80rpx; border-radius: 8rpx; background-color: #f2f3f4;
.code { display: flex; justify-content: center; align-items: center; font-size: 28rpx; letter-spacing: 3rpx; width: 200rpx; height: 80rpx; border-radius: 8rpx; background-color: #0a7ff7; color: #FFFFFF; } } }
.row-input2 { display: flex; flex-direction: column; font-size: 30rpx;
text { font-size: 28rpx; line-height: 100rpx; font-weight: bold; }
.input-box2 { display: flex; justify-content: space-between; align-items: center; .input2{ padding: 0 20rpx; width: 400rpx; height: 80rpx; border-radius: 8rpx; background-color: #f2f3f4; }
.code { display: flex; justify-content: center; align-items: center; font-size: 28rpx; letter-spacing: 3rpx; width: 200rpx; height: 80rpx; border-radius: 8rpx; background-color: #0a7ff7; color: #a5ceff; } } }
.register-btn { margin-top: 60rpx; display: flex; justify-content: center; align-items: center; width: 100%; height: 100rpx; background: linear-gradient(to right, #0a7df7, #0f62f3); color: #FFFFFF; letter-spacing: 10rpx; font-size: 30rpx; border-radius: 10rpx; } }本文共 499 个字数,平均阅读时长 ≈ 2分钟
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024年09月08日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
