区块方案

方案

区块设计约定：

各个区块宽高各异，但它们使用了相似的背景图。
背景图的上方标题栏比较华丽，左部分和右部分都有专门的线条设计，中部是简单设计，以便于适应不同的区块宽度。
背景图的中部只在最左和最右有竖线。
背景图的下方要么是简单的横线，要么是也有复杂的线条设计。

错误实践：

其他程序员的通常做法是为各个区块各自切图，各自设置背景图，思路虽然简单，但是是偷懒的错误实践，因为相似的背景图没有复用，而且宽高比例无法调整，无法自适应，一旦改版就要重新设计、重新切图。

最佳实践：

只用一张背景图就实现宽高自适应。
将区块划分为header、middle、footer三个行，每个行又分成left、center、right三个单元格。middle的高度设弹性高度，center的宽度设弹性宽度，以保证自适应。
左上角单元格设置背景图的左上角部分，右上角单元格设置背景图的右上角部分，中上部单元格设置背景图的中上部部分，其他以此类推。

范例

请用浏览器的开发工具选择内部元素，查看元素位置和宽高。

WARNING

红色边框是为了标明区块边界，不是区块本身效果。

准备背景图

只需要从设计图的各个区块里面选择最宽最高的那张背景图即可。

事实上，这张背景图必须既要最宽，又要最高，否则某些较大区块的.middle和center的背景图会出问题。如果并没有符合要求的背景图，就只能让设计师专门做一张既最宽、又最高的背景图。

HTML 骨架

利用<el-row></el-row>和<el-col></el-col>作为外层容器，内部可以使用通用组件。组件的 HTML 骨架如下：

html

<el-col>
  <div class="section-container">
    <div class="header">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
    </div>

    <div class="middle">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
    </div>

    <div class="footer">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
    </div>
  </div>
</el-col>

样式

代码中.middle的单元格和.footer的单元格样式有重叠，但是我没有合并，因为如果.footer的图案复杂的话，还是需要拆开写。

几个变量的值的来源：

$header-height：能容纳.header的华丽线条，且方便后续开发的一个值。
$header-left-width：能容纳.header左侧华丽线条的最小宽度值。
$header-right-width：能容纳.header右侧华丽线条的最小宽度值。
$padding-x：区块内容区域距离区块边界的距离，注意视觉舒服且方便后续开发的一个值。
$footer-height：能容纳.footer华丽线条，且方便后续开发的一个值。

scss

.section-container {
  display: flex;
  flex-direction: column;

  // 行
  > div {
    display: flex;
    // 单元格
    > div {
      background-image: url(../image/bigscreen-section-bg.png);
      // 每行居左的单元格
      &.left {
        background-position-x: left;
      }
      // 每行居右的单元格
      &.right {
        background-position-x: right;
      }
      // 每行中间的单元格弹性宽度
      &.center {
        flex: 1;
      }
    }
  }

  $header-height: 30px;
  $header-left-width: 330px;
  $header-right-width: 70px;
  $padding-x: 10px;
  $footer-height: 15px;

  > .header {
    height: #{$header-height};

    > div {
      background-position-y: top;
    }

    .left {
      width: #{$header-left-width};
    }

    .center {
      background-position-x: #{$header-left-width};
    }

    .right {
      width: #{$header-right-width};
    }
  }

  > .middle {
    flex: 1;

    > div {
      // 这里是负值
      background-position-y: #{-$header-height};
    }

    .left {
      width: #{$padding-x};
    }

    .center {
      // 这里是负值
      background-position-x: #{-$padding-x};
    }

    .right {
      width: #{$padding-x};
    }
  }

  > .footer {
    height: #{$footer-height};

    > div {
      background-position-y: bottom;
    }

    .left {
      width: #{$padding-x};
    }

    .center {
      // 这里是负值
      background-position-x: #{-$padding-x};
    }

    .right {
      width: #{$padding-x};
    }
  }
}

区块方案 #

方案 #

范例 #

准备背景图 #

HTML 骨架 #

样式 #

区块方案

方案

范例

准备背景图

HTML 骨架

样式