update

admin-code/src/assets/css/reset.scss

@@ -20,7 +20,7 @@
             border-top: 4px solid#F5F7FA;
             line-height: 34px;
             &.is-active {
-                border-top: 4px solid blue;
+                border-top: 4px solid #3385FF;
             }
         }
     }

admin-code/src/pages/layout/index.vue

@@ -1,13 +1,18 @@
 <template>
-	<div class="wrapper" :class="{ collapse: menuCollapse }">
-		<div class="wrapper-left">
-			<slider></slider>
+	<div class="wrapper">
+		<div class="wrapper-top">
+			<topbar></topbar>
 		</div>
+		<!--  -->
+		<div class="wrapper-bottom">
+			<div class="wrapper-left">
+				<slider></slider>
+			</div>
 
-		<div class="wrapper-right">
-			<div class="wrapper-right__navbar">
+			<!-- <div class="wrapper-right"> -->
+			<!-- <div class="wrapper-right__navbar">
 				<topbar></topbar>
-			</div>
+				</div>-->
 
 			<div class="wrapper-right__container">
 				<!-- <process></process> -->
@@ -20,6 +25,7 @@
 					<router-view v-if="!$route.meta.keepAlive"></router-view>
 				</div>
 			</div>
+			<!-- </div> -->
 		</div>
 	</div>
 </template>
@@ -28,7 +34,7 @@
 import Topbar from './topbar/index';
 import Slider from './slider/index';
 // import Process from './process/index';
-import { mapGetters } from 'vuex';
+// import { mapGetters } from 'vuex';
 
 export default {
 	components: {
@@ -38,7 +44,7 @@ export default {
 	},
 
 	computed: {
-		...mapGetters(['menuCollapse'])
+		// ...mapGetters(['menuCollapse'])
 	}
 };
 </script>
@@ -48,9 +54,18 @@ export default {
 	background-color: #f7f7f7;
 	height: 100vh;
 	width: 100vw;
-	display: flex;
+	// display: flex;
 	overflow: hidden;
 
+	.wrapper-top {
+		width: 100%;
+	}
+
+	.wrapper-bottom {
+		display: flex;
+		height: calc(100% - 60px)
+	}
+
 	.wrapper-left {
 		background-color: #fff;
 		overflow: hidden;
@@ -58,13 +73,14 @@ export default {
 		width: 255px;
 	}
 
-	.wrapper-right {
-		height: 100%;
-		width: calc(100% - 255px);
+	// .wrapper-right {
+	// 	height: 100%;
+	// 	width: calc(100% - 255px);
 
 		.wrapper-right__container {
 			height: 100%;
-			width: 100%;
+			width: calc(100% - 255px);
+			// width: 100%;
 			box-sizing: border-box;
 			overflow: hidden;
 
@@ -73,7 +89,7 @@ export default {
 			}
 
 			.content-view {
-				height: calc(100% - 70px);
+				height: 100%;
 				width: 100%;
 				box-sizing: border-box;
 				overflow-x: hidden;
@@ -87,16 +103,16 @@ export default {
 				}
 			}
 		}
-	}
+	// }
 
-	&.collapse {
-		.wrapper-left {
-			width: 64px;
-		}
+	// &.collapse {
+	// 	.wrapper-left {
+	// 		width: 64px;
+	// 	}
 
-		.wrapper-right {
-			width: calc(100% - 64px);
-		}
-	}
+	// 	.wrapper-right {
+	// 		width: calc(100% - 64px);
+	// 	}
+	// }
 }
 </style>

admin-code/src/pages/layout/topbar/index.vue

@@ -1,7 +1,9 @@
 <template>
 	<div class="scope-topbar">
-		<div class="collapse" @click="collapse">
-			<icon-svg name="icon-menu"></icon-svg>
+		<div class="collapse">
+			<img class="avatar" :src="userInfo.headImg | default_avatar" alt="" />
+			<div>国兰花尚后台业务管理系统</div>
+			<!-- <icon-svg name="icon-menu"></icon-svg> -->
 		</div>
 
 		<!-- <el-menu :default-active="index" mode="horizontal" @select="onSelect">
@@ -60,7 +62,7 @@ export default {
 	},
 
 	computed: {
-		...mapGetters(['menuGroup', 'userInfo', 'menuCollapse'])
+		...mapGetters(['menuGroup', 'userInfo'])
 	},
 
 	methods: {
@@ -85,11 +87,11 @@ export default {
 					});
 					break;
 			}
-		},
-
-		collapse() {
-			this.COLLAPSE_MENU(!this.menuCollapse);
 		}
+
+		// collapse() {
+		// 	this.COLLAPSE_MENU(!this.menuCollapse);
+		// }
 	}
 };
 </script>
@@ -108,7 +110,8 @@ export default {
 	align-items: center;
 	height: 50px;
 	padding: 0 10px;
-	background: linear-gradient(120deg, $color2, $color);
+	// background: #3385FF;
+	background: linear-gradient(120deg, $color2 0%, #3385FF 40%);
 	color: #fff;
 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
 
@@ -117,13 +120,21 @@ export default {
 		justify-content: center;
 		align-items: center;
 		height: 40px;
-		width: 40px;
+		// width: 40px;
 		cursor: pointer;
+		font-weight: 500;
 
-		.icon-svg {
-			height: 22px;
-			width: 22px;
+		.avatar {
+			height: 32px;
+			width: 32px;
+			border-radius: 50%;
+			display: block;
+			margin-right: 10px;
 		}
+		// .icon-svg {
+		// 	height: 22px;
+		// 	width: 22px;
+		// }
 	}
 
 	.el-menu {
@@ -216,6 +227,7 @@ export default {
 			height: 32px;
 			width: 32px;
 			border-radius: 32px;
+			margin-right: 4px;
 		}
 
 		.name {

admin-code/src/store/getters.js

@@ -3,7 +3,7 @@ const getters = {
 	menuGroup: state => state.menu.group,
 	menuList: state => state.menu.menu,
 	routes: state => state.menu.routes,
-	menuCollapse: state => state.menu.collapse,
+	// menuCollapse: state => state.menu.collapse,
 	token: state => state.user.token,
 	userInfo: state => state.user.info,
 	permission: state => state.menu.permission

mobile-code/src/components/plugin/fab.vue

@@ -167,7 +167,7 @@ export default {
 		justify-content: center;
 		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
 		transition: all 0.2s linear;
-		background-image: linear-gradient(0deg, #357eff 0%, #0dc9fd 50%);
+		background-image: linear-gradient(0deg, #357eff, #0dc9fd);
 		width: 100%;
 		height: 100px;
 		border-radius: 50%;