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

引言

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

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

一、带注册功能

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>

2.1.5 样式五

2-1-5 效果图

2-1-5 完整代码

2.1.6 样式六

2-1-6 效果图

2-1-6 完整代码

2.2 通用类型

2.2.1 样式一

2-2-1 效果图

2-2-1 完整代码

<template>
	<view class="t-login">
		<view class="t-b">{{title}}</view>
		<form class="cl">
			<view class="t-a">
				<image src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%9510/%E8%B4%A6%E5%8F%B7.png"></image>
				<input name="phone" placeholder="请输入手机号" />
			</view>
			<view class="t-a">
				<image src=""></image>
				<input name="code" placeholder="请输入验证码" />
				<view class="t-c">发送短信</view>
			</view>
			<view class="t-d">未注册的手机号验证后将自动注册</view>
			<button form-type="submit">立即登录</button>
		</form>
		<view class="t-f">登录即同意<text>用户协议</text></view>
		<view class="t-e cl">
		    <view class="t-g">
				<image src="/static/other/wx.png"></image>
				<view>微信</view>
		    </view>
		    <view class="t-g">
		        <image src="/static/other/wb.png"></image>
		        <view>微博</view>
		    </view>
		</view>
		<soure :url="url"></soure>
	</view>
</template>
<script>
export default {
	data() {
		return {
			title: '欢迎回来',
			url:'https://ext.dcloud.net.cn/plugin?id=3335'
		}
	},
	onLoad() {
	},
	methods: {
	}
}
</script>
<style>
.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	color: #000
}
.t-login button {
	font-size: 28rpx;
	background: #000;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx
}
.t-login input {
	padding: 0 20rpx 0 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	background: #f4f4f4;
	font-size: 28rpx;
	border-radius: 50rpx
}
.t-login .t-a {
	position: relative
}
.t-login .t-a image {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: 40rpx;
	top: 28rpx;
	border-right: 2rpx solid #dedede;
	padding-right: 20rpx
}
.t-login .t-b {
	text-align: center;
	font-size: 46rpx;
	color: #000;
	padding: 150rpx 0
}
.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #000;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx
}
.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0
}
.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0
}
.t-login .t-g {
	float: left;
	width: 50%
}
.t-login .t-e image {
	width: 50rpx;
	height: 50rpx
}
.t-login .t-f {
	text-align: center;
	margin: 80rpx 0 0 0;
	color: #666
}
.t-login .t-f text {
	margin-left: 8rpx;
	color: #999
}
.t-login .uni-input-placeholder {
	color: #000
}
.cl {
	zoom: 1
}
.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20'
}
</style>

2.2.2 样式二

2-2-2 效果图

2-2-2 完整代码

<template>
	　　<view class="box">
		<view class="loginBox">
			<view class="popup">
				<view class="loginMode">
					<view class="account" @click="isAccount" :class="!isshowAccount ? 'isAccMax': 'isAccMin'">账号登录
					</view>　
					　<view class="verification" @click="isVerification"
						:class="!isshowVerification ? 'isAccMax': 'isAccMin'">验证码登录</view>
				</view>
				<view v-show="isshowAccount" class="isshowBox">　
					<view class="inputBox">
						<text>账号</text>
						<input placeholder="请输入账号" placeholder-class="placeholder" maxlength="20" />
					</view>
					<view class="inputBox">
						<text>密码</text>
						<input placeholder="请输入密码" placeholder-class="placeholder" maxlength="20" />
					</view>
					<view class="agreement">
						<checkbox checked="true" color="#2979ff" style="transform:scale(0.6)" />
						<text>登录即同意用户协议</text>
					</view>
					<view @click="viewProtocol" class="denglu">登录</view>
				</view>
				<view v-show="isshowVerification" class="isshowBox">
					<view class="inputBox">
						<text>手机号</text>
						<input placeholder="请输入账号" placeholder-class="placeholder" maxlength="11" />
					</view>
					<view class="inputBox">
						<text>验证码</text>
						<input placeholder="请输入密码" placeholder-class="placeholder" maxlength="6" />
						<view class="countDownBox" @click="codeChange">
							<text style="width: 100%;text-align: center;">{{countDown?second+'秒':codeText}}</text>
						</view>
					</view>
					<view class="agreement">
						<checkbox checked="true" color="#2979ff" style="transform:scale(0.6)" />
						<text>登录即同意用户协议</text>
					</view>
					<view @click="viewProtocol" class="denglu">登录</view>
				</view>　
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				interval: null,
				mobile: '', // 手机号
				code: '', // 密码
				second: 60,
				countDown: false,
				codeText: '获取验证码', // 模拟获取验证码
				isshowAccount: true, // 默认显示账号密码登录
				isshowVerification: false, // 隐藏验证码登录
			}
		},
		onUnload() {
			clearInterval(this.interval);
		},
		methods: {
			// 点击验证码
			isVerification() {
				this.isshowAccount = false // 隐藏账号登录
				this.isshowVerification = true // 显示验证码登录
			},
			// 点击账号
			isAccount() {
				this.isshowVerification = false // 隐藏验证码登录
				this.isshowAccount = true // 显示账号登录
			},
			// 模拟获取验证码
			codeChange() {
				if (!this.countDown) {
					this.countDown = true
					var interval = setInterval(() => {
						if (this.second == 0) {
							this.countDown = false
							this.codeText = '重新获取'
							this.second = 60
							clearInterval(this.interval);
						}
						--this.second;
					}, 1000)
					this.interval = interval
				}
			}
		}
	}
</script>
<style lang="scss">
	.box {
		width: 100%;
		height: 100%;
		position: relative;
		.loginBox {
			width: 100%;
			height: 100%;
			background-color: #409EFF;
			position: fixed;
			top: 0px;
			left: 0px;
			.popup {
				width: 280px;
				height: 320px;
				background-color: #FFFFFF;
				position: absolute;
				top: 50%;
				left: 50%;
				padding: 0 25px;
				transform: translate(-50%, -50%);
				border-radius: 10px;
				.inputBox {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					height: 55px;
					font-size: 26rpx;
					text {
						width: 100rpx;
						flex-shrink: 0;
					}
					input {
						flex: 1;
						width: 100%;
						border-bottom: 1rpx solid #d6d6d6;
					}
					.placeholder {
						font-size: 24rpx;
						color: #c5c5c5;
					}
					.countDownBox {
						width: 150rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						background-color: #e9f1f9;
						color: #2979FF;
						padding: 10rpx;
						border-radius: 20rpx;
					}
				}
				.agreement {
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 22rpx;
					color: #0f6bff;
					font-weight: bold;
					text-decoration: underline;
				}
				.loginMode {
					width: 300px;
					height: 31px;
					margin-top: 36px;
					margin-bottom: 20px;
					// 控制切换登录时的样式
					.isAccMax {
						font-size: 15px;
						margin-top: 6px;
						color: #D3D3D3;
					}
					.isAccMin {
						font-size: 18px;
						font-weight: 600;
						margin-top: 3px;
					}
					.account,
					.verification {
						width: 140px;
						height: 33px;
						display: inline-block;
						text-align: center;
					}
				}
				.denglu {
					border-radius: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FFFFFF;
					width: 100%;
					height: 100rpx;
					background-color: #409eff;
				}
			}
		}
	}
</style>

2.2.3 样式三

2-2-3 效果图

2-2-3 完整代码

<template>
	<view class="content">
		<view class="bg"></view>
		<view class="bg2"></view>
		<view class="tips">
			<text class="title">登录</text>
			<text class="subtitle">欢迎再次回来~</text>
		</view>
		<view class="form-box">
			<view class="input-box">
				<image class="left"
					src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%959/%E8%B4%A6%E5%8F%B7.png">
				</image>
				<input placeholder="请输入账号" />
				<image class="right"
					src="">
				</image>
			</view>
			<view class="input-box">
				<image class="left"
					src="">
				</image>
				<input placeholder="请输入密码" />
				<image class="right"
					src="">
				</image>
			</view>
			<view class="btn">登录</view>
			<view class="other">
				<text>找回密码</text>
				<text style="color:#00c6fc;">快速注册</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		}
	}
</script>
<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #ffffff;
		.tips {
			padding-top: 200rpx;
			padding-left: 80rpx;
			display: flex;
			flex-direction: column;
			.title {
				line-height: 70rpx;
				font-weight: bold;
				font-size: 50rpx;
			}
			.subtitle {
				line-height: 70rpx;
				font-size: 35rpx;
				font-weight: bold;
				color: #b0b0b1;
			}
		}
		.bg {
			position: fixed;
			top: -250rpx;
			right: -250rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: #00baef;
			z-index: 2
		}
		.bg2 {
			position: fixed;
			top: -150rpx;
			right: -300rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: #ade8f9;
			z-index: 1;
		}
		.form-box {
			padding-top: 180rpx;
			padding-left: 70rpx;
			width: 610rpx;
			.input-box {
				margin: 40rpx 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 100rpx;
				background-color: #f5f5f5;
				border-radius: 100rpx;
				width: 100%;
				input {
					flex: 1;
					height: 100%;
					font-size: 30rpx;
				}
				.left {
					padding: 0 30rpx;
					width: 35rpx;
					height: 35rpx;
				}
				.right {
					padding: 0 30rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100rpx;
				border-radius: 100rpx;
				color: #FFFFFF;
				background: linear-gradient(to right, #00c6fc, #9adcf1);
			}
			.other {
				display: flex;
				justify-content: space-between;
				text {
					line-height: 80rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>

2.2.4 样式四

2-2-4 效果图

2-2-4 完整代码

<template>
	<view class="content">
		<view class="logo-box">
			<view class="logo"></view>
			<view class="name">LOGO</view>
		</view>
		<view class="info-box">
			<view class="item">
				<image
					src="">
				</image>
				<input placeholder="手机号" maxlength="11" placeholder-class="placeholder-input" />
			</view>
			<view class="item">
				<image
					src="">
				</image>
				<input :password="true" maxlength="20" placeholder="密码" placeholder-class="placeholder-input" />
			</view>
			<view class="forget-pass">忘记密码?</view>
			<view class="btn-box">
				<view class="login-btn">登 录</view>
				<view class="register-btn">注册</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		methods: {
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #54455a;
	}
	.logo-box {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		margin: 100rpx 0;
	}
	.logo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
		background-color: #fed009;
		border: 5rpx solid #FFFFFF;
	}
	.name {
		padding-top: 30rpx;
		font-weight: bold;
		font-size: 100rpx;
		-webkit-text-fill-color: #fed009;
		-webkit-text-stroke: 3rpx #FFFFFF;
	}
	.info-box {
		margin: 100rpx;
		.item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin: 30rpx 0;
			width: 100%;
			border: 1rpx solid #fed009;
			border-radius: 50rpx;
			background-color: #68546f;
			height: 90rpx;
			.placeholder-input {
				font-size: 28rpx;
				color: #fed009;
			}
			image {
				margin: 0 20rpx;
				width: 50rpx;
				height: 50rpx;
			}
			input {
				flex: 1;
				font-size: 28rpx;
				color: #fed009;
			}
		}
		.forget-pass {
			padding-right: 30rpx;
			display: flex;
			justify-content: flex-end;
			color: #fed009;
			font-size: 26rpx;
		}
		.btn-box {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.login-btn {
				width: 350rpx;
				height: 80rpx;
				background-color: #fed009;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				font-size: 40rpx;
				color: #54455a;
				margin: 50rpx 0;
			}
			.register-btn {
				width: 150rpx;
				height: 60rpx;
				background-color: #68546f;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #af97b9;
				border-radius: 50rpx;
				font-size: 30rpx;
			}
		}
	}
</style>

2.2.5 样式五

2-2-5 效果图

2-2-5 完整代码

<template>
	<view class="content">
		<view class="tab-box">
			<view class="title" :class="tabsIndex==0?'tabs-selected':'tabs-no-selected'" @click="tabsClick(0)">手机登录
			</view>
			<view class="title" :class="tabsIndex==1?'tabs-selected':'tabs-no-selected'" @click="tabsClick(1)">账号登录
			</view>
		</view>
		<view class="name">手机号</view>
		<view class="input-box">
			<input placeholder="请输入手机号" maxlength="11" placeholder-class="placeholder-input" />
		</view>
		<view class="input-box">
			<input :placeholder="tabsIndex==0?'请输入验证码':'请输入密码'" :password="tabsIndex==0?false:true" maxlength="20" placeholder-class="placeholder-input" />
			<view v-if="tabsIndex==0" class="code">获取验证码</view>
		</view>
		<view class="login-btn">登录</view>
		<view class="agreement">注册即同意
			<text class="link">用户协议</text>和<text class="link">隐私政策</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabsIndex: 0
			}
		},
		methods: {
			tabsClick(index) {
				this.tabsIndex = index
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.content {
		padding: 200rpx 60rpx;
		.tab-box {
			display: flex;
			align-items: flex-end;
			.title {
				margin-right: 50rpx;
				height: 55rpx;
			}
			.tabs-no-selected {
				font-size: 32rpx;
			}
			.tabs-selected {
				font-size: 40rpx;
				font-weight: bold;
				border-bottom: 6rpx solid #fe8d85;
			}
		}
		.name {
			padding-top: 100rpx;
			font-size: 26rpx;
		}
		.input-box {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			border-bottom: 1rpx solid #dfdfdf;
			.placeholder-input {
				font-size: 26rpx;
				color: #c5c5c5;
			}
			input {
				height: 120rpx;
			}
			.code {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fe8d85;
				font-size: 26rpx;
			}
		}
		.login-btn {
			margin-top: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 80rpx;
			background-color: #fe8d85;
			color: #FFFFFF;
			border-radius: 50rpx;
		}
		.agreement {
			display: flex;
			justify-content: center;
			line-height: 100rpx;
			font-size: 24rpx;
			.link {
				color: #007AFF;
				text-decoration: underline;
			}
		}
	}
</style>

2.2.6 样式六

2-2-6 效果图

2-2-6 完整代码

<template>
	<view class="content">
		<view class="login-tip">
			<view class="title">Sign In</view>
			<view class="sub-title">Welcome Back</view>
		</view>
		<view class="form-box">
			<input placeholder-class="input-placeholder" placeholder="Email" />
			<input placeholder-class="input-placeholder" placeholder="Password" />
			<view class="radio-box">
				<radio checked="true" color="#4a6ef5" style="transform: scale(0.8)"></radio>
				<text>Keep me Logged in</text>
			</view>
			<view class="btn-box">
				Login
			</view>
			<text class="forget-password">Forgot Password</text>
		</view>
		<text class="sign-up">Sign Up</text>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
		}
	}
</script>
<style lang="scss">
	.content {
		padding: 180rpx 80rpx 100rpx 80rpx;
		.title {
			font-size: 60rpx;
			line-height: 100rpx;
		}
		.sub-title {
			line-height: 80rpx;
			font-size: 24rpx;
			color: #a1a1a2;
		}
		.form-box {
			margin-top: 40rpx;
			flex-direction: column;
			input {
				padding: 0 20rpx;
				margin: 30rpx 0;
				background-color: #f2f3f5;
				border-radius: 40rpx;
				height: 100rpx;
				font-size: 26rpx;
			}
			.radio-box {
				display: flex;
				height: 50rpx;
				font-size: 26rpx;
				text {
					height: 100%;
					padding-top: 10rpx;
					padding-left: 10rpx;
				}
			}
			.btn-box {
				margin-top: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;
				background-color: #496df4;
				border-radius: 40rpx;
				color: #FFFFFF;
				font-size: 30rpx;
				box-shadow: 0rpx 20rpx 40rpx #859df4;
			}
			.forget-password {
				line-height: 120rpx;
				font-size: 28rpx;
				display: block;
				text-align: center;
			}
			.input-placeholder {
				color: #bcbcbc;
			}
		}
	}
	.sign-up{
		position: fixed;
		left: 325rpx;
		width: 100rpx;
		bottom: 100rpx;
		font-size: 26rpx;
		bottom: 180rpx;
		color: #6e87e5;
	}
</style>

2.2.7 样式七

2-2-7 效果图

2-2-7 完整代码

<template>
	<view class="content">
		<view class="login-tip">
			<view class="title">用户登录</view>
		</view>
		<view class="form-box">
			<view class="account-name">登录账号</view>
			<input placeholder-class="placeholder-input" maxlength="11" placeholder="输入手机号" />
			<view class="row">
				<input class="half" placeholder-class="placeholder-input" maxlength="6" placeholder="短信验证码" />
				<view class="send-code">发送</view>
			</view>
			<view class="login-box">
				<text>登录</text>
				<text class="right-icon">→</text>
			</view>
			<view class="forget-password">忘记密码</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
		}
	}
</script>
<style lang="scss">
	.content {
		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 350rpx;
			font-size: 80rpx;
		}
		.form-box {
			padding: 0 80rpx;
			.account-name {
				line-height: 100rpx;
				font-size: 35rpx;
			}
			input {
				padding-left: 50rpx;
				border: 1rpx solid #cdcdcd;
				height: 120rpx;
			}
			.row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 120rpx;
				margin-top: 70rpx;
				.half {
					width: 280rpx;
				}
				.send-code {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 220rpx;
					height: 100%;
					background-color: #000000;
					color: #e5e5e5;
					box-shadow: 0 0 0 1rpx #a5a5a5, 0 0 0 5rpx #ffffff inset;
					font-size: 28rpx;
				}
			}
			.placeholder-input {
				font-size: 28rpx;
				color: #d5d5d5;
			}
			.login-box {
				position: relative;
				margin-top: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 120rpx;
				background-color: #000000;
				color: #e5e5e5;
				box-shadow: 0 0 0 1rpx #a5a5a5, 0 0 0 5rpx #ffffff inset;
				color: #FFFFFF;
				.right-icon {
					position: absolute;
					top: 40rpx;
					right: 50rpx;
					color: #e5e5e5;
				}
			}
			.forget-password{
				display: flex;
				justify-content: flex-end;
				font-size: 28rpx;
				line-height: 90rpx;
			}
		}
	}
</style>

2.2.8 样式八

2-2-8 效果图

2-2-8 完整代码

<template>
	<view class="content">
		<view class="logo-box">
			<view class="logo"></view>
			<view class="name">LOGO</view>
		</view>
		<view class="info-box">
			<view class="item">
				<image
					src="">
				</image>
				<input placeholder="请输入您的手机号" maxlength="11" placeholder-class="placeholder-input" />
			</view>
			<view class="item">
				<image
					src="">
				</image>
				<input :password="true" maxlength="20" placeholder="请输入密码" placeholder-class="placeholder-input" />
			</view>
			<view class="forget-pass">忘记密码?</view>
			<view class="btn-box">
				<view class="login-btn">登 录</view>
				<view class="register-btn">注册</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		methods: {
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #faca10;
	}
	.logo-box {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		margin: 100rpx 0;
	}
	.logo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
		background-color: #fff795;
		box-shadow: 0 0 0 1rpx #fff795, 0 0 0 5rpx #ffd61b inset;
	}
	.name {
		padding-top: 30rpx;
		font-weight: bold;
		font-size: 100rpx;
		color: #fff795;
	}
	.info-box {
		margin: 100rpx;
		.item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin: 30rpx 0;
			width: 100%;
			border-radius: 50rpx;
			background-color: #ffdf2a;
			height: 90rpx;
			.placeholder-input {
				font-size: 28rpx;
				color: #dab20e;
			}
			image {
				margin: 0 30rpx;
				width: 30rpx;
				height: 30rpx;
			}
			input {
				flex: 1;
				font-size: 28rpx;
				color: #dab20e;
			}
		}
		.forget-pass {
			padding-right: 30rpx;
			display: flex;
			justify-content: flex-end;
			font-size: 26rpx;
			letter-spacing: 5rpx;
		}
		.btn-box {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.login-btn {
				width: 350rpx;
				height: 80rpx;
				background-color: #fcda55;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				font-size: 40rpx;
				margin: 50rpx 0;
				box-shadow: 0rpx 10rpx 20rpx #cf9305;
			}
			.register-btn {
				height: 100rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>

2.2.9 样式九

2-2-9 效果图

2-2-9 完整代码

<template>
	<view>
		<view class="top-right-corner"></view>
		<view class="lower-left-corner"></view>
		<view class="form-box">
			<view class="logo">
				欢迎登录!
			</view>
			<view class="input-box">
				<view class="row-box">
					<text>电话</text>
					<input />
				</view>
				<view class="row-box">
					<text>密码</text>
					<input :password="true" />
				</view>
			</view>
			<view class="login-btn">
				登录
			</view>
			<view class="other-link">
				<text class="sign">忘记密码?</text>
				<text>还没有账号?<text class="sign">马上登录</text></text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		methods: {
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #ffffff;
	}
	.top-right-corner {
		position: fixed;
		top: -280rpx;
		right: -280rpx;
		width: 400rpx;
		height: 400rpx;
		background-color: #FFFFFF;
		border: 100rpx solid #ffdddf;
		border-radius: 100%;
		z-index: 1;
	}
	.lower-left-corner {
		position: fixed;
		bottom: -450rpx;
		left: -200rpx;
		width: 400rpx;
		height: 400rpx;
		background-color: #FFFFFF;
		border: 100rpx solid #c7e1fa;
		transform: rotate(-45deg);
		z-index: 1;
	}
	.form-box {
		margin: 100rpx 80rpx;
		.logo {
			display: flex;
			justify-content: center;
			align-items: flex-end;
			height: 300rpx;
			font-size: 50rpx;
			letter-spacing: 5rpx;
			font-weight: bold;
			z-index: 2;
		}
		.input-box {
			margin-top: 100rpx;
			.row-box {
				margin: 50rpx 0;
				padding: 0 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 110rpx;
				background-color: #f8f7fc;
				border-radius: 8rpx;
				text {
					line-height: 60rpx;
					font-size: 30rpx;
					color: #999ca1;
					font-weight: 600;
				}
			}
		}
		.login-btn {
			margin: 70rpx 0rpx 50rpx 0rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
			font-size: 30rpx;
			height: 110rpx;
			font-weight: bold;
			background-color: #f64068;
		}
		.other-link {
			height: 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			font-size: 28rpx;
			font-weight: bold;
			letter-spacing: 3rpx;
			.sign{
				color: #f987a1;
			}
		}
	}
</style>