.

src/App.vue

@@ -14,12 +14,13 @@
 </script>
 
 <style lang="scss">
+	@import url('assets/css/scrolls.css');
 	#app {
 		font-family: Avenir, Helvetica, Arial, sans-serif;
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 		color: #2c3e50;
-		// background: #eff2fc;
+		background: #eff2fc;
 	}
 	*{
 		margin: 0;

src/assets/css/scrolls.css

@@ -0,0 +1,21 @@
+/***滚动条样式**/
+
+/*滚动条整体部分*/ 
+
+::-webkit-scrollbar { width: 1px; height: 10px; }
+
+ /*滚动条的轨道*/ 
+
+::-webkit-scrollbar-track { background: #f9fafb; } 
+
+/*滚动条里面的小方块，能向上向下移动*/ 
+
+::-webkit-scrollbar-thumb { border-radius: 5px; background: #d3d4d5; } 
+
+::-webkit-scrollbar-thumb:hover {  } 
+
+::-webkit-scrollbar-thumb:active {  } 
+
+/*边角，即两个滚动条的交汇处*/ 
+
+::-webkit-scrollbar-corner { background-color: #ffffff; }

src/components/input.vue

@@ -0,0 +1,43 @@
+<template>
+	<div class="inputStyle">
+		<div class="inputStyle1">
+			<input class="inputStyle1-imput" type="text" v-model="value">
+			<el-button type="primary">主要按钮</el-button>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value:''
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.inputStyle1 {
+		background-color: #fff;
+		background-image: none;
+		border-radius: 4px;
+		border: 1px solid #dcdfe6;
+		box-sizing: border-box;
+		color: #606266;
+		display: inline-block;
+		font-size: inherit;
+		height: 40px;
+		line-height: 40px;
+		outline: none;
+		width: 300px;
+		display: flex;
+		overflow: hidden;
+		padding-left: 20px;
+		.inputStyle1-imput{
+			flex: 1;
+			outline: none;
+			border: none;
+		}
+	}
+</style>

src/store/index.js

@@ -8,7 +8,7 @@ export default new Vuex.Store({
 	plugins: [
 		createPersistedState({
 			key: 'stort',
-			paths: [] //, 'Tags'
+			paths: ['tabList','includeTabs'] //, 'Tags'
 		})
 	],
 	state: {
@@ -27,7 +27,7 @@ export default new Vuex.Store({
 				state.includeTabs.push(tab.name)
 			}
 		},
-		addinclude: (state, tab) => {
+		addinclude: (state, tab) => {//删除缓存
 			var tb = tab.replace('/','');
 			state.includeTabs.forEach(function(item,index) {
 				if(item === tb){

src/views/CompanyAccount/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="CompanyAccount">
-		公司账户<input v-model="vlaue" />
+		
 	</div>
 </template>
 
@@ -9,7 +9,7 @@
 		name:'CompanyAccount',
 		data() {
 			return{
-				vlaue:''
+				
 			}
 		}
 	}

src/views/ManagingUsers/index.vue

@@ -1,19 +1,100 @@
 <template>
-	<div class="ManagingUsers">
-		管理员用户
+	<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>
+		</div>
+		<div class="ManagingUsers2">
+			<el-table :data="tableData" style="width: 100%" border>
+				<el-table-column label="日期" width="180">
+					<template slot-scope="scope">
+						<i class="el-icon-time"></i>
+						<span style="margin-left: 10px">{{ scope.row.date }}</span>
+					</template>
+				</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>
+					</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>
+					</template>
+				</el-table-column>
+			</el-table>
+		</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">
+			</el-pagination>
+		</div>
 	</div>
 </template>
 
 <script>
 	export default {
-		name:'ManagingUsers',
+		name: 'ManagingUsers',
 		data() {
-			return{
-				vlaue:''
+			return {
+				total:30,
+				page:{
+					page:1,
+					page_size:10,
+					name:''
+				},
+				tableData: [{
+					date: '2016-05-02',
+					name: '王小虎',
+					address: '上海市普陀区金沙江路 1518 弄'
+				}, {
+					date: '2016-05-04',
+					name: '王小虎',
+					address: '上海市普陀区金沙江路 1517 弄'
+				}, {
+					date: '2016-05-01',
+					name: '王小虎',
+					address: '上海市普陀区金沙江路 1519 弄'
+				}, {
+					date: '2016-05-03',
+					name: '王小虎',
+					address: '上海市普陀区金沙江路 1516 弄'
+				}]
+			}
+		},
+		methods: {
+			handleSizeChange(val) {
+				console.log(`每页 ${val} 条`);
+			},
+			handleCurrentChange(val) {
+				console.log(`当前页: ${val}`);
 			}
 		}
 	}
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss" scoped>
+	.ManagingUsers {
+		.ManagingUsers1 {
+			display: flex;
+			align-items: center;
+		}
+
+		.ManagingUsers2 {
+			margin-top: 40px;
+		}
+		.ManagingUsers3 {
+			margin-top: 40px;
+		}
+	}
+</style>

src/views/home/home.vue

@@ -1,7 +1,6 @@
 <template>
 	<div>
-		工作台
-		<input v-model="vlaue" />
+		<el-empty description="暂无其他内容"></el-empty>
 	</div>
 </template>
 

src/views/layout/Topmenu.vue

@@ -6,9 +6,7 @@
 					<img src="@/assets/img/logo2-1.png" alt="logo">
 				</div>
 				<div class="TopmenuPir-logo2">
-					<!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
-
-					<!-- <img src="@/assets/img/logo2-2.png" alt="logo"> -->
+					<img src="@/assets/img/logo2-2.png" alt="logo">
 				</div>
 			</div>
 			<div class="TopmenuPir-mai">
@@ -141,6 +139,7 @@
 					display: flex;
 					justify-content: center;
 					align-items: center;
+					// background: #fff;
 					img {
 						width: 60%;
 						height: 60%;
@@ -153,7 +152,6 @@
 					display: flex;
 					margin-left: 10px;
 					align-items: center;
-
 					img {
 						width: auto;
 						height: 100%;

src/views/layout/index.vue

@@ -8,15 +8,14 @@
 				<Menus></Menus>
 			</div>
 			<div class="layout-B-mai">
-				<!-- <div>
-					<Breadcrumb></Breadcrumb>
-				</div> -->
-				<div style="layout-B-mai1">
+				<div class="layout-B-mai1">
 					<tabs></tabs>
 				</div>
-				<keep-alive :include="$store.state.includeTabs">
-					<router-view class="rouView"></router-view>
-				</keep-alive>
+				<div class="layout-B-mai2">
+					<keep-alive :include="$store.state.includeTabs">
+						<router-view class="rouView"></router-view>
+					</keep-alive>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -25,11 +24,10 @@
 <script>
 	import Topmenu from '@/views/layout/Topmenu'
 	import Menus from '@/views/layout/Menus'
-	import Breadcrumb from '@/views/layout/Breadcrumb'
 	import tabs from '@/views/layout/tabs'
 	export default {
 		components: {
-			tabs,Topmenu,Breadcrumb,Menus
+			tabs,Topmenu,Menus
 		},
 		data() {
 			return {
@@ -45,9 +43,13 @@
 		height: 100vh;
 		display: flex;
 		flex-direction: column;
+		.layout-T{
+			// border-bottom: 1px solid #fff;
+		}
 		.layout-B{
 			flex: 1;
 			display: flex;
+			overflow: hidden;
 			.layout-B-menu{
 				height: 100%;
 				width: 80px;
@@ -55,14 +57,20 @@
 			}
 			.layout-B-mai{
 				flex: 1;
-				background: #fff;
 				margin: 10px;
 				border-radius: 4px;
+				display: flex;
+				flex-direction: column;
 				.layout-B-mai1{
-					border-bottom: 1px solid #DCDFE6;
+					background: #fff;
+					padding:10px 20px;
 				}
-				.rouView{
+				.layout-B-mai2{
+					flex: 1;
+					margin-top: 10px;
+					background: #fff;
 					padding:20px;
+					overflow-y: auto;
 				}
 			}
 		}

src/views/layout/tabs.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="tabs">
-		<el-tabs type="border-card" :value="$route.path" @tab-click="tabClick" @tab-remove='tabClose'>
+		<el-tabs size="mini" type="border-card" :value="$route.path" @tab-click="tabClick" @tab-remove='tabClose'>
 			<el-tab-pane :closable="item.path!='/home'?true:false" v-for="(item, index) in TabsData" :key="item.path"
 				:label="item.title" :name="item.path">
 				{{item.content}}
@@ -13,23 +13,19 @@
 	export default {
 		data() {
 			return {
-				homes: 'danger',
-				editableTabsValue: '',
 				TabsData: this.$store.state.tabList
 			}
 		},
 		methods: {
-			tabClick(e) {
+			tabClick(e) {//点击当前tabs切换路由
 				if (e.name != this.$route.path) {
 					this.$router.push(e.name)
 				}
 			},
 			tabClose(e) {
-				// this.$router.push(e.name)
-				this.$store.commit('delTab', e)
-				console.log('tabClick',e,this.TabsData)
-				this.$store.commit('addinclude', e)
-				if(e===this.$route.path){//删除当前这个
+				this.$store.commit('delTab', e)//删除tab
+				this.$store.commit('addinclude', e)//删除当前的这个缓存界面
+				if(e===this.$route.path){//删除了当前的这个/如果不是当前的tabs,则选择的是当前的abs不变
 					this.$router.replace(this.TabsData[this.TabsData.length-1].path)
 				}
 			},
@@ -46,25 +42,25 @@
 		}
 
 		.el-tabs--border-card>.el-tabs__header {
-		 background-color: #fff;
-			border-bottom: 1px solid #DCDFE6;
+			background-color: #fff;
+			border-bottom: none;
 			margin: 0;
 		}
 
 		.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
 			color: #fff;
 			background-color: #409EFF;
-			border-right-color: #DCDFE6;
-			border-left-color: #DCDFE6;
+			border-right-color: none;
+			border-left-color: none;
 		}
-
+		
 		.el-tabs--border-card>.el-tabs__header .el-tabs__item {
-			border: none;
+			border: 1px solid #DCDFE6;
+			margin-right: 10px;
+			margin-top: 0;
 		}
-
-		.el-tabs--border-card {
-			border:none;
-			box-shadow: none;
+		.el-tabs--border-card{
+			border-top: none;
 		}
 	}
 </style>