From a9ae7fcbf0c51a7a1b7fb7ba8efdeeae793a4692 Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Fri, 21 Jun 2024 14:15:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=A8=E6=88=B7=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../user-settings/user-settings.vue           | 46 +++++++++++++++----
 1 file changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/views/personal-center/user-settings/user-settings.vue b/src/views/personal-center/user-settings/user-settings.vue
index 6e49d49..054b8ee 100644
--- a/src/views/personal-center/user-settings/user-settings.vue
+++ b/src/views/personal-center/user-settings/user-settings.vue
@@ -1,18 +1,20 @@
 <template>
   <div class="dc-page">
-    <a-row>
-      <a-col :span="4">
+    <a-row align="center">
+      <a-col :span="2">
         <div>
-          <a-avatar :size="100">
+          <a-avatar :size="100" @click="toast" trigger-type="mask">
             <img alt="avatar" :src="myImage" />
+            <template #trigger-icon>
+              <IconEdit />
+            </template>
           </a-avatar>
         </div>
       </a-col>
-      <a-col :span="6">
-        <div>头像</div>
-      </a-col>
-      <a-col :span="6">
-        <div>头像</div>
+      <a-col :span="12">
+        <a-space direction="vertical" size="large">
+          <a-descriptions :data="data" title="用户资料" :align="{ label: 'right' }" />
+        </a-space>
       </a-col>
     </a-row>
   </div>
@@ -20,6 +22,34 @@
 
 <script setup lang="ts">
 import myImage from "@/assets/img/my-image.jpg";
+import { getCurrentInstance } from "vue";
+const { proxy } = getCurrentInstance();
+const data = ref([
+  {
+    label: "用户名：",
+    value: "admin"
+  },
+  {
+    label: "昵称：",
+    value: "兔子先森"
+  },
+  {
+    label: "邮箱：",
+    value: "2547096351@qq.com"
+  },
+  {
+    label: "手机号：",
+    value: "15888888888"
+  },
+  {
+    label: "地址：",
+    value: "浙江杭州"
+  }
+]);
+
+const toast = () => {
+  proxy.$message.info("This is an info message");
+};
 </script>
 
 <style lang="scss" scoped></style>