后台管理系统自己手写页面布局

头部固定，底部固定，左侧菜单出现滚动条，效果图如下：

代码

<template>
	<div class="mars-layout mars-layout-admin">
		<!-- 头部 -->
		<div class="mars-header">
			<p class="mars-logo" @click="goToMain"><img src="http://img.huoxingbeidiao.com/public/logo.png" alt="" style="width: 120px;"></p>
			<div class="mars-nav mars-layout-left">
				<div class="mars-nav-item">
					<el-breadcrumb separator="/">
						<el-breadcrumb-item>{{$route.meta.oneTitle}}</el-breadcrumb-item>
						<el-breadcrumb-item>{{$route.meta.twoTitle}}</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
			</div>
			<div class="mars-nav mars-layout-right">
				<div class="mars-nav-item">
					<el-dropdown trigger="click" @command="handleCommand">
						<span class="el-dropdown-link">
							<img src="http://img.huoxingbeidiao.com/public/1.png" class="mars-nav-img">{{companyName}}
							<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="out">退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
		</div>
		<!-- 侧边栏 -->
		<div class="mars-side mars-bg-black">
			<div class="mars-side-scroll">
				<el-menu :router="true" :default-active="this.$route.path" class="el-menu-vertical-demo" background-color="#2f3848"
				 text-color="#fff" active-text-color="#F43B66">
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-files"></i>
							<span>背调中心</span>
						</template>
						<el-menu-item index="/order" class="menu-item">
							<template slot="title">
								<span>背调订单</span>
							</template>
						</el-menu-item>
						<el-menu-item index="/launch" class="menu-item">
							<template slot="title">
								<span>发起背调</span>
							</template>
						</el-menu-item>
						<el-menu-item index="/manage" class="menu-item">
							<template slot="title">
								<span>套餐管理</span>
							</template>
						</el-menu-item>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title">
							<i class="el-icon-coin"></i>
							<span>资产中心</span>
						</template>
						<el-menu-item index="/balance" class="menu-item">
							<template slot="title">
								<span>账户余额</span>
							</template>
						</el-menu-item>
						<!-- <el-menu-item index="/invoice" class="menu-item">
							<template slot="title">
								<span>发票管理</span>
							</template>
						</el-menu-item> -->
					</el-submenu>
					<el-submenu index="3">
						<template slot="title">
							<i class="el-icon-user"></i>
							<span>用户中心</span>
						</template>
						<el-menu-item index="/basicMsg" class="menu-item">
							<template slot="title">
								<span>基本信息</span>
							</template>
						</el-menu-item>
						<el-menu-item index="/enterprise" class="menu-item">
							<template slot="title">
								<span>企业认证</span>
							</template>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</div>
		</div>
		<!-- 内容区 -->
		<div class="mars-body">
			<div style="padding: 15px;">
				<router-view></router-view>
			</div>
		</div>
		<!-- 底部 -->
		<!-- <div class="mars-footer">
			底部固定区域
		</div> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				companyName: ''
			}
		},
		beforeCreate() {
			const token = localStorage.getItem('token');
			if (!token) {
				this.$router.push({
					name: 'login'
				})
			}
		},
		mounted() {
			const companyName = localStorage.getItem('companyName');
			if (companyName) {
				this.companyName = companyName;
			}
		},
		methods: {
			//右上角下拉菜单事件
			handleCommand(command) {
				if (command == 'out') {
					this.$message.success('退出成功');
					localStorage.removeItem('token');
					localStorage.removeItem('companyName');
					localStorage.removeItem('companyState');
					localStorage.removeItem('expireTime');
					this.$router.push({
						name: 'login'
					})
				}
			},
			//去首页
			goToMain() {
				this.$router.push({
					name: 'index'
				})
			}
		}
	}
</script>

<style>
	.mars-header {
		background-color: #FFFFFF;
		z-index: 1000;
		height: 60px;
		position: relative;
		border-bottom: none;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);

	}

	.mars-layout-admin .mars-logo {
		position: absolute;
		left: 0;
		top: 0;
		width: 200px;
		height: 100%;
		line-height: 60px;
		text-align: center;
		color: #F43B66;
		font-size: 28px;
		font-weight: bold;
		background: #2f3848;
		box-sizing: border-box;
		border-bottom: 1px solid #626e83;
		cursor: pointer;
	}

	.mars-layout-admin .mars-header .mars-nav {
		background: 0 0;
	}

	.mars-nav {
		position: relative;
		padding: 0 20px;
		background-color: #393D49;
		color: #fff;
		border-radius: 2px;
		font-size: 0;
		box-sizing: border-box;
	}

	.mars-nav * {
		font-size: 16px;
	}

	.mars-nav .mars-nav-item {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		line-height: 60px;
	}

	.mars-layout-left {
		position: absolute !important;
		left: 200px;
		top: 0;
		line-height: 60px;
		color: #282828;
	}

	.mars-layout-right {
		position: absolute !important;
		right: 0;
		top: 0;
		line-height: 60px;
	}

	.mars-layout-admin .mars-side {
		top: 60px;
		width: 200px;
		overflow-x: hidden;
	}

	.mars-bg-black {
		background-color: #2f3848 !important;
		color: #fff !important;
	}

	.mars-side {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 999;
		width: 200px;
		overflow-x: hidden;
	}

	.mars-side-scroll {
		position: relative;
		width: 220px;
		height: 100%;
		overflow-x: hidden;
	}

	.mars-layout-admin .mars-body {
		position: fixed;
		top: 60px;
		/* bottom: 44px; */
	}

	.mars-body {
		position: absolute;
		left: 200px;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 998;
		width: auto;
		overflow: hidden;
		overflow-y: auto;
		box-sizing: border-box;
		background: #F2F2F2;
	}

	.mars-layout-admin .mars-footer {
		position: fixed;
		left: 200px;
		right: 0;
		bottom: 0;
		height: 44px;
		line-height: 44px;
		padding: 0 15px;
		background-color: #8A8A8A;
	}

	/* 顶部右侧样式 */
	.el-dropdown-link {
		cursor: pointer;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}

	.mars-nav-img {
		width: 30px;
		height: 30px;
		margin-right: 10px;
		border-radius: 50%;
	}

	/* 面包屑样式 */
	.el-breadcrumb__item:last-child .el-breadcrumb__inner {
		color: #F43B66 !important;
	}

	/* 左侧菜单栏二级菜单样式 */
	.menu-item {
		padding-left: 55px !important;
	}
</style>