<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <h3>事件标题</h3>
      <p class="date">2025年1月</p>
      <p>这里是事件的详细描述内容。</p>
    </div>
  </div>

  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <h3>另一个事件</h3>
      <p class="date">2025年3月</p>
      <p>更多描述信息。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/8768">
                            <img src="https://img.php.cn/upload/webcode/000/000/005/175664160457344.png" alt="Ex驾校预约小程序">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/8768">Ex驾校预约小程序</a>
                            <p>传统驾校预约方式步骤繁琐，效率低下，随着移动互联网科技和5G的革新，驾校考试领域迫切需要更加简洁、高效的预约方式，便捷人们的生活。因此设计基于微信小程序的驾校预约系统，改进传统驾校预约方式，实现高效的驾校学校预约。 采用腾讯提供的小程序云开发解决方案，无须服务器和域名。驾校预约管理：开始/截止时间/人数均可灵活设置，可以自定义客户预约填写的数据项驾校预约凭证：支持线下到场后校验签到/核销/二维码自</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Ex驾校预约小程序">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/8768" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Ex驾校预约小程序">
                        </a>
                    </div>
                
    </div>
  </div>
</div>

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ddd;
  transform: translateX(-50%);
}

.timeline-item {
  display: flex;
  margin-bottom: 30px;
  position: relative;
}

.timeline-dot {
  width: 16px;
  height: 16px;
  background: #fff;
  border: 4px solid #007bff;
  border-radius: 50%;
  flex-shrink: 0;
}

.timeline-content {
  margin-left: 20px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  flex: 1;
}

.timeline-content h3 {
  margin-top: 0;
  color: #333;
}

@media (max-width: 768px) {
  .timeline::before {
    left: 30px;
  }
  
  .timeline-item {
    flex-direction: row;
  }

  .timeline-content {
    margin-left: 10px;
  }

  .timeline-dot {
    align-self: flex-start;
  }
}