📌个人主页：个人主页
​🧀 推荐专栏：小程序开发成神之路
📝作者简介：一个读研中创业、打工中学习的能搞全栈、也搞算法、目前在搞大数据的奋斗者。
⭐️您的小小关注是我持续输出的动力！⭐️

引言

酷炫的登陆界面是应用的首要门面。而在我们的开发小程序过程中，由于显示条件的限制我们几乎都是自己一个人既要保证接口的高可用，还要尽力去美化小程序的样式。所以这个时候，寻找到靠谱且贴合需求的样式模板，这就显得尤其重要。

在多年的小程序开发积累下，特此总结了文中几十款小程序登陆界面。强烈推荐收藏！总有一个能帮到你！如果喜欢的话，期待留下你一个小小的赞。

一、带注册功能

1.1.1 样式一

1-1-1 效果图

1-1-1 完整代码

<template>
	<view class="container">
		<view class="bg bg-color-base margin-b20"></view>
		<view class="tab vs-row vs-align-center">
			<image class="tab-bg" src="?sign=d63f6b91aed3733b261cc0127d2cf702&t=1604049324"
			 mode=""></image>
			<view class="vs-row vs-align-center">
				<view class="vs-column vs-align-center margin-r40" @click="cur = 0">
					<text class="font-50 margin-b20" :class="[cur ? 'color-black-3': 'color-base']">登录</text>
					<view class="line bg-color-base" v-if="!cur"></view>
				</view>
				<view class="vs-column vs-align-center" @click="cur = 1">
					<text class="font-46 margin-b20" :class="[cur ? 'color-base': 'color-black-3']">注册</text>
					<view class="line bg-color-base" v-if="cur"></view>
				</view>
			</view>
		</view>
		<view class="login margin-b80" v-if="!cur">
			<view class="input vs-row vs-align-center margin-b40">
				<image class="input-icon margin-r20" src="?sign=599d8600e2d55f39ebd1cbc159a04729&t=1604049340"
				 mode=""></image>
				<input class="vs-flex-item color-base font-30" type="text" value="" :maxlength="11" placeholder="请输入您的手机号/邮箱"
				 placeholder-class="input-placeholder" />
			</view>
			<view class="input vs-row vs-align-center margin-b40">
				<image class="input-icon margin-r20" src="?sign=9f8fdd0ae0a1ae530a9226de8917ebbd&t=1604049354"
				 mode=""></image>
				<input class="vs-flex-item color-base font-30" type="text" password value="" placeholder="请输入您的登录密码"
				 placeholder-class="input-placeholder" />
			</view>
		</view>
		<view class="register margin-b80" v-if="cur">
			<view class="input vs-row vs-align-center margin-b40">
				<image class="input-icon margin-r20" src="?sign=599d8600e2d55f39ebd1cbc159a04729&t=1604049340"
				 mode=""></image>
				<input class="vs-flex-item color-base font-30" type="text" value="" :maxlength="11" placeholder="请输入您的手机号/邮箱"
				 placeholder-class="input-placeholder" />
			</view>
			<view class="input vs-row vs-align-center margin-b40">
				<image class="input-icon margin-r20" src="?sign=9f8fdd0ae0a1ae530a9226de8917ebbd&t=1604049354"
				 mode=""></image>
				<input class="vs-flex-item color-base font-30" type="text" password value="" placeholder="请输入您的登录密码"
				 placeholder-class="input-placeholder" />
			</view>
		</view>
		<view class="button bg-color-base vs-row vs-align-center vs-space-center margin-b20">
			<text class="color-white font-34">立即{{ cur ? '注册': '登录' }}</text>
		</view>
		<view class="vs-row vs-align-center vs-space-center margin-b100">
			<text class="color-base font-28">忘记密码？</text>
		</view>
		<view class="other">
			<view class="vs-row vs-align-center margin-b40">
				<view class="separator vs-flex-item"></view>
				<text class="color-black-3 font-28">更多登录方式</text>
				<view class="separator vs-flex-item"></view>
			</view>
			<view class="other-items vs-row vs-align-center vs-space-around">
				<image class="other-icon" src="/static/other/wx.png" mode=""></image>
				<image class="other-icon" src="/static/other/wb.png" mode=""></image>
				<image class="other-icon" src="/static/other/zfb.png" mode=""></image>
			</view>
		</view>
		<soure :url="url"></soure>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				url: 'https://ext.dcloud.net.cn/plugin?id=1931',
				cur: 0
			}
		}
	}
</script>
<style lang="scss">
	.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;
	}
</style>

1.1.2 样式二

1-1-2 效果图

1-1-2 完整代码

1-1-2 登陆模块

<template>
	<view class="content">
		<view class="row-input">
			<image mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103071-6dbd6c45894910e.png"></image>
			<input placeholder="账号或邮箱" maxlength="18" />
		</view>
		<view class="row-input">
			<image mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103058-6dbd6c45894910e.png"></image>
			<input placeholder="请输入您的密码" maxlength="18" />
		</view>
		<view class="login-btn">
			确认登录
		</view>
		<view class="function-link">
			<text @click="register">新用户注册</text>
			<text @click="forget">忘记密码</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		onLoad() {
		},
		methods: {
			// 注册
			register() {
				uni.navigateTo({
					url: '/pages/login1/register'
				})
			},
			// 忘记密码
			forget() {
				uni.navigateTo({
					url: '/pages/login1/forget'
				})
			}
		}
	}
</script>
<style lang="scss">
	.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;
	}
</style>

1-1-2 注册模块

<template>
	<view class="content">
		<view class="row-input">
			<image mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103064-6dbd6c45894910e.png"></image>
			<input placeholder="注册邮箱" maxlength="18" />
		</view>
		<view class="row-input">
			<image mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103071-6dbd6c45894910e.png"></image>
			<input placeholder="用户名" maxlength="18" />
		</view>
		<view class="row-input">
			<image mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103058-6dbd6c45894910e.png"></image>
			<input placeholder="设置密码" maxlength="18" />
		</view>
		<view class="login-btn">
			立即注册
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		onLoad() {
		},
		methods: {
		}
	}
</script>
<style lang="scss">
	.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;
	}
</style>

1-1-2 忘记密码模块

<template>
	<view class="content">
		<view class="row-input">
			<image mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103058-6dbd6c45894910e.png"></image>
			<input placeholder="旧密码" maxlength="18" />
		</view>
		<view class="row-input">
			<image mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103058-6dbd6c45894910e.png"></image>
			<input placeholder="新密码" maxlength="18" />
		</view>
		<view class="row-input">
			<image mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103058-6dbd6c45894910e.png"></image>
			<input placeholder="再次新密码" maxlength="18" />
		</view>
		<view class="login-btn">
			立即修改
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		onLoad() {
		},
		methods: {
		}
	}
</script>
<style lang="scss">
	.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;
	}
</style>

1.1.3 样式三

1-1-3 效果图

1-1-3 完整代码

<template>
	<view class="content">
		<view class="logo">
			LOGO
		</view>
		<view class="form-box">
			<view class="tab-menu">
				<view class="tab-name" @click="tabChange(0)">
					<text :class="tabIndex==0?'tab-txt':''">登录</text>
					<text v-show="tabIndex==0" class="tab-active"></text>
				</view>
				<view class="tab-name" @click="tabChange(1)">
					<text :class="tabIndex==1?'tab-txt':''">注册</text>
					<text v-show="tabIndex==1" class="tab-active"></text>
				</view>
			</view>
			<view v-show="tabIndex==0">
				<view class="row-input">
					<image mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103077-6dbd6c45894910e.png"></image>
					<input placeholder="输入账号/手机号" maxlength="11" />
				</view>
				<view class="row-input">
					<image mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103083-6dbd6c45894910e.png"></image>
					<input placeholder="输入密码" maxlength="18" />
				</view>
				<view class="menu-link">
					<text>忘记密码?</text>
				</view>
				<view class="login-btn">
					登录
				</view>
			</view>
			<view v-show="tabIndex==1">
				<view class="row-input-code">
					<view class="input-box">
						<image class="img" mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103077-6dbd6c45894910e.png"></image>
						<input placeholder="输入手机号" maxlength="11" type="number" />
					</view>
					<view class="code-box" @click="getCode">
						获取验证码
					</view>
				</view>
				<view class="row-input">
					<image mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103089-6dbd6c45894910e.png"></image>
					<input placeholder="输入验证码" maxlength="6" type="number" />
				</view>
				<view class="row-input">
					<image mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103083-6dbd6c45894910e.png"></image>
					<input placeholder="输入6位密码" maxlength="6" />
				</view>
				<view class="login-btn register">
					注册
				</view>
				<view class="agree-txt">注册即表示您同意<text>《xx用户协议》</text></view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabIndex: 0 //登录注册下标
			}
		},
		methods: {
			// tab切换
			tabChange(id) {
				this.tabIndex = id
			},
			// 获取验证码
			getCode() {
				uni.showToast({
					title: "获取验证码"
				})
			}
		}
	}
</script>
<style lang="scss">
	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;
			}
		}
	}
</style>

1.1.4 样式四

1-1-4 效果图

1-1-4 完整代码

1-1-4 登陆模块

<template>
	<view class="content">
		<view class="head">
			<view class="logo">
				logo
			</view>
			<text class="tip">欢迎登录xxxx系统</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;
		}
	}
</style>

1-1-4 注册模块

<template>
	<view class="content">
		<view class="row-input">
			<text>电话号码</text>
			<view class="input-box">
				<input placeholder="请输入您的电话号码" maxlength="11" />
			</view>
		</view>
		<view class="row-input2">
			<text>验证码</text>
			<view class="input-box2">
				<input class="input2" placeholder="请输入您的验证码" maxlength="6" />
				<view class="code">
					<text>获取验证码</text>
				</view>
			</view>
		</view>
		<view class="row-input">
			<text>登录密码</text>
			<view class="input-box">
				<input placeholder="请输入您的登录密码" maxlength="18" />
			</view>
		</view>
		<view class="row-input">
			<text>确认密码</text>
			<view class="input-box">
				<input placeholder="再次输入登录密码" maxlength="18" />
			</view>
		</view>
		<view class="row-input">
			<text>邀请码</text>
			<view class="input-box">
				<input placeholder="请输入您的邀请码" maxlength="10" />
			</view>
		</view>
		<view class="register-btn">
			注册
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
	}
</script>
<style lang="scss">
	.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;
		}
	}
</style>

1.1.5 样式五

1-1-5 效果图

1-1-5 完整代码

1-1-5 登陆模块

<template>
	<view class="content">
		<view class="head">
			<image class="bg-set" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103095-6dbd6c45894910e.png"></image>
		</view>
		<view class="form-box">
			<text class="tip">登录</text>
			<view class="row-input">
				<view class="row-img">
					<image mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103102-6dbd6c45894910e.png"></image>
				</view>
				<input placeholder="your email@xxxx.com" maxlength="18" />
				<text class="row-lable" style="background-color: #FFFFFF;">邮箱</text>
			</view>
			<view class="row-input">
				<view class="row-img">
					<image mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103108-6dbd6c45894910e.png"></image>
				</view>
				<input placeholder="密码" maxlength="18" password />
				<text class="row-lable" style="background-color: #FFFFFF;">密码</text>
			</view>
			<view class="login-btn">登录</view>
			<text class="menu-link">忘记密码?</text>
			<view class="register-tip">
				还没有账号？<text @click="gotoRegister">立即注册</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		methods: {
			// 去注册
			gotoRegister() {
				uni.navigateTo({
					url: '/pages/login5/register'
				})
			}
		}
	}
</script>
<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		.head {
			width: 100%;
			height: 40vh;
			.bg-set {
				width: 100%;
				height: 100%;
			}
		}
		.form-box {
			display: flex;
			align-items: center;
			flex-direction: column;
			position: fixed;
			top: 35vh;
			left: 0;
			right: 0;
			bottom: 0;
			.tip {
				padding-bottom: 20rpx;
				font-size: 60rpx;
				letter-spacing: 20rpx;
			}
			.row-input {
				margin: 25rpx 0;
				position: relative;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 600rpx;
				height: 100rpx;
				border: 4rpx solid #e2e2e2;
				border-radius: 70rpx;
				.row-img {
					margin-right: 30rpx;
					padding-left: 10rpx;
					width: 100rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-right: 4rpx solid #e2e2e2;
					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
				.row-lable {
					position: absolute;
					width: 100rpx;
					display: block;
					left: 100rpx;
					top: -20rpx;
					font-size: 26rpx;
					text-align: center;
					color: #c5c7d1;
				}
				input {
					color: #c3c3c3;
				}
			}
			.check-box {
				width: 100%;
				padding-left: 180rpx;
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;
				color: #dfdaef;
				font-size: 26rpx;
				letter-spacing: 5rpx;
			}
			.login-btn {
				margin-top: 30rpx;
				width: 600rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;
				border-radius: 50rpx;
				font-size: 40rpx;
				background: linear-gradient(#501da2, #6b47d6);
				letter-spacing: 20rpx;
				color: #FFFFFF;
			}
			.menu-link {
				line-height: 80rpx;
				letter-spacing: 3rpx;
				color: #5621af;
				font-size: 26rpx;
			}
			.register-tip {
				position: fixed;
				color: #adadad;
				bottom: 30rpx;
				font-size: 28rpx;
				text {
					color: #5621af;
				}
			}
		}
	}
</style>

1.1.6 样式六

1-1-6 效果图

1-1-6 完整代码

<template>
	<view class="content">
		<view class="head">
			<image mode="aspectFit" src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103114-6dbd6c45894910e.png"></image>
		</view>
		<view class="form-box">
			<view class="row-input">
				<input placeholder="手机号" maxlength="11" type="number" />
			</view>
			<view class="row-input">
				<input placeholder="密码" password maxlength="18" />
			</view>
			<view class="login-btn">登录</view>
			<view class="menu-link">
				<text>忘记密码</text>
				<text @click="goToRegister">注册账号</text>
			</view>
			<view class="line">第三方账号登录</view>
			<view class="quick-login">
				<image src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103121-6dbd6c45894910e.png"></image>
				<image src="https://www.yuucn.com/wp-content/uploads/2023/04/1682103127-6dbd6c45894910e.png"></image>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		methods: {
			// 去注册
			goToRegister() {
				uni.navigateTo({
					url: '/pages/login6/register'
				})
			}
		}
	}
</script>
<style lang="scss">
	.head {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 32vh;
		image {
			width: 360rpx;
			height: 360rpx;
		}
	}
	.form-box {
		padding: 0rpx 80rpx;
		.row-input {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 120rpx;
			border-bottom: 1rpx solid #ececec;
		}
		.login-btn {
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			height: 100rpx;
			background-color: #393a3e;
			letter-spacing: 10rpx;
			color: #f1f1f3;
		}
		.menu-link {
			line-height: 100rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #676769;
		}
		.line {
			width: 100%;
			margin: 50rpx 0rpx;
			align-self: center;
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		.line:before {
			content: "";
			margin-right: 20rpx;
			border-top: 1px solid #dddddd;
			flex: 1 1 0rpx;
		}
		.line::after {
			content: "";
			margin-left: 20rpx;
			border-top: 1px solid #dddddd;
			flex: 1 1 0rpx;
		}
		.quick-login {
			padding: 0 120rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 100%;
				background-color: #000000;
			}
		}
	}
</style>

二、纯登陆功能

2.1 卡通类型

2.1.1 样式一

2-1-1 效果图

2-1-1 完整代码

<template>
	<view class="content">
		<view class="logo">
			<image src="?sign=5d11ed914e4c29acd6ef9ddd7671a5c7&t=1615006414"
			 mode="widthFix"></image>
		</view>
		<view class="login-form">
			<view class="item">
				<view class="icon left">
					<image src="?sign=f21501c858525ade84a4a93a8edcabc1&t=1597715417"
					 mode="widthFix"></image>
				</view>
				<input type="text" v-model="account" placeholder="请输入账号" maxlength="20" placeholder-class="input-placeholder" />
			</view>
			<view class="item">
				<view class="icon left">
					<image src="?sign=75c81d1e4948d454b7bdac0a49e387f5&t=1597715443"
					 mode="widthFix"></image>
				</view>
				<input type="text" v-model="password" placeholder="请输入密码" maxlength="20" placeholder-class="input-placeholder"
				 :password="passwordShow" />
				<view class="icon right">
					<image v-if="passwordShow" src="?sign=6ca6b422427dfa98097ff9009e0121d3&t=1597715458"
					 mode="widthFix" @click="passwordStatus"></image>
					<image v-else src="?sign=57e79fa5ecc90b1a2dab421361361b9f&t=1597715470"
					 mode="widthFix" @click="passwordStatus"></image>
				</view>
			</view>
			<view class="btn" @click="loginClick">
				<text>登录</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				account: '',
				password: '',
				passwordShow: true,
			}
		},
		onLoad() {},
		methods: {
			//登录点击
			loginClick() {
				console.log("登录点击")
			},
			//密码状态 隐藏/显示
			passwordStatus() {
				this.isPassword = !this.isPassword
				this.passwordShow = !this.passwordShow
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #3e71dd;
	}
	.content {
		position: absolute;
		width: 100%;
	}
	.logo {
		text-align: center;
		margin: 150rpx auto 150rpx auto;
		image {
			width: 500rpx;
			height: 250rpx;
		}
	}
	.login-form {
		width: 550rpx;
		margin: auto;
		.item {
			width: 550rpx;
			height: 80rpx;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			background-color: #4781e2;
		}
		input {
			color: #fff;
			width: 350rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
		}
		text {
			height: 30rpx;
			font-family: PingFang-SC-Regular;
			font-size: 30rpx;
			font-weight: bold;
			font-stretch: normal;
			line-height: 40rpx;
			letter-spacing: 3rpx;
			color: #ffffff;
		}
		.icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
		.btn {
			margin: 43rpx auto 22rpx auto;
			text-align: center;
			height: 80rpx;
			line-height: 84rpx;
			border-radius: 6rpx;
			background-color: #6ea0f8;
		}
	}
	.input-placeholder {
		color: #fff;
		line-height: 80rpx;
		height: 80rpx;
		font-size: 28rpx;
		margin: auto;
	}
</style>

2.1.2 样式二

2-1-2 效果图

2-1-2 完整代码

<template>
	<view>
		<view class="login-img">
			<view class="owl-login" :class="hideEyes?'password':''">
				<view class="hand"></view>
				<view class="hand hand-r"></view>
				<view class="arms">
					<view class="arm"></view>
					<view class="arm arm-r"></view>
				</view>
			</view>
		</view>
		<view class="login-form">
			<form @submit="formSubmit">
				<view class="form-input">
					<input type="text" value="" placeholder="用户名" />
				</view>
				<view class="form-input">
					<input type="password" value="" placeholder="密码" @focus="passwordF_B" @blur="passwordF_B" />
				</view>
				<button type="primary" form-type="submit">登录</button>
			</form>
		</view>
		<view class="comm-content">
			<soure :url="url" />
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				hideEyes: false,
				url: 'https://ext.dcloud.net.cn/plugin?id=1160'
			}
		},
		methods: {
			passwordF_B() {
				this.hideEyes = !this.hideEyes;
			},
			formSubmit(e) {
				console.log(e.detail.value);
			},
			copy() {
				uni.setClipboardData({
					data: this.source
				});
			}
		}
	}
</script>
<style>
	.login-form {
		margin: -9px 10px 0 10px;
		height: 200px;
		background: #007AFF;
		border-radius: 10px;
		background-color: #EEEEEE;
		box-shadow: 0 2px 10px #9B9B9B;
		padding: 20px;
	}
	.form-input input {
		background: #ffffff;
		border-radius: 5px;
		height: 40px;
		margin: 20px 0;
		padding: 0 10px;
	}
	.login-img {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 108px;
		margin-top: 150rpx;
	}
	.owl-login {
		width: 211px;
		height: 108px;
		background-image: url('data:image/png;base64,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');
		background-repeat: no-repeat;
		background-size: 100%;
		position: absolute;
	}
	.owl-login .hand {
		width: 34px;
		height: 34px;
		-webkit-border-radius: 40px;
		border-radius: 40px;
		background-color: #472d20;
		transform: scaleY(0.6);
		transition: 0.3s ease-out;
		position: absolute;
		left: 14px;
		bottom: -8px;
	}
	.owl-login .hand.hand-r {
		left: 170px;
	}
	.owl-login .arms {
		top: 58px;
		position: absolute;
		width: 100%;
		height: 41px;
		overflow: hidden;
	}
	.owl-login .arms .arm {
		width: 40px;
		height: 65px;
		position: absolute;
		left: 20px;
		top: 40px;
		background-image: url("data:image/png;base64,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");
		background-size: 100%;
		transition: 0.3s ease-out;
		transform: rotate(-20deg);
	}
	.owl-login .arms .arm.arm-r {
		transform: rotate(20deg) scaleX(-1);
		left: 158px;
	}
	.owl-login.password .hand {
		transform: translateX(42px) translateY(-15px) scale(0.7);
	}
	.owl-login.password .hand.hand-r {
		transform: translateX(-42px) translateY(-15px) scale(0.7);
	}
	.owl-login.password .arms .arm {
		transform: translateY(-40px) translateX(40px);
	}
	.owl-login.password .arms .arm.arm-r {
		transform: translateY(-40px) translateX(-40px) scaleX(-1);
	}
</style>

2.1.3 样式三

2-1-3 效果图

2-1-3 完整代码

<template>
	<view class="login">
		<view class="content">
			<view class="logo">
				<image src="?sign=5d11ed914e4c29acd6ef9ddd7671a5c7&t=1615006414"
				 mode="widthFix"></image>
			</view>
			<view class="login-form">
				<view class="item">
					<view class="icon left">
						<image src="?sign=f21501c858525ade84a4a93a8edcabc1&t=1597715417"
						 mode="widthFix"></image>
					</view>
					<input type="text" v-model="account" placeholder="请输入账号" maxlength="20" placeholder-class="input-placeholder" />
				</view>
				<view class="item">
					<view class="icon left">
						<image src="?sign=75c81d1e4948d454b7bdac0a49e387f5&t=1597715443"
						 mode="widthFix"></image>
					</view>
					<input type="text" v-model="password" placeholder="请输入密码" maxlength="20" placeholder-class="input-placeholder"
					 :password="passwordShow" />
					<view class="icon right">
						<image v-if="passwordShow" src="?sign=6ca6b422427dfa98097ff9009e0121d3&t=1597715458"
						 mode="widthFix" @click="passwordStatus"></image>
						<image v-else src="?sign=57e79fa5ecc90b1a2dab421361361b9f&t=1597715470"
						 mode="widthFix" @click="passwordStatus"></image>
					</view>
				</view>
				<view class="btn" @click="loginClick">
					<text>登 录</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				account: '',
				password: '',
				passwordShow: true,
			}
		},
		onLoad() {
		},
		methods: {
			//登录点击
			loginClick() {
				console.log("登录点击")
			},
			//密码状态 隐藏/显示
			passwordStatus() {
				this.isPassword = !this.isPassword
				this.passwordShow = !this.passwordShow
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #8da4cd;
	}
	.content {
		position: absolute;
		top: 0;
		width: 100%;
	}
	.logo {
		text-align: center;
		margin: 150rpx auto 150rpx auto;
		image {
			width: 500rpx;
			height: 250rpx;
		}
	}
	.login-form {
		width: 550rpx;
		margin: auto;
		.item {
			width: 550rpx;
			height: 80rpx;
			border-radius: 50rpx;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			background-color: #849bc4;
			border: 1rpx solid #efefef;
		}
		input {
			color: #fff;
			width: 350rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
		}
		text {
			height: 30rpx;
			font-family: PingFang-SC-Regular;
			font-size: 30rpx;
			font-weight: bold;
			font-stretch: normal;
			line-height: 40rpx;
			letter-spacing: 3rpx;
			color: #ffffff;
		}
		.icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
		.btn {
			margin: 43rpx auto 22rpx auto;
			text-align: center;
			height: 80rpx;
			line-height: 84rpx;
			border-radius: 50rpx;
			background-color: #667eac;
			color: #FFFFFF;
		}
	}
	.input-placeholder {
		color: #fff;
		line-height: 80rpx;
		height: 80rpx;
		font-size: 28rpx;
		margin: auto;
	}
</style>

2.1.4 样式四

2-1-4 效果图

2-1-4 完整代码

<template>
	<view class="content">
		<view class="loader"></view>
		<view class="logoimg">
			<image class="logo" src="/static/other/3.png"></image>
		</view>
		<input type="text" placeholder="账号" class="inputAcc" value="" />
		<input type="password" placeholder="密码" class="input" value="" />
		<button class="loginBtn">Go</button>
		<view style="position: absolute;bottom: -50rpx;">
			<soure :url="url"></soure>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				url: 'https://ext.dcloud.net.cn/plugin?id=2508'
			}
		},
		onLoad() {},
		methods: {}
	}
</script>
<style>
	page {
		background-color: #000000;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.input {
		margin: 20% 0rem;
		position: absolute;
		top: 600rpx;
		height: 70upx;
		width: 50%;
		color: #FFFFFF;
		text-align: center;
		border-bottom: 1px #007AFF solid;
		border-radius: 10upx;
	}
	.inputAcc {
		margin: 20% 0rem;
		position: absolute;
		top: 470rpx;
		height: 70upx;
		width: 50%;
		color: #FFFFFF;
		text-align: center;
		border-bottom: 1px #007AFF solid;
		border-radius: 10upx;
	}
	.loginBtn {
		background: linear-gradient(to right, #4bb0ff, #6149f6);
		border-radius: 200rpx;
		width: 200rpx;
		position: absolute;
		color: white;
		bottom: 150rpx;
	}
	.logoimg {
		position: absolute;
		top: 155rpx;
		z-index: 10;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		border-radius: 100rpx;
	}
	.loader {
		z-index: 1;
		position: absolute;
		top: 130rpx;
		width: 250rpx;
		height: 250rpx;
		border-radius: 50%;
		background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
		animation: animate 1.2s linear infinite;
	}
	@keyframes animate {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	.loader:after {
		content: '';
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
		background: #f1f1f1;
		border: solid white 10px;
		border-radius: 50%;
	}
</style>