vue element-ui登录页面源码

最新推荐文章于 2024-03-19 07:41:56 发布

Silence丶你的名字

最新推荐文章于 2024-03-19 07:41:56 发布

阅读量2.6k

点赞数 2

分类专栏： Html 文章标签： vue html 登录页面源码 elementui

本文链接：https://blog.csdn.net/qq_42553504/article/details/116479465

版权

Html 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

在这里插入图片描述
HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>登录</title>
		<script src="static/Vue.jsv2.6.12.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/element-ui/lib/index.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="static/element-ui/lib/theme-chalk/index.css" />
	</head>
	<body>



		<el-row type="flex" justify="end" id="bodylogin">
			<div class="login">

				<p class="denglu">登录</p>

				<el-form :label-position="labelPosition" label-width="60px" :model="form">

					<el-form-item label="账号:">
						<el-input v-model="form.username" placeholder="请输入账号"></el-input>
					</el-form-item>

					<el-form-item label="密码:">
						<el-input v-model="form.password" show-password placeholder="请输入密码"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button style="width: 150px;" type="primary" plain @click="onsubmit">登录</el-button>
						<el-button style="width: 150px;" type="primary" plain @click="regist">注册</el-button>
					</el-form-item>

				</el-form>
			</div>
		</el-row>

	</body>
	<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="./css/login.css" />
</html>

new Vue({
	el: "#bodylogin",
	data: {
		labelPosition: 'center',
		form: {
			username: '',
			password: '',
		}
	},
	methods: {
		/* 登录发送请求 */
		onsubmit() {
			console.log("登录" + this.form.username);
			console.log("密码" + this.form.password);
		},
		regist(){    
			console.log("ddd")
				window.location.href = "/login/regist.html";
		}
	}
});

CSS

.login {
	/* 背景图片 */

	background-image: url(../static/新建文件夹/17.png);
	background-size: 100% 100%;


	/* background-color: powderblue; */

	margin-top: 10rem;
	border-radius: 12px;
	/* 内边距 */
	padding: 20px;
	text-align: center;
	box-shadow: 0 8px 5px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

/* 登录文字 */
.denglu {
	color: white;
	font-size: 20px;
}

/* 背景图片 */
body {
	background-image: url(../static/新建文件夹/8.png);
	background-size: 100% 100%;
	background-attachment: fixed;
}
.label-position{
	background-color: #000000;
}

在这里插入图片描述

需要引入vue js element-ui 如果没有的，可以从我静态资源下载，这里放不下

Silence丶你的名字

关注

2
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue element-ui登录页面源码

HTML<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>登录</title> <script src="static/Vue.jsv2.6.12.js" type="text/javascript" charset="utf-8"></script> <script src="static/element-ui.
复制链接

扫一扫