多步骤信息图表HTML示例2，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
133
134
135
136
137
138
139
140
141
142
143
144
145
146

            
            <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>多步骤信息图表HTML示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: '微软雅黑', sans-serif;
      background-color: #f0f2f5;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
    }
    
    .container {
      width: 100%;
      max-width: 800px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      padding: 40px 20px;
    }
    
    .header {
      margin-bottom: 40px;
      text-align: center;
    }
    
    .title {
      font-size: 32px;
      color: #333;
    }
    
    .step-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    .step {
      display: flex;
      align-items: center;
      padding: 20px;
      border-radius: 8px;
      color: #333;
      background-color: #fff;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .step:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .step:nth-child(odd) { background-color: #e3f2fd; }
    .step:nth-child(even) { background-color: #e8f5e9; }
    
    .icon {
      font-size: 40px;
      margin-right: 20px;
      color: #2196f3;
    }
    
    .step-content {
      flex: 1;
    }
    
    .step-number {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #555;
    }
    
    .step-title {
      font-size: 20px;
      margin-bottom: 8px;
      color: #222;
    }
    
    .step-desc {
      font-size: 16px;
      line-height: 1.6;
      color: #666;
    }
    
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1 class="title">多步骤信息图表HTML示例</h1>
    </div>
    <div class="step-container">
      <div class="step">
        <div class="icon">🏠</div>
        <div class="step-content">
          <div class="step-number">步骤 1</div>
          <div class="step-title">计划</div>
          <div class="step-desc">首先，明确目标，确保所有参与者对项目的愿景有清晰的理解。</div>
        </div>
      </div>
      <div class="step">
        <div class="icon">💡</div>
        <div class="step-content">
          <div class="step-number">步骤 2</div>
          <div class="step-title">实施</div>
          <div class="step-desc">进行头脑风暴，收集各种可能的解决方案和创意。</div>
        </div>
      </div>
      <div class="step">
        <div class="icon">📈</div>
        <div class="step-content">
          <div class="step-number">步骤 3</div>
          <div class="step-title">监控</div>
          <div class="step-desc">分析数据，评估每个方案的可行性和潜在影响。</div>
        </div>
      </div>
      <div class="step">
        <div class="icon">💬</div>
        <div class="step-content">
          <div class="step-number">步骤 4</div>
          <div class="step-title">调整</div>
          <div class="step-desc">邀请团队成员讨论，确保所有观点都得到考虑。</div>
        </div>
      </div>
      <div class="step">
        <div class="icon">⚙️</div>
        <div class="step-content">
          <div class="step-number">步骤 5</div>
          <div class="step-title">评估</div>
          <div class="step-desc">最后，制定行动计划，分配任务并设定时间表。</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>