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"><image class="img-a" src="https://zhoukaiwen.com/img/loginImg/bg1.png"></image><view class="t-login"><view class="t-b">登 录</view><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><view class="t-c" @tap="forgotPwd()">忘记密码</view><button @tap="login()">登 录</button></form></view><view class="cardBox"><view>注册新账号</view></view><image class="img-b" src="https://zhoukaiwen.com/img/loginImg/bg2.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' });},//忘记密码forgotPwd() {uni.showToast({ title: '忘记密码', icon: 'none' });}}
};
</script>
<style>
.img-a {width: 100%;
}
.img-b {width: 100%;height: 45px;bottom: 0;position: absolute;
}
.login-bg {height: 100vh;background: linear-gradient(to bottom, #ff6a9a, #fe7d76);
}.t-login {width: 700rpx;padding: 55rpx;margin: 0 auto;font-size: 28rpx;background-color: #ffffff;border-radius: 20rpx;position: relative;margin-top: -100rpx;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: #ff939b;font-weight: bold;margin: 0 0 50rpx 20rpx;
}.t-login .t-d {text-align: center;color: #999;margin: 80rpx 0;
}.t-login .t-c {text-align: right;color: #c0c0c0;margin: -20rpx 30rpx 40rpx 0;
}.t-login .t-f {text-align: center;margin: 200rpx 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';
}
.cardBox {-webkit-box-orient: horizontal;-webkit-box-direction: normal;-webkit-flex-direction: row;flex-direction: row;-webkit-box-align: center;-webkit-align-items: center;align-items: center;padding: 5rpx;background: #ffffff;opacity: 0.9;-webkit-border-radius: 20rpx;border-radius: 0 0 20rpx 20rpx;height: 70rpx;width: 600rpx;margin: 0 auto;position: relative;text-align: center;line-height: 70rpx;color: #aaa;font-size: 28rpx;
}
.cardBox .txt {margin-left: 10rpx;
}
</style>相关文章:
uni-app 微信小程序之好看的ui登录页面(三)
文章目录 1. 页面效果2. 页面样式代码 更多登录ui页面 uni-app 微信小程序之好看的ui登录页面(一) uni-app 微信小程序之好看的ui登录页面(二) uni-app 微信小程序之好看的ui登录页面(三) uni-app 微信小程…...
Android 默认打开应用的权限
有项目需要客户要安装第三方软件,但是要手动点击打开权限,就想不动手就打开。 //安装第三方软件,修改方式 frameworks\base\services\core\java\com\android\server\pm\PackageManagerService.java //找到如下源码: //有三种方…...
2023年广东工业大学腾讯杯新生程序设计竞赛
E.不知道叫什么名字 题意:找一段连续的区间,使得区间和为0且区间长度最大,输出区间长度。 思路:考虑前缀和,然后使用map去记录每个前缀和第一次出现的位置,然后对数组进行扫描即可。原理:若 s …...
FFmpeg开发笔记(六)如何访问Github下载FFmpeg源码
学习FFmpeg的时候,经常要到GitHub下载各种开源代码,比如FFmpeg的源码页面位于https://github.com/FFmpeg/FFmpeg。然而国内访问GitHub很不稳定,经常打不开该网站,比如在命令行执行下面的ping命令。 ping github.com 上面的ping结…...
SpringCloud | Dubbo 微服务实战——注册中心详解
前言 「作者主页」:雪碧有白泡泡 「个人网站」:雪碧的个人网站 |Eureka,Nacos,Consul,Zookeeper在Spring Cloud和Dubbo中实战 引言 在项目开发过程中,随着项目不断扩大,也就是业务的不断增多,我们将采用集群…...
PostGIS学习教程十一:投影数据
PostGIS学习教程十一:投影数据 地球不是平的,也没有简单的方法把它放在一张平面纸地图上(或电脑屏幕上),所以人们想出了各种巧妙的解决方案(投影)。 每种投影方案都有优点和缺点,一…...
jQuery ajax读取本地json文件 三级联动下拉框
步骤 1:创建本地JSON文件 {"departments": [{"name": "会计学院","code": "052"},{"name": "金融学院","code": "053"},{"name": "财税学院",&qu…...
Kubernetes(K8s 1.27.x) 快速上手+实践,无废话纯享版(视频笔记)
视频源:1.03-k8s是什么?_哔哩哔哩_bilibili 1 基础知识 1.1 K8s 有用么? K8s有没有用 K8s要不要学? 参考资料: https://www.infoq.com/articles/devops-and-cloud-trends-2022/?itm_sourcearticles_about_InfoQ-trends-report…...
深度学习实战66-基于计算机视觉的自动驾驶技术,利用YOLOP模型实现车辆区域检测框、可行驶区域和车道线分割图
大家好,我是微学AI,今天给大家介绍一下深度学习实战66-基于计算机视觉的自动驾驶技术,利用YOLOP模型实现车辆区域检测框、可行驶区域和车道线分割图。本文我将介绍自动驾驶技术及其应用场景,并重点阐述了基于计算机视觉技术下的自动驾驶。自动驾驶技术是一种利用人工智能和…...
Stable Diffusion 系列教程 - 1 基础准备(针对新手)
使用SD有两种方式: 本地: 显卡要求:硬件环境推荐NVIDIA的具有8G显存的独立显卡,这个显存勉勉强强能摸到门槛。再往下的4G可能面临各种炸显存、炼丹失败、无法生成图片等各种问题。对于8G显存,1.0模型就不行࿰…...
听GPT 讲Rust源代码--src/tools(8)
File: rust/src/tools/rust-analyzer/crates/ide-assists/src/handlers/add_missing_match_arms.rs 在Rust源代码中,rust-analyzer是一个Rust编程语言的语言服务器。它提供了代码补全、代码重构和代码导航等功能来帮助开发者提高编码效率。 在rust-analyzer的代码目…...
Linux硬链接和软连接是什么?
在Linux操作系统中,文件管理是一个基本且重要的概念。其中,软链接(Symbolic Link)和硬链接(Hard Link)是文件系统中两种不同类型的链接方式,它们在文件管理和操作中扮演着重要的角色。软链接 软…...
LangChain 23 Agents中的Tools用于增强和扩展智能代理agent的功能
LangChain系列文章 LangChain 实现给动物取名字,LangChain 2模块化prompt template并用streamlit生成网站 实现给动物取名字LangChain 3使用Agent访问Wikipedia和llm-math计算狗的平均年龄LangChain 4用向量数据库Faiss存储,读取YouTube的视频文本搜索I…...
VS2015编译GDAL3.2.0+opencl+C#
参考借鉴https://www.cnblogs.com/litou/p/15004877.html 参考借鉴https://www.cnblogs.com/xiaowangba/p/6313903.html 参考借鉴gdal、proj、geos、sqlite等在VS2015下编译和配置_vs2015编译sqlite3-CSDN博客 参考借鉴Windows下GDAL3.1.2编译 (VS2015)_gdal windows编译-CS…...
3、Linux_系统用户管理
1.Linux 用户管理 1.1概述 Linux系统是一个多用户多任务的操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统。root用户是系统默认创建的管理员账号。 1.2添加用户 语法 useradd […...
C语言指针详解上
1 野指针 int main01(){//野指针就是没有初始化的指针,指针的指向是随机的,不可以 操作野指针//int a 0;//指针p保存的地址一定是定义过的(向系统申请过的)int *p;//野指针*p 200;printf("%d\n",*p);system("pause");return 0;}2 空指针 空指针的作用…...
力扣面试150题 | 27.移除元素
力扣面试150题 | 27.移除元素 题目描述解题思路代码实现复杂度分析 题目描述 27.移除元素 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度。 不要使用额外的数组空间,你必…...
JAVA 通过get,post访问远程接口
get请求 参数拼接在url ?namevalue&sexvalue // httpurlhttp:127.0.0.1/project public static String doGet(String httpurl){HttpURLConnection connection nul;Inputstream is null;BufferedReader br null;String result null;//返回结果字…...
Spark例子
Spark例子 以下是一个简单的AI Spark例子: 假设我们有一个数据集,包含房屋大小、卧室数量和售价。我们想使用Spark来预测房屋售价。 首先,我们需要导入所需的库和数据。在这个例子中,我们将使用Pyspark。 python from pyspark…...
linux下ls和df卡死
1. strace看下卡在哪里 https://lokie.wang/article/43 strace ls strace df -h 2. 原因 https://segmentfault.com/a/1190000040620740 3. fuser 和 umount都不行,最后只能重启 重启机器还起不来了垃圾...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案: 语义化标签: <header>:页头<nav>:导航<main>:主要内容<article>&#x…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...
关于easyexcel动态下拉选问题处理
前些日子突然碰到一个问题,说是客户的导入文件模版想支持部分导入内容的下拉选,于是我就找了easyexcel官网寻找解决方案,并没有找到合适的方案,没办法只能自己动手并分享出来,针对Java生成Excel下拉菜单时因选项过多导…...
【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅
目录 前言 操作系统与驱动程序 是什么,为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中,我们在使用电子设备时,我们所输入执行的每一条指令最终大多都会作用到硬件上,比如下载一款软件最终会下载到硬盘上&am…...
API网关Kong的鉴权与限流:高并发场景下的核心实践
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中,API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关,Kong凭借其插件化架构…...
DeepSeek越强,Kimi越慌?
被DeepSeek吊打的Kimi,还有多少人在用? 去年,月之暗面创始人杨植麟别提有多风光了。90后清华学霸,国产大模型六小虎之一,手握十几亿美金的融资。旗下的AI助手Kimi烧钱如流水,单月光是投流就花费2个亿。 疯…...
