页面显示的间距如何修改

Question

问题遇到的现象和发生背景

如图

问题相关代码，请勿粘贴截图

<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :xs="24" :sm="24" :lg="17">
        <div class="bpb">

          <el-tabs v-model="mainType" @tab-click="mainTypeTabClick">
            <el-tab-pane name="todo">
              <span slot="label" @click="todoTabClick">待办任务<el-badge v-if="todoCount > 0" :value="todoCount" :max="99"></el-badge></span>
              <img :src="todonumImg" style="margin-bottom:-12px; margin-left: 12px">

              <span style="margin-left: 5px">您有<span style="color: red"> {{todoCount}} </span>条待办需处理</span>
              <span  @click="todoRefresh" style="cursor: pointer;">
                <img :src="refreshImg" class="refresh" >
              </span>

              <!--展示的内容-->

              <div class="listBox" style="margin-top: 25px">
                <div v-for="todoItem in todoDataList" :key="todoItem.id" class="listItemBox">
                  <div class="btnBox">
                    <img class="icon1" :src="todoImg" alt="" >
                    <div class="btnstyle" @click="goPage(todoItem)">{{todoItem.taskCustomMessage?todoItem.taskCustomMessage.title:todoItem.procName}}</div>
                  </div>
                  <div class="itemInfo">
                    <span>来自：{{todoItem.lastAssigneeName}}</span>
                    <span>时间：{{todoItem.startTime}}</span>
                  </div>
                </div>
                <div class="el-table__empty-block" v-if="todoDataList.length==0">
                  <p class="el-table__empty-text">暂无数据</p>
                </div>
                <pagination
                  v-show="todoTabShow()"
                  :total="getTodoTotal()"
                  :page.sync="queryTodoTypeDataParams.pageNum"
                  :limit.sync="queryTodoTypeDataParams.pageSize"
                  :pageSizes=[6,10,20,50]
                  @pagination="getTodoDataList()"
                />
              </div>

              
            </el-tab-pane>
            <el-tab-pane name="dos">
              <span slot="label" @click="dosTabClick">已办任务</span>
              <img :src="todonumImg" style="margin-bottom:-12px; margin-left: 12px">
              <span style="margin-left: 5px">您有<span style="color: red"> {{dosCount}} </span>条业务已处理</span>
              <span  @click="dosRefresh" style="cursor: pointer;">
                  <img :src="refreshImg" class="refresh" >
              </span>

              <div class="listBox" style="margin-top: 25px">
                <div class="listItemBox" v-for="dosItem in dosDataList" :key="dosItem.id">
                  <div class="btnBox">
                    <img class="icon" :src="dosImg" alt="">
                    <div class="btnstyle" @click="goDos(dosItem)">{{dosItem.customMessage?dosItem.customMessage.title:item.name}}</div>
                  </div>
                  <div class="itemInfo">
                    <span>来自：{{dosItem.startUserName}}</span>
                    <!--<span >处理状态：<b class="examining-style" v-if="dosItem.procStatus == 0">{{dosItem.procDesc}}</b>
                           <b class="examined-style" v-if="dosItem.procStatus == 1">{{dosItem.procDesc}}</b>
                           <b class="reject-style" v-if="dosItem.procStatus == 2">{{dosItem.procDesc}}</b>
                    </span>-->
                    <span>时间：{{dosItem.startTime}}</span>
                  </div>
                </div>
                <div class="el-table__empty-block" v-if="dosDataList.length==0">
                  <p class="el-table__empty-text">暂无数据</p>
                </div>
                <pagination
                  v-show="dosTabShow()"
                  :total="getDosTotal()"
                  :page.sync="dosByPageParams.pageNum"
                  :limit.sync="dosByPageParams.pageSize"
                  :pageSizes=[6,10,20,50]
                  @pagination="getDosDataList()"
                />
              </div>

             
            </el-tab-pane>
          </el-tabs>

        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="7">
        <div class="bpb">
          <div class="title"><div>公告标题</div></div>
          <el-timeline :reverse="true">
            <el-timeline-item placement="top" style="margin-left: -20px; margin-top: 10px"
              v-for="(activity, index) in noticeList"
              :key="index"
              :timestamp="activity.createTime">
              <a @click="showNotice(activity)" style="cursor:pointer">{{activity.noticeTitle}}</a>
            </el-timeline-item>
          </el-timeline>
          <div class="pageTl">{{queryParams.pageNum}}/{{totalPage}}</div>
          <el-pagination
            @current-change="getList"
            :page-size="queryParams.pageSize"
            :current-page.sync="queryParams.pageNum"
            layout="prev, next"
            :total="noticeTotal"
            prev-text="<< 上一页"
            next-text="下一页 >>"
            >
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <!-- 通知详细 -->
    <el-dialog title="通知公共详情" :visible.sync="open" width="780px" append-to-body>
      <el-form ref="form" :model="form" label-width="110px" size="mini">
        <el-row>
          <el-col :span="24">
            <el-form-item label="公共标题：">{{ form.noticeTitle}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告类型：">{{ typeFormat(form.noticeType)}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告状态：">{{ statusFormat(form.status) }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容：">
              <Editor :min-height="192" :readOnly="true" v-model="form.noticeContent"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {listNotice} from "@/api/system/notice";
  import dosImg from "@/assets/bpm/dos.png";
  import todoImg from "@/assets/bpm/todo.png";
  import todonumImg from "@/assets/bpm/todonum.png";
  import refreshImg from "@/assets/bpm/refresh.png";

  import {
    allDosCount,
    definitionNotContainResource,
    dosByPage,
    groupTodosCount,
    listGroupDosCount,
    todosContainMsgByPage
  } from "@/api/bpm/bpmApi";
  import Editor from '@/components/Editor';

  export default {

    name: 'Index',
    components: {
      Editor
    },
  
  }
</script>

<style lang="scss" scoped>
  .bpb {
    background-color: white;
    padding: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }

  .listBox {
    display: flex;
    flex-direction: column;

  }

  .btnTitle {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: normal;
    color: #303133;
    line-height: 22px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    width: 80%;
    flex-wrap: wrap;
  }

  .listItemBox {
    width: 100%;
    border-bottom: 1px solid #EEEEEE;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    padding-bottom: 10px;
    padding-left: 24px;
  }

  .itemInfo span {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    color: #999093;
    margin-left: 24px;
  }

  .pagination-container {
    height: 30px;
  }

  .btnBox {
    width: 100%;
    display: flex;
    align-items: flex-start;
  }

  .icon {
    width: 40px;
    height: 34px;
    margin-top: 8px;
    margin-right: 8px;
    margin-bottom: -9px;
  }
  .icon1 {
    width: 33px;
    height: 34px;
    margin-top: 8px;
    margin-right: 12px;
    margin-bottom: -9px;
  }
  .dashboard-editor-container{
    padding-left: 12px;
  }

  .dialog-footer {
    text-align: right;
  }

  .btnstyle {
    cursor: pointer;
    max-width: 95%;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: normal;
    color: #303133;
    line-height: 22px;
    margin-bottom: 8px;
  }

  .count-style {
    color: red;
    font-weight: bold;
  }

  //审核中
  .examining-style {
    color: red;
    font-weight: bold;
  }

  //已审核
  .examined-style {
    color: #0066B3;
    font-weight: bold;
  }

  //已终止
  .reject-style {
    color: grey;
    font-weight: bold;
  }
  .title {
    word-break: break-word;
    //background-color: #eeeeee;
    color: #515a6e;
    height: 40px;
    font-size: 13px;
    margin-bottom: 0.1rem;
    text-align: left;
  }
  .title > div {
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    padding-top: 10px;
    font-weight: normal;
  }
  .pageTl {
    display: inline-block;
    width: 20px;
    height: 28px;
    box-sizing: border-box;
    position: relative;
    vertical-align: middle;
    padding-top: 8px;
    margin-left: 35px;
  }
  .el-pagination {
   width: 80%;
   display: inline-block;
  }

  .refresh {
    margin-bottom:-6px;
    margin-left: 6px;
    height: 20px;
    width: 20px;
  }

  .itemInfo {
    margin-left: 23px;
  }

</style>

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

Answer 1

改下这个值，看是不是这个值影响的