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/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 如果没有的，可以从我静态资源下载，这里放不下

vue element-ui登录页面源码相关推荐

html好看的登录页面1（十三种风格登录页面源码）
文章目录 1.登录风格效果说明 1.1 背景凹起风登录界面 1.2 弹出风登录界面 1.3 科技时尚风登录界面 1.4 蓝色一夏风登录界面 1.5 模糊背景左右风登录界面 1.6 上中下介绍风登录界面 ...
三个漂亮的网页登录页面源码及素材——可用于前端初学者练习HTMLCSS
注:这三个登录页面涉及到的图片素材可自行寻找,字体图标素材可以在阿里字体图标库获取(https://www.iconfont.cn/home/index?spm=a313x.7781069.19989 ...
4款简洁好看的登录页面源码
简介: 1.紫色渐变登录页面这是一款紫色渐变登录页面,输入框和按钮都有动画效果,同时还有基本的表单验证. 2.蓝色简洁大气登录页面这是一款蓝色简洁大气登录页面,输入框聚焦的时候有一个非常显眼的动画 ...
非常漂亮的后台登录页面源码
介绍: 希望大家会喜欢谢谢网盘下载地址: http://kekewl.org/TqTXuC1Nem40 图片:
html透明表单登录注册页面源码
大家好,今天给大家介绍一款,html透明表单登录注册页面源码(图1).送给大家哦,获取方式在本文末尾. 图1 自适应页面,适合于各种分辨率(图2) 图2 部分源码: <!doctype html ...
vue.js实现的，添加和删除代办事项列表页面源码
大家好,今天给大家介绍一款,vue实现的,添加和删除代办事项列表页面源码(图1).送给大家哦,获取方式在本文末尾. 图1 可以添加代办事项.删除代办事项.将未完成任务移动到列表前面(图2) 图2 代码 ...
带翻转特效的会员登录注册html页面源码
大家好,今天给大家介绍一款,带翻转特效的会员登录注册html页面源码(图1).送给大家哦,获取方式在本文末尾. 图1 点击登录和注册切换时,带翻转特效(图2) 图2 源码完整,需要的朋友可以下载学习( ...
vue+element ui实现好看的登录界面
闲暇之余使用vue+element ui制作了个登录界面话不多说,先上图界面效果图下面直接上代码: <template><div class="loginbody&q ...
【Vue+Element UI】关闭指定某一个页面的loading动画
[Vue+Element UI]关闭指定某一个页面的loading动画模板:vue-admin-template v4.4.0 问题描述:由于vue-admin默认配置了全局loading,所以页面 ...

vue element-ui登录页面源码

vue element-ui登录页面源码相关推荐

最新文章

热门文章