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

uni-app登录界面样式

news 来源：原创 2025/7/12 23:06:41

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

在这里插入图片描述

废话不多说，代码如下：

login.vue文件

<template><view class="screen"><view class="screen__content"><view class="login"><view class="login__field"><image class="login__icon" src="../../static/account.png"></image><input type="text" class="login__input" placeholder="User name / Email" maxlength="18"></view><view class="login__field"><image class="login__icon" src="../../static/password.png"></image><input type=" password" class="login__input" placeholder="Password" maxlength="18"></view><button class="button login__submit"><text class="button__text">LOG IN NOW</text><image class="button__icon" src="../../static/right_arrow.png"></image></button></view><view class="social-login"><text>log in</text><view class="social-icons"><image class="social-login__icon" src="../../static/vx.png"></image><image class="social-login__icon" src="../../static/wb.png"></image><image class="social-login__icon" src="../../static/fs.png"></image></view></view></view><view class="screen__background"><text class="screen__background__shape screen__background__shape4"></text><text class="screen__background__shape screen__background__shape3"></text><text class="screen__background__shape screen__background__shape2"></text><text class="screen__background__shape screen__background__shape1"></text></view></view>
</template><script>export default {data() {return {};},methods: {}};
</script><style scoped>.screen {background: linear-gradient(90deg, #5D54A4, #7C78B8);position: relative;height: 100vh;width: 100vw;}.screen__content {z-index: 1;position: relative;height: 100%;}.screen__background {position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 0;-webkit-clip-path: inset(0 0 0 0);clip-path: inset(0 0 0 0);}.screen__background__shape {transform: rotate(45deg);position: absolute;}.screen__background__shape1 {height: 1040rpx;width: 1040rpx;background: #FFF;top: -100rpx;right: 240rpx;border-radius: 0 144rpx 0 0;}.screen__background__shape2 {height: 440rpx;width: 440rpx;background: #6C63AC;top: -344rpx;right: 0;border-radius: 64rpx;}.screen__background__shape3 {height: 1080rpx;width: 380rpx;background: linear-gradient(270deg, #5D54A4, #6A679E);top: -48rpx;right: 0;border-radius: 64rpx;}.screen__background__shape4 {height: 500rpx;width: 300rpx;background: #7E7BB9;bottom: 100rpx;right: -50rpx;border-radius: 120rpx;}.login {width: 640rpx;padding: 60rpx;padding-top: 312rpx;}.login__field {padding: 40rpx 0rpx;position: relative;}.login__icon {position: absolute;top: 60rpx;width: 35rpx;height: 35rpx;color: #7875B5;}.login__input {border: none;border-bottom: 4rpx solid #D1D1D4;background: none;padding: 20rpx;padding-left: 48rpx;font-weight: 700;width: 60%;transition: .2s;}.login__input:active,.login__input:focus,.login__input:hover {outline: none;border-bottom-color: #6A679E;}.login__submit {background: #fff;font-size: 28rpx;margin-top: 60rpx;padding: 32rpx 40rpx;border-radius: 32rpx;border: 2rpx solid #D4D3E8;text-transform: uppercase;font-weight: 700;display: flex;align-items: center;width: 100%;color: #4C489D;box-shadow: 0px 4rpx 4rpx #5C5696;cursor: pointer;transition: .2s;}.login__submit:active,.login__submit:focus,.login__submit:hover {border-color: #6A679E;outline: none;}.button__icon {width: 80rpx;height: 80rpx;margin-left: auto;}.social-login {position: absolute;height: 280rpx;width: 340rpx;text-align: center;bottom: 0rpx;right: 0rpx;color: #fff;}.social-icons {display: flex;align-items: center;justify-content: center;}.social-login__icon {width: 45rpx;height: 45rpx;padding: 20rpx;text-shadow: 0rpx 0rpx 16rpx #7875B5;}
</style>

素材

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

uni-app登录界面样式

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

编程日记 2025/7/12 23:06:41

如何在小米平板5上运行 deepin 23 ？

deepin 23 加入了 ARM64 支持，这里尝试将 deepin 系统刷入平板中，平常使用中，带个笔记本电脑有时候也会嫌比较麻烦，把 Linux 系统刷入平板中既满足了使用需要，又满足了轻便的需求。为什么不使用 Termux ？虽…...

编程日记 2025/7/12 22:44:20

Linux上的C语言编程实践

说明： 这是个人对该在Linux平台上的C语言学习网站笨办法学C上的每一个练习章节附加题的解析和回答 ex1: 在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后运行它看看发生了什么。 vim ex1.c打开 ex1.c 文件。假如我们删除 return 0…...

编程日记 2025/7/12 21:56:31

ubuntu中使用ffmpeg库进行api调用开发

一般情况下，熟悉了ffmpeg的命令行操作，把他当成一个工具来进行编解码啥的问题不大，不过如果要把功能集成进自己的软件中，还是要调用ffmpeg的api才行。 ffmpeg的源码和外带的模块有点太多了，直接用官网别人编译好的库就…...

编程日记 2025/7/12 4:21:09

基于yolov8的SAR影像目标检测系统，支持图像、视频和摄像实时检测【pytorch框架、python源码】

更多目标检测、图像分类识别、目标追踪等项目可看我主页其他文章功能演示： 基于yolov8的SAR影像目标检测系统，支持图像、视频和摄像实时检测【pytorch框架、python源码】_哔哩哔哩_bilibili （一）简介基于yolov8的SAR影像目标…...

编程日记 2025/7/12 13:52:46

【源码】Sharding-JDBC源码分析之SQL中读写分离动态策略、数据库发现规则及DatabaseDiscoverySQLRouter路由的原理

Sharding-JDBC系列 1、Sharding-JDBC分库分表的基本使用 2、Sharding-JDBC分库分表之SpringBoot分片策略 3、Sharding-JDBC分库分表之SpringBoot主从配置 4、SpringBoot集成Sharding-JDBC-5.3.0分库分表 5、SpringBoot集成Sharding-JDBC-5.3.0实现按月动态建表分表 6、【…...

编程日记 2025/7/12 22:02:43

服务器卸载安装的 Node.js

卸载安装的 Node.js 版本，具体步骤取决于你是通过包管理器（如 yum 或 dnf）安装的，还是通过 nvm (Node Version Manager) 安装的。以下是针对这两种情况的指南。通过包管理器卸载 Node.js 如果你是通过 yum 或 dnf 安装的 Node.…...

编程日记 2025/7/12 21:34:21

一键图片提取表格导出为Excel文档工具体验

在日常工作中，我们经常会遇到需要将图片中的表格数据转换为可编辑的Excel文件的情况。这不仅能够提高工作效率，还能减少手动输入数据的错误。本文将介绍一款实用的工具，它能够帮助我们快速实现图片到Excel的转换，同时保持操作的简…...

编程日记 2025/7/12 22:24:22

SpringBoot异常处理

SpringBoot异常处理一、认识异常异常分类： Error: 代表编译和系统错误，不允许捕获Exception: 标准Java库的方法所激发的异常，包含运行异常Runtime_Exception和非运行异常 Non_RuntimeException 的子类Runtime_Exception: 运行时异常。No…...

编程日记 2025/7/12 10:58:42

在 OAuth 2.0 中，refreshToken（刷新令牌）存在的意义

在 OAuth 2.0 中，refreshToken（刷新令牌） 的主要目的是为了提升用户体验和安全性，同时确保访问令牌的有效性。以下是需要使用 refreshToken 的原因： 1. 访问令牌的有限生命周期访问令牌（accessToken&…...

编程日记 2025/7/8 20:58:09

【Redis】壹 —— Redis 介绍

文章目录： 前言一、认识Redis 1. Redis 用途作为数据库作为流引擎二、服务端高并发分布式结构演变 1. 单机架构 2. 应用数据分离架构 3. 应用服务集群架构 4. 读写分离 / 主从分离架构 5. 冷热分离 —— 引入缓存 6. 分库分表 7. 微服务架构 8. …...

编程日记 2025/7/7 21:22:17

【html网页页面010】html+css制作茶品牌文创网页制作含视频元素（7页面附效果及源码）

茶主题品牌文创网页制作 🥤1、写在前面🍧2、涉及知识🌳3、网页效果完整效果(7页)：代码目录结构：page1、主页page2、精品包装page3、茶园一角page4、品牌地带page5、衍生品page6、联X我们page7、视频详情页 &#x1f30…...

编程日记 2025/7/9 11:55:53

【项目实战】基于python+爬虫的电影数据分析及可视化系统

注意：该项目只展示部分功能，如需了解，文末咨询即可。本文目录 1.开发环境2 系统设计 2.1 设计背景2.2 设计内容 3 系统页面展示 3.1 用户页面3.2 后台页面3.3 功能展示视频 4 更多推荐5 部分功能代码 5.1 爬虫代码5.2 电影信息代码 1.开发环…...

编程日记 2025/6/28 19:24:44

K8S命令部署后端（流水线全自动化部署）

前言本文为链接: 云效流水线k8s半自动部署java（保姆级）的补充,本文起初的目的是为了补充完善k8s流水线的全自动化部署,但是也适用于k8s的一键重启,因为使用k8s的web页面容易出现漏点的情况,因此也可以把代码保存为shell脚本,同样可以实现一键重启。关于…...

编程日记 2025/7/12 21:25:08

GPS北斗卫星授时服务器功能是什么？应用是什么？

GPS北斗卫星授时服务器功能是什么？应用是什么？ GPS北斗卫星授时服务器功能是什么？应用是什么？ 摘　要:首先对计算机网络时间同步相关技术进行了介绍,然后阐述了时间同步技术在现代计算机网络中的应用与发展,最后指出时间同步网络…...

编程日记 2025/7/11 20:20:13

学习笔记064——如何手动将jar包导入到maven本地库

文章目录 1、背景：2、方法 1、背景： 有时网络慢的情况， 本地maven库需要导入外部下载的jar包。以便于在项目的pom文件中，直接写dependency写导入依赖。 2、方法在Windows终端中，输入： mvn install:in…...

编程日记 2025/7/12 3:28:23

未来趋势系列篇二：HBM题材解析和股票梳理

文章目录系列文章HBM题材解析环氧塑封电镀液PSPI（光敏性聚酰亚胺）前驱体封装基板其他材料TSV技术封装测试股票梳理系列文章未来趋势系列篇一：AI题材解析和股票梳理 HBM HBM（High Bandwidth Memory，高带宽内存）是一种专为高效能运算设计的新兴高速内存接口技术。它通…...

编程日记 2025/7/10 4:39:33

网卡驱动测试

以下是网卡驱动不同测试类型的具体方法和命令： 1. 功能性测试驱动加载/卸载测试： 方法：加载/卸载网卡驱动，观察日志是否报错。命令： modprobe <driver_name> # 加载驱动 rmmod <driver_name> # 卸载驱动…...

编程日记 2025/7/8 23:27:35

DDR的跨4K问题

参考视频：【深入理解FPGA底层逻辑】、4k边界和outsdanding_哔哩哔哩_bilibili 1、AXI4_FULL突发写一个字节是一个地址， 2、协议规定，把AXI4从机的地址区间从0进行到了4095....每4K进行一次分配所以突发长度的计算如下： 另外AX…...

编程日记 2025/7/9 12:34:09

数据结构---栈（Stack）

1. 简介栈（Stack）是计算机科学中的一种抽象数据类型，它遵循特定的操作顺序，即后进先出（Last In First Out，LIFO）。这意味着最后添加到栈中的元素将是第一个被移除的。栈的基本操作通常包括&am…...

编程日记 2025/7/8 2:00:31

【JavaWeb后端学习笔记】Java上传文件到阿里云对象存储服务

阿里云对象存储 1、创建阿里云对象存储节点2、上传文件2.1 修改项目配置文件2.2 定义一个Properties类获取配置信息2.3 准备一个alioss工具类2.4 创建注册类，将AliOssUtil 注册成Bean2.5 使用AliOssUtil 工具类上传文件2.6 注意事项使用阿里云对象存储服务分为以下…...

编程日记 2025/7/8 22:57:46

Unity3D RPG战斗系统详解

前言设计一个RPG（角色扮演游戏）的战斗系统是游戏开发中的关键环节，它决定了游戏的乐趣和挑战性。在Unity3D中，可以通过多种技术和工具来实现一个功能完善的战斗系统。以下是对RPG战斗系统的技术详解以及代码实现。对惹&#x…...

编程日记 2025/7/8 10:27:52

Spark架构及运行流程

Spark架构图 Driver： 解析用户的应用程序代码，转化为作业(job)。创建SparkContext上下文对象，其负责与资源管理器(ClusterManager)通信，进行资源的申请、任务的分配和监控等。跟踪Executor的执行情况。可通过UI界面查询运行情况。…...

编程日记 2025/7/9 15:03:25

SpringBoot3整合MyBatis

一、MyBatis整合步骤: (1).导入依赖:在Spring Boot项目的构建文件(如pom.xml)中添加MyBatis和数据库驱动的相关依赖。例如，如果使用MySQL数据库，您需要添加MyBatis和MySQL驱动的依赖。 (2).配置数据源:在application.properties或application.yml中配置…...

编程日记 2025/7/10 17:48:57

【计网笔记】习题

物理层不属于物理层接口规范定义范畴的是（C） A. 接口形状 B. 引脚功能 C. 物理地址 D. 信号电平【2023-912】光网络只能通过导向型介质传播。（） 【2017-408】若信道在无噪声情况下的极限数据传输速率不小于信噪比为30dB条件下的…...

编程日记 2025/7/10 23:13:19

力扣56.合并区间

题目描述题目链接56. 合并区间以数组 intervals 表示若干个区间的集合，其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间，并返回一个不重叠的区间数组，该数组需恰好覆盖输入中的所有区间。示例 1： …...

编程日记 2025/7/8 21:45:48

【oracle】大数据删除插入

文章目录引言本文目标 Oracle大数据插入操作插入操作的场景和需求使用并行查询进行数据插入示例代码：创建新表并插入数据解释代码中的关键点性能优化建议 Oracle大数据删除操作删除操作的场景和需求使用游标和批量处理进行数据删除示例代码：批量删除数…...

编程日记 2025/7/9 13:20:41

mysql 双1设置

MySQL 的"双1"设置通常指的是两个配置参数：innodb_flush_log_at_trx_commit 和 sync_binlog。这两个参数都与 MySQL 的数据安全和性能有关。 innodb_flush_log_at_trx_commit：这个参数控制了 InnoDB 引擎中事务日志的刷新频率。它有三个可能的…...

编程日记 2025/7/7 12:05:15

《C++ 赋能 K-Means 聚类算法：开启智能数据分类之旅》

在当今数字化浪潮汹涌澎湃的时代，人工智能无疑是引领科技变革的核心驱动力之一。而在人工智能的广袤天地中，数据分类与聚类作为挖掘数据内在价值、揭示数据潜在规律的关键技术手段，正发挥着前所未有的重要作用。K-Means 聚类算法，…...

编程日记 2025/7/11 11:18:49

用Python开发一个经典贪吃蛇小游戏

Python 是开发小游戏的绝佳工具，借助第三方库，如 pygame，我们可以快速开发一个经典的贪吃蛇游戏。本篇将介绍如何用 Python 实现一个完整的贪吃蛇小游戏。一、游戏设计 1.1 游戏规则玩家通过方向键控制贪吃蛇移动。贪吃蛇吃到食物后会变长，同时得分增加。如果贪吃蛇撞到…...

编程日记 2025/7/8 16:54:52

《大宋豪侠传》客户端源码 + 服务端源码 + 工具源码 + 资源，大小16.3G

《大宋豪侠传》客户端源码服务端源码工具源码资源，大小16.3G 下载地址： 通过网盘分享的文件：【源码】《大宋豪侠传》客户端源码服务端源码工具源码资源，大小16.3G 链接: https://pan.baidu.com/s/1lUf84LzXKB3iM7L-1P…...

编程日记 2025/7/7 9:51:17

使用vue-seamless-scroll实现echarts图表大屏滚动，出现空白间隔的解决方案

一、背景介绍最近的业务开发需求，想要实现echarts图表大屏滚动，小编首先采用vue-seamless-scroll进行实现，结果发现第二屏出现空白间隔，尝试了多种解决方案均不生效，最终选择换一个方案。二、封装的ScrollList组件…...

编程日记 2025/7/8 20:10:25

zsh配置

zsh配置 https://zhuanlan.zhihu.com/p/58073103 $ cat .zshrc If you come from bash you might have to change your $PATH. export PATH H O M E / b i n : / u s r / l o c a l / b i n : HOME/bin:/usr/local/bin: HOME/bin:/usr/local/bin:PATH Path to your oh-my-zs…...

编程日记 2025/7/10 22:09:16

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

废话不多说，代码如下：

相关文章：