当前位置: 首页 > 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脚本,同样可以实现一键重启。关于…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...