vue2+el-row制作一个无间距网格

最新推荐文章于 2024-06-30 09:46:54 发布

weixin_58412143

最新推荐文章于 2024-06-30 09:46:54 发布

阅读量279

点赞数 1

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_58412143/article/details/137860994

版权

这篇文章详细描述了一个使用Vue.js框架构建的后台统计表格，展示了订单、支付、退款和佣金等各类数据的布局结构以及百分比增长。每个网格项通过el-row和el-col组件灵活设置宽度，体现了响应式设计的特点。

摘要由CSDN通过智能技术生成

:gutter="0"无间距 :span=""总为24份，根据自身需要设置每个网格项的宽度

    <div class="thirdTabs">
                  <!-- 第一行 -->
                  <el-row :gutter="0" class="thirdTabs-row-1">
                    <el-col :span="4" class="thirdTabs-col-1">下单统计</el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>下单人数</span>
                        <span class="infoCloumnSize">0</span>
                        <span class="nameGray">
                          较昨日:
                          <vab-icon icon="arrow-up-line" class="iconSizeUp" />
                          10%
                        </span>
                      </div>
                    </el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>下单订单数</span>
                        <span class="infoCloumnSize">0</span>
                        <span class="nameGray">
                          较昨日:
                          <vab-icon icon="arrow-up-line" class="iconSizeUp" />
                          10%
                        </span>
                      </div>
                    </el-col>
                    <el-col :span="10" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>下单总金额</span>
                        <span class="infoCloumnSize">0</span>
                        <span class="nameGray">
                          较昨日:
                          <vab-icon icon="arrow-up-line" class="iconSizeUp" />
                          10%
                        </span>
                      </div>
                    </el-col>
                  </el-row>
                  <!-- 第二行 -->
                  <el-row :gutter="0" class="thirdTabs-row-2">
                    <el-col :span="4" class="thirdTabs-col-2">支付统计</el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>支付人数</span>
                        <span class="infoCloumnSize">0</span>
                      </div>
                    </el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>支付订单数</span>
                        <span class="infoCloumnSize">0</span>
                      </div>
                    </el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>支付总金额</span>
                        <span class="infoCloumnSize">0</span>
                      </div>
                    </el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>支付总佣金</span>
                        <span class="infoCloumnSize">0</span>
                      </div>
                    </el-col>
                  </el-row>
                  <!-- 第三行 -->
                  <el-row :gutter="0" class="thirdTabs-row-3">
                    <el-col :span="4" class="thirdTabs-col-3">退款统计</el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>退款人数</span>
                        <span class="infoCloumnSize">0</span>
                      </div>
                    </el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>退款订单数</span>
                        <span class="infoCloumnSize">0</span>
                      </div>
                    </el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>退款总金额</span>
                        <span class="infoCloumnSize">0</span>
                      </div>
                    </el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>退款总佣金</span>
                        <span class="infoCloumnSize">0</span>
                      </div>
                    </el-col>
                  </el-row>
                  <!-- 第四行 -->
                  <el-row :gutter="0" class="thirdTabs-row-4">
                    <el-col :span="4" class="thirdTabs-col-4">成交额</el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>总成交额(支付总金额-退款总金额)</span>
                        <span class="infoCloumnSize">0</span>
                      </div>
                    </el-col>
                    <el-col :span="15" class="thirdTabs-col">
                      <div class="infoCloumn">

                      </div>
                    </el-col>
                  </el-row>
                  <!-- 第五行 -->
                  <el-row :gutter="0" class="thirdTabs-row-5">
                    <el-col :span="4" class="thirdTabs-col-5">佣金统计</el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>佣金总收入</span>
                        <span class="infoCloumnSize">0</span>
                      </div>
                    </el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>佣金总提现</span>
                        <span class="infoCloumnSize">0</span>
                      </div>
                    </el-col>
                    <el-col :span="10" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>佣金总退款</span>
                        <span class="infoCloumnSize">0</span>
                      </div>
                    </el-col>
                  </el-row>
                </div>

样式


  .thirdTabs {
    color: #000000;

    // el-col统一设置---网格高度
    .thirdTabs-col[data-v-60965744],
    .thirdTabs-col-1[data-v-60965744],
    .thirdTabs-col-2[data-v-60965744],
    .thirdTabs-col-3[data-v-60965744],
    .thirdTabs-col-4[data-v-60965744],
    .thirdTabs-col-5[data-v-60965744] {
      height: 5rem !important;
    }

    //内容边距
    .thirdTabs-col[data-v-60965744] {
      padding-top: 0.9375rem;
    }

    //左边第一列内容边框和位置
    .thirdTabs-col-1,
    .thirdTabs-col-2,
    .thirdTabs-col-3,
    .thirdTabs-col-4,
    .thirdTabs-col-5 {
      border-left: 1px solid #cdcdcd !important;
      padding-left: 5px;
      align-items: center;
      display: flex;
      font-size: 16px;
      // font-weight: 100;
    }

    .thirdTabs-row-1,
    .thirdTabs-row-2,
    .thirdTabs-row-3,
    .thirdTabs-row-4,
    .thirdTabs-row-5 {
      border: 1px solid #cdcdcd;
      border-left: none;

      .thirdTabs-col {
        border-left: 1px solid #cdcdcd !important;
      }

      .infoCloumn {
        display: flex;
        flex-direction: column;
        margin-left: 20px;

        .infoCloumnSize {
          margin-left: 3px;
        }
      }
    }

    // 第一行
    .thirdTabs-row-1 {
      .thirdTabs-col {
        .nameGray {
          color: #afabab;
          margin-left: -10px;
        }
      }
    }

    // 第二，三，四行
    .thirdTabs-row-2,
    .thirdTabs-row-3,
    .thirdTabs-row-4,
    .thirdTabs-row-5 {
      border-top: none; //去除重复边框
    }
  }