登录页面的图片没有显示全,缺少左下角和右上角的蓝色部分.
这是没改之前的代码:
<template>
<div class="login-container">
<div class="img1" >
<div class="img2">
<div class="logincoter">
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
label-width="0px"
class="card-box login-form">
<el-form-item prop="username" style="width:50%; margin-left: 40px; ">
<el-input class="tupian" v-model="loginForm.username" autoComplete="on" style="margin-left:20%; border-bottom:1px solid #333" placeholder="请输入管理员姓名"/>
</el-form-item>
<el-form-item prop="password" style="width:50%; margin-left: 40px; ">
<el-input class="tupian1" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password"
autoComplete="on" style="margin-left:20%; border-bottom:1px solid #333;" placeholder="请输入登录密码"></el-input>
<el-checkbox v-model="checked" style="color:#a0a0a0;margin-left: 40px;">记住密码</el-checkbox>
</el-form-item>
<el-form-item style="width:30%;display:block;margin-left: 70px;">
<el-button class="lokin" style="width:210px;border-radius:20px;color:white; " :loading="loading" @click.native.prevent="handleLogin">
登录
</el-button>
</el-form-item>
<el-form-item style="width:30%; display:block;margin-left: 70px;margin-top:-10px;">
<a href="服务器的路径">
<el-button style="width:210px;border-radius:20px; ">
关闭
</el-button>
</a>
</el-form-item>
</el-form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'login',
data() {
return {
loginForm: {
username: '',
password: '',
},
checked:"",
loginRules: {
username: [{required: true, trigger: 'blur', message: "请输入用户名"}],
password: [{required: true, trigger: 'blur', message: "请输入密码"}]
},
loading: false,
}
},
created() {
this.getCookie();
// this.clearCookie();
},
methods: {
handleLogin() {
var vm = this
// if(this.checked=true){
// //传入账号名,密码,和保存天数3个参数
// this.setCookie(this.loginForm.username,this.loginForm.password,7);
// }
this.$refs.loginForm.validate(valid => {
if (valid) {
var loginfrom = {
password : this.$md5(this.loginForm.password),
username : this.loginForm.username
}
console.log(loginfrom);
this.loading = true
this.$store.dispatch('Login', loginfrom).then(data => {
this.loading = false
if ("success" === data.