当前位置: 首页 > news >正文

uni-app简洁的移动端登录注册界面

非常简洁的登录、注册界面模板,使用uni-app编写,直接复制粘贴即可,无任何引用,全部公开。

在这里插入图片描述
在这里插入图片描述

废话不多说,代码如下:

login.vue文件

<template><view class="content"><view class="logo">LOGO</view><view class="form-box"><view class="tab-menu"><view class="tab-name" @click="tabChange(0)"><text :class="tabIndex==0?'tab-txt':''">登录</text><text v-show="tabIndex==0" class="tab-active"></text></view><view class="tab-name" @click="tabChange(1)"><text :class="tabIndex==1?'tab-txt':''">注册</text><text v-show="tabIndex==1" class="tab-active"></text></view></view><view v-show="tabIndex==0"><view class="row-input"><image mode="aspectFit" src="../../static/phone.png"></image><input placeholder="输入账号/手机号" maxlength="11" /></view><view class="row-input"><image mode="aspectFit" src="../../static/password.png"></image><input placeholder="输入密码" maxlength="18" /></view><view class="menu-link"><text>忘记密码?</text></view><view class="login-btn">登录</view></view><view v-show="tabIndex==1"><view class="row-input-code"><view class="input-box"><image class="img" mode="aspectFit" src="../../static/phone.png"></image><input placeholder="输入手机号" maxlength="11" type="number" /></view><view class="code-box" @click="getCode">获取验证码</view></view><view class="row-input"><image mode="aspectFit" src="../../static/code.png"></image><input placeholder="输入验证码" maxlength="6" type="number" /></view><view class="row-input"><image mode="aspectFit" src="../../static/password.png"></image><input placeholder="输入6位密码" maxlength="6" /></view><view class="login-btn register">注册</view><view class="agree-txt">查看<text>《演示效果》</text></view></view></view></view>
</template><script>export default {data() {return {tabIndex: 0, //登录注册下标}},methods: {// tab切换tabChange(id) {this.tabIndex = id},// 获取验证码getCode() {uni.showToast({title: "获取验证码"})}}}
</script><style lang="scss">page {background-color: #5de97f;}.logo {height: 25vh;display: flex;align-items: center;justify-content: center;color: #FFFFFF;font-size: 120rpx;letter-spacing: 5rpx;font-weight: bold;}.form-box {padding: 0 50rpx;margin: 0 70rpx;height: 750rpx;background-color: #FFFFFF;border-radius: 20rpx;.tab-menu {padding-top: 50rpx;display: flex;justify-content: flex-start;align-items: center;height: 100rpx;.tab-name {height: 100%;display: flex;justify-content: flex-start;align-items: center;flex-direction: column;width: 150rpx;font-size: 40rpx;font-weight: bold;color: #afafaf;}.tab-txt {color: #5b5b5b;}.tab-active {margin-top: 10rpx;width: 100rpx;height: 13rpx;background-color: #6bb3fe;border-radius: 15rpx;}}.row-input {margin: 60rpx 0 0 0;padding: 0 20rpx;display: flex;justify-content: flex-start;align-items: center;height: 80rpx;border: 5rpx solid #bbf7c8;border-radius: 8rpx;image {width: 30rpx;height: 30rpx;}input {padding-left: 20rpx;font-size: 28rpx;width: 400rpx;}}.row-input-code {margin-top: 20rpx;width: 100%;display: flex;justify-content: space-between;align-items: center;height: 80rpx;font-size: 28rpx;.input-box {padding: 0 20rpx;width: 60%;display: flex;justify-content: flex-start;align-items: center;height: 100%;border: 5rpx solid #bbf7c8;border-top-left-radius: 8rpx;border-bottom-left-radius: 8rpx;box-sizing: border-box;.img {width: 40rpx;height: 30rpx;}input {padding-left: 20rpx;font-size: 28rpx;width: 300rpx;}}.code-box {display: flex;justify-content: center;align-items: center;width: 40%;height: 100%;color: #FFFFFF;border-top-right-radius: 8rpx;border-bottom-right-radius: 8rpx;background: linear-gradient(#44aae8, #4889e2);}}.menu-link {display: flex;justify-content: flex-end;align-items: center;height: 70rpx;color: #007AFF;font-size: 24rpx;}.login-btn {margin-top: 30rpx;display: flex;justify-content: center;align-items: center;height: 80rpx;background: linear-gradient(#44aae8, #4889e2);border-radius: 50rpx;color: #FFFFFF;font-size: 35rpx;font-weight: bold;letter-spacing: 4rpx;}.register {margin-top: 50rpx;}.agree-txt {display: flex;justify-content: center;align-items: center;height: 70rpx;font-size: 24rpx;text {color: #007AFF;}}}
</style>

素材!

在这里插入图片描述
在这里插入图片描述

更多移动端登录注册界面模板,请点击以下链接访问查看 ↓

更多模板地址:https://ext.dcloud.net.cn/plugin?id=8937

几十款移动端登录/注册界面模板,源码全部公开,拿来即用,点击即可查看

相关文章:

uni-app简洁的移动端登录注册界面

非常简洁的登录、注册界面模板&#xff0c;使用uni-app编写&#xff0c;直接复制粘贴即可&#xff0c;无任何引用&#xff0c;全部公开。 废话不多说&#xff0c;代码如下&#xff1a; login.vue文件 <template><view class"content"><view class&quo…...

LongVU:用于长视频语言理解的空间时间自适应压缩

晚上闲暇时间看到一种用于长视频语言理解的空间时间自适应压缩机制的研究工作LongVU&#xff0c;主要内容包括&#xff1a; 背景与挑战&#xff1a;多模态大语言模型&#xff08;MLLMs&#xff09;在视频理解和分析方面取得了进展&#xff0c;但处理长视频仍受限于LLM的上下文长…...

Elasticsearch数据迁移(快照)

1. 数据条件 一台原始es服务器&#xff08;192.168.xx.xx&#xff09;&#xff0c;数据迁移后的目标服务器&#xff08;10.2.xx.xx&#xff09;。 2台服务器所处环境&#xff1a; centos7操作系统&#xff0c; elasticsearch-7.3.0。 2. 为原始es服务器数据创建快照 修改elas…...

Linux Cgroup学习笔记

文章目录 Cgroup(Control Group)引言简介Cgroup v1通用接口文件blkio子系统cpu子系统cpuacct子系统cpuset子系统devices子系统freezer子系统hugetlb子系统memory子系统net_cls子系统net_prio子系统perf_event子系统pids子系统misc子系统 Cgroup V2基础操作组织进程和线程popula…...

百问FB显示开发图像处理 - PNG图像处理

2.3 PNG图像处理 2.3.1 PNG文件格式和libpng编译 ​ 跟JPEG文件格式一样&#xff0c;PNG也是一种使用了算法压缩后的图像格式&#xff0c;与JPEG不同&#xff0c;PNG使用从LZ77派生的无损数据压缩算法。对于PNG文件格式&#xff0c;也有相应的开源工具libpng。 libpng库可从…...

【JavaWeb后端学习笔记】MySQL多表查询(内连接、外连接、子查询)

MySQL 多表查询 1、连接查询1.1 内连接1.2 外连接 2、子查询2.1 标量子查询2.2 列子查询2.3 行子查询2.4 表子查询 3、多表查询案例 多表查询有两大类&#xff1a;连接查询和子查询。 连接查询又分为隐式/显式内连接和左/右外连接。 子查询又分为标量子查询、列子查询、行子查询…...

RocketMQ 过滤消息 基于tag过滤和SQL过滤

RocketMQ 过滤消息分为两种&#xff0c;一种tag过滤&#xff0c;另外一种是复杂的sql过滤。 tag过滤 首先创建producer然后启动&#xff0c;在这里创建了字符串的数组tags。字符串数组里面放置了多个字符串&#xff0c;然后去发送15条消息。 15条消息随着i的增长&#xff0c;…...

element-ui 基本样式的一些更改【持续更新】

1、 去除el-tabs的底部灰色横线 ::v-deep .el-tabs__nav-wrap::after {height: 0px;}2、el-table设置表头颜色 <el-table:data"tableData":header-cell-style"{background:#F7F8FA,color:#4E5869}"><el-table-columnlabel"序号"type&qu…...

element-ui radio和checkbox禁用时不置灰还是原来不禁用时的样式

把要紧用的内容加上一个class"notEdit-page" z注意要在style里面写不能加上scoped /*//checkBox自定义禁用样式*//*//checkBox自定义禁用样式*/ .notEdit-page.el-checkbox__input.is-disabled.is-checked.el-checkbox__inner::after {border-color: #fff; } .notEdi…...

第一部分:基础知识 6. 函数 --[MySQL轻松入门教程]

MySQL 提供了丰富的内置函数&#xff0c;涵盖了字符串处理、数值计算、日期时间操作、聚合分析以及控制流等多个方面。这些函数可以帮助用户更高效地进行数据查询和处理。 1.字符串函数 MySQL 提供了丰富的字符串函数来帮助用户处理和操作字符串数据。下面是一些常用的 MySQL…...

【蓝桥杯每日一题】扫雷

扫雷 知识点 2024-12-3 蓝桥杯每日一题 扫雷 dfs &#xff08;bfs也是可行的&#xff09; 题目大意 在一个二维平面上放置这N个炸雷&#xff0c;每个炸雷的信息有$(x_i,y_i,r_i) $&#xff0c;前两个是坐标信息&#xff0c;第三个是爆炸半径。然后会输入M个排雷火箭&#xff0…...

【算法】棋盘覆盖问题源代码及精简版

目录 一、题目 二、样例 三、示例代码 四、精简代码 五、总结 对于棋盘覆盖问题的解答和优化。 一、题目 输入格式&#xff1a; 第一行&#xff0c;一个整数n&#xff08;棋盘n*n&#xff0c;n确保是2的幂次&#xff0c;n<64&#xff09; 第二行&#xff0c;两个整数…...

Django的介绍

Django是一个高级的Python Web框架&#xff0c;它鼓励快速开发和干净、实用的设计。Django遵循MVC设计模式&#xff0c;即模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和控制器&#xff08;Controller&#xff09;&#xff0c;并提供了一个即时可用的…...

【Spring工具插件】lombok使用和EditStarter插件

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 引入 一&#xff1a;lombok介绍 1&#xff1a;引入依赖 2&#xff1a;使用 3&#xff1a;原理 4&…...

掌控时间,成就更好的自己

在个人成长的道路上&#xff0c;时间管理是至关重要的一环。有效的时间管理能够让我们更加高效地完成任务&#xff0c;实现自己的目标&#xff0c;不断提升自我。 时间对每个人都是公平的&#xff0c;一天只有 24 小时。然而&#xff0c;为什么有些人能够在有限的时间里做出卓…...

Ruby On Rails 笔记2——表的基本知识

Active Record Basics — Ruby on Rails Guides Active Record Migrations — Ruby on Rails Guides 原文链接自取 1.Active Record是什么&#xff1f; Active Record是MVC模式中M的一部分&#xff0c;是负责展示数据和业务逻辑的一层&#xff0c;可以帮助你创建和使用Ruby…...

【AI系统】EfficientNet 系列

EfficientNet 系列 本文主要介绍 EffiicientNet 系列&#xff0c;在之前的文章中&#xff0c;一般都是单独增加图像分辨率或增加网络深度或单独增加网络的宽度&#xff0c;来提高网络的准确率。而在 EfficientNet 系列论文中&#xff0c;会介绍使用网络搜索技术(NAS)去同时探索…...

【Python小白|Python内置函数学习2】Python有哪些内置函数?不需要导入任何模块就可以直接使用的!现在用Python写代码的人还多吗?

【Python小白|Python内置函数学习2】Python有哪些内置函数&#xff1f;不需要导入任何模块就可以直接使用的&#xff01;现在用Python写代码的人还多吗&#xff1f; 【Python小白|Python内置函数学习2】Python有哪些内置函数&#xff1f;不需要导入任何模块就可以直接使用的&a…...

蓝桥杯分治

P1226 【模板】快速幂 题目描述 给你三个整数 &#x1d44e;,&#x1d44f;,&#x1d45d;a,b,p&#xff0c;求 &#x1d44e;&#x1d44f; mod &#x1d45d;abmodp。 输入格式 输入只有一行三个整数&#xff0c;分别代表 &#x1d44e;,&#x1d44f;,&#x1d45d;a,b,p。…...

YOLOv8实战无人机视角目标检测

本文采用YOLOv8作为核心算法框架&#xff0c;结合PyQt5构建用户界面&#xff0c;使用Python3进行开发。YOLOv8以其高效的实时检测能力&#xff0c;在多个目标检测任务中展现出卓越性能。本研究针对无人机目标数据集进行训练和优化&#xff0c;该数据集包含丰富的无人机目标图像…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...