From 2aa66115df56c067965b3d54a6c6f14c50218396 Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Wed, 19 Jun 2024 18:26:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=A8=E6=88=B7=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../personal-center/userinfo/userinfo.vue     | 66 +++++++++++--------
 1 file changed, 38 insertions(+), 28 deletions(-)

diff --git a/src/views/personal-center/userinfo/userinfo.vue b/src/views/personal-center/userinfo/userinfo.vue
index 6994ab3..8e496b4 100644
--- a/src/views/personal-center/userinfo/userinfo.vue
+++ b/src/views/personal-center/userinfo/userinfo.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="dc-page">
-    <div class="my_avatar">
+    <div class="my-avatar">
       <a-avatar :size="100">
         <img alt="avatar" :src="myImage" />
       </a-avatar>
-      <div class="my_name">
-        <div class="my_title title_1">兔子先森</div>
-        <div class="my_local"><icon-location />浙江杭州</div>
+      <div class="my-name">
+        <div class="my-title title-1">兔子先森</div>
+        <div class="my-local"><icon-location />浙江杭州</div>
       </div>
     </div>
     <a-grid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 5 }" :col-gap="16" :row-gap="16">
       <a-grid-item>
-        <div class="title_1">👋关于我</div>
-        <div class="type_row" v-for="item in list.aboutMe" :key="item.label">
-          <div class="column_title">{{ item.label }}：</div>
+        <div class="title-1">👋关于我</div>
+        <div class="type-row" v-for="item in list.aboutMe" :key="item.label">
+          <div class="column-title">{{ item.label }}：</div>
           <div v-for="(type, index) in item.value" :key="index">
             <a-tag :color="item.theme">
               {{ type }}
@@ -22,16 +22,16 @@
         </div>
       </a-grid-item>
       <a-grid-item>
-        <div class="title_1">💬联系我</div>
-        <div class="type_row" v-for="item in list.callMe" :key="item.label">
-          <div class="column_title_2">{{ item.label }}：</div>
-          <div>{{ item.value }}</div>
+        <div class="title-1">💬联系我</div>
+        <div class="type-row" v-for="item in list.callMe" :key="item.label">
+          <div class="column-title-2">{{ item.label }}：</div>
+          <div :class="item.link ? 'link-hover' : ''" @click="onLink(item)">{{ item.value }}</div>
         </div>
       </a-grid-item>
       <a-grid-item>
-        <div class="title_1">🐾其它</div>
-        <div class="type_row" v-for="item in list.other" :key="item.label">
-          <div class="column_title_2">{{ item.label }}：</div>
+        <div class="title-1">🐾其它</div>
+        <div class="type-row" v-for="item in list.other" :key="item.label">
+          <div class="column-title-2">{{ item.label }}：</div>
           <div>{{ item.value }}</div>
         </div>
       </a-grid-item>
@@ -51,11 +51,11 @@ const list = reactive({
     { label: "💙兴趣爱好", value: ["读书", "音乐", "狗狗🐕"], theme: "purple" }
   ],
   callMe: [
-    { label: "📧邮箱", value: "2547096351@qq.com" },
-    { label: "📠微信", value: "fanction-w" },
-    { label: "📚思否", value: "兔子先森" },
-    { label: "🛰️博客", value: "兔子先森Ace" },
-    { label: "✒️掘金", value: "兔子先森Ace" }
+    { label: "📧邮箱", value: "2547096351@qq.com", link: false },
+    { label: "📠微信", value: "fanction-w", link: false },
+    { label: "📚思否", value: "兔子先森", link: true, url: "https://segmentfault.com/blog/dcodes" },
+    { label: "✒️掘金", value: "兔子先森Ace", link: true, url: "https://juejin.cn/user/1728883023940600/posts" },
+    { label: "🛰️gitee", value: "兔子先森Ace", link: true, url: "https://gitee.com/wang_fan_w" }
   ],
   other: [
     { label: "🧭公众号", value: "DCodes" },
@@ -63,20 +63,25 @@ const list = reactive({
   ]
 });
 console.log(list);
+
+const onLink = (item: any) => {
+  if (!item.link) return;
+  window.open(item.url);
+};
 </script>
 
 <style lang="scss" scoped>
-.my_avatar {
+.my-avatar {
   display: flex;
   align-items: center;
   margin-bottom: calc($margin * 2);
-  .my_name {
+  .my-name {
     height: 60px;
     margin-left: $margin;
-    .my_title {
+    .my-title {
       height: 30px;
     }
-    .my_local {
+    .my-local {
       font-size: $font-size-body-3;
       height: 30px;
       display: flex;
@@ -85,22 +90,27 @@ console.log(list);
   }
 }
 
-.type_row {
+.type-row {
   height: 25px;
   margin-top: $margin;
   display: flex;
   align-items: center;
   column-gap: $margin;
-  .column_title {
+  .column-title {
     min-width: 90px;
   }
-  .column_title_2 {
-    min-width: 62px;
+  .column-title-2 {
+    min-width: 68px;
   }
 }
 
-.title_1 {
+.title-1 {
   font-size: $font-size-title-1;
   font-weight: bold;
 }
+
+.link-hover {
+  cursor: pointer;
+  color: $color-primary;
+}
 </style>