.

src/App.vue

@@ -20,7 +20,7 @@
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 		color: #2c3e50;
-		background: #eff2fc;
+		background: #f8f8fa;
 	}
 	*{
 		margin: 0;

src/views/CompanyAccount/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="CompanyAccount">
-		
+		<el-empty description="暂无其他内容"></el-empty>
 	</div>
 </template>
 

src/views/ManagingUsers/index.vue

@@ -1,12 +1,19 @@
 <template>
 	<div class="ManagingUsers" style="display: none;" :style="{display: block}">
 		<div class="ManagingUsers1">
-			<el-input v-model="page.name" placeholder="请输入内容" style="max-width: 300px;" clearable></el-input>
-			<el-button type="primary" icon="el-icon-search">搜索</el-button>
-			<el-button type="warning" icon="el-icon-circle-plus-outline">添加</el-button>
+			<!-- <el-button type="primary" icon="el-icon-search">搜索</el-button> -->
+			<div class="ManagingUsers1-L">
+				<el-button type="primary" icon="el-icon-plus">新增用户</el-button>
+			</div>
+			<div class="ManagingUsers1-R">
+				<div class="ManagingUsers1-Rtx">
+					搜索：
+				</div>
+				<el-input v-model="page.name" placeholder="请输入内容" clearable></el-input>
+			</div>
 		</div>
 		<div class="ManagingUsers2">
-			<el-table :data="tableData" style="width: 100%" border>
+			<el-table :data="tableData" border>
 				<el-table-column label="日期" width="180">
 					<template slot-scope="scope">
 						<i class="el-icon-time"></i>
@@ -15,19 +22,13 @@
 				</el-table-column>
 				<el-table-column label="姓名" width="180">
 					<template slot-scope="scope">
-						<el-popover trigger="hover" placement="top">
-							<p>姓名: {{ scope.row.name }}</p>
-							<p>住址: {{ scope.row.address }}</p>
-							<div slot="reference" class="name-wrapper">
-								<el-tag size="medium">{{ scope.row.name }}</el-tag>
-							</div>
-						</el-popover>
+						{{ scope.row.name }}
 					</template>
 				</el-table-column>
 				<el-table-column label="操作">
 					<template slot-scope="scope">
-						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
+						<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
+						<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除
 						</el-button>
 					</template>
 				</el-table-column>
@@ -35,8 +36,8 @@
 		</div>
 		<div class="ManagingUsers3">
 			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-				:current-page="page.page" :page-size="page.page_size"
-				layout="total, prev, pager, next, jumper" :total="total">
+				:current-page="page.pagez" :page-size="page.page_size" layout="total, prev, pager, next, jumper"
+				:total="total">
 			</el-pagination>
 		</div>
 	</div>
@@ -47,11 +48,11 @@
 		name: 'ManagingUsers',
 		data() {
 			return {
-				total:30,
-				page:{
-					page:1,
-					page_size:10,
-					name:''
+				total: 30,
+				page: {
+					pagez: 1,
+					page_size: 10,
+					name: ''
 				},
 				tableData: [{
 					date: '2016-05-02',
@@ -74,25 +75,50 @@
 		},
 		methods: {
 			handleSizeChange(val) {
-				console.log(`每页 ${val} 条`);
+				console.log('每页',val,'条');
 			},
 			handleCurrentChange(val) {
-				console.log(`当前页: ${val}`);
+				console.log('当前页',val);
+			},
+			handleEdit(e){
+				console.log('编辑',e);
+			},
+			handleDelete(e){
+				console.log('删除',e);
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
+	// 在填充数据之前隐藏
+	[v-cloak] {
+	    display: none;
+	}
 	.ManagingUsers {
 		.ManagingUsers1 {
 			display: flex;
+			justify-content: space-between;
 			align-items: center;
+			.ManagingUsers1-L{
+			}
+			.ManagingUsers1-R{
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				.ManagingUsers1-Rtx{
+					min-width:45px;
+					font-size: 14px;
+					color: #909399;
+					user-select: none;
+				}
+			}
 		}
 
 		.ManagingUsers2 {
-			margin-top: 40px;
+			margin-top: 20px;
 		}
+
 		.ManagingUsers3 {
 			margin-top: 40px;
 		}

src/views/layout/Menus.vue

@@ -1,9 +1,9 @@
 <template>
-	<div style="user-select: none;">
+	<div class="Menus">
 		<!-- <div class="menu-logo1">
 			<img src="@/assets/img/logo2-1.png" alt="logo">
 		</div> -->
-		<el-menu :default-active="$route.path" router background-color="#545c64"
+		<el-menu :default-active="$route.path" router background-color="#182027"
 			text-color="#fff" :collapse="true">
 			<el-menu-item :index="item.path" v-for="(item,index) in $router.options.routes[1].children"
 				:key="index">
@@ -18,41 +18,44 @@
 </script>
 
 <style lang="scss" scoped>
-	// .menu-logo1 {
-	// 	width: 80px;
-	// 	height: 80px;
-	// 	display: flex;
-	// 	justify-content: center;
-	// 	align-items: center;
-	// 	img {
-	// 		width: 75%;
-	// 		height: 75%;
-	// 		object-fit: contain;
-	// 	}
-	// }
-	.el-menu-item.is-active {
-	    color: #fff;
-		background: #409EFF !important;
-	}
-	.el-menu-item[data-v-512d1d49], .el-submenu__title[data-v-512d1d49] {
-	    height: 80px;
-	    line-height: 80px;
-	    list-style: none;
-	}
-	.el-menu--collapse {
-	    width: 80px;
-	}
-	.el-menu {
-	    border-right: solid 0 #e6e6e6;
-	    list-style: none;
-	    position: relative;
-	    margin: 0;
-	    padding-left: 0;
-	    background-color: #FFF;
-	}
-	.el-menu-item, .el-submenu__title {
-	    height: 80px;
-	    line-height: 56px;
-	    list-style: none;
+	.Menus{
+		user-select: none;
+		// .menu-logo1 {
+		// 	width: 80px;
+		// 	height: 80px;
+		// 	display: flex;
+		// 	justify-content: center;
+		// 	align-items: center;
+		// 	img {
+		// 		width: 75%;
+		// 		height: 75%;
+		// 		object-fit: contain;
+		// 	}
+		// }
+		.el-menu-item.is-active {
+		    color: #fff;
+			background: #409EFF !important;
+		}
+		.el-menu-item[data-v-512d1d49], .el-submenu__title[data-v-512d1d49] {
+		    height: 80px;
+		    line-height: 80px;
+		    list-style: none;
+		}
+		.el-menu--collapse {
+		    width: 80px;
+		}
+		.el-menu {
+		    border-right: solid 0 #e6e6e6;
+		    list-style: none;
+		    position: relative;
+		    margin: 0;
+		    padding-left: 0;
+		    background-color: #FFF;
+		}
+		.el-menu-item, .el-submenu__title {
+		    height: 80px;
+		    line-height: 56px;
+		    list-style: none;
+		}
 	}
 </style>

src/views/layout/Topmenu.vue

@@ -94,7 +94,7 @@
 
 <style lang="scss">
 	.Topmenu {
-		background-color: rgb(84, 92, 100);
+		background-color: #182027;
 		height: 60px;
 		color: #fff;
 		.TopmenuPir {

src/views/layout/index.vue

@@ -44,7 +44,6 @@
 		display: flex;
 		flex-direction: column;
 		.layout-T{
-			// border-bottom: 1px solid #fff;
 		}
 		.layout-B{
 			flex: 1;
@@ -53,7 +52,7 @@
 			.layout-B-menu{
 				height: 100%;
 				width: 80px;
-				background-color: rgb(84, 92, 100);
+				background-color: #182027;
 			}
 			.layout-B-mai{
 				flex: 1;
@@ -61,6 +60,7 @@
 				border-radius: 4px;
 				display: flex;
 				flex-direction: column;
+				min-width: 0;
 				.layout-B-mai1{
 					background: #fff;
 					padding:10px 20px;

src/views/layout/tabs.vue

@@ -37,6 +37,7 @@
 <style lang="scss">
 	.tabs {
 		overflow: hidden;
+		user-select: none;
 		.el-tabs__content {
 			display: none;
 		}
@@ -61,6 +62,7 @@
 		}
 		.el-tabs--border-card{
 			border-top: none;
+			border-right: none;
 		}
 	}
 </style>