布局页面说明

说明

布局页面为3.0版本添加的一个新功能，一个完整的布局页面由布局页面和布局模块组成。

• 一个布局页面可以包含多个布局模块。
• 一个布局模块分为两种布局方式：默认布局、复杂布局
  • 默认布局：直接添加模块数据
  • 复杂布局：将一个模块一行分为指定数量的列，每列可以添加单独的模块数据，可用于复杂的页面布局

举例

主题开发·复杂布局

假设一个模块的UI设计图如下：

从上面的设计图当中，我们可以将一个模块的一行分为三列（左、中、右），但是中间一列宽于其他两列，因此我们可以在设置一行展示多少列的时候设置为四列。

第一列：文章列表

可以设置为

• 模块宽度为1：代表这一列占位宽度为四分之一（如果页面整体宽度为1200px，那这里的宽度应该是300px）
• 跨1行：下面讲解

第二列：幻灯片和文章列表

这列可以被分为上下两部分，上面是幻灯片，下面是文章列表

1. 模块宽度 2：表示占正行的四分之二（如果页面整体宽度为1200px，那么这里应该为600px）
2. 跨行 2：在ui图中，这里被分为了两个模块，上面是幻灯片，下面是文章列表，并且这两个模块的整体高度和左右两个模块高度一致，所以这里跨行2

第三列：分类和文章列表

这列和中间一列差不多，也可以被分为上下两个模块，但是整列占据宽度为四分之一，因此如下：

1. 模块宽度为1：表示占据四分之一的宽度（如果页面整体宽度为1200px，那么这里应该是300px）
2. 跨行2：在ui图中，这里被分为了两个模块，上面是分类列表，下面是公告，并且这两个模块的整体高度和左右两个模块高度一致，所以这里跨行2

总结

如果你熟悉前端就会知道，这其实就是格子布局，或者flex布局，都行，主要看你怎么部署前端，上述设置最后输出代码如下：

{
  "grid_cols": "4",
  "complex_modules": [
    {
      "col_span": 1,
      "row_span": 1
    },
    {
      "col_span": 2,
      "row_span": 2
    },
    {
      "col_span": 1,
      "row_span": 2
    }
  ]
}

如果用主流的bs前端框架+vue你前端应该生成布局代码如下：

<div class="row">
  <div v-for="(item,index) in complex_modules" :class="'col-'+item.col_span">
  
  </div>
</div>

前端显示代码：

<div class="row">
  <div  class="col-1">
  
  </div>
   <div  class="col-2">
  
  </div>
   <div  class="col-1">
  
  </div>
</div>