基于vue的引入登录界面

 以下是一些常见的登录页面布局:

1. 中心布局 - 登录表单位于页面的中心位置,通常包括用户名输入框、密码输入框、登录按钮等元素。页面背景简洁,以突出登录表单。 - 这种布局常见于大多数网站和应用,简洁明了,用户注意力容易集中在登录操作上。

2. 左右布局 - 将页面分为左右两部分,一侧放置登录表单,另一侧可能会展示一些相关的信息,如网站或应用的介绍、特色功能、安全提示等。 - 这种布局可以在用户登录的同时提供一些额外的有用信息。

3. 顶部导航栏布局 - 页面顶部有导航栏,包含登录、注册等链接,登录表单则在页面主体部分。 - 适合网站或应用具有多个页面和功能,用户可以方便地在登录和其他页面之间切换。

4. 卡片式布局 - 登录表单以卡片的形式呈现,具有明显的边框和阴影,与页面背景形成区分。 - 这种布局可以使登录表单看起来更加突出和独立。

5. 响应式布局 - 能够根据不同设备的屏幕尺寸自动调整布局,以提供最佳的用户体验。在小屏幕设备上,可能会采用单列布局,而在大屏幕设备上则可以采用更复杂的布局方式。

6. 社交媒体快捷登录布局 - 除了常规的用户名和密码登录方式,还提供通过社交媒体账号(如微信、QQ、微博等)快速登录的选项。 - 方便用户选择自己熟悉和便捷的登录方式。

7. 分步登录布局 - 将登录过程分为多个步骤,例如第一步输入用户名,第二步输入密码等,逐步引导用户完成登录。 - 有助于减少用户一次性输入大量信息的压力。

8. 全屏幕布局 - 登录表单占据整个屏幕,提供沉浸式的登录体验,减少干扰。 不同的布局方式各有特点,选择哪种布局取决于网站或应用的设计风格、目标用户群体以及功能需求等因素。

 Login登录页面

<template><div class="login-container"><div class="layer"><div class="some-space"><div class="form"><h2>大数据可视化平台</h2><div class="item"><i class="iconfont icon-user"></i><input autocomplete="off"type="text"class="input"v-model="userName"placeholder="请输入用户名" /></div><div class="item"><i class="iconfont icon-password"></i><input autocomplete="off"type="password"class="input"v-model="userPwd"maxlength="20"@keyup.enter="login"placeholder="请输入密码" /></div><button class="loginBtn":disabled="isLoginAble"@click.stop="login">立即登录</button><div class="tip">默认用户名:admin ,默认密码:123456</div></div></div></div><vue-particles color="#6495ED":particleOpacity="0.7":particlesNumber="80"shapeType="circle":particleSize="4"linesColor="#6495ED":linesWidth="1":lineLinked="true":lineOpacity="0.6":linesDistance="150":moveSpeed="3":hoverEffect="true"hoverMode="grab":clickEffect="true"clickMode="push"></vue-particles><bgAnimation /><modal title="提示":content="modalContent":visible.sync="visible"@confirm="confirm"></modal></div>
</template><script>export default {name: 'Login',components: {},data () {return {userName: 'admin',userPwd: '123456',visible: false,modalContent: '这是一段自定义模态框消息'}},computed: {isLoginAble () {return !(this.userName && this.userPwd);}},created () { },mounted () {},methods: {login () {if (this.userName == 'admin' && this.userPwd == '123456') {this.$router.push({path: '/traffic'})} else {this.$Toast({content: '请输入正确的用户名和密码',type: 'error',// hasClose: true})}},confirm () {this.visible = false;console.log('点击确定')}}
}
</script><style lang="scss" scoped>
.login-container {.layer {position: absolute;height: 100%;width: 100%;position: absolute;height: 100%;width: 100%;background-image: url('../assets/bg-4.jpg');  // 增加这一行设置背景图片background-size: cover;  // 调整背景图片的尺寸以适应容器background-repeat: no-repeat;  // 防止背景图片}#particles-js {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1000;}.some-space {color: white;font-weight: 100;letter-spacing: 2px;position: absolute;top: 50%;left: 50%;z-index: 1001;-webkit-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);-ms-animation: cloud 2s 3s ease-in infinite alternate;-moz-animation: cloud 2s 3s ease-in infinite alternate;-webkit-animation: cloud 2s 3s ease-in infinite alternate;-o-animation: cloud 2s 3s ease-in infinite alternate;-webkit-animation: cloud 2s 3s ease-in infinite alternate;animation: cloud 2s 3s ease-in infinite alternate;.form {width: 460px;height: auto;background: rgba(36, 36, 85, 0.5);margin: 0 auto;padding: 35px 30px 25px;box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);border-radius: 10px;.item {display: flex;align-items: center;margin-bottom: 25px;border-bottom: 1px solid #d3d7f7;i {color: #d3d7f7;margin-right: 10px;}}h2 {text-align: center;font-weight: normal;font-size: 26px;color: #d3d7f7;padding-bottom: 35px;}.input {font-size: 16px;line-height: 30px;width: 100%;color: #d3d7f7;outline: none;border: none;background-color: rgba(0, 0, 0, 0);padding: 10px 0;}.loginBtn {width: 100%;padding: 12px 0;border: 1px solid #d3d7f7;font-size: 16px;color: #d3d7f7;cursor: pointer;background: transparent;border-radius: 4px;margin-top: 10px;&:hover {color: #fff;background: #0090ff;border-color: #0090ff;}}.tip {font-size: 12px;padding-top: 20px;}}}
}input::-webkit-input-placeholder {color: #d3d7f7;
}
input::-moz-placeholder {/* Mozilla Firefox 19+ */color: #d3d7f7;
}
input:-moz-placeholder {/* Mozilla Firefox 4 to 18 */color: #d3d7f7;
}
input:-ms-input-placeholder {/* Internet Explorer 10-11 */color: #d3d7f7;
}@-ms-keyframes cloud {0% {-ms-transform: translate(-50%, -50%);}40% {opacity: 1;}60% {opacity: 1;}100% {-ms-transform: translate(-50%, -40%);}
}
@-moz-keyframes cloud {0% {-moz-transform: translate(-50%, -50%);}40% {opacity: 1;}60% {opacity: 1;}100% {-moz-transform: translate(-50%, -40%);}
}
@-o-keyframes cloud {0% {-o-transform: translate(-50%, -50%);}40% {opacity: 1;}60% {opacity: 1;}100% {-o-transform: translate(-50%, -40%);}
}
@-webkit-keyframes cloud {0% {-webkit-transform: translate(-50%, -50%);}40% {opacity: 1;}60% {opacity: 1;}100% {-webkit-transform: translate(-50%, -40%);}
}
@keyframes cloud {0% {transform: translate(-50%, -50%);}40% {opacity: 1;}60% {opacity: 1;}100% {transform: translate(-50%, -40%);}
}
</style>

 代码结构

修改一个初始化响应期

修改自己对应的响应文件index.js

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

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

相关文章

Kubernetes 为pod指定DNS

在k8s里面&#xff0c;默认创建pod会给pod默认分配一个默认的dns&#xff0c;这个dns是哪来的呢&#xff1f;可不可以改成其他的dns呢&#xff1f; 先进入到pod里面来&#xff0c;可以看到这里面默认设置的DNS服务器&#xff0c;这个服务器地址为10.96.0.10。这个地址是k8s自动…

RFID智能锁控系统在物流安全运输中的应用与效益分析

一、物流锁控系统现状与挑战 1.1 传统锁控系统的局限性 安全性不足&#xff1a;机械锁容易被撬开或钥匙被复制&#xff0c;导致货物在运输过程中面临被盗风险。 无法实时追踪&#xff1a;一旦货物离开发货点&#xff0c;物流公司无法实时监控货物状态&#xff0c;增加了货物…

数据库正则表达式在实际工作中的使用

regexp_like regexp_like 和 not like 都可以用来匹配字符串&#xff0c;但它们在使用方式和功能上有一些关键的区别&#xff1a; regexp_like 功能&#xff1a;用于正则表达式匹配&#xff0c;可以进行复杂的模式匹配。 灵活性&#xff1a;支持正则表达式语法&#xff0c;…

【前端】包管理器:npm、Yarn 和 pnpm 的全面比较

前端开发中的包管理器&#xff1a;npm、Yarn 和 pnpm 的全面比较 在现代前端开发中&#xff0c;包管理器是开发者必不可少的工具。它们不仅能帮我们管理项目的依赖&#xff0c;还能极大地提高开发效率。本文将详细介绍三种主流的前端包管理器&#xff1a;npm、Yarn 和 pnpm&am…

4DRadarSLAM算法复现

文章目录 4D毫米波雷达slam安装依赖包安装依赖的ROS功能包源码编译下载数据集程序运行效果概览4D毫米波雷达slam 4D毫米波雷达SLAM(Simultaneous Localization and Mapping,即同时定位与建图)是一种利用4D毫米波雷达传感器来进行环境感知并构建地图的技术。4D毫米波雷达不仅…

软考五个高级科目怎么选?如何一口气拿下证书!

软考高级包括&#xff1a; 信息系统项目管理师、系统分析师、系统架构设计师、网络规划设计师、系统规划与管理师等五个考试。 一、各科特点&#xff1a; 信息系统项目管理师 特点&#xff1a;主要从事信息系统项目管理方面的工作&#xff0c;要求掌握项目管理的知识体系和实…

CPU pipeline面试题Q3:我们可以任意增加CPU pipeline深度吗?

CPU流水线是提高吞吐量和指令级并行性的常见技术。我们可以任意增加CPU pipeline深度吗&#xff1f; 回答是否定的。 参加面试的工程师应该从以下方面回答这个问题&#xff1a; 1.pipeline需要在每个stage之间保持平衡。否则&#xff0c;stage之间将出现瓶颈。通常&#xff0c;…

vue3 路由跳转新页面并传递参数与获取参数

打开新标签页面传递参数&#xff08;useRouter &#xff09; import { useRouter } from vue-router const uRouter useRouter() let page uRouter.resolve({path:/mapRollerShutter,query:{type:Split,key:1}})window.open(page.href,_blank)页面接收&#xff08;useRoute …

【ROS2】中级:Launch -将启动文件集成到 ROS 2 包中

目标&#xff1a;向 ROS 2 包添加一个启动文件 教程级别&#xff1a;中级 时间&#xff1a;10 分钟 目录 先决条件 背景 任务 1. 创建一个包2. 创建用于存放启动文件的结构3. 编写启动文件4. 建立和运行启动文件 文档 先决条件 您应该已经学习了如何创建 ROS 2 包的教程。 始终…

【FreeRTOS】configLIBRARY_MAX_SYSCALL_INTERRUPT_PRIORITY宏解析

1、今天在调试串口时&#xff0c;发现在中断调用xQueueSendFromISR后就会出现系统卡死 经过百度和谷歌后发现原来如此&#xff1a; 2、在FreeRTOSConfig.h中有个宏&#xff0c; #define configLIBRARY_MAX_SYSCALL_INTERRUPT_PRIORITY 2 这个宏是用来规定FreeRTOS能干预的…

一篇教会你 位置式PID 在写码中的应用。

前言&#xff1a;编写不易&#xff0c;仅供学习&#xff0c;参考&#xff0c;谢谢理解&#xff0c;请勿转载。 #位置式|增量式PID区别 本系列的前两篇讲的是位置式PID 没有增量式 PID &#xff0c;PID的变种有很多&#xff0c;常见的有 位置式PID 增量式PID PI PD 抗…

PHP7.4安装使用rabbitMQ教程(windows)

&#xff08;1&#xff09;&#xff0c;安装rabbitMQ客户端erlang语言 一&#xff0c;erlang语言安装 下载地址1—— 下载地址2——https://www.erlang.org/patches/otp-27.0 二&#xff0c;rabbitMQ客户端安装 https://www.rabbitmq.com/docs/install-windows &#xff08…

PTC可复位保险丝 vs 传统型保险丝:全面对比分析

PTC可复位保险丝&#xff0c;又称为自恢复保险丝、自恢复熔断器或PPTC保险丝&#xff0c;是一种电子保护器件。它利用材料的正温度系数效应&#xff0c;即电阻值随温度升高而显著增加的特性&#xff0c;来实现电路保护。 当电路正常工作时&#xff0c;PTC保险丝呈现低阻态&…

昇思25天学习打卡营第1天|小试牛刀

这里写自昇思25天学习打卡营第1天|小试牛刀定义目录标题 昇思25天学习打卡营第1天学习了初学入门之基本介绍。了解了昇思MindSpore和华为昇腾AI全栈。训练营中的教程丰富&#xff0c;有初学入门、应用实践和量子计算等。学习打卡营是很好的提升自己的机会。 昇腾计算&#xff…

Python和MATLAB微机电健康推导算法和系统模拟优化设计

&#x1f3af;要点 &#x1f3af;惯性测量身体活动特征推导健康状态算法 | &#x1f3af;卷积网络算法学习惯性测量数据估计六自由度姿态 | &#x1f3af;全球导航卫星系统模拟&#xff0c;及惯性测量动态测斜仪算法、动态倾斜算法、融合算法 | &#x1f3af;微机电系统加速度…

python图形用户界面和游戏开发_day010

python图形用户界面和游戏开发 基于tkinter模块的GUI使用Pygame进行游戏开发在窗口中绘图加载图像实现动画效果碰撞检测事件处理 基于tkinter模块的GUI GUI是图形用户界面的缩写&#xff0c;图形化的用户界面对使用过计算机的人来说应该都不陌生&#xff0c;在此也无需进行赘述…

深入解析大数据核心概念:数据平台、数据中台、数据湖与数据仓库的异同与应用

大数据领域内的诸多概念常常让人困惑&#xff0c;其中数据平台、数据中台、数据湖和数据仓库是最为关键的几个。 1. 数据平台 定义&#xff1a; 数据平台是一个综合性的技术框架&#xff0c;旨在支持整个数据生命周期的管理和使用。它包含数据采集、存储、处理、分析和可视化…

上传图片,base64改为文件流,并转给后端

需求&#xff1a; html代码&#xff1a; <el-dialog v-model"dialogPicVisible" title"新增图片" width"500"><el-form :model"picForm"><el-form-item label"图片名称&#xff1a;" :label-width"10…

使用Python进行自然语言处理

哈喽,大家好,我是木头左! 自然语言处理(Natural Language Processing,NLP)是人工智能领域的一个重要分支,它致力于使计算机能够理解、分析和生成人类语言。随着大数据和深度学习的发展,NLP在各个领域都有广泛的应用,如机器翻译、情感分析、文本摘要等。本文将介绍如何…

Windows 部署ollama

一、简介 Ollama是在Github上的一个开源项目&#xff0c;其项目定位是&#xff1a;一个本地运行大模型的集成框架&#xff0c;目前主要针对主流的LLaMA架构的开源大模型设计&#xff0c;通过将模型权重、配置文件和必要数据封装进由Modelfile定义的包中&#xff0c;从而实现大模…