深度画布框架

src/views/home/setting/General.vue

@@ -1,4 +1,13 @@
 <template>
+	<div>
+		<div class="label">{{ $t('Home.userProfile') }}</div>
+		<div class="profile">
+			<img :src="userInfo?.profile" />
+			<span class="edit" @click="onProfileEdit">
+				<svg-icon name="profile-edit" size="11" />
+			</span>
+		</div>
+	</div>
 	<div>
 		<div class="label">{{ $t('Home.userName') }}</div>
 		<div class="value">{{ userInfo?.username || '------' }}</div>
@@ -41,6 +50,10 @@
 	const logout = () => {
 		userInfoStore.logOut()
 	}
+	const onProfileEdit = () => {
+		// MyEvent.emit('openProfileEditDialog')
+		console.log('openProfileEditDialog')
+	}
 </script>
  
 <style lang="less" scoped>
@@ -54,4 +67,28 @@
 		color: #fff;
 		font-size: 1.2rem;
 	}
+	.profile {
+		width: 6rem;
+		height: 6rem;
+		position: relative;
+		> img {
+			width: 100%;
+			height: 100%;
+			border-radius: 50%;
+		}
+		> .edit {
+			position: absolute;
+			bottom: 0;
+			right: 0;
+			width: 2.3rem;
+			height: 2.3rem;
+			border-radius: 50%;
+			background-color: #fff;
+			box-shadow: 0px 1px 4px 0px #1a0f011f;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+		}
+	}
 </style>

src/views/home/setting/index.vue

@@ -111,7 +111,8 @@
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
-				height: 6rem;
+				min-height: 6rem;
+				padding: 1rem 0;
 				border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
 				&:last-child {
 					border-bottom: none;