feat: 个人中心改版

src/pages/profile/index.vue

@@ -1,41 +1,25 @@
 <template>
   <div class="profile-page bg-[#f8f8f8]">
-    <div class="h-215 relative w-full bg-[url('~/assets/img/profile/profile_banner.png')] bg-no-repeat bg-cover"
-    >
-      <div class="absolute w-335 left-20 bottom-10 right-20 ">
+    <div class="pt-66 pb-14 px-26 relative w-full bg-[url('~/assets/img/profile/profile_banner.png')] bg-no-repeat bg-cover">
+      <NuxtLink to="/chat/sweep" class="absolute top-17 right-14">
+        <img src="~/assets/img/profile/pofile_qr.png" height="33" width="33" alt="扫一扫"/>
+      </NuxtLink>
+      <div class="w-335 left-20 top-66 right-20 ">
         <NuxtLink to="/profile/userInfo">
-          <div class="flex flex-row items-center text-black-3">
-            <van-image
-                :src="userInfo.headImageUrl || defaultAvatar"
-                class="mr-9 shrink-0"
-                width="75px"
-                height="75px"
-                radius="37.5px"
-            />
-            <div class="flex-1 min-w-0 shrink-0 text-[#fff]">
-              <div class="text-2xl font-bold text-ellipsis text-nowrap overflow-hidden ...">{{ userInfo.showName }}</div>
-              <div class="text-base text-ellipsis line-clamp-2 overflow-hidden ...">个性签名：{{ userInfo.personalSign || "暂未填写" }}</div>
+          <div class="flex flex-col w-full text-black-3">
+            <div class="flex flex-row items-center">
+              <van-image
+                  :src="userInfo.headImageUrl || defaultAvatar"
+                  class="mr-9 shrink-0"
+                  width="75px"
+                  height="75px"
+                  radius="37.5px"
+              />
+              <div class="text-2xl text-[#fff] font-bold text-ellipsis text-nowrap overflow-hidden ...">{{ userInfo.showName }}</div>
             </div>
+            <div class="mt-24 text-base text-[#fff] ">{{ userInfo.personalSign || "暂未填写" }}</div>
           </div>
         </NuxtLink>
-        <div class="grid grid-cols-4 gap-10 mt-14">
-          <template v-for="(tab, i) in tabList" :key="i">
-            <template v-if="tab.listType">
-              <NuxtLink :to="`/follow?listType=${tab.listType}`">
-                <div class="text-[#fff] text-base text-center ">
-                  <div class="font-semibold">{{tab.numText}} </div>
-                  <div class="text-sm">{{ tab.label }}</div>
-                </div>
-              </NuxtLink>
-            </template>
-            <template v-else>
-              <div class="text-[#fff] text-base text-center ">
-                <div class="font-semibold">{{tab.numText}} </div>
-                <div class="text-sm">{{ tab.label }}</div>
-              </div>
-            </template>
-          </template>
-        </div>
         <!--        <NuxtLink to="/profile/userInfo" class="flex items-center space-x-10">
                   <van-image
                     :src="userInfo.headImageUrl || defaultAvatar"
@@ -53,6 +37,24 @@
                   个性签名：{{ userInfo.personalSign || "暂未填写" }}
                 </div>-->
       </div>
+      <div class="mt-17 w-full grid grid-cols-4 gap-10">
+        <template v-for="(tab, i) in tabList" :key="i">
+          <template v-if="tab.listType">
+            <NuxtLink :to="`/follow?listType=${tab.listType}`">
+              <div class="text-[#fff] text-base text-center ">
+                <div class="font-semibold">{{tab.numText}} </div>
+                <div class="text-sm">{{ tab.label }}</div>
+              </div>
+            </NuxtLink>
+          </template>
+          <template v-else>
+            <div class="text-[#fff] text-base text-center ">
+              <div class="font-semibold">{{tab.numText}} </div>
+              <div class="text-sm">{{ tab.label }}</div>
+            </div>
+          </template>
+        </template>
+      </div>
     </div>
     <div class="bg-white rounded-xl mx-20 mt-20 py-20">
       <div class="text-xl font-semibold ml-20">常用功能</div>
@@ -86,10 +88,10 @@ const userInfoStore = useUserInfoStore();
 const {userInfo} = storeToRefs(userInfoStore);
 
 const tabList = ref([
-  {label: '互关', listType: 'friend', numText: ''},
-  {label: '关注', listType: 'follow', numText: ''},
-  {label: '粉丝', listType: 'fans', numText: ''},
-  {label: '获赞', listType: null, numText: ''},
+  {label: '互关', listType: 'friend', numText: '0'},
+  {label: '关注', listType: 'follow', numText: '0'},
+  {label: '粉丝', listType: 'fans', numText: '0'},
+  {label: '获赞', listType: null, numText: '0'},
 ])
 const getData = async () => {
   try {

src/pages/profile/userInfo.client.vue

@@ -85,7 +85,7 @@
           rows="3"
           autosize
           label="个性签名"
-          maxlength="200"
+          maxlength="80"
           type="textarea"
           placeholder="请输入留言"
           show-word-limit