1
// row-flex
2
.row-flex {
3
    margin-top: -10px;
4
    margin-bottom: -10px;
5
    display: flex;
6
    flex-wrap: wrap;
7
}
8

9
.row-flex .el-col {
10
    padding-top: 10px;
11
    padding-bottom: 10px;
12
}
13
// row-flex END

1
// 只在非移动端应用五列布局（屏幕宽度≥1080px）
2
@media (min-width: 1080px) {
3
    // 针对数据卡片的五列布局
4
    .row-flex.five-cols .el-col {
5
        flex: 0 0 20% !important;
6
        max-width: 20% !important;
7
    }
8
}

1
<el-row class="row-flex five-cols">
2
  <el-col :md="4" :sm="12" :xs="12">
3
    <!-- 卡片内容 -->
4
  </el-col>
5
  <!-- 重复4次，共5个el-col -->
6
</el-row>

1
// 五列布局样式 - 只在非移动端生效
2
@media (min-width: 1080px) {
3
    .row-flex.five-cols .el-col {
4
        flex: 0 0 20% !important;
5
        max-width: 20% !important;
6
    }
7
}

1
<template>
2
  <div class="content">
3
    <!-- 数据卡片容器 -->
4
    <el-row class="row-flex five-cols">
5
      <!-- 卡片1 -->
6
      <el-col :md="4" :sm="12" :xs="12">
7
        <div class="item">
8
          <div class="icon-box">
9
            <el-icon size="24"><MessageFilled /></el-icon>
10
          </div>
11
          <div class="text-box">
12
            <div class="text">今日会议总数</div>
13
            <div class="num">12</div>
14
          </div>
15
        </div>
16
      </el-col>
17

18
      <!-- 卡片2 -->
19
      <el-col :md="4" :sm="12" :xs="12">
20
        <div class="item">
21
          <div class="icon-box">
22
            <el-icon size="24"><UserFilled /></el-icon>
23
          </div>
24
          <div class="text-box">
25
            <div class="text">今日参会人数</div>
26
            <div class="num">34</div>
27
          </div>
28
        </div>
29
      </el-col>
30

31
      <!-- 卡片3-5省略 -->
32

33
    </el-row>
34
  </div>
35
</template>
36

37
<style scoped>
38
.item {
39
  background: #fff;
40
  padding: 16px;
41
  border-radius: 8px;
42
  display: flex;
43
  align-items: center;
44
  transition: all 0.3s ease;
45
  height: 100%;
46
}
47

48
.icon-box {
49
  margin-right: 16px;
50
  color: #409eff;
51
}
52

53
.text {
54
  font-size: 14px;
55
  color: #606266;
56
  margin-bottom: 8px;
57
}
58

59
.num {
60
  font-size: 24px;
61
  font-weight: bold;
62
  color: #303133;
63
}
64
</style>