25、uni-app之一个稍微精致的登录页

已于 2022-09-23 15:43:42 修改
阅读量1.4k 收藏 7
点赞数
分类专栏： Uni-APP 文章标签： uni-app css 前端
于 2022-09-23 15:42:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44035882/article/details/127012220
版权

登录页样图展示

在这里插入图片描述

下面是源码，可以直接使用
页面

<template>
	<view class="flex-col space-y-40 page-login">
		<view class="flex-col space-y-11 group">

			<!-- 上方的图片 -->
			<view class="flex-row items-start group_2">
				<view class="flex-col items-center group_3 vertical-center">
					<image class="image_4"
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63218d115a7e3f0310222b14/632190e429af760011dbce44/16639131782509345597.png" />
					<!-- 星星 -->
					<image class="image_3_star"
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63218d115a7e3f0310222b14/632190e429af760011dbce44/16639131783242150786.png" />
				</view>
				<!-- 钟表 -->
				<image class="image"
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63218d115a7e3f0310222b14/632190e429af760011dbce44/16639131783715056409.png" />
				<!-- 指南针 -->
				<image class="image_2_compass"
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63218d115a7e3f0310222b14/632190e429af760011dbce44/16639136409669141784.png" />
			</view>
		</view>

		<!-- 登录框 -->
		<view class="flex-col space-y-21 group">
			<text class="text">登录</text>
			<view class="flex-col space-y-6 group">
				<view class="flex-col group_4">
					<view class="flex-col items-center group_5">
						<view class="flex-col section_2">

							<!-- 账号 -->
							<view class="flex-row space-x-21 user_name">
								<image class="image_5"
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63218d115a7e3f0310222b14/632190e429af760011dbce44/c5c32f4c237cafa04133e351a4ed249c.png" />
								<input v-model="loginForm.username" class="input font_1 text_2" type="text"
									placeholder="请输入账号" maxlength="30" />
							</view>
							<image class="image_6"
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63218d115a7e3f0310222b14/632190e429af760011dbce44/16639131811609431650.png" />

							<!-- 密码 -->
							<view class="flex-row space-x-20 pass_word">
								<image class="image_5"
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63218d115a7e3f0310222b14/632190e429af760011dbce44/ddb44c99a3874bbba2267ea5a399af19.png" />
								<input v-model="loginForm.password" type="password" class="font_1 text_3 input"
									placeholder="请输入密码" maxlength="20" />
							</view>

							<!-- 验证码 -->
							<view class="input-item flex align-center" v-if="captchaEnabled">
								<view class="iconfont icon-code icon"></view>
								<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码"
									maxlength="4" />
								<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
							</view>
						</view>
					</view>

					<!-- 登录操作 -->
					<view class="operation flex-row">
						<view class="forget_password vertical-center flex-row"><text class="text_5">忘记密码?</text></view>
						<view class="flex-col vertical-center login_btn">
							<view class="text-wrapper flex-col vertical-center" @click="handleLogin"><text
									class="font_1 text_4">登录</text></view>
						</view>
					</view>

					<!-- 用户协议啥的 -->
					<view class="flex-row vertical-center equal-division">
						<view class="xieyi text-center">
							<text class="text-grey1">登录即代表同意</text>
							<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
							<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
						</view>
					</view>
					<image class="image_8"
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63218d115a7e3f0310222b14/632190e429af760011dbce44/16639136409314786883.png" />
				</view>
				<view class="flex-col items-end group_8">
					<image class="image_10"
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63218d115a7e3f0310222b14/632190e429af760011dbce44/16639134256336907768.png" />
				</view>
			</view>
		</view>
	</view>
</template>

CSS

<style lang="scss" scoped>
	.normal-login-container {
		width: 100%;


		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 15%;
			width: 80%;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}
			}
		}

		.easyinput {
			width: 100%;
		}
	}

	.login-code-img {
		height: 45px;
	}

	.space-y-40 {

		&>view:not(:first-child),
		&>text:not(:first-child),
		&>image:not(:first-child) {
			margin-top: 80rpx;
		}

		.space-y-11 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				// margin-top: 22rpx;
			}

			.group_2 {
				align-self: flex-end;
				overflow-x: hidden;
				width: 100%;

				.group_3 {
					margin-left: 120rpx;
					margin-top: 50rpx;
					padding-top: 288rpx;
					flex-shrink: 0;
					width: 366rpx;
					position: relative;

					.image_4 {
						opacity: 0.2;
						filter: blur(44rpx);
						width: 244rpx;
						height: 86rpx;
					}

					.image_3_star {
						width: 306rpx;
						height: 324rpx;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						position: absolute;
					}
				}

				.image {
					margin-left: -484rpx;
					flex-shrink: 0;
					width: 128rpx;
					height: 128rpx;
				}

				.image_2_compass {
					margin-left: 368rpx;
					margin-top: 8rpx;
					flex-shrink: 0;
					width: 206rpx;
					height: 206rpx;
				}
			}
		}

		.group {
			overflow-x: hidden;
		}

		.space-y-21 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				// margin-top: 22rpx;
			}

			.text {
				align-self: center;
				color: #191c32;
				font-size: 64rpx;
				font-family: HarmonyOSSansSC;
				line-height: 58rpx;
			}

			.space-y-6 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					// margin-top: 12rpx;
				}

				.group_4 {
					overflow-x: hidden;
					position: relative;

					.group_5 {
						padding-top: 30rpx;
						// overflow-x: hidden;
						// position: absolute;
						width: 100%;
						// background-color: #9a9dd8;
						// left: 0;
						// right: 50rpx;
						// top: 0;

						.section_2 {
							padding-left: 30rpx;
							padding-right: 28rpx;
							background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63218d115a7e3f0310222b14/632190e429af760011dbce44/16639131811371857730.png');
							background-position: 0% 0%;
							background-size: 100% 100%;
							background-repeat: no-repeat;
							// position: absolute;
							// right: 0;
							// top: 0;

							.space-x-21 {

								&>view:not(:first-child),
								&>text:not(:first-child),
								&>image:not(:first-child) {
									margin-left: 42rpx;
								}

								.text_2 {
									align-self: center;
									line-height: 30rpx;
									margin-left: 10rpx;
								}
							}

							.user_name {
								padding: 36rpx 12rpx 30rpx;
							}

							.image_6 {
								width: 592rpx;
								height: 2rpx;
							}

							.space-x-20 {

								&>view:not(:first-child),
								&>text:not(:first-child),
								&>image:not(:first-child) {
									margin-left: 40rpx;
								}

								.text_3 {
									align-self: center;
									margin-left: 10rpx;
								}
							}

							.pass_word {
								padding: 32rpx 12rpx 34rpx;
							}

							.image_5 {
								width: 64rpx;
								height: 64rpx;
							}
						}
					}

					.operation {
						width: 100%;
						height: 150rpx;

						.forget_password {
							height: 100%;
							flex: 1;

							.text_5 {
								color: #9a9dd8;
								font-size: 28rpx;
								font-family: HarmonyOSSansSC;
								line-height: 26rpx;
								transform: translateY(-50%);
							}
						}

						.login_btn {
							flex: 1;

							.text-wrapper {
								filter: drop-shadow(0px 40rpx 30rpx #191c321a);
								background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63218d115a7e3f0310222b14/632190e429af760011dbce44/16639131809468983522.png');
								background-size: 100% 100%;
								background-repeat: no-repeat;
								width: 290rpx;
								height: 100rpx;
								// position: absolute;

								.text_4 {
									color: #ffffff;
								}
							}
						}

					}

					.font_1 {
						font-size: 32rpx;
						font-family: HarmonyOSSansSC;
						line-height: 29rpx;
						color: #9395a4;
					}

					.equal-division {
						width: 100%;

						.xieyi {
							color: #333;
							margin-top: 20px;
						}

						.equal-division-item {
							padding: 30rpx 0;
							filter: drop-shadow(0px 40rpx 60rpx #373e7d0d);
							background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63218d115a7e3f0310222b14/632190e429af760011dbce44/16639131809481668240.png');
							background-position: 0% 0%;
							background-size: 100% 100%;
							background-repeat: no-repeat;
							width: 108rpx;
							height: 108rpx;

							.image_9 {
								width: 46rpx;
								height: 46rpx;
							}
						}
					}

					.image_8 {
						filter: blur(104rpx);
						width: 290rpx;
						height: 290rpx;
						position: absolute;
						right: -222rpx;
						bottom: 6rpx;
					}
				}

				.group_8 {
					position: relative;

					.image_10 {
						filter: blur(164rpx);
						width: 241rpx;
						height: 69rpx;
					}

				}
			}
		}
	}

	.page-login {
		background-color: #ffffff;
		overflow: hidden;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63218d115a7e3f0310222b14/632190e429af760011dbce44/357e271ab27e5165fbc1ba064740a328.png');
		background-position: 100% 0%;
		background-size: 117.5% 100%;
		background-repeat: no-repeat;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}
</style>
鲤鱼_599
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp--登录和注册页面-- login
weixin_54721820的博客
04-16 1029
直接使用即可，可以根据自己的需求修改样式！
基于uni-app框架的登录模板
02-21
基于uni-app框架的登录模板
用uniapp写一个好看的登录页面
最新发布
菜鸟教程
05-06 1106
到此这篇关于用uniapp写一个好看的登录页面的文章就介绍到这了,更多相关uniapp登录页面内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！茂名一技http://www.szsyby.net/茂名一技http://www.enechn.com/美文集http://www.tpyjn.cn/手游排行前十名http://www.bjkhrx.com/
uni-app 微信小程序之好看的ui登录页面（五）
@必意玲
12-07 6483
【代码】uni-app 微信小程序之好看的ui登录页面（五）
写一个uniapp的登录注册页面
weixin_68443051的博客
04-15 3039
【代码】写一个uniapp的登录注册页面。
uni-app登录页面实例
weixin_63643304的博客
08-18 1084
uni-app登录页面
uni-app登录实例的实现
10-29
使用HBuilderX开发登录实例。我的博客主页：https://blog.csdn.net/k571039838k?orderby=UpdateTime
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uni-app 的30分钟倒计时
06-20
uni-app 的30分钟倒计时
uniapp 简单的登录页面直接复制可用(已优化)
颜浩的博客
06-17 3216
简单的登录页面直接复制可用(已优化)
uni-app 一些实用的页面模板
UserGuan的博客
12-13 2497
- 自定义顶部导航栏 -->data() {return {statusBarHeight: 0, // 状态导航栏高度navigationBarHeight: 0, // 导航栏高度(标题栏高度)navHeight: 0 // 总体高度},onLoad() {/** 状态栏高度 *//** 获取微信胶囊的位置信息 width,height,top,right,left,bottom */
uni-app 移动端登录页面
weixin_35757531的博客
12-22 481
uni-app 是一款跨平台的移动端开发框架，可以使用 Vue.js 语法开发支持 Android、iOS、H5、小程序、快应用等多种平台的应用。 在 uni-app 中，可以使用 Vue 组件来开发登录页面。下面是一个简单的登录页面示例： <template> <view class="container"> <view class="logo">...
【uni-app】使用uni-app实现简单的登录注册功能
SqlloveSyn的博客
06-11 1万+
大家好，今天和大家分享一下如何在uni-app中实现简单的登录注册功能。首先你需要掌握一下知识点：1.网络请求 uni.request2.页面跳转，页面传参 uni.navigateTo3.本地缓存 uni.setStorageSync, uni.getStorageSync我们要使用到登录和注册接口，所以要知道如何进行网络请求。因为还需要进行注册，所以要进行跳转页面，跳转到注册页面所以要使用到页面跳转。
uniapp 聊天界面-仿微信聊天界面设计
Andy的博客
11-14 2779
简介： 本篇文章带来的是一格仿照微信设计的聊天界面，主要涉及到三个文件；下方已有介绍，代码块中也有相关说明，直接复制然后就可使用；注意获取消息的websoket和拉去历史消息的接口还是需要自己去写，下方只做大致参考；具体消息格式下方代码块中已列出 一、聊天主界面chatIndex.vue <template> <view class="chat"> <scroll-view class="scroll-view" :style="{height: `${win
uni-app前端用户登录实现
qq_44469428的博客
03-31 1319
跳转的页面，暂时用的就是自动生成的index就不再粘贴代码了，后面会进行修改。向后台请求数据的url是spring后台项目中接口地址。安装编辑器不再一一赘述，网上有很多教程。填写项目名称，vue版本选择2。
uniapp个人中心界面模板
热门推荐
weixin_45969142的博客
02-28 2万+
项目介绍 总体代码 <template> <view class="wrapper"> <!-- 个人资料 --> <!-- <view class="profile"> <view class="meta"> --> <!-- <image class="avatar" src="http://static.botue.com/ugo/uploads/monkey.png"></im
vue3后台管理系统之登录界面和业务的实现
m0_52704461的博客
10-18 3329
封装本地存储数据和读取数据的方法。修改登录返回结果数据类型。定义token数据类型。
使用uni-app写一个用vue户登录页面
07-22
当然可以！以下是一个使用uni-app和Vue编写的用户登录页面示例： 首先，创建一个新的uni-app项目，命名为`login`。 在`login`项目的`pages`文件夹中创建一个名为`Login`的页面： ``` <template> <view class="container"> <view class="form-group"> <input v-model="username" type="text" placeholder="用户名" /> </view> <view class="form-group"> <input v-model="password" type="password" placeholder="密码" /> </view> <button @click="login">登录</button> </view> </template> <script> export default { data() { return { username: '', password: '' }; }, methods: { login() { // 在这里编写登录逻辑 if (this.username === 'admin' && this.password === 'password') { uni.showToast({ title: '登录成功', icon: 'success' }); // 登录成功后跳转到其他页面 uni.navigateTo({ url: '/pages/home/home' }); } else { uni.showToast({ title: '用户名或密码错误', icon: 'none' }); } } } }; </script> <style scoped> .container { margin-top: 100px; display: flex; flex-direction: column; align-items: center; } .form-group { margin-bottom: 20px; } input { width: 300px; height: 40px; border: 1px solid #ccc; border-radius: 4px; padding: 0 10px; } button { width: 100px; height: 40px; background-color: #007aff; color: #fff; border-radius: 4px; border: none; } </style> ``` 在上述代码中，我们创建了一个包含用户名和密码输入框以及登录按钮的登录页面。当点击登录按钮时，会触发`login`方法进行登录逻辑的处理。在这个示例中，我们简单地验证用户名和密码是否为预设的值（admin/password），如果匹配成功，则显示登录成功消息，并跳转到其他页面；如果不匹配，则显示用户名或密码错误的消息。 请注意，这个示例只是一个简单的登录页面示例，实际的登录逻辑可能会更加复杂。你可以根据自己的需求进行相应的修改和扩展。 希望对你有所帮助！如有任何问题，请随时向我提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值