Refactor code structure and remove redundant changes

pages/community/components/Timeline.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="timeline-section">
+    <h2 class="section-title">
+      <i class="timeline-icon"></i>
+      个人履历
+    </h2>
+    <div class="timeline">
+      <!-- 时间节点 -->
+      <div class="timeline-items">
+        <div v-for="(item, index) in timelineData" :key="index" :class="['timeline-item', index % 2 === 0 ? 'top' : 'bottom']">
+          <div class="content">
+            <div class="year">{{ item.year }}</div>
+            <div class="description">{{ item.description }}</div>
+          </div>
+          <div class="dot" :class="{ active: index === 0 }"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  const timelineData = ref([
+    {
+      year: '2020年',
+      description: '新创设计21号项目设计~某月某空中机',
+    },
+    {
+      year: '2021年',
+      description: '南京工业大学机器人实验室项目',
+    },
+    {
+      year: '2022年',
+      description: '新创设计21号项目设计~某月某空中机',
+    },
+    {
+      year: '2023年',
+      description: '南京工业大学机器人实验室项目',
+    },
+    {
+      year: '2023年',
+      description: '南京工业大学机器人实验室项目',
+    },
+    {
+      year: '2023年',
+      description: '南京工业大学机器人实验室项目',
+    },
+    // 可以继续添加更多数据...
+  ])
+</script>
+
+<style scoped>
+  .timeline-section {
+    margin: 30px 0;
+    padding: 20px;
+  }
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 30px;
+    font-size: 18px;
+    color: #333;
+  }
+
+  .timeline {
+    position: relative;
+    padding: 40px 0;
+  }
+
+  .timeline-items {
+    position: relative;
+    display: grid; /* 改用grid布局 */
+    grid-template-columns: repeat(4, 1fr); /* 4列 */
+    gap: 60px 20px; /* 行间距60px，列间距20px */
+    z-index: 2;
+  }
+
+  .timeline-item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 200px;
+  }
+
+  /* 时间轴横线 - 为每一行创建独立的线 */
+  .timeline-item::before {
+    content: '';
+    position: absolute;
+    left: -10px;
+    right: -10px;
+    top: 50%;
+    height: 2px;
+    background-color: #e8f3ff;
+    z-index: 1;
+  }
+
+  /* 连接相邻项目的横线 */
+  .timeline-item::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    right: -50%;
+    top: 50%;
+    height: 2px;
+    background-color: #e8f3ff;
+    z-index: 1;
+  }
+
+  /* 最后一个项目不需要连接线 */
+  .timeline-item:last-child::after {
+    display: none;
+  }
+
+  .timeline-item.top {
+    flex-direction: column;
+  }
+
+  .timeline-item.bottom {
+    flex-direction: column-reverse;
+  }
+
+  .dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: #fff;
+    border: 2px solid #005be5;
+    margin: 15px 0;
+    z-index: 2;
+  }
+
+  .dot.active {
+    background-color: #005be5;
+  }
+
+  .content {
+    text-align: center;
+    background-color: #fff;
+    padding: 0 10px;
+    width: 100%;
+  }
+
+  .top .content {
+    padding-bottom: 20px;
+  }
+
+  .bottom .content {
+    padding-top: 20px;
+  }
+
+  .year {
+    font-size: 16px;
+    color: #005be5;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+
+  .description {
+    font-size: 14px;
+    color: #666;
+    line-height: 1.5;
+  }
+
+  /* 响应式布局 */
+  @media screen and (max-width: 1200px) {
+    .timeline-items {
+      grid-template-columns: repeat(3, 1fr); /* 3列 */
+    }
+  }
+
+  @media screen and (max-width: 900px) {
+    .timeline-items {
+      grid-template-columns: repeat(2, 1fr); /* 2列 */
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+    .timeline-items {
+      grid-template-columns: 1fr; /* 1列 */
+    }
+  }
+</style>