当前位置: 首页 > 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;该数据集包含丰富的无人机目标图像…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

HTTPS证书一年多少钱?

HTTPS证书作为保障网站数据传输安全的重要工具&#xff0c;成为众多网站运营者的必备选择。然而&#xff0c;面对市场上种类繁多的HTTPS证书&#xff0c;其一年费用究竟是多少&#xff0c;又受哪些因素影响呢&#xff1f; 首先&#xff0c;HTTPS证书通常在PinTrust这样的专业平…...