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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vivado时序方法检查6

TIMING-19 &#xff1a; ODDR 上的生成时钟波形反相 生成时钟 <clock_name> 的波形与传入时钟 <clock_name> 的波形相比呈反相。 描述 前向时钟端口上的生成时钟应定义为与传入时钟相关。 DRC 警告报告称 &#xff0c; 通过对比传入源时钟发现 &#xff0…

【Android Audio Focus 音频焦点】

介绍 Android 中的音频焦点&#xff08;Audio Focus&#xff09;是一种机制&#xff0c;用于管理应用程序之间的音频资源竞争。当多个应用程序同时请求使用音频设备时&#xff0c;通过音频焦点机制可以确保最终用户的体验不受影响。 两个或两个以上的 Android 应用可同时向同…

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

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

【SQL开发实战技巧】系列(四十九):Oracle12C常用新特性☞表分区部分索引(Partial Indexes)

系列文章目录 【SQL开发实战技巧】系列&#xff08;一&#xff09;:关于SQL不得不说的那些事 【SQL开发实战技巧】系列&#xff08;二&#xff09;&#xff1a;简单单表查询 【SQL开发实战技巧】系列&#xff08;三&#xff09;&#xff1a;SQL排序的那些事 【SQL开发实战技巧…

树莓派学习:socket获取客户端IP地址

定义 int s_fd;//服务器套接字描述符int c_fd;//客户端套接字描述符int clensizeof(struct sockaddr_in);//地址结构体的大小struct sockaddr_in s_addr;//服务端socket地址结构体memset(&s_addr,0,clen);struct sockaddr_in c_addr;//客户端socket地址结构体memset(&c…

数据分析基础之《matplotlib(4)—柱状图》

一、柱状图绘制 1、柱状图要素 有类别 2、需求&#xff1a;对比每部电影的票房收入 电影数据如下图所示&#xff1a; 3、matplotlib.pyplot.bar(x, height, width0.8, bottomNone, *, aligncenter, dataNone, **kwargs) 说明&#xff1a; x&#xff1a;有几个类别 height&am…

玩转Sass:掌握数据类型!

当我们在进行前端开发的时候&#xff0c;有时候需要使用一些不同的数据类型来处理样式&#xff0c;Sass 提供的这些数据类型可以帮助我们更高效地进行样式开发&#xff0c;本篇文章将为您详细介绍 Sass 中的数据类型。 布尔类型 在 Sass 中&#xff0c;布尔数据类型可以表示逻…

十一.图像处理与光学之图像缩放方式

十一.图像处理与光学之图像缩放方式(sensor binning模式/ skipping 模式/SOC resize) 文章目录 十一.图像处理与光学之图像缩放方式(sensor binning模式/ skipping 模式/SOC resize)11.1 sensor binning模式11.1.1 2:2 Binning模式11.1.2 Binning用途---**在环境光照低的情况下…

生信数据分析高效Python代码

1. Pandas glob获取指定目录下的文件列表 import pandas as pd import globdata_dir "/public/data/" # 获取文件后缀为.txt的文件列表 df_all pd.concat([pd.read_csv(f, sep\t) for f in glob.glob(data_dir *.txt)]) print(df_all)2. 使用 enumerate 函数获取…

基于Spring Boot和微信小程序开发的点餐系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring Boot和微信小程序开发的点餐…

每日一练:插入排序

1. 概念及原理 插入排序是一种简单直观的排序算法&#xff0c;其基本思想是将一个元素插入到已经排序好的部分&#xff0c;然后不断地重复这个过程&#xff0c;直到整个数组有序。下面是插入排序的算法原理&#xff1a; 初始状态&#xff1a; 数组被分为已排序和未排序两个部分…

GORM 自定义数据类型json-切片(数组)

文章目录 自定义数据类型自定义json结构体定义Scaner和Valuer接口的实现插入数据&查询数据 自定义切片存储切片json形式存储字符串存储 创建&查询数据 gorm官方文档&#xff1a;自定义数据类型 自定义数据类型 数据空中很多情况下数据是多变的&#xff0c;我们这篇文章…

Qt::UniqueConnection和lambda一块用无效

如果槽函数是lambda。 那么用了Qt::UniqueConnection也会出现槽函数被多次调用的问题。 原因&#xff1a; 参考官方文档&#xff1a; QObject Class | Qt Core 5.15.16https://doc.qt.io/qt-5/qobject.html#connect

在Go中导入软件包

引言 对于任何广泛使用的编程语言,乃至整个开源社区来说,在不同项目之间借用和共享代码的能力都是基础。借用代码使程序员能够将大部分时间花在针对自己的需求编写代码上,而且通常他们的一些新代码最终会对其他人有用。然后他们可能决定将这些可重用的部分组织成一个单元,…

在c和c++中‘->‘是什么意思?

1.->是什么 箭头符号 -> 通常用于 C、C 和类似的编程语言中&#xff0c;表示指向结构体或类的指针成员的访问。这个符号是一个简写形式&#xff0c;可以看作是两个操作的组合&#xff1a; 解引用&#xff08;dereferencing&#xff09;&#xff1a;通过一个指针来访问它…

k8s-service 7

由控制器来完成集群的工作负载&#xff0c;service&#xff08;微服务&#xff09;是将工作负载的应用暴露出去&#xff0c;从而解决访问问题 作用&#xff1a;无论是在集群内还是集群外&#xff0c;都可以访问pod上的应用&#xff0c;其实现对集群内的应用pod自动发现和负载均…

jQuery ajax读取本地json文件 三级联动下拉框

步骤 1&#xff1a;创建本地JSON文件 {"departments": [{"name": "会计学院","code": "052"},{"name": "金融学院","code": "053"},{"name": "财税学院",&qu…

【c】小红的漂亮串

#include<stdio.h> #include<string.h> int main() {char arr[1000];int count0;gets(arr);//在数组中输入字符串int lenstrlen(arr);//求字符串长度printf("%d\n",len);for(int i0;i<len;i){if(arr[i]r){if(arr[i1]e){if(arr[i2]d){countcount1;}}}}…

关于如何实现图片懒加载

图片懒加载的原理&#xff1a; 通过延迟加载图片&#xff0c;只有当图片即将进入可视区域时再进行加载&#xff0c;以优化网页加载速度和性能。 具体的实现步骤如下&#xff1a; 将待加载的图片的 src 属性设置为空或者一个占位符&#xff0c;而不是真实的图片链接。监…

要求CHATGPT高质量回答的艺术:提示工程技术的完整指南—第 19 章:聚类提示

要求CHATGPT高质量回答的艺术&#xff1a;提示工程技术的完整指南—第 19 章&#xff1a;聚类提示 聚类提示是一种允许模型根据某些特征或特性将相似数据点分组的技术。 具体做法是向模型提供一组数据点&#xff0c;并要求它根据某些特征或特性将这些数据点分组。 这种技术适…