修改个人信息页面

src/style/style.scss

@@ -4,3 +4,4 @@
 @import 'media.scss';
 @import 'dark.scss';
 @import 'home.scss';
+@import 'user.scss';

src/style/user.scss

@@ -0,0 +1,110 @@
+.userBox{
+	.userAside{
+		border-right: 0;
+		.el-header{
+			margin-bottom: 10px;
+			border-bottom: 0;
+			background: var(--el-bg-color-overlay);
+			border-top-left-radius: 6px;
+			border-top-right-radius: 6px;
+			.user-info-top{
+				display: flex;
+				align-items: center;
+				.userView{
+					flex: 1;
+					overflow: hidden;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					flex-direction: column;
+					padding: 0 10px;
+					.name{
+						width: 100%;
+						margin-bottom: 14px;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+						overflow: hidden;
+						text-align: center;
+						font-size: 16px;
+						font-weight: 700;
+					}
+				}
+			}
+		}
+		.el-main{
+			background: var(--el-bg-color-overlay);
+			padding: 10px 0;
+		}
+	}
+	.userMain{
+		margin: 0 0 0 10px;
+		box-sizing: border-box;
+		.el-card{
+			border:0;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			.el-card__header{
+				border-bottom: 1px solid var(--el-border-color-light);
+				padding-bottom: 15px;
+				font-size: 16px;
+				font-weight: 400;
+				margin: 0 10px;
+			}
+			.el-card__body{
+				flex: 1;
+				padding: 20px 10px 0 10px;
+				overflow: hidden;
+				.nopadding{
+					height: 100%;
+				}
+			}
+		}
+	}
+	.userMainPading_0{
+		.el-card{
+			.el-card__body{
+				padding: 0 10px 0 10px;
+			}
+		}
+	}
+}
+
+
+.passwordView{
+	.title{
+		width: 100%;
+		display: flex;
+		align-items: center;
+		margin-bottom: 10px;
+		.name{
+			flex-basis: 120px;
+		}
+		.strength{
+			flex: 1;
+		}
+	}
+	.text{
+		margin: 6px 0;
+		display: flex;
+		align-items: center;
+		.icon{
+			width: 10px;
+			height: 10px;
+			border: 2px solid var(--el-color-warning);
+			background: var(--el-bg-color-overlay);
+			border-radius: 50%;
+			margin-right: 8px;
+		}
+	}
+}
+
+.mainMenu{
+	.el-menu-item{
+		height: 48px;
+		line-height: 48px;
+		span{
+			line-height: 48px;
+		}
+	}
+}

src/views/userCenter/index.vue

@@ -1,17 +1,18 @@
 <template>
-	<el-main>
+	<el-container class="mainBox mainNoBack userBox">
-		<el-container class="page-user">
+		<el-aside class="userAside" style="width: 226px;">
-			<el-aside style="width: 240px;">
 			<el-container>
 				<el-header style="height: auto;display: block;">
 					<div class="user-info-top">
 						<el-avatar :size="70" src="img/avatar.jpg"></el-avatar>
-							<h2>{{ user.userName }}</h2>
+						<div class="userView">
+							<h2 class="name">{{ user.userName }}</h2>
 							<p><el-tag effect="dark" round size="large" disable-transitions>{{ user.role }}</el-tag></p>
 						</div>
+					</div>
 				</el-header>
 				<el-main class="nopadding">
-						<el-menu class="menu" :default-active="page">
+					<el-menu class="menu mainMenu" :default-active="page">
 						<el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
 							<el-menu-item v-for="item in group.list" :key="item.component" :index="item.component" @click="openPage">
 								<el-icon v-if="item.icon"><component :is="item.icon"/></el-icon>
@@ -24,7 +25,7 @@
 				</el-main>
 			</el-container>
 		</el-aside>
-			<el-main>
+		<el-main class="userMain userMainPadding_0">
 			<Suspense>
 				<template #default>
 					<component :is="page"/>
@@ -35,7 +36,6 @@
 			</Suspense>
 		</el-main>
 	</el-container>
-	</el-main>
 </template>
 
 <script>
@@ -134,3 +134,6 @@
 		}
 	}
 </script>
+<style scoped lang="scss">
+
+</style>