用un-app写的动漫风格的登录界面

news2024/12/25 22:29:33

动漫风格的的登录、注册界面模板,使用uni-app编写,直接复制粘贴即可。

在这里插入图片描述
在这里插入图片描述

废话不多说,代码如下:

login.vue文件

<template>
	<view class="content">
		<view class="tab-box">
			<text class="cell-tab" @click="tabChange(0)" :class="tabIndex==0?'active':''">登录</text>
			<text class="cell-tab" @click="tabChange(1)" :class="tabIndex==1?'active':''">注册</text>
		</view>
		<view class=" head-bg">
			<image mode="heightFix" :src="bg">
			</image>
		</view>
		<view class="form-box">
			<view class="row-input">
				<image  :src="account">
				</image>
				<input placeholder="用户名" maxlength="12" />
			</view>
			<view class="row-input" v-if="tabIndex==0?false:true">
				<image  :src="code">
				</image>
				<input placeholder="短信验证码" maxlength="6" />
				<view class="code">
					<text>获取验证码</text>
				</view>
			</view>
			<view class="row-input">
				<image  :src="password">
				</image>
				<input placeholder="密码" password maxlength="18" />
			</view>
		</view>
		<view class="login-btn">
			<text>{{tabIndex==0?'登录':'注册'}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				bg: "",
				account: "",
				password: "",
				code: ""
			}
		},
		methods: {
			// tab切换
			tabChange(id) {
				this.tabIndex = id
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #222e3c;
	}

	.tab-box {
		padding-left: 40rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 100rpx;

		.cell-tab {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			font-size: 35rpx;
			color: #69727b;
		}

		.active {
			color: #a1a7ad;
			font-size: 40rpx;
		}
	}

	.head-bg {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		width: 100%;
		height: 30vh;

		image {
			width: 399rpx;
			height: 324rpx;
		}
	}

	.form-box {
		margin: 0 40rpx;
		border-radius: 15rpx;
		border: 1rpx solid #222427;
		box-sizing: border-box;
		background-color: #FFFFFF;

		.row-input {
			margin: 0 40rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1rpx solid #eaeaea;
			height: 120rpx;
			font-size: 30rpx;

			image {
				flex-shrink: 0;
				margin-right: 30rpx;
				width: 38rpx;
				height: 40rpx;
			}

			input {
				flex: 1;
				width: 400rpx;
				color: #818181;
			}

			.code {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 60rpx;
				width: 180rpx;
				font-size: 26rpx;
				border-radius: 10rpx;
				border: 1rpx solid #eaeaea;
				color: #818181;
			}
		}
	}

	.login-btn {
		margin: 40rpx 80rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		border-radius: 10rpx;
		background-color: #54606e;
		color: #cbd0d6;
	}
</style>

素材
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2264838.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Pytorch | 从零构建ParNet/Non-Deep Networks对CIFAR10进行分类

Pytorch | 从零构建ParNet/Non-Deep Networks对CIFAR10进行分类 CIFAR10数据集ParNet架构特点优势应用 ParNet结构代码详解结构代码代码详解SSEParNetBlock 类DownsamplingBlock 类FusionBlock 类ParNet 类 训练过程和测试结果代码汇总parnet.pytrain.pytest.py 前面文章我们构…

【服务器】linux服务器管理员查看用户使用内存情况

【服务器】linux服务器管理员查看用户使用硬盘内存情况 1、查看所有硬盘内存使用情况 df -h2、查看硬盘挂载目录下所有用户内存使用情况 du -sh /public/*3、查看某个用户所有文件夹占用硬盘内存情况 du -sh /public/zhangsan/*

[搜广推]王树森推荐系统——其他召回通道

地理位置召回 GeoHash召回 想法&#xff1a;用户可能对附近发生的事感兴趣 方法&#xff1a;对经纬度的编码&#xff0c;地图上一个长方形区域 索引&#xff1a;GeoHash -> 优质笔记列表(按时间倒排) 这条召回通道没有个性化 同城召回 想法&#xff1a;用户可能对同…

重温设计模式--外观模式

文章目录 外观模式&#xff08;Facade Pattern&#xff09;概述定义 外观模式UML图作用 外观模式的结构C 代码示例1C代码示例2总结 外观模式&#xff08;Facade Pattern&#xff09;概述 定义 外观模式是一种结构型设计模式&#xff0c;它为子系统中的一组接口提供了一个统一…

OpenCV学习——图像融合

import cv2 as cv import cv2 as cvbg cv.imread("test_images/background.jpg", cv.IMREAD_COLOR) fg cv.imread("test_images/forground.png", cv.IMREAD_COLOR)# 打印图片尺寸 print(bg.shape) print(fg.shape)resize_size (1200, 800)bg cv.resize…

ECharts热力图-笛卡尔坐标系上的热力图,附视频讲解与代码下载

引言&#xff1a; 热力图&#xff08;Heatmap&#xff09;是一种数据可视化技术&#xff0c;它通过颜色的深浅变化来表示数据在不同区域的分布密集程度。在二维平面上&#xff0c;热力图将数据值映射为颜色&#xff0c;通常颜色越深表示数据值越大&#xff0c;颜色越浅表示数…

进程间关系与守护进程

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 进程间关系与守护进程 收录于专栏[Linux学习] 本专栏旨在分享学习Linux的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1. 进程组 什…

LightGBM分类算法在医疗数据挖掘中的深度探索与应用创新(上)

一、引言 1.1 医疗数据挖掘的重要性与挑战 在当今数字化医疗时代,医疗数据呈爆炸式增长,这些数据蕴含着丰富的信息,对医疗决策具有极为重要的意义。通过对医疗数据的深入挖掘,可以发现潜在的疾病模式、治疗效果关联以及患者的健康风险因素,从而为精准医疗、个性化治疗方…

【文档搜索引擎】缓冲区优化和索引模块小结

开机之后&#xff0c;首次制作索引会非常慢&#xff0c;但后面就会快了 重启机器&#xff0c;第一次制作又会非常慢 这是为什么呢&#xff1f; 在 parserContent 里面&#xff0c;我们进行了一个读文件的操作 计算机读取文件&#xff0c;是一个开销比较大的操作&#xff0c; …

html+css网页设计 旅游 移动端 雪花旅行社4个页面

htmlcss网页设计 旅游 移动端 雪花旅行社4个页面 网页作品代码简单&#xff0c;可使用任意HTML辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 …

3 JDK 常见的包和BIO,NIO,AIO

JDK常见的包 java.lang:系统基础类 java.io:文件操作相关类&#xff0c;比如文件操作 java.nio:为了完善io包中的功能&#xff0c;提高io性能而写的一个新包 java.net:网络相关的包 java.util:java辅助类&#xff0c;特别是集合类 java.sql:数据库操作类 IO流 按照流的流向分…

从零创建一个 Django 项目

1. 准备环境 在开始之前&#xff0c;确保你的开发环境满足以下要求&#xff1a; 安装了 Python (推荐 3.8 或更高版本)。安装 pip 包管理工具。如果要使用 MySQL 或 PostgreSQL&#xff0c;确保对应的数据库已安装。 创建虚拟环境 在项目目录中创建并激活虚拟环境&#xff…

ubuntu20.04安装imwheel实现鼠标滚轮调速

ubuntu20.04安装imwheel实现鼠标滚轮调速 Ubuntu 系统自带的设置中仅具备调节鼠标速度的功能&#xff0c;而无调节鼠标滚轮速度的功能。其默认的鼠标滚轮速度较为缓慢&#xff0c;在查看文档时影响尚可接受&#xff0c;但在快速浏览网页时&#xff0c;滚轮速度过慢会给用户带来…

GitLab的安装与卸载

目录 GitLab安装 GitLab使用 使用前可选操作 修改web端口 修改Prometheus端口 使用方法 GitLab的卸载 环境说明 系统版本 CentOS 7.2 x86_64 软件版本 gitlab-ce-10.8.4 GitLab安装 Gitlab的rpm包集成了它需要的软件&#xff0c;简化了安装步骤&#xff0c;所以直接…

简单工厂模式和策略模式的异同

文章目录 简单工厂模式和策略模式的异同相同点&#xff1a;不同点&#xff1a;目的&#xff1a;结构&#xff1a; C 代码示例简单工厂模式示例&#xff08;以创建图形对象为例&#xff09;策略模式示例&#xff08;以计算价格折扣策略为例&#xff09;UML区别 简单工厂模式和策…

脑肿瘤检测数据集,对9900张原始图片进行YOLO,COCO,VOC格式的标注

脑肿瘤检测数据集&#xff0c;对9900张原始图片进行YOLO&#xff0c;COCO&#xff0c;VOC格式的标注 数据集分割 训练组 70&#xff05; 6930图片 有效集 20&#xff05; 1980图片 测试集 10&#xff05; 990图片 预处理 静态裁剪&#xff1a; 24-82&…

YOLOv8 | 训练自定义数据集

目录 1 处理数据集1.1 数据集格式介绍1.2 划分数据集1.3 在 YOLOv8 中配置数据集 2 训练 YOLOv8 模型2.1 模型训练代码2.2 开启 TensorBoard 若尚未部署 YOLOv8&#xff0c;则可参考这篇博客&#xff1a; YOLOv8 | Windows 系统下从零开始搭建 YOLOv8 项目环境 1 处理…

Java设计模式 —— 【结构型模式】外观模式详解

文章目录 概述结构案例实现优缺点 概述 外观模式又名门面模式&#xff0c;是一种通过为多个复杂的子系统提供一个一致的接口&#xff0c;而使这些子系统更加容易被访问的模式。该模式对外有一个统一接口&#xff0c;外部应用程序不用关心内部子系统的具体的细节&#xff0c;这…

可编辑99PPT | 智能工厂整体规划方案及实施细部方案

荐言分享&#xff1a;智能工厂是利用物联网、大数据、人工智能等先进技术&#xff0c;实现生产过程自动化、智能化和柔性化的现代工厂。本整体规划方案旨在通过整合信息技术、自动化技术、人工智能技术和物联网技术&#xff0c;构建一个高效、灵活、绿色、可持续的生产环境&…

Allegro17.4创建异形焊盘速通

Allegro17.4创建异形焊盘速通 打开Padstack Editor 17.4&#xff0c;新建焊盘&#xff0c;以标贴焊盘为例: 该标贴焊盘是在底面&#xff0c;选择END LAYRE &#xff0c;选择 Shape symbol Geometry&#xff0c;Shape symbol选择框右边有选择键&#xff0c;跳到Library Shape S…