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

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登录界面样式

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

windows C#-定义抽象属性

以下示例演示如何定义抽象属性。 抽象属性声明不提供属性访问器的实现&#xff0c;它声明该类支持属性&#xff0c;而将访问器实现留给派生类。 以下示例演示如何实现从基类继承抽象属性。 此示例由三个文件组成&#xff0c;其中每个文件都单独编译&#xff0c;产生的程序集由…...

ERROR: KeeperErrorCode = NoNode for /hbase/master

原因分析 通过上面的情景模拟&#xff0c;我们可以看到报错的原因在于zookeeper中出现问题&#xff0c;可能是zookeeper中的/hbase/master被删除&#xff0c;或者是在hbase集群启动之后重新安装了zookeeper&#xff0c;导致zookeeper中的/hbase/master节点数据异常。 1. 停止…...

Deepin 23 踩坑记

&#xff08;首发地址&#xff1a;学习日记 https://www.learndiary.com/2024/12/deepin23-questions/&#xff09; Deepin 23 是由统信软件技术有限公司牵头开发一款开源 Linux 桌面操作系统&#xff08;参考链接1&#xff09;&#xff0c;从2022年发布预览版&#xff08;参考…...

mysql笔记——索引

索引 InnoDB采用了B树索引结构。 相比于二叉树&#xff0c;层级更少&#xff0c;搜索效率高。 B树中叶子节点和非叶节点都会存储数据&#xff0c;导致段页式存储中一页存储的键值减少&#xff0c;指针也会减少&#xff0c;要同样保存大量数据&#xff0c;只能增加树的高度&a…...

考研数据结构——简答题总结

数据结构的4种基本结构及特点&#xff1a; 数组&#xff08;Array&#xff09;&#xff1a; 特点&#xff1a;数组是一种线性数据结构&#xff0c;使用连续的内存空间存储元素&#xff0c;可以通过索引直接访问任意位置的元素。优点&#xff1a;访问速度快&#xff0c;因为元…...

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安装 这里不再赘叙&#xff0c;具体安装请参考官网 Helm | 快速入门指南 二、安装mysql 1、拉取镜像 #添加仓库 helm repo add bitnami https://charts.bitnami.c…...

嵌入式基础:Linux C语言:Day7

重点&#xff1a; strlen()函数\strcpy()函数\strcat实现\strcmp()实现 数组的清空&#xff1a;bzero函数、memset函数 一、字符数组 <1> 概念 字符数组本质上就是一个数组&#xff0c;保存一个个字符&#xff0c;也一般用来保存字符串 字符串由多个字符组成的一个字符…...

Tablesaw封装Plot.ly实现数据可视化

上文介绍tablesaw的数据处理功能&#xff0c;本文向你展示其数据可视化功能&#xff0c;并通过几个常用图表示例进行说明。 Plot.ly包装 可视化是数据分析的重要组成部分&#xff0c;无论你只是“查看”新数据集还是验证机器学习算法的结果。Tablesaw是一个开源、高性能的Java…...

RAG与Embedding:现代NLP的核心技术

本篇文章简单梳理我在了解RAG以及Embedding技术时的想法&#xff0c;仅供参考 文章目录 1. 引言背景为什么要关注RAG与Embedding技术 2. 基础概念与原理2.1 什么是RAG (Retrieval-Augmented Generation)定义工作流程优点与适用场景 2.2 什么是Embedding定义作用 3. Embedding在…...

力扣每日一题 - 1812. 判断国际象棋棋盘中一个格子的颜色

题目 还需要你前往力扣官网查看详细的题目要求 地址 1.给你一个坐标 coordinates &#xff0c;它是一个字符串&#xff0c;表示国际象棋棋盘中一个格子的坐标。下图是国际象棋棋盘示意图。2.如果所给格子的颜色是白色&#xff0c;请你返回 true&#xff0c;如果是黑色&#xff…...

Map 那些事儿

1. map 的基本结构 Go 的 map 是一种哈希表&#xff0c;其核心思想是通过哈希函数将键映射到某个位置&#xff08;桶&#xff09;以存储对应的值。它主要包含以下关键部分&#xff1a; •桶&#xff08;bucket&#xff09;&#xff1a;存储键值对的容器&#xff0c;map 中的元…...

GCP Case:MountKirk Games

游戏后端 根据游戏活动动态放大或缩小。 连接到托管的nos0l数据库服务。 运行定制的linux发行版。 游戏分析平台 根据游戏活动来扩大或缩小规模直接处理来自游戏服务器的传入数据。 处理由于移动网络缓慢而迟到的数据。 通过sql查询来访问至少10tb的历史数据 处理由用户…...

[创业之路-187]:《华为战略管理法-DSTE实战体系》-1-从UTStarcom的发展历程,如何辩证的看企业初期发展太顺利中的危机

目录 一、UTStarcom&#xff08;UT斯达康&#xff09;的发展历程 1、创立与初期发展 2、快速成长与上市 3、技术创新与业务拓展 4、战略调整与持续发展 二、从UTStarcom的发展历程&#xff0c;如何辩证的看企业初期发展太顺利中的危机 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 &#xff0c;返回 和为 n 的完全平方数的最少数量 。 完全平方数 是一个整数&#xff0c;其值等于另一个整数的平方&#xff1b;换句话说&#xff0c;其值等于一个整数自乘的积。例如&#xff0c;1、4、9 和 16 都是完全平方数&#xff0c;而 3 和 11 不是。 …...

Scala 隐式转换

object test {//复习隐式转换&#xff1a;//隐式转换&#xff1a;编译器 偷偷地&#xff0c;自动地帮我们把一种数据转换为另一种类型//例如&#xff1a;int --> double//它有失败的时候&#xff08;double --> int&#xff09;&#xff0c;有成功的时候//当它转换失败的…...

K8S命令部署后端(流水线全自动化部署)

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

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 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…...

AI语音助手的Python实现

引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...

上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

Python网页自动化Selenium中文文档

1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API&#xff0c;让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API&#xff0c;你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...