<template>
  <section class="company-timeline">
    <!-- 标题区 -->
    <div class="timeline-header">
      <h2 class="main-title">公司发展历程</h2>
      <p class="sub-title">凝聚着汗水与智慧，铸就今日辉煌</p>
    </div>

    <!-- 时间轴容器（控制曲线、飞机、阶段定位） -->
    <section class="timeline-section">
      <div class="timeline-container">
        <!-- 发展阶段 -->
        <div v-for="(item, index) in timelineData" :key="index" class="timeline-stage" :class="`stage-${index}`">
          <div class="stage-period">{{ item.period }}</div>
          <div class="stage-line"></div>
          <h3 class="stage-title">{{ item.title }}</h3>
          <ul class="stage-content">
            <li v-for="(line, i) in item.content" :key="i">{{ line }}</li>
          </ul>
          <!--          <div class="_line"></div>-->
        </div>
      </div>
    </section>
  </section>
</template>

<script setup lang="ts">
// 公司发展历程数据结构
const timelineData = [
  {
    period: '2003-2009',
    title: '创新奠基期',
    content: [
      '·核心技术突破：创始人融合中医世家传承、西医临床医学及营养学理论，独创「人体驾照」非医非药康复体系。',
      '·技术预研储备：同步开展技术底层研究，构建身心健康精准数据分析模型。'
    ]
  },
  {
    period: '2019-2022',
    title: '体系升级期',
    content: [
      '·资本助力：获磐石资本连续加注，投入技术研发与服务体系。',
      '·建设智能系统开发：启动七维AI康复系统研发，完成核心算法验证。',
      '·服务标准化：构建三位一体教练体系(客服/教练/副教练)，实现服务可复制。'
    ]
  },
  {
    period: '2022-2024',
    title: '智能深化期',
    content: [
      '·技术认证突破：七维AI康复系统通过ISO9001:2015认证',
      '·知识产权布局：累计获得15项发明专利(持续申报中)',
      '·权威资质认证：AAA级企业信用认证(GB/T23794-2023) 五星级服务认证(GB/T 27922-2011)'
    ]
  },
  {
    period: '2024-2025',
    title: '生态拓展期',
    content: [
      '·智能升级：推出身心健康AI全息图谱系统(基于多年算法迭代)',
      '·标准建设：主导制定AI健康国家标准(T/UNP280-2024)',
      '·政企协同：与多家政府单位达成战略合作，开展智能健康管理试点'
    ]
  }
]
</script>

<style scoped lang="less">
.company-timeline {
  padding: 80px 20px;
  border-top: 50px solid #f5f7fe;
  text-align: center;

  // 标题区样式
  .timeline-header {
    margin-bottom: 50px;
    .main-title {
      font-size: 28px;
      font-weight: bold;
      color: #333;
      margin-bottom: 10px;
    }
    .sub-title {
      font-size: 14px;
      color: #999;
    }
  }
}
.timeline-section {
  padding: 50px 192px;
  background-image: url('https://images.health.ufutx.com/202506/20/26691a92ed7a9b632cd635c08e35fb17.png');
  background-size: cover;
  background-repeat: no-repeat;

  // 核心容器：提供定位参考
  .timeline-container {
    position: relative;
    width: 100%;
    height: 955px; // 固定高度承载绝对定位
    margin: 0 auto;
    overflow: hidden;

    // 阶段通用样式
    .timeline-stage {
      position: absolute;
      width: 260px;
      display: grid;
      .stage-period {
        font-size: 36px;
        color: #313fa8;
        font-weight: bold;
      }
      .stage-line {
        width: 64px;
        height: 4px;
        background: #b2b7df;
      }
      .stage-title {
        font-size: 32px;
        font-weight: 600;
        color: #313fa8;
        margin-top: 6px;
        margin-bottom: 12px;
      }

      .stage-content {
        list-style: none;
        padding: 0;
        font-size: 18px;
        li {
          font-size: 14px;
          color: #666;
          line-height: 34px;
          position: relative;
          padding-left: 12px;
          &::before {
            // 还原设计图的·符号
            //content: '·';
            //position: absolute;
            //left: 0;
            //color: #4b89dc;
          }
        }
      }
    }

    // 阶段精准定位（匹配设计图）
    .stage-0 {
      /* 左上：2003-2009 */
      left: 0;
      top: 0;
      justify-items: end;
      &:after {
        content: '';
        position: absolute;
        top: 0;
        right: -16px;
        width: 2px;
        height: 336px;
        align-self: stretch;
        background: linear-gradient(180deg, #2458c1 0%, rgba(36, 88, 193, 0) 100%);
      }
    }
    .stage-1 {
      /* 中下：2019-2022 */
      left: 400px;
      bottom: 0;
      justify-items: start;
      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: -16px;
        width: 2px;
        height: 336px;
        align-self: stretch;
        background: linear-gradient(180deg, #2458c1 0%, rgba(36, 88, 193, 0) 100%);
      }
    }
    .stage-2 {
      /* 右上：2022-2024 */
      left: 698px;
      top: 0;
      justify-items: end;
      &:after {
        content: '';
        position: absolute;
        top: 0;
        right: -16px;
        width: 2px;
        height: 336px;
        align-self: stretch;
        background: linear-gradient(180deg, #2458c1 0%, rgba(36, 88, 193, 0) 100%);
      }
    }
    .stage-3 {
      /* 右中：2024-2025 */
      left: 1164px;
      top: 309px;
      justify-items: start;
      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: -16px;
        width: 2px;
        height: 336px;
        align-self: stretch;
        background: linear-gradient(180deg, #2458c1 0%, rgba(36, 88, 193, 0) 100%);
      }
    }
  }

  // 响应式适配（移动端垂直排列）
  @media (max-width: 768px) {
    .timeline-container {
      height: auto; // 取消固定高度
      padding: 40px 0;

      //.timeline-stage {
      //  position: relative; // 重置定位
      //  margin: 40px auto; // 垂直分布
      //  width: 80%; // 适配小屏宽度
      //  left: auto;
      //  right: auto;
      //  top: auto;
      //  bottom: auto;
      //  transform: none; // 清除变换
      //}
    }
  }
}
</style>
