login登录界面

展示情况
login
代码:

<template><div class="wrapper"><div style="margin: 200px auto; background-color: #fff; width: 350px; height: 300px; padding: 20px; border-radius: 10px"> <div style="margin: 20px 0; text-align: center; font-size: 24px"><b>登 录</b></div><el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="user.username"></el-input><el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input><div style="margin: 10px 0; text-align: right"><el-button type="primary" size="small"  autocomplete="off" @click="login">登录</el-button><el-button type="warning" size="small"  autocomplete="off">注册</el-button></div></div></div>
</template><script>export default {name: "Login",data() {return {user: {},}}}
</script><style>.wrapper {height: 100vh;background-image: linear-gradient(to bottom right, #FC466B , #3F5EFB); //渐变色overflow: hidden;}
</style>

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

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

相关文章

关于Rust

Rust是一种系统级编程语言&#xff0c;注重安全性、并发性和性能。它由Mozilla开发&#xff0c;旨在提供一种可靠的编程语言&#xff0c;适用于各种应用场景。以下是关于Rust的一些信息12&#xff1a; 1、Rust的特点&#xff1a; 内存安全&#xff1a;Rust使用所有权、借用和…

C语言实现一个两个数加减乘除的答题代码(含文件保存),用户增加,题目增加,题目测试,题目答题等等

目录 1、这是我大一自己写的小代码&#xff0c;现在翻到了就分享出来&#xff0c;高手勿喷。 2、项目运行 3、获取完整源码网址 1、这是我大一自己写的小代码&#xff0c;现在翻到了就分享出来&#xff0c;高手勿喷。 2、项目运行 &#xff08;1&#xff09;测试模块 每次…

网安渗透攻击作业(4)

Unload-labs-01 function checkFile() { var file document.getElementsByName(upload_file)[0].value; if (file null || file "") { alert("请选择要上传的文件!"); return false; } //定义允许上传的文件类型 v…

【Linux】对进程PCB的理解查看进程信息的方法

一、学习准备&#xff1a;对操作系统工作模式的理解 首先我们要清楚的是&#xff0c;操作系统是一个进行软硬件资源管理的软件。操作系统对下要管理好底层硬件。每一个硬件的生产产商都会给他们的产品提供对应的驱动程序&#xff0c;驱动程序是特定于某一硬件或系统设备的软件组…

angularjs 指令实现自定义滚动条

场景&#xff1a;横向商品栏&#xff0c;把原有的滚动条改成自定义的样式&#xff0c;并且给两边加上箭头可以调整&#xff0c;可以拖动商品和滚轮实现滚动条效果。 js appService.directive(customScrollbar, function() {return {restrict: A,transclude: true,scope: {ena…

Linux编程4.8 网络编程-建立连接

1、服务器端 #include <sys/types.h> #include <sys/socket.h>int listen(int sockfd, int backlog);返回&#xff1a;成功返回0&#xff0c;出错返回-1。参数&#xff1a;sockfd:套接字的文件描述符backlog:定义了sockfd的挂起连接队列可能增长的最大长度。…

web前端之多行文本擦除效果、文本逐个显示或展示、创建元素标签、querySelector、createElement、appendChild、requestAnimationFrame

MENU 版本一(requestAnimationFrame)版本二(setTimeout)版本三(css) 版本一(requestAnimationFrame) 前言 window.requestAnimationFrame()告诉浏览器——你希望执行一个动画&#xff0c;并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数…

关于udp能跨局域网传输的问题

UDP&#xff08;用户数据报协议&#xff09;以其独特的传输特性在多种应用场景中都有着极其重要的作用。然而&#xff0c;关于UDP是否能跨局域网&#xff08;LAN&#xff09;进行传输&#xff0c;以及这一传输过程中的优缺点&#xff0c;一直是网络技术领域讨论的热点。本文将详…

Unity中PICO中手柄按键返回值

文章目录 前言一、我们看一下每个按键返回值获取按键返回值的方法 二、我们实现一个左摇杆控制平滑移动的功能1、创建一个左摇杆控制移动的脚本2、传入XR Origin对象&#xff0c;并且定义一个公开变量控制移动速度3、获取到摇杆是否移动&#xff0c;以及移动的偏移量4、如果摇杆…

x264 编码器 slices_write 和 slice_write 函数

x264 264是一个开源的视频编码库,用于将视频压缩为H.264/AVC(Advanced Video Coding)格式。它是一种广泛使用的视频编码标准,能够提供高质量的视频压缩和较低的比特率。 x264库提供了一个编码器,可以将原始视频序列转换为H.264/AVC压缩的比特流。它实现了各种H.264编码算法…

Spring Data访问Elasticsearch----Elasticsearch操作

Spring Data访问Elasticsearch----Elasticsearch操作 一、用法示例二、搜索结果类型三、查询3.1 CriteriaQuery3.2 StringQuery3.3 NativeQuery3.4 SearchTemplateQuery Spring Data Elasticsearch使用多个接口来定义可以针对Elasticsearch索引调用的操作&#xff08;有关响应(…

3月15/18日:复原IP地址子集

93.复原IP地址 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能含有前导 0&#xff09;&#xff0c;整数之间用 . 分隔。 例如&#xff1a;"0.1.2.201" 和 "192.168.1.1" 是 有效 IP 地址&#xff0c;但是 &q…

Modeling Influence Diffusion over Signed Social Networks

关键词——社会系统、影响力扩散、建模、签名社交网络、影响力最大化 Abstract 在离线或在线世界中&#xff0c;许多社交系统可以表示为签名社交网络&#xff0c;包括积极和消极关系。尽管由于独特极性特征的巨大应用价值&#xff0c;人们对签名社交网络进行了各种研究&#x…

【Docker篇】自定义Dockerfile的操作

文章目录 &#x1f354;镜像结构&#x1f6f8;什么是Dockerfile⭐基于Ubuntu镜像构建一个新镜像&#xff0c;运行一个java项目&#x1f50e;使用 java:8-alpine &#x1f354;镜像结构 镜像是将应用程序及其需要的系统函数库、环境、配置、依赖打包而成。 我们以MySQL为例&am…

环境安装篇 之 docker安装

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 环境安装 系列文章&#xff0c;介绍 docker 的安装详细步骤 # 卸载旧版本docker $ sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \d…

QT网络编程之实现UDP广播发送和接收

推荐一个不错的人工智能学习网站&#xff0c;通俗易懂&#xff0c;内容全面&#xff0c;作为入门科普和学习提升都不错&#xff0c;分享一下给大家&#xff1a;前言https://www.captainbed.cn/ai 一.UDP通信 1.QT中实现UDP通信主要用到了以下类&#xff1a;QUdpSocket、QHost…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:FolderStack)

FolderStack继承于Stack(层叠布局)控件&#xff0c;新增了折叠屏悬停能力&#xff0c;通过识别upperItems自动避让折叠屏折痕区后移到上半屏 说明&#xff1a; 该组件从API Version 11开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件…

深度学习——数据预处理

一、数据预处理 为了能用深度学习来解决现实世界的问题&#xff0c;我们经常从预处理原始数据开始&#xff0c; 而不是从那些准备好的张量格式数据开始。 在Python中常用的数据分析工具中&#xff0c;我们通常使用pandas软件包。 像庞大的Python生态系统中的许多其他扩展包一样…

算法刷题day32

目录 引言一、走迷宫二、八数码三、走迷宫四、全球变暖 引言 本篇文章是讲 B F S BFS BFS 的&#xff0c;我发现好像蓝桥杯都很爱考陆地海洋的这种问题&#xff0c;这种问题就是即使你的模板背的再熟练&#xff0c;你想不到做法其实还是没啥用&#xff0c;所以多做题很重要&a…

【LeetCode每日一题】310. 最小高度树

文章目录 [310. 最小高度树](https://leetcode.cn/problems/minimum-height-trees/)思路&#xff1a;拓扑排序代码&#xff1a; 310. 最小高度树 思路&#xff1a;拓扑排序 首先判断节点数量n&#xff0c;如果只有一个节点&#xff0c;则直接返回该节点作为最小高度树的根节点…