<template><divclass="Login"><el-formclass="login-container"><h1class="title">用户登录</h1><el-form-itemlabel=""><el-inputtype="text"v-model="username"placeholder="登录账号"autocomplete="off"></el-input></el-form-item><el-form-itemlabel=""><el-inputtype="password"v-model="password"placeholder="登录密码"autocomplete="off"></el-input></el-form-item><el-form-item><el-buttontype="primary"style="width:100%;"@click="doSubmit()">提交</el-button></el-form-item><el-rowstyle="text-align: center;margin-top:-10px"><el-linktype="primary">忘记密码</el-link><el-linktype="primary"@click="gotoRegister()">用户注册</el-link></el-row></el-form></div></template><script>exportdefault {
name: "Login",
data() {
return {
username: "",
password: ""    }
  },
methods: {
gotoRegister() {
this.$router.push("/Register");
    },
//提交事件doSubmit() {
//设置登录访问地址leturl=this.axios.urls.SYSTEM_USER_DOLOGIN;
// 使用json格式进行传值letparams= {
username: this.username,
password: this.password      }
this.axios.post(url, params).then(r=> {
console.log(r);
this.$message({
message: r.data.message,
type: r.data.code==0?'success': 'error'        });
      }).catch(e=> {
      });
    }
  }
}
</script><stylescoped>.login-wrap {
box-sizing: border-box;
width: 100%;
height: 100%;
padding-top: 10%;
background-image: url(https://pic4.zhimg.com/v2-c5880f5a6d44766feb085c3ae94899c7_r.jpg);
//background-image: url();
background-repeat: no-repeat;
background-position: centerright;
background-size: 100%;
}
.login-container {
border-radius: 10px;
margin: 0pxauto;
width: 350px;
padding: 30px35px15px35px;
background: #fff;
border: 1pxsolid#eaeaea;
text-align: left;
box-shadow: 0020px2pxrgba(0, 0, 0, 0.1);
}
.title {
margin: 0pxauto40pxauto;
text-align: center;
color: #505458;
}
</style>

<template><el-containerclass="main-container"><el-asidev-bind:class="asideClass"><LeftNav></LeftNav></el-aside><el-container><el-headerclass="main-header"><TopNav></TopNav></el-header><el-mainclass="main-center">这是一个非常帅的主页</el-main></el-container></el-container></template><script>// 导入组件importTopNavfrom'@/components/TopNav.vue'importLeftNavfrom'@/components/LeftNav.vue'// 导出模块exportdefault {
};
</script><stylescoped>.main-container {
height: 100%;
width: 100%;
box-sizing: border-box;
}
.main-aside-collapsed {
/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */width: 64px!important;
height: 100%;
background-color: #334157;
margin: 0px;
}
.main-aside {
width: 240px!important;
height: 100%;
background-color: #334157;
margin: 0px;
}
.main-header,
.main-center {
padding: 0px;
border-left: 2pxsolid#333;
}
</style>

<template><el-menudefault-active="2"class="el-menu-vertical-demo"background-color="#334157"text-color="#fff"active-text-color="#ffd04b":collapse="collapsed"><divclass="logobox"><imgclass="logoimg"src="../assets/img/logo.png"alt=""></div><el-submenuindex="1"><templateslot="title"><iclass="el-icon-location"></i><span>导航一</span></template><el-menu-item-group><templateslot="title">分组一</template><el-menu-itemindex="1-1">选项1</el-menu-item><el-menu-itemindex="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-grouptitle="分组2"><el-menu-itemindex="1-3">选项3</el-menu-item></el-menu-item-group><el-submenuindex="1-4"><templateslot="title">选项4</template><el-menu-itemindex="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-itemindex="2"><iclass="el-icon-menu"></i><spanslot="title">导航二</span></el-menu-item><el-menu-itemindex="3"disabled><iclass="el-icon-document"></i><spanslot="title">导航三</span></el-menu-item><el-menu-itemindex="4"><iclass="el-icon-setting"></i><spanslot="title">导航四</span></el-menu-item></el-menu></template><script>exportdefault {
}
</script><style>.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 240px;
min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
border: none;
text-align: left;
}
.el-menu-item-group__title {
padding: 0px;
}
.el-menu-bg {
background-color: #1f2d3d!important;
}
.el-menu {
border: none;
}
.logobox {
height: 40px;
line-height: 40px;
color: #9d9d9d;
font-size: 20px;
text-align: center;
padding: 20px0px;
}
.logoimg {
height: 40px;
}
</style>

<template><el-menuclass="el-menu-demo"mode="horizontal"background-color="#334157"text-color="#fff"active-text-color="#fff"><el-buttonclass="buttonimg"><imgclass="showimg":src="collapsed?imgshow:imgsq"@click="doToggle()"></el-button><el-submenuindex="2"class="submenu"><templateslot="title">超级管理员</template><el-menu-itemindex="2-1">设置</el-menu-item><el-menu-itemindex="2-2">个人中心</el-menu-item><el-menu-item@click="exit()"index="2-3">退出</el-menu-item></el-submenu></el-menu></template><script>exportdefault {
data() {
return {
collapsed: false,
imgshow: require('@/assets/img/show.png'),
imgsq: require('@/assets/img/sq.png')
    }
  }, methods: {
  }
}
</script><stylescoped>.el-menu-vertical-demo:not(.el-menu--collapse) {
border: none;
}
.submenu {
float: right;
}
.buttonimg {
height: 60px;
background-color: transparent;
border: none;
}
.showimg {
width: 26px;
height: 26px;
position: absolute;
top: 17px;
left: 17px;
}
.showimg:active {
border: none;
}
</style>