uni-app 微信小程序之好看的ui登录页面(四)

文章目录

  • 1. 页面效果
  • 2. 页面样式代码

更多登录ui页面

uni-app 微信小程序之好看的ui登录页面(一)
uni-app 微信小程序之好看的ui登录页面(二)
uni-app 微信小程序之好看的ui登录页面(三)
uni-app 微信小程序之好看的ui登录页面(四)
uni-app 微信小程序之好看的ui登录页面(五)

1. 页面效果

在这里插入图片描述

2. 页面样式代码

<!-- 简洁登录页面 -->
<template>
	<view class="login-bg">
		<br /><br /><br /><br /><br /><br /><br />
		<view class="t-login">
			<form class="cl">
				<view class="t-a">
					<image src="https://zhoukaiwen.com/img/loginImg/user.png"></image>
					<input type="number" name="phone" placeholder="请输入手机号码" maxlength="11" v-model="phone" />
				</view>
				<view class="t-a">
					<image src="https://zhoukaiwen.com/img/loginImg/pwd.png"></image>
					<input type="password" name="code" maxlength="6" placeholder="请输入密码" v-model="pwd" />
				</view>
				<button @tap="login()">登 录</button>
				<view class="t-c">
					<text class="t-c-txt" @tap="reg()">注册账号</text>
					<text>返回首页</text>
				</view>
			</form>
			<view class="t-f"><text>—————— 其他登录方式 ——————</text></view>
			<view class="t-e cl">
				<view class="t-g" @tap="wxLogin()"><image src="https://zhoukaiwen.com/img/loginImg/wx2.png"></image></view>
				<view class="t-g" @tap="zfbLogin()"><image src="https://zhoukaiwen.com/img/loginImg/qq2.png"></image></view>
				<view class="t-g" @tap="zfbLogin()"><image src="https://zhoukaiwen.com/img/loginImg/wb.png"></image></view>
			</view>
		</view>
		<image class="img-a" src="https://zhoukaiwen.com/img/loginImg/bg1.png"></image>
	</view>
</template>
<script>
export default {
	data() {
		return {
			phone: '', //手机号码
			pwd: '' //密码
		};
	},
	onLoad() {},
	methods: {
		//当前登录按钮操作
		login() {
			var that = this;
			if (!that.phone) {
				uni.showToast({ title: '请输入手机号', icon: 'none' });
				return;
			}
			if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
				uni.showToast({ title: '请输入正确手机号', icon: 'none' });
				return;
			}
			if (!that.pwd) {
				uni.showToast({ title: '请输入密码', icon: 'none' });
				return;
			}
			uni.showToast({ title: '登录成功!', icon: 'none' });
		},
		//立刻注册
		reg() {
			uni.showToast({ title: '注册账号', icon: 'none' });
		}
	}
};
</script>
<style>
.img-a {
	width: 100%;
	position: absolute;
	bottom: 0;
}
.login-bg {
	height: 100vh;
	padding-top: 300rpx;
	background-image: url(https://zhoukaiwen.com/img/loginImg/bg3.png);
}

.t-login {
	width: 700rpx;
	padding: 55rpx;
	margin: 0 auto;
	font-size: 28rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.15);
	z-index: 9;
}
.t-login button {
	font-size: 28rpx;
	background: linear-gradient(to right, #ff8f77, #fe519f);
	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: #f6f6f6;
	border: 1px solid #f6f6f6;
	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;
}

.t-login .t-b {
	text-align: left;
	font-size: 46rpx;
	color: #000;
	padding: 300rpx 0 120rpx 0;
	font-weight: bold;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-c {
	text-align: right;
	color: #666666;
	margin: 30rpx 30rpx 40rpx 0;
}

.t-login .t-c .t-c-txt {
	margin-right: 300rpx;
}

.t-login .t-e {
	text-align: center;
	width: 600rpx;
	margin: 40rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 33.33%;
}

.t-login .t-e image {
	width: 70rpx;
	height: 70rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 80rpx 0 0 0;
	color: #999;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #b9b9b9;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #aeaeae;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/226928.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

uni-app 微信小程序之好看的ui登录页面(二)

文章目录 1. 页面效果2. 页面样式代码 更多登录ui页面 uni-app 微信小程序之好看的ui登录页面&#xff08;一&#xff09; uni-app 微信小程序之好看的ui登录页面&#xff08;二&#xff09; uni-app 微信小程序之好看的ui登录页面&#xff08;三&#xff09; uni-app 微信小程…

2023五岳杯量子计算挑战赛数学建模思路+代码+模型+论文

目录 计算力网络&#xff08;CPN&#xff09;是一种新型的信息基础设施&#xff0c;完整论文代码见文末 问题描述 2.1 问题1 2.2 问题2 2.3 问题3 问题1的解答过程&#xff1a; 问题3的解答过程&#xff1a; 决策优化应用场景&#xff1a;人工智能模型超参数调优 背景信…

【开源】基于Vue和SpringBoot的车险自助理赔系统

项目编号&#xff1a; S 018 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S018&#xff0c;文末获取源码。} 项目编号&#xff1a;S018&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 角色管理模块2.3 车…

MQTT源码分析

目录 MQTT源码分析 1. MQTT客户端功能 2. 客户端软件如何实现 3. 程序分层 4. 情景分析 4.1 连接服务器 4.2 创建线程 4.3 发布消息 4.4 最复杂&#xff1a;订阅消息 MQTT源码分析 分析源码&#xff1a;mqttclient\test\emqx\test.c 参考资料&#xff1a; kawaii-mqt…

【开源】基于Vue.js的二手车交易系统

文末获取源码&#xff0c;项目编号&#xff1a; S 084 。 \color{red}{文末获取源码&#xff0c;项目编号&#xff1a;S084。} 文末获取源码&#xff0c;项目编号&#xff1a;S084。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 二手车档案管理模块…

RabbitMQ 常见面试题

目录 1.前置知识1.1.什么是 MQ&#xff1f;它有什么作用&#xff1f;1.2.什么是消费者生产者模型&#xff1f;1.3.AMQP 是什么&#xff1f; 2.RabbitMQ 入门2.1.什么是 RabbitMQ&#xff1f;有什么特点&#xff1f;2.2.RabbitMQ 的核心概念有哪些&#xff1f;2.2.1.生产者 (Pro…

720度vr虚拟家居展厅提升客户的参观兴致

VR虚拟展厅线上3D交互展示的优势有以下几点&#xff1a; 打破了场馆的展示限制&#xff0c;可展示危险性制品、珍贵稀有物品、超大型设备等&#xff0c;同时提供了更大的展示空间和更丰富的展示内容。 可提供企业真实环境的实时VR全景参观&#xff0c;提升潜在客户信任度。 提供…

go的两大测试方法- 官网推荐

go的两大测试方法- 官网推荐 go的两大测试方法- 官网推荐常见的不正规测试方法main方法个例测试验证 - 不正规1. 提供一个函数&#xff1a;Reverse(input string)进行测试2. 直接在函数下创建main函数下进行个例测试3. 测试发现&#xff0c;Reverse方法不支持某些汉字&#xff…

AZURE==SQL managed instances

创建资源 创建DB 创建完成后&#xff0c;拿着刚才的账号密码依然连接不上 远程连接 需要开启公网访问和开放相关端口 参考Configure public endpoint - Azure SQL Managed Instance | Microsoft Learn 连接成功

微信小程序 跳转界面,选择货物之后,返回上一页带参数并判断参数是否存在

需求 当刚进来时选择货物&#xff0c;跳转到选择货物界面进行货物选择&#xff0c;如果货物重复&#xff0c;不再新增货物&#xff0c;如果不存在&#xff0c;则新增 prevPage.setData()用于在页面之间传递数据。它将数据设置到上一个页面&#xff08;即prevPage&#xff09;的…

生成式AI赋能千行百业加速创新,2023亚马逊云科技re:Invent行业盘点

2023亚马逊云科技re:Invent全球大会已于上周圆满闭幕&#xff0c;在本次大会中&#xff0c;亚马逊云科技又为大家带来了很多功能/项目迭代更新&#xff0c;也重磅发布了很多全新的功能。今天从行业视角来盘点回顾哪些重磅发布适用于垂直行业客户&#xff0c;以及面向汽车、制造…

python可视化plotly 图例(legend)设置大全,值得收藏!

文章目录 一、图例(legend)二、update\_layout(legend{}) 相关参数及示例关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源码五、面试资料六、Python…

听GPT 讲Rust源代码--src/tools(8)

File: rust/src/tools/rust-analyzer/crates/ide-assists/src/handlers/add_missing_match_arms.rs 在Rust源代码中&#xff0c;rust-analyzer是一个Rust编程语言的语言服务器。它提供了代码补全、代码重构和代码导航等功能来帮助开发者提高编码效率。 在rust-analyzer的代码目…

轻松掌握ArkTS!鸿蒙新作《鸿蒙HarmonyOS应用开发入门》简介

《鸿蒙HarmonyOS应用开发入门》由清华大学出版社出版&#xff0c;已于近期上市。该书基于HarmonyOS 3.1 ArkTS编写&#xff0c;所有示例采用了比较新的API 9&#xff0c;可谓是目前市面上最新的鸿蒙力作。 本文对《鸿蒙HarmonyOS应用开发入门》一书做个大致的介绍。 封面部分…

Vulnhub项目:EMPIRE: BREAKOUT

一、靶机地址 靶机地址&#xff1a;Empire: Breakout ~ VulnHub 靶机介绍&#xff1a; 该靶机被定义为简单&#xff0c;但是如果没有找到&#xff0c;那就难度成中等了&#xff01; 二、渗透过程 老三样&#xff0c;发现目标&#xff0c;这里用 arp-scan 确定靶机 ip&#…

17:00面试,17:06就出来了,问的问题有点变态。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到8月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%,…

【web开发网页制作】Html+Css网页制作关于明星介绍王嘉尔(5页面)【附源码下载】

htmlcss网页制作目录 写在前面涉及知识效果展示1、网页构思2、网页实现2.1 首页2.2 关于我2.3 成长经历2.4 朋友2.5 爱好 3、源码分享 写在前面 接着分享哈&#xff0c;还是学生时代的库存&#xff0c;当时是为了不同风格的素材&#xff0c;所以自己选择了多个方向的主题来练习…

计算机操作系统4

1.什么是进程同步 2.什么是进程互斥 3.进程互斥的实现方法(软件) 4.进程互斥的实现方法(硬件) 5.遵循原则 6.总结&#xff1a; 线程是一个基本的cpu执行单元&#xff0c;也是程序执行流的最小单位。 调度算法&#xff1a;先来先服务FCFS、短作业优先、高响应比优先、时间片…

人工智能_机器学习061_KKT条件公式理解_原理深度解析_松弛变量_不等式约束---人工智能工作笔记0101

然后我们再来看,前面我们,拉格朗日乘子法,把带有条件的,问题,优化成了等式问题,从而, 构建拉格朗日乘子公式,进行实现了求解,但是在现实生活中,往往也有,很多不等式问题. 比如上面的这个,就是要求是h(x)<=0的情况下,函数f(x)的最小值. 可以看到,这个带有一个不等式的条件,…

『亚马逊云科技产品测评』活动征文|AWS云服务器EC2实例实现ByConity快速部署

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 前言 亚马逊是全球最大的在线零售商和云计算服务提供商。AWS云服务器在…