自适应时间线信息图表HTML样例，HTML/Vue代码在线实时编辑、预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

            
            <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自适应时间线信息图表</title>
  <style>
    /* 重置默认样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    /* 页面整体布局设置 */
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #f5f5f5;
      font-family: "Microsoft YaHei", Arial, sans-serif;
    }
    
    /* 容器样式设置 */
    .container {
      display: flex;
      flex-wrap: wrap; /* 允许元素换行 */
      gap: 20px; /* 元素间距 */
      padding: 20px;
      width: 100%;
      max-width: 1400px;
      justify-content: center;
    }
    
    /* 步骤卡片样式 */
    .step {
      flex: 0 1 calc(50% - 20px); /* 弹性布局计算宽度 */
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      position: relative;
      min-width: 280px;
      max-width: 280px;
    }
    
    /* 序号样式 */
    .number {
      width: 40px;
      height: 40px;
      background: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: bold;
      margin: 0 auto 15px;
    }
    
    /* 为不同步骤设置不同的序号颜色 */
    .step:nth-child(1) .number { color: #4A9FFF; }
    .step:nth-child(2) .number { color: #FF9F4A; }
    .step:nth-child(3) .number { color: #FF4A4A; }
    .step:nth-child(4) .number { color: #6CAF97; }
    
    /* 为不同步骤设置不同的顶部边框颜色 */
    .step:nth-child(1) { border-top: 3px solid #4A9FFF; }
    .step:nth-child(2) { border-top: 3px solid #FF9F4A; }
    .step:nth-child(3) { border-top: 3px solid #FF4A4A; }
    .step:nth-child(4) { border-top: 3px solid #6CAF97; }
    
    /* 标题样式 */
    .title {
      text-align: center;
      font-size: 16px;
      margin-bottom: 10px;
      color: #333;
    }
    
    /* 描述文本样式 */
    .description {
      font-size: 14px;
      color: #666;
      text-align: center;
      line-height: 1.6;
    }
    
    /* 图标样式 */
    .icon {
      text-align: center;
      font-size: 24px;
      margin-bottom: 10px;
      color: #999;
    }
  </style>
</head>
<body>
  <!-- 主容器 -->
  <div class="container">
    <!-- 用户管理模块 -->
    <div class="step">
      <div class="number">01</div>
      <div class="icon">👤</div>
      <div class="title">用户管理</div>
      <div class="description">提供完整的用户管理系统，包含注册、登录、权限控制等功能模块。</div>
    </div>
    <!-- 数据中心模块 -->
    <div class="step">
      <div class="number">02</div>
      <div class="icon">🏠</div>
      <div class="title">数据中心</div>
      <div class="description">集中管理各类数据资源，实现数据的统一存储与高效分析。</div>
    </div>
    <!-- 系统监控模块 -->
    <div class="step">
      <div class="number">03</div>
      <div class="icon">📡</div>
      <div class="title">系统监控</div>
      <div class="description">实时监控系统运行状态，及时发现并解决潜在问题。</div>
    </div>
    <!-- 业务管理模块 -->
    <div class="step">
      <div class="number">04</div>
      <div class="icon">🛒</div>
      <div class="title">业务管理</div>
      <div class="description">灵活的业务处理流程，支持自定义工作流程配置。</div>
    </div>
  </div>
</body>
</html>