uni-app登录界面样式
非常简洁的登录、注册界面模板,使用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"…...
windows C#-定义抽象属性
以下示例演示如何定义抽象属性。 抽象属性声明不提供属性访问器的实现,它声明该类支持属性,而将访问器实现留给派生类。 以下示例演示如何实现从基类继承抽象属性。 此示例由三个文件组成,其中每个文件都单独编译,产生的程序集由…...
ERROR: KeeperErrorCode = NoNode for /hbase/master
原因分析 通过上面的情景模拟,我们可以看到报错的原因在于zookeeper中出现问题,可能是zookeeper中的/hbase/master被删除,或者是在hbase集群启动之后重新安装了zookeeper,导致zookeeper中的/hbase/master节点数据异常。 1. 停止…...
Deepin 23 踩坑记
(首发地址:学习日记 https://www.learndiary.com/2024/12/deepin23-questions/) Deepin 23 是由统信软件技术有限公司牵头开发一款开源 Linux 桌面操作系统(参考链接1),从2022年发布预览版(参考…...
mysql笔记——索引
索引 InnoDB采用了B树索引结构。 相比于二叉树,层级更少,搜索效率高。 B树中叶子节点和非叶节点都会存储数据,导致段页式存储中一页存储的键值减少,指针也会减少,要同样保存大量数据,只能增加树的高度&a…...
考研数据结构——简答题总结
数据结构的4种基本结构及特点: 数组(Array): 特点:数组是一种线性数据结构,使用连续的内存空间存储元素,可以通过索引直接访问任意位置的元素。优点:访问速度快,因为元…...
Qt Creator 里面设置MSVC 为 utf-8
在使用 Qt Creator 和 MSVC(Microsoft Visual C++)编译器进行开发时,我们可能会遇到中文乱码的问题。这通常是由于编码设置不正确导致的。 在 Qt Creator 中,你可以通过以下步骤设置默认编码为 UTF-8: 打开 Qt Creator,选择菜单栏中的“工具”(Tools) > “选项”(Opti…...
Java阶段三06
第3章-第6节 一、知识点 理解MVC三层模型、理解什么是SpringMVC、理解SpringMVC的工作流程、了解springMVC和Struts2的区别、学会使用SpringMVC封装不同请求、接收参数 二、目标 理解MVC三层模型 理解什么是SpringMVC 理解SpringMVC的工作流程 学会使用SpringMVC封装请求…...
Helm安装Mysql8主从复制集群
目录 一、Helm安装 二、安装mysql 1、拉取镜像 2、修改配置文件 3、创建mysql-secret 4、安装 一、Helm安装 这里不再赘叙,具体安装请参考官网 Helm | 快速入门指南 二、安装mysql 1、拉取镜像 #添加仓库 helm repo add bitnami https://charts.bitnami.c…...
嵌入式基础:Linux C语言:Day7
重点: strlen()函数\strcpy()函数\strcat实现\strcmp()实现 数组的清空:bzero函数、memset函数 一、字符数组 <1> 概念 字符数组本质上就是一个数组,保存一个个字符,也一般用来保存字符串 字符串由多个字符组成的一个字符…...
Tablesaw封装Plot.ly实现数据可视化
上文介绍tablesaw的数据处理功能,本文向你展示其数据可视化功能,并通过几个常用图表示例进行说明。 Plot.ly包装 可视化是数据分析的重要组成部分,无论你只是“查看”新数据集还是验证机器学习算法的结果。Tablesaw是一个开源、高性能的Java…...
RAG与Embedding:现代NLP的核心技术
本篇文章简单梳理我在了解RAG以及Embedding技术时的想法,仅供参考 文章目录 1. 引言背景为什么要关注RAG与Embedding技术 2. 基础概念与原理2.1 什么是RAG (Retrieval-Augmented Generation)定义工作流程优点与适用场景 2.2 什么是Embedding定义作用 3. Embedding在…...
力扣每日一题 - 1812. 判断国际象棋棋盘中一个格子的颜色
题目 还需要你前往力扣官网查看详细的题目要求 地址 1.给你一个坐标 coordinates ,它是一个字符串,表示国际象棋棋盘中一个格子的坐标。下图是国际象棋棋盘示意图。2.如果所给格子的颜色是白色,请你返回 true,如果是黑色ÿ…...
Map 那些事儿
1. map 的基本结构 Go 的 map 是一种哈希表,其核心思想是通过哈希函数将键映射到某个位置(桶)以存储对应的值。它主要包含以下关键部分: •桶(bucket):存储键值对的容器,map 中的元…...
GCP Case:MountKirk Games
游戏后端 根据游戏活动动态放大或缩小。 连接到托管的nos0l数据库服务。 运行定制的linux发行版。 游戏分析平台 根据游戏活动来扩大或缩小规模直接处理来自游戏服务器的传入数据。 处理由于移动网络缓慢而迟到的数据。 通过sql查询来访问至少10tb的历史数据 处理由用户…...
[创业之路-187]:《华为战略管理法-DSTE实战体系》-1-从UTStarcom的发展历程,如何辩证的看企业初期发展太顺利中的危机
目录 一、UTStarcom(UT斯达康)的发展历程 1、创立与初期发展 2、快速成长与上市 3、技术创新与业务拓展 4、战略调整与持续发展 二、从UTStarcom的发展历程,如何辩证的看企业初期发展太顺利中的危机 1、企业初期发展的顺利表现 2、顺…...
高级数据结构-树状数组
介绍 树状数组的推导 两个基础操作 模板-acwing795. 前缀和 #include<bits/stdc.h> using namespace std;const int N 1e610; int c[N]; int lowbit(int x){return x & -x; }int query(int x){int ans 0;for(; x; x - lowbit(x)) ans c[x];return ans; }void add…...
LeetCode279. 完全平方数(2024冬季每日一题 27)
给你一个整数 n ,返回 和为 n 的完全平方数的最少数量 。 完全平方数 是一个整数,其值等于另一个整数的平方;换句话说,其值等于一个整数自乘的积。例如,1、4、9 和 16 都是完全平方数,而 3 和 11 不是。 …...
Scala 隐式转换
object test {//复习隐式转换://隐式转换:编译器 偷偷地,自动地帮我们把一种数据转换为另一种类型//例如:int --> double//它有失败的时候(double --> int),有成功的时候//当它转换失败的…...
K8S命令部署后端(流水线全自动化部署)
前言 本文为链接: 云效流水线k8s半自动部署java(保姆级)的补充,本文起初的目的是为了补充完善k8s流水线的全自动化部署,但是也适用于k8s的一键重启,因为使用k8s的web页面容易出现漏点的情况,因此也可以把代码保存为shell脚本,同样可以实现一键重启。关于…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
Web后端基础(基础知识)
BS架构:Browser/Server,浏览器/服务器架构模式。客户端只需要浏览器,应用程序的逻辑和数据都存储在服务端。 优点:维护方便缺点:体验一般 CS架构:Client/Server,客户端/服务器架构模式。需要单独…...
人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent
安全大模型训练计划:基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标:为安全大模型创建高质量、去偏、符合伦理的训练数据集,涵盖安全相关任务(如有害内容检测、隐私保护、道德推理等)。 1.1 数据收集 描…...
Docker拉取MySQL后数据库连接失败的解决方案
在使用Docker部署MySQL时,拉取并启动容器后,有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致,包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因,并提供解决方案。 一、确认MySQL容器的运行状态 …...
Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析
Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么?它的作用是什么? Spring框架的核心容器是IoC(控制反转)容器。它的主要作用是管理对…...
Neko虚拟浏览器远程协作方案:Docker+内网穿透技术部署实践
前言:本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中,跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南,你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案,并结合内网…...
jdbc查询mysql数据库时,出现id顺序错误的情况
我在repository中的查询语句如下所示,即传入一个List<intager>的数据,返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致,会导致返回的id是从小到大排列的,但我不希望这样。 Query("SELECT NEW com…...
AxureRP-Pro-Beta-Setup_114413.exe (6.0.0.2887)
Name:3ddown Serial:FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名:Axure 序列号:8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...
麒麟系统使用-进行.NET开发
文章目录 前言一、搭建dotnet环境1.获取相关资源2.配置dotnet 二、使用dotnet三、其他说明总结 前言 麒麟系统的内核是基于linux的,如果需要进行.NET开发,则需要安装特定的应用。由于NET Framework 是仅适用于 Windows 版本的 .NET,所以要进…...
