uni-app 微信小程序之好看的ui登录页面(二)
文章目录
- 1. 页面效果
- 2. 页面样式代码
更多登录ui页面
uni-app 微信小程序之好看的ui登录页面(一)
uni-app 微信小程序之好看的ui登录页面(二)
uni-app 微信小程序之好看的ui登录页面(三)
uni-app 微信小程序之好看的ui登录页面(四)
uni-app 微信小程序之好看的ui登录页面(五)
1. 页面效果

2. 页面样式代码
<!-- 蓝色登录页面2 -->
<template><view style="height:100vh;background: #fff;"><view class="img-a"><view class="t-b">您好,<br />欢迎使用,XXX小程序</view></view><view class="login-view" style=""><view class="t-login"><form class="cl"><view class="t-a"><text class="txt">手机号</text><input type="number" name="phone" placeholder="请输入您的手机号" maxlength="11" v-model="phone" /></view><view class="t-a"><text class="txt">密码</text><input type="password" name="code" maxlength="18" placeholder="请输入您的密码" v-model="pwd" /></view><button @tap="login()">登 录</button><view class="reg" @tap="reg()">注 册</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/wx.png"></image></view><view class="t-g" @tap="zfbLogin()"><image src="https://zhoukaiwen.com/img/loginImg/qq.png"></image></view></view></view></view></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' });},//等三方微信登录wxLogin() {uni.showToast({ title: '微信登录', icon: 'none' });},//第三方支付宝登录zfbLogin() {uni.showToast({ title: '支付宝登录', icon: 'none' });}}
};
</script>
<style>
.txt {font-size: 32rpx;font-weight: bold;color: #333333;
}
.img-a {width: 100%;height: 450rpx;background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);background-size: 100%;
}
.reg {font-size: 28rpx;color: #fff;height: 90rpx;line-height: 90rpx;border-radius: 50rpx;font-weight: bold;background: #f5f6fa;color: #000000;text-align: center;margin-top: 30rpx;
}.login-view {width: 100%;position: relative;margin-top: -120rpx;background-color: #ffffff;border-radius: 8% 8% 0% 0;
}.t-login {width: 600rpx;margin: 0 auto;font-size: 28rpx;padding-top: 80rpx;
}.t-login button {font-size: 28rpx;background: #2796f2;color: #fff;height: 90rpx;line-height: 90rpx;border-radius: 50rpx;font-weight: bold;
}.t-login input {height: 90rpx;line-height: 90rpx;margin-bottom: 50rpx;border-bottom: 1px solid #e9e9e9;font-size: 28rpx;
}.t-login .t-a {position: relative;
}.t-b {text-align: left;font-size: 42rpx;color: #ffffff;padding: 130rpx 0 0 70rpx;font-weight: bold;line-height: 70rpx;
}.t-login .t-c {position: absolute;right: 22rpx;top: 22rpx;background: #5677fc;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: 150rpx 0 0 0;color: #666;
}.t-login .t-f text {margin-left: 20rpx;color: #aaaaaa;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>相关文章:
uni-app 微信小程序之好看的ui登录页面(二)
文章目录 1. 页面效果2. 页面样式代码 更多登录ui页面 uni-app 微信小程序之好看的ui登录页面(一) uni-app 微信小程序之好看的ui登录页面(二) uni-app 微信小程序之好看的ui登录页面(三) uni-app 微信小程…...
Textual Inversion
参考博客1:https://www.bilibili.com/read/cv25430752/...
笙默考试管理系统-MyExamTest----codemirror(47)
笙默考试管理系统-MyExamTest----codemirror(44) 目录 笙默考试管理系统-MyExamTest----codemirror(44) 一、 笙默考试管理系统-MyExamTest----codemirror 二、 笙默考试管理系统-MyExamTest----codemirror 三、 笙默考试…...
JVM中 Minor GC 和 Full GC 的区别
Java中的垃圾回收(Garbage Collection, GC)是自动内存管理的一部分,其主要职责是识别并清除程序中不再使用的对象来释放内存。Java虚拟机(JVM)在运行时进行垃圾回收,主要分为两种类型:Minor GC和…...
二十一章(网络通信)
计算机网络实现了多台计算机间的互联,使得它们彼此之间能够进行数据交流。网络应用程序就是在已连接的不同计算机上运行的程序,这些程序借助于网络协议,相互之间可以交换数据。编写网络应用程序前,首先必须明确所要使用的网络协议…...
[linux运维] 利用zabbix监控linux高危命令并发送告警(基于Zabbix 6)
之前写过一篇是基于zabbix 5.4的实现文章,但是不太详细,最近已经有两个小伙伴在zabbix 6上操作,发现触发器没有str函数,所以更新一下本文,基于zabbix 6 0x01 来看看效果 高危指令出发问题告警: 发出邮件告…...
手机升级到iOS15.8后无法在xcode(14.2)上真机调试
之前手机是iOS14.2的系统,在xcode上进行真机测试运行良好,因为想要使用Xcode的Instruments功能,今天将系统更新到了iOS15.8 ,结果崩了 说是Xcode和手机系统不兼容不能进行真机测试。在网上查了好些方法,靠谱的就是下载相关版本的…...
安装TensorFlow2.12.0
文章目录 一、安装Anaconda步骤 1: 下载Anaconda步骤 2: 运行安装程序步骤 3: 选择安装路径步骤 4: 完成安装步骤 5: 启动Anaconda Navigator步骤 6: 创建和管理环境二、安装TensorFlow(一)Anaconda修改国内镜像源(二)安装CPU版TensorFlow2.12.0(三)查看TensorFlow版本…...
elasticsearch 索引数据多了怎么办,如何调优,部署?
当Elasticsearch索引的数据量不断增加时,可以考虑以下调优和部署措施: 增加索引规模:Elasticsearch支持动态增加索引,可以根据数据量的增长情况逐步增加新的索引。同时,也可以考虑使用分片技术,将数据分散…...
人工智能企业引入S-SDLC,推动安全能力大跃升,保障AI技术体系深化落地
某人工智能公司是国际知名的上市企业,核心技术处于世界前沿水平。多年来,该企业在智慧教育、智慧医疗、智慧城市、智慧司法、金融科技、智能汽车、运营商、消费者等领域进行深度技术赋能,深入推进各个行业的智能化、数字化转型建设。 人工智能…...
Docker的数据卷
数据卷 1.数据卷概述 数据卷:容器与宿主机之间数据共享。 数据卷是一个供容器使用的特殊目录,位于容器中。 可将宿主机的目录挂载到数据卷上,对数据卷的修改操作立刻可见,并且更新数据不会影响镜像,从而实现数据在宿…...
第二十一章总结博客
网络程序设计基础 局域网与互联网 为了实现两台计算机的通信,必须用一个网络线路连接两台计算机。如下图所示 网络协议 1.IP协议 IP是Internet Protocol的简称,是一种网络协议。Internet 网络采用的协议是TCP/IP协议,其全称是Transmission …...
学习php中使用composer下载安装firebase/php-jwt 以及调用方法
学习php中使用composer下载安装firebase/php-jwt 以及调用方法 1、安装firebase/php-jwt2、封装jwt类 1、安装firebase/php-jwt composer require firebase/php-jwt安装好以后出现以下文件: 2、封装jwt类 根据所使用的php框架,在指定目录创建 Token.php <?ph…...
『TypeScript』深入理解变量声明、函数定义、类与接口及泛型
📣读完这篇文章里你能收获到 了解TypeScript变量声明与类型注解掌握TypeScript函数与方法的使用掌握TypeScript类与接口的使用掌握TypeScript泛型的应用 文章目录 一、变量声明与类型注解1. 变量声明2. 类型注解3. 类型推断 二、函数与方法定义1. 函数定义2. 方法定…...
如何优雅使用 vue-html2pdf 插件生成pdf报表
使用 vue-html2pdf 插件 业务背景,老板想要一份能征服客户的pdf报表,传统的pdf要手撕,企业中确实有点耗费时间,于是github上面看到开源的这个插件就…废话不多说,直接上教程 1.使用下面命令安装 vue-html2pdf npm i…...
C语言第十六集(前)
1.关于那个整形存储入char的 是先取好补码,再截断 例: 2.%u是以十进制的形式打印无符号整数 3.注意(背):存储的char类型变量的补码为10000000的直接解析为-128 4.signed char 类型的变量取值范围是-128~127 5.unsigned char 类型的变量取值范围是0~255 6.有符号类型的变量…...
Makefile语法
一、Makefile规则格式 Makefile 里面是由一系列的规则组成的,这些规则格式如下: 目标…... : 依赖文件集合…… 命令 1 命令 2 ……参考上一节gcc编译器与Makefile入门参考这条规则 1 main: main.o input.o calcu.o2 gcc -o main main.o input.o c…...
用户案例|Milvus 助力 Credal.AI 实现 GenAI 安全与可控
AIGC 时代,企业流程中是否整合人工智能(AI)对于的企业竞争力至关重要。然而,随着 AI 不断发展演进,企业也在此过程中面临数据安全管理、访问权限、数据隐私等方面的挑战。 为了更好地解决上述问题,Credal.A…...
MySQL三 | 多表查询
目录 多表查询 内连接 隐式内连接 显示内连接 外连接 左外连接 右外连接 自连接 子查询 多表查询 笛卡尔积:集合A和集合B的所有组合情况 A * B 在多表查询时应消除无效的笛卡尔积 内连接 查询的是两张表交集的地方 隐式内连接 SELECT 字段列表 FROM 表1…...
PostgreSQL 索引介绍和使用事项
索引内容 关键点 索引是一种数据结构,用于加快数据库查询的速度。它类似于书籍的目录,可以快速定位到特定的数据页。 PG数据库支持多种类型的索引,包括B树索引、哈希索引、GiST索引、SP-GiST索引和GIN索引等。 B树索引是PG数据库中最常用的…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...
前端倒计时误差!
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?
Otsu 是一种自动阈值化方法,用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理,能够自动确定一个阈值,将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
