From 59aacb598c71dd4f573cee653c17e96895bf9fed Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Tue, 16 Dec 2025 14:49:31 +0800
Subject: [PATCH] fix: fix user center style error

---
 template/tinyvue/src/api/user.ts              |  2 +-
 .../src/views/form/step/components/head.vue   | 30 +++++++++++--------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/template/tinyvue/src/api/user.ts b/template/tinyvue/src/api/user.ts
index 89a1baa3..47f90329 100644
--- a/template/tinyvue/src/api/user.ts
+++ b/template/tinyvue/src/api/user.ts
@@ -103,7 +103,7 @@ export function updateUserInfo(data: any) {
 
 export function getUserData(data?: UserData) {
   return axios.post<UserRes>(
-    `${import.meta.env.VITE_MOCK_SERVER_HOST}${import.meta.env.VITE_BASE_API}/user/data`,
+    `${import.meta.env.VITE_MOCK_SERVER_HOST}/api/user/data`,
     data,
   );
 }
diff --git a/template/tinyvue/src/views/form/step/components/head.vue b/template/tinyvue/src/views/form/step/components/head.vue
index c45f0fee..f36794e8 100644
--- a/template/tinyvue/src/views/form/step/components/head.vue
+++ b/template/tinyvue/src/views/form/step/components/head.vue
@@ -12,35 +12,39 @@
   </div>
   <div class="divider my-auto w-[1px] h-[50%] max-sm:w-[60%] max-sm:h-[1px] max-sm:smx-auto max-md:mx-[2%] max-sm:my-[2%]"></div>
   <div class="user-content pb-[8px] max-sm:pb-[20px] max-sm:mt-[10px]">
-    <tiny-layout>
+    <tiny-layout :cols="12">
       <tiny-row justify="center" class="margin-bottom flex flex-wrap">
         <transition-fade-down-group>
-          <img src="@/assets/images/head-1.png" class="head-image" />
-          <tiny-col class="w-[calc((100%-140px)/3)] max-md:w-[calc((100%-94px)/2)] max-sm:w-[calc(100%-50px)]">
+          <tiny-col class="w-[calc((100%-140px)/3)] max-md:w-[calc((100%-94px)/2)] max-sm:w-[calc(100%-50px)] flex" :span="4">
+            <img src="@/assets/images/head-1.png" class="head-image" />
             <div class="col">
               <div>{{ $t('stepForm.recruitment.department') }}</div>
               <div class="space"></div>
               <div>{{ userStore.userInfo.department }}</div>
             </div>
           </tiny-col>
-          <img src="@/assets/images/head-2.png" class="head-image" />
-          <tiny-col class="w-[calc((100%-140px)/3)] max-md:w-[calc((100%-94px)/2)] max-sm:w-[calc(100%-50px)]">
+          <tiny-col class="w-[calc((100%-140px)/3)] max-md:w-[calc((100%-94px)/2)] max-sm:w-[calc(100%-50px)] flex" :span="4">
+            <img src="@/assets/images/head-2.png" class="head-image" />
             <div class="col">
               <div>{{ $t('stepForm.recruitment.type') }}</div>
               <div class="space"></div>
               <div>{{ userStore.userInfo.employeeType }}</div>
             </div>
           </tiny-col>
-          <img src="@/assets/images/head-3.png" class="head-image" />
-          <tiny-col class="w-[calc((100%-140px)/3)] max-md:w-[calc((100%-94px)/2)] max-sm:w-[calc(100%-50px)]">
+          <tiny-col class="w-[calc((100%-140px)/3)] max-md:w-[calc((100%-94px)/2)] max-sm:w-[calc(100%-50px)] flex" :span="4">
+            <img src="@/assets/images/head-3.png" class="head-image" />
             <div class="col">
               <div>{{ $t('stepForm.recruitment.position') }}</div>
               <div class="space"></div>
               <div>{{ userStore.userInfo.job }}</div>
             </div>
           </tiny-col>
-          <img src="@/assets/images/head-4.png" class="head-image" />
-          <tiny-col class="w-[calc((100%-140px)/3)] max-md:w-[calc((100%-94px)/2)] max-sm:w-[calc(100%-50px)]">
+        </transition-fade-down-group>
+      </tiny-row>
+      <tiny-row justify="center" class="margin-bottom flex flex-wrap">
+        <transition-fade-down-group>
+          <tiny-col class="w-[calc((100%-140px)/3)] max-md:w-[calc((100%-94px)/2)] max-sm:w-[calc(100%-50px)] flex" :span="4">
+            <img src="@/assets/images/head-4.png" class="head-image" />
             <div class="col">
               <div>{{ $t('stepForm.probation.start') }}</div>
               <div class="space"></div>
@@ -51,16 +55,16 @@
               </div>
             </div>
           </tiny-col>
-          <img src="@/assets/images/head-5.png" class="head-image" />
-          <tiny-col class="w-[calc((100%-140px)/3)] max-md:w-[calc((100%-94px)/2)] max-sm:flex-col max-sm:w-[calc(100%-50px)]">
+          <tiny-col class="w-[calc((100%-140px)/3)] max-md:w-[calc((100%-94px)/2)] max-sm:flex-col max-sm:w-[calc(100%-50px)] flex" :span="4">
+            <img src="@/assets/images/head-5.png" class="head-image" />
             <div class="col">
               <div>{{ $t('stepForm.start.date') }}</div>
               <div class="space"></div>
               <div>{{ userStore.userInfo.protocolStart }}</div>
             </div>
           </tiny-col>
-          <img src="@/assets/images/head-6.png" class="head-image" />
-          <tiny-col class="w-[calc((100%-140px)/3)] max-md:w-[calc((100%-94px)/2)] max-sm:flex-col max-sm:w-[calc(100%-50px)]">
+          <tiny-col class="w-[calc((100%-140px)/3)] max-md:w-[calc((100%-94px)/2)] max-sm:flex-col max-sm:w-[calc(100%-50px)] flex" :span="4">
+            <img src="@/assets/images/head-6.png" class="head-image" />
             <div class="col">
               <div>{{ $t('stepForm.probation.period') }}</div>
               <div class="space"></div>