feat: 个人信息“

src/views/personal-center/userinfo/userinfo.vue

@@ -5,15 +5,15 @@
         <img alt="avatar" :src="myImage" />
       </a-avatar>
       <div class="my-name">
-        <div class="my-title title-1">兔子先森</div>
+        <div class="my-title title-size-1">兔子先森</div>
         <div class="my-local"><icon-location />浙江杭州</div>
       </div>
     </div>
-    <a-grid :cols="{ xs: 1, sm: 1, md: 2, lg: 2, xl: 4 }" :col-gap="16" :row-gap="16">
+    <a-grid :cols="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 3 }" :col-gap="16" :row-gap="16">
       <a-grid-item>
-        <div class="title-1">👋关于我</div>
+        <div class="title-size-1">👋关于我</div>
         <div class="type-row" v-for="item in list.aboutMe" :key="item.label">
-          <div class="column-title">{{ item.label }}：</div>
+          <div class="column-title-size-1">{{ item.label }}：</div>
           <div v-for="(type, index) in item.value" :key="index">
             <a-tag :color="item.theme">
               {{ type }}
@@ -22,18 +22,28 @@
         </div>
       </a-grid-item>
       <a-grid-item>
-        <div class="title-1">💬联系我</div>
+        <div class="title-size-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="column-title-size-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="title-size-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="column-title-size-2">{{ item.label }}：</div>
           <div>{{ item.value }}</div>
         </div>
+        <a-image width="100" :src="officialAccount" />
+      </a-grid-item>
+      <a-grid-item>
+        <a-image default-scale width="100%" height="220" :src="otherImage" />
+      </a-grid-item>
+      <a-grid-item>
+        <div class="title-size-2">✨Hello 朋友们✨</div>
+        <div class="type-row" v-for="item in list.introduce" :key="item.label">
+          <div class="text-ellipsis">{{ item.label }}</div>
+        </div>
       </a-grid-item>
     </a-grid>
   </div>
@@ -41,6 +51,8 @@
 
 <script setup lang="ts">
 import myImage from "@/assets/img/my-image.jpg";
+import otherImage from "@/assets/img/other-image.jpg";
+import officialAccount from "@/assets/img/official-account.png";
 
 const list = reactive({
   aboutMe: [
@@ -59,7 +71,14 @@ const list = reactive({
   ],
   other: [
     { label: "🧭公众号", value: "DCodes" },
-    { label: "🌟公众号二维码", value: "xxx" }
+    { label: "🌟公众号二维码", value: "" }
+  ],
+  introduce: [
+    { label: "👋欢迎来到兔子先森的project，记录思考成长，一起进步" },
+    { label: "🔖长期主义者一枚，持续学习拓展思维及方法论" },
+    { label: "🤔行业瞬息万变，时刻关注行业最新资讯" },
+    { label: "🤝职场相处沟通都需要技巧，持续记录学习职场二三事" },
+    { label: "🌈人生多彩，除了工作还有很大的世界供我们探索，Let's go!" }
   ]
 });
 console.log(list);
@@ -99,18 +118,25 @@ const onLink = (item: any) => {
   display: flex;
   align-items: center;
   column-gap: $margin;
-  .column-title {
+  .column-title-size-1 {
     min-width: 90px;
   }
-  .column-title-2 {
+  .column-title-size-2 {
     min-width: 68px;
   }
+  .text-ellipsis {
+    white-space: nowrap;
+  }
 }
 
-.title-1 {
+.title-size-1 {
   font-size: $font-size-title-1;
   font-weight: bold;
 }
+.title-size-2 {
+  font-size: $font-size-title-2;
+  font-weight: bold;
+}
 
 .link-hover {
   cursor: pointer;