<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="element-ui/index.css">
<!-- import Vue before Element -->
<script src="vue/vue.js"></script>
<!-- import JavaScript -->
<script src="element-ui/index.js"></script>
<title>愛芳芳-精美简单登录页</title>
<style>
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#app{
width: 100%;
height: 100%;
}
.my-home {
/*background-color: #303133;*/
background-color: rgba(39, 51, 59, 1.0);
height: 100%;
display: flex;
flex-direction: column;
}
.my-home__main {
user-select: none;
width: 100%;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.my-home__footer>a {
font-size: 12px;
color: #ABABAB;
text-decoration: none;
}
.my-home__loading {
height: 32px;
width: 32px;
margin-bottom: 20px;
}
.my-home__title {
color: #FFF;
font-size: 14px;
margin-bottom: 10px;
}
::-webkit-scrollbar{
width: 7px;
height: 7px;
display: none;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(39, 51, 59, 1.0);
}
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
a{
color: #FFFFFF;
text-decoration: none;
}
body{
background-size: cover;
background-image: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("./img/bj.jpeg");
background-repeat: no-repeat;
}
.name{
line-height: 50px;
font-size: 30px;
font-weight: 700;
color: #FFFFFF;
margin-left: 10px;
}
.login-modal{
position: relative;
width: 420px;
height: 450px;
margin: -250px auto 0 auto;
top: 50%;
background-color: #FFFFFF;
border-radius: 5px;
}
.title{
height: 100px;
line-height: 100px;
font-weight: 600;
text-align: center;
font-size: 28px;
}
.login-form{
margin: 20px 40px;
}
</style>
</head>
<body>
<div id="app">
<div class="my-home" v-if="loading" style="z-index: 99;">
<div class="my-home__main">
<img class="my-home__loading" src="svg/loading-spin.svg" alt="loading">
<div class="my-home__title">
努力加载中...
</div>
</div>
</div>
<div style="width: 100%;height: 100%;overflow: hidden;">
<div class="name">VUE简单精美登录页</div>
<div class="login-modal">
<div class="title">登录</div>
<el-form class="login-form"
:rules="loginRules"
ref="loginForm"
:model="loginForm"
label-width="0">
<el-form-item prop="username">
<el-input
placeholder="请输入用户名"
prefix-icon="el-icon-user"
v-model="loginForm.username">
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
:type="passwordType"
placeholder="请输入密码"
prefix-icon="el-icon-lock"
v-model="loginForm.password">
</el-input>
</el-form-item>
<el-form-item>
<el-row :span="24">
<el-col :span="12">
<el-checkbox v-model="loginForm.rememberPwd">记住密码</el-checkbox>
</el-col>
<el-col :span="12">
<el-popover
placement="top-start"
title=""
width="200"
trigger="hover"
content="忘记密码请联系系统管理员">
<span style="color: #1890ff;float: right;" slot="reference">忘记密码</span>
</el-popover>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button type="primary"
style="width: 100%;"
@click.native.prevent="handleLogin"
class="login-submit">
登录
</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
loading: true,
passwordType: "password",
loginForm: {
//用户名
username: "",
//密码
password: "",
rememberPwd: false,
},
loginRules: {
username: [
{required: true, message: "请输入用户名", trigger: "blur"}
],
password: [
{required: true, message: "请输入密码", trigger: "blur"},
{min: 1, message: "密码长度最少为6位", trigger: "blur"}
]
},
};
},
mounted() {
let that = this;
setTimeout(function(){
that.loading = false;
},500);
},
methods: {
showPassword() {
this.passwordType === ""
? (this.passwordType = "password")
: (this.passwordType = "");
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
const loading = this.$loading({
lock: true,
text: '登录中,请稍后。。。',
spinner: "el-icon-loading"
});
setTimeout(function(){
loading.close();
},2000)
}
});
},
}
})
</script>
</html>
vue+element简单登录界面/登陆界面
5星 · 超过95%的资源 需积分: 17 47 浏览量
2023-01-31
11:01:02
上传
评论 5
收藏 1.24MB ZIP 举报 
vue+element简单登陆界面.zip （9个子文件） 
vue+element简单登陆界面 vue 
vue-router.js 86KB vue.js 336KB svg 
loading-spin.svg 422B element-ui index.js 562KB index.css 230KB fonts element-icons.woff 28KB element-icons.ttf 55KB img bj.jpeg 964KB
index.html 6KB
- 1
- 2
前往页