登陆页面模板

简单好看的登陆页面 vue项目代码 可忽略js部分

先来个效果图

请添加图片描述

<template><div class="login"><div class="content"><p >账户密码登录</p><div class="unit"><label class="label">用户名</label><div class="input"><input type="text" placeholder="请输入用户名" maxlength="20" v-model="form.name"></div></div><div class="unit"><label class="label">密码</label><div class="input"><input type="password" placeholder="请输入密码" maxlength="20" autocomplete="off" v-model="form.password"></div></div><div class="unit"><label class="label">验证码</label><div class="input"><input type="text" placeholder="请输入验证码" id="randCode" name="randCode" maxlength="4"><img id="randCodeImg" class="randCode" src="../assets/img/randImg.jpg"></div></div><el-button type="primary" @click="submitLogin" :loading="loading">登录</el-button></div></div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { Login } from "@/api/index.js";
import { useRouter } from "vue-router";
const $router=useRouter()
const form = reactive({name: '',password: '',code:''
})async function submitLogin() {try {const { data } = await Login(form)console.log(data);if(data.respCode=='0000'){$router.push('/home')}} catch (error) {} finally {}
}</script>
<style lang="scss" scoped>
.login{width: 100vw;height: 95vh;background-image: url('../assets/img/10001.jpg');background-repeat: no-repeat;background-size: 100% 100%;display: flex;justify-content: center;align-items: center;.content{width: 432px;height: 480px;background: #fff;border-radius: 4px;cursor: pointer;padding: 64px 32px;box-sizing: border-box;p{margin-bottom: 20px;font-size: 16px;font-weight: 700;}.unit {position: relative;margin-bottom: 25px;.label {font-size: 14px;color: #ccc;}.input {position: relative;input {border: 0 none;border-bottom: 1px solid #e3e3e3;border-radius: 5px;user-select: none;outline: none;font-size: 16px;width: 100%;background: none;color: #000;display: block;font-size: 16px;padding: 10px 15px;box-sizing: border-box;}}.randCode {width: 100px;height: 30px;position: absolute;top: 50%;margin-top: -14px;right: 5px;vertical-align: middle;cursor: pointer;}}.el-button{width: 100%;}}
}
</style>

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

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

相关文章

Hadoop学习总结(MapReduce的数据去重)

现在假设有两个数据文件 file1.txtfile2.txt2018-3-1 a 2018-3-2 b 2018-3-3 c 2018-3-4 d 2018-3-5 a 2018-3-6 b 2018-3-7 c 2018-3-3 c2018-3-1 b 2018-3-2 a 2018-3-3 b 2018-3-4 d 2018-3-5 a 2018-3-6 c 2018-3-7 d 2018-3-3 c 上述文件 file1.txt 本身包含重复数据&…

汇编-PROTO声明过程

64位汇编 64 模式中&#xff0c;PROTO 伪指令指定程序的外部过程&#xff0c;示例如下&#xff1a; ExitProcess PROTO ;指定外部过程&#xff0c;不需要参数.code main PROCmov ebx, 0FFFFFFFFh mov ecx,0 ;结束程序call ExitProcess ;调用外部过程main ENDP END 32位…

手把手云开发小程序-(四)-uniclould增删改查业务开发

一&#xff0c;导入uView 在开发小程序的时候&#xff0c;我习惯使用uView这个ui库。主要是直接用当然比自己写省时间。 它的官网&#xff1a;uView - 多平台快速开发的UI框架 - uni-app UI框架 (gitee.io) 导入&#xff1a; npm install uview-ui2.0.31然后按照官网进行配…

UltraCompare 23 for Mac文件对比工具

UltraCompare是一款功能强大的文件比较和合并工具&#xff0c; 以下是它的特色介绍&#xff1a; 多种文件格式支持&#xff1a;UltraCompare支持比较和合并多种文件格式&#xff0c;包括文本文件、二进制文件、office文档、PDF文件等。 文件差异高亮显示&#xff1a;UltraComp…

内测分发平台的合作生态和生态效应如何

大家好&#xff0c;我是咕噜-凯撒&#xff0c;随着移动互联网和智能设备的快速发展&#xff0c;越来越多的开发者和企业开始关注产品的质量和体验。而内测分发平台则成为了一种重要的工具&#xff0c;能够帮助他们更好地测试、优化和推广产品。在此过程中&#xff0c;内测分发平…

特殊企业信息轻松查询:特殊企业基本信息查询API的实用性探讨

引言 在当今数字化时代&#xff0c;企业管理和决策往往取决于有效获取和分析关键信息。对于特殊企业&#xff0c;如香港公司、社会组织、律所、事业单位、基金会和新机构&#xff0c;获取准确、及时的基本信息至关重要。在这个背景下&#xff0c;特殊企业基本信息查询API正逐渐…

〔004〕虚幻 UE5 像素流部署

✨ 目录 ▷ 启用像素流插件▷ 打包项目▷ 下载环境包▷ 手动下载▷ 安装信令服务器环境▷ 启动信令服务器▷ 设置启动参数▷ 启动程序▷ 网页运行▷ 开启触控界面▷ 启用像素流插件 打开虚幻启动程序,选择 编辑 后点击 插件在插件列表中搜索 pixel streaming 关键字,勾选后重…

springcloud宿舍管理系统源码

开发技术&#xff1a; jdk1.8&#xff0c;mysql5.7&#xff0c;idea&#xff0c;vscode springcloud springboot mybatis vue elementui 功能介绍&#xff1a; 用户端&#xff1a; 登录注册 首页展示轮播&#xff0c;公告&#xff0c;报修&#xff0c;晚归登记&#xff0…

提升抖音小店服务分:优化策略与实操指南

抖音小店服务分是抖音平台为评估和提升小店服务质量而设立的一项指标。它通过对小店在订单管理、售后服务、物流管理等多个方面的表现进行评估和计算&#xff0c;为小店提供一个可衡量的服务质量指标。提高抖音小店服务分数对于增加用户信任度、提升销售额和增加曝光度都非常重…

第十七章 Java链接数据库

目录 1.登录MySQL 2.创建库和表 3.使用Java命令查询数据库操作 4.右击——点击“Build Path”——选择第四个——找到包的位置——导入成功 一、创建java项目 1.注册驱动 2.获取链接 3.获取statment对象 4.执行sql语句返回结果集 5.遍历结果集 6.关闭连接释放资源 封装…

Linux:设置Ubuntu的root用户密码

执行以下命令&#xff1a; 给root用户设置密码 sudo passwd 输入两次密码 切换root su root 退出root用户 exit

windows根据已有的安卓签名文件获取MD5签名

windows根据已有的安卓签名文件获取MD5签名 0 现状 uniapp 本机号码一键登录需要MD5的&#xff0c;现有的签名文件但是只有SHA1和SHA256 查看SHA1和SHA256 keytool -list -v -keystore [你的.keystore文件]1 前提 已有生成签名文件的环境 搭建Openssl环境&#xff0c;设置…

0基础能不能转行做网络安全?网络安全人才发展路线

最近有同学在后台留言&#xff0c;0基础怎么学网络安全&#xff1f;0基础可以转行做网络安全吗&#xff1f;以前也碰到过类似的问题&#xff0c;想了想&#xff0c;今天简单写一下。 我的回答是先了解&#xff0c;再入行。 具体怎么做呢&#xff1f; 首先&#xff0c;你要确…

idea 2023 安装配置 Gradle8.4

官网&#xff1a;https://gradle.org 下载 Gradle8.4 https://gradle.org/releases/ 解压到本地&#xff0c;到 gradle-8.4\init.d 目录下新建文件&#xff1a;init.gradle 这里有个坑&#xff0c;编译报http协议安全的问题&#xff0c;解决办法&#xff0c;加入&#xff1…

Android7.1 高通平台 修改系统默认语言

客户需求&#xff1a;修改系统默认语言为英文&#xff08;美国&#xff09; 源码位置&#xff1a;/build/tools/buildinfo.sh 只需修改 ro.product.locale的值即可&#xff0c;如下图&#xff1a;

【Java】定时器的简单应用

在写代码的过程中&#xff0c;如果我们遇到了隔一段时间就要进行一项任务时&#xff0c;采用定时器会提高我们的效率。下面对定时器的使用进行简单说明 1、应用说明 首先我们要创建一个Timer类 Timer timer new Timer(); 然后在timer中调用schedule()方法添加任务 timer.…

redis运维(十三) hash哈希

一 哈希 ① 定义 hash&#xff1a; 散列说明&#xff1a;key对应是值是键值对[python中的字典],其中键在redis中叫field.形如&#xff1a;value[{field1,value1},...{fieldN,valueN}],值本身又是一种键值对结构 ② 优点和缺点 wzj_height 180wzj_age 18等价 -->…

Confluence Server Webwork 预身份验证 OGNL 注入 (CVE-2021-26084)

漏洞描述 Confluence 是由澳大利亚软件公司 Atlassian 开发的基于 Web 的企业 wiki。 存在一个 OGNL 注入漏洞&#xff0c;允许未经身份验证的攻击者在 Confluence Server 或 Data Center 实例上执行任意代码。 漏洞环境及利用 搭建docker环境 Confluence搭建见前文 Atlas…

高效聚合 | AIRIOT智慧虚拟电厂管理解决方案

传统的电力供应模式主要依靠大型发电厂和电网进行能源传输和分配&#xff0c;但这种模式会导致能源浪费、环境污染等问题&#xff0c;往往存在如下的运维问题和管理痛点&#xff1a; 资源整合能力差&#xff1a;传统电力供应模式无法集成和整合分散的电力资源&#xff0c;包括…

深度学习动物识别 - 卷积神经网络 机器视觉 图像识别 计算机竞赛

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…