'UI大完成版'

src/views/About.vue

@@ -152,10 +152,10 @@ const milestones = [
         <div class="max-w-4xl mx-auto">
           <div class="relative">
             <!-- Timeline Line -->
-            <div class="absolute top-0 left-6 md:left-1/2 w-0.5 h-full bg-primary-light transform -translate-x-1/2 wow animate__animated animate__height"></div>
+            <div class="absolute top-0 left-6 md:left-1/2 w-1 h-full bg-primary-light transform -translate-x-1/2 wow animate__animated animate__height"></div>
             
             <!-- Timeline Items -->
-            <div class="space-y-12">
+            <div class="space-y-16">
               <div 
                 v-for="(milestone, index) in milestones" 
                 :key="index"
@@ -168,24 +168,52 @@ const milestones = [
                   'animate__delay-md': index === 3
                 }"
               >
-                <div class="flex flex-col md:flex-row items-center">
-                  <!-- Year Bubble -->
+                <!-- Year Bubble (中间年份) -->
+                <div 
+                  class="absolute left-6 md:left-1/2 w-14 h-14 bg-primary rounded-full flex items-center justify-center transform -translate-x-1/2 z-10 shadow-lg wow animate__animated animate__zoomIn animate__duration-fast"
+                  :class="{
+                    'animate__delay-xs': index === 1,
+                    'animate__delay-sm': index === 2,
+                    'animate__delay-md': index === 3
+                  }"
+                >
+                  <span class="text-text font-bold text-lg">{{ milestone.year }}</span>
+                </div>
+                
+                <!-- 内容区域 - 桌面视图 -->
+                <div class="hidden md:flex">
+                  <!-- 左侧内容 (偶数索引) -->
                   <div 
-                    class="absolute left-6 md:left-1/2 w-12 h-12 bg-primary rounded-full flex items-center justify-center transform -translate-x-1/2 z-10 wow animate__animated animate__zoomIn animate__duration-fast"
-                    :class="{
-                      'animate__delay-xs': index === 1,
-                      'animate__delay-sm': index === 2,
-                      'animate__delay-md': index === 3
-                    }"
+                    v-if="index % 2 === 0" 
+                    class="w-1/2 pr-12 text-left"
                   >
-                    <span class="text-text font-bold text-sm">{{ milestone.year }}</span>
+                    <div class="bg-background-light p-6 rounded-xl shadow-card hover:shadow-lg transition-all duration-300">
+                      <h3 class="text-xl font-bold text-text mb-2">{{ milestone.title }}</h3>
+                      <p class="text-text-secondary">{{ milestone.description }}</p>
+                    </div>
                   </div>
                   
-                  <!-- Content -->
+                  <!-- 左侧空白 (奇数索引) -->
+                  <div v-else class="w-1/2"></div>
+                  
+                  <!-- 右侧空白 (偶数索引) -->
+                  <div v-if="index % 2 === 0" class="w-1/2"></div>
+                  
+                  <!-- 右侧内容 (奇数索引) -->
                   <div 
-                    class="ml-20 md:ml-0 md:w-1/2 md:pr-8 md:text-right"
-                    :class="{ 'md:pl-8 md:pr-0 md:text-left md:order-2': index % 2 !== 0 }"
+                    v-else 
+                    class="w-1/2 pl-12 text-left"
                   >
+                    <div class="bg-background-light p-6 rounded-xl shadow-card hover:shadow-lg transition-all duration-300">
+                      <h3 class="text-xl font-bold text-text mb-2">{{ milestone.title }}</h3>
+                      <p class="text-text-secondary">{{ milestone.description }}</p>
+                    </div>
+                  </div>
+                </div>
+                
+                <!-- 移动端显示 -->
+                <div class="md:hidden ml-20">
+                  <div class="bg-background-light p-4 rounded-xl shadow-card">
                     <h3 class="text-xl font-bold text-text mb-2">{{ milestone.title }}</h3>
                     <p class="text-text-secondary">{{ milestone.description }}</p>
                   </div>