console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>案件核心事实时间轴</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", "SimSun", sans-serif; }
body { padding: 40px 20px; background: #fff; }
/* 标题 */
.timeline-title {
text-align: center;
font-size: 22px;
font-weight: bold;
margin-bottom: 50px;
letter-spacing: 3px;
color: #1f2937;
}
/* 主容器 */
.timeline-wrap {
width: 1400px;
margin: 0 auto;
position: relative;
}
/* 时间轴线 */
.timeline-axis {
height: 6px;
width: 100%;
display: flex;
border-radius: 3px;
overflow: hidden;
margin-bottom: 20px;
}
.axis-red { flex: 3; background: #dc2626; }
.axis-green { flex: 3; background: #16a34a; }
.axis-orange { flex: 2; background: #ea580c; }
/* 节点容器 */
.nodes-row {
display: flex;
width: 100%;
position: relative;
}
.node {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
/* 节点圆点 */
.node-dot {
width: 16px;
height: 16px;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 0 0 2px currentColor;
position: absolute;
top: -28px;
z-index: 2;
}
.dot-red { color: #dc2626; background: #dc2626; }
.dot-green { color: #16a34a; background: #16a34a; }
.dot-orange { color: #ea580c; background: #ea580c; }
.dot-highlight {
width: 22px;
height: 22px;
top: -31px;
border-width: 4px;
}
/* 日期 */
.node-date {
font-size: 16px;
font-weight: bold;
margin-bottom: 12px;
}
.date-red { color: #dc2626; }
.date-green { color: #16a34a; }
.date-orange { color: #ea580c; }
/* 内容框（透明底色） */
.node-card {
width: 160px;
min-height: 110px;
padding: 12px 10px;
border-radius: 8px;
border: 1.5px solid currentColor;
background: transparent;
font-size: 13px;
line-height: 1.6;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.card-red { color: #991b1b; }
.card-green { color: #166534; }
.card-orange { color: #9a3412; }
.card-highlight {
border-width: 2.5px;
font-weight: bold;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
/* 证据页码标注 */
.evidence-ref {
font-size: 11px;
font-weight: bold;
margin-top: 8px;
opacity: 0.85;
}
/* 底部小标签 */
.node-tag {
font-size: 11px;
font-weight: 500;
margin-top: 10px;
padding: 3px 10px;
border-radius: 12px;
white-space: nowrap;
}
.tag-red { background: #fee2e2; color: #b91c1c; }
.tag-green { background: #dcfce7; color: #15803d; }
.tag-orange { background: #ffedd5; color: #c2410c; }
/* 图例 */
.legend {
width: 1400px;
margin: 40px auto 0;
display: flex;
justify-content: center;
gap: 60px;
font-size: 13px;
color: #374151;
}
.legend-item { display: flex; align-items: center; gap: 8px; }
.legend-dot { width: 14px; height: 14px; border-radius: 50%; }
</style>
</head>
<body>
<div class="timeline-title">买卖合同纠纷案核心事实时间轴</div>
<div class="timeline-wrap">
<!-- 时间轴线 -->
<div class="timeline-axis">
<div class="axis-red"></div>
<div class="axis-green"></div>
<div class="axis-orange"></div>
</div>
<!-- 8个节点 -->
<div class="nodes-row">
<!-- 节点1 红色（已修改文字） -->
<div class="node">
<div class="node-dot dot-red"></div>
<div class="node-date date-red">2023年2月</div>
<div class="node-card card-red">
被告拉群，沟通所谓旧批次货物质量损失事宜
</div>
</div>
<!-- 节点2 红色 -->
<div class="node">
<div class="node-dot dot-red"></div>
<div class="node-date date-red">2023年6月17日</div>
<div class="node-card card-red">
双方微信协商一致以抵扣货款20万元方式终局性了结全部历史所谓质量争议
<div class="evidence-ref">（详见原告提交补充证据三，第p126-127页）</div>
</div>
</div>
<!-- 节点3 红色 -->
<div class="node">
<div class="node-dot dot-red"></div>
<div class="node-date date-red">2023年6月23日</div>
<div class="node-card card-red card-highlight">
被告发送《品质异常处理报告》<br>载明“总费用200000元”<br>双方已实际抵扣并处理完毕
<div class="evidence-ref">（详见原告提交补充证据三，第p129-130页）</div>
</div>
<div class="node-tag tag-red"><strong>“总”即全部</strong></div>
</div>
<!-- 节点4 绿色 -->
<div class="node">
<div class="node-dot dot-green"></div>
<div class="node-date date-green">2023年6月30日/7月27日</div>
<div class="node-card card-green">
原告多次发送2023年6月新批次对账单，被告均予确认，未提出任何异议
<div class="evidence-ref">（详见原告提交补充证据三，第p131-136页）</div>
</div>
<div class="node-tag tag-green">�� 新交易独立对账</div>
</div>
<!-- 节点5 绿色 高亮 -->
<div class="node">
<div class="node-dot dot-green dot-highlight"></div>
<div class="node-date date-green">2023年8月14日</div>
<div class="node-card card-green card-highlight">
⭐ 被告盖章回传<br>2023年6月对账单
<div class="evidence-ref">（详见原告提交补充证据三，第p139-140页）</div>
</div>
</div>
<!-- 节点6 绿色 -->
<div class="node">
<div class="node-dot dot-green"></div>
<div class="node-date date-green">2023年9月16日</div>
<div class="node-card card-green">
被告全额支付2023年5月货款<br>未扣款、未提异议
<div class="evidence-ref">（详见原告提交补充证据三，第p143页）</div>
</div>
<div class="node-tag tag-green">✅ 持续以行动确认旧账已清</div>
</div>
<!-- 节点7 橙色 高亮 -->
<div class="node">
<div class="node-dot dot-orange dot-highlight"></div>
<div class="node-date date-orange">2023年10月23日</div>
<div class="node-card card-orange card-highlight">
⚡ 被告突然提出就已处理完毕的旧批次再次扣款5万元，原告拒绝，双方未达成新合意
<div class="evidence-ref">（详见原告提交补充证据三，第p147页）</div>
</div>
</div>
<!-- 节点8 橙色（已修改文字） -->
<div class="node">
<div class="node-dot dot-orange"></div>
<div class="node-date date-orange">2024年6月11日</div>
<div class="node-card card-orange">
被告再次拖欠24年4月货款，原告对此催款并再次告知此前所谓货物质量纠纷已于23年6月一次性处理完毕。<div class="evidence-ref">(详见原告提交补充证据三，第149页）</div><br>原告持续催讨拖欠的累计的货款55483.07元<div class="evidence-ref">（本诉货款请求依据详见《本诉货款55483.07元诉求事实依据一览表》及证据），对方至今未付</div>
</div>
<div class="node-tag tag-orange">�� 本案诉讼启动</div>
</div>
</div>
</div>
<!-- 图例 -->
<div class="legend">
<div class="legend-item">
<div class="legend-dot" style="background:#dc2626"></div>
<span>第一阶段：旧批次质量争议协商与终局结算</span>
</div>
<div class="legend-item">
<div class="legend-dot" style="background:#16a34a"></div>
<span>第二阶段：新批次独立对账 正常履行</span>
</div>
<div class="legend-item">
<div class="legend-dot" style="background:#ea580c"></div>
<span>第三阶段： 原告诉讼维权</span>
</div>
</div>
</body>
</html>