From f71caee8983f0a7d36be37b3a77610718d35c583 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=99=E8=BF=90=E6=A8=A1?= <1724894114@qq.com>
Date: Thu, 27 Jun 2024 22:05:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=AA=E4=BA=BA=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/style/style.scss           |   1 +
 src/style/user.scss            | 110 +++++++++++++++++++++++++++++++++
 src/views/userCenter/index.vue |  73 +++++++++++-----------
 3 files changed, 149 insertions(+), 35 deletions(-)
 create mode 100644 src/style/user.scss

diff --git a/src/style/style.scss b/src/style/style.scss
index 3076007..7a69102 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -4,3 +4,4 @@
 @import 'media.scss';
 @import 'dark.scss';
 @import 'home.scss';
+@import 'user.scss';
diff --git a/src/style/user.scss b/src/style/user.scss
new file mode 100644
index 0000000..cbbdb03
--- /dev/null
+++ b/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;
+		}
+	}
+}
diff --git a/src/views/userCenter/index.vue b/src/views/userCenter/index.vue
index 6e26ba7..e44a66a 100644
--- a/src/views/userCenter/index.vue
+++ b/src/views/userCenter/index.vue
@@ -1,41 +1,41 @@
 <template>
-	<el-main>
-		<el-container class="page-user">
-			<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>
+	<el-container class="mainBox mainNoBack userBox">
+		<el-aside class="userAside" style="width: 226px;">
+			<el-container>
+				<el-header style="height: auto;display: block;">
+					<div class="user-info-top">
+						<el-avatar :size="70" src="img/avatar.jpg"></el-avatar>
+						<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>
-					</el-header>
-					<el-main class="nopadding">
-						<el-menu class="menu" :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>
-									<template #title>
-										<span>{{item.title}}</span>
-									</template>
-								</el-menu-item>
-							</el-menu-item-group>
-						</el-menu>
-					</el-main>
-				</el-container>
-			</el-aside>
-			<el-main>
-				<Suspense>
-					<template #default>
-						<component :is="page"/>
-					</template>
-					<template #fallback>
-						<el-skeleton :rows="3" />
-					</template>
-				</Suspense>
-			</el-main>
-		</el-container>
-	</el-main>
+					</div>
+				</el-header>
+				<el-main class="nopadding">
+					<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>
+								<template #title>
+									<span>{{item.title}}</span>
+								</template>
+							</el-menu-item>
+						</el-menu-item-group>
+					</el-menu>
+				</el-main>
+			</el-container>
+		</el-aside>
+		<el-main class="userMain userMainPadding_0">
+			<Suspense>
+				<template #default>
+					<component :is="page"/>
+				</template>
+				<template #fallback>
+					<el-skeleton :rows="3" />
+				</template>
+			</Suspense>
+		</el-main>
+	</el-container>
 </template>
 
 <script>
@@ -134,3 +134,6 @@
 		}
 	}
 </script>
+<style scoped lang="scss">
+
+</style>