WAP端楼层开发

进入楼层开发目录

我们将ui/manager-admin/目录称为后台项目根目录，下简称@。\

进到项@/src/views/page/mobile-decoration/templates的目录\ 我们可以看到有common和customs两个目录。

新建模块、导出模块

我们以common下的文件为参考，在customs目录下新建一个tpl_50.vue

注意模块名称不能有重复，也不能与common目录下的模块名称重复。

我们这里以左二右一大图竖排模板为例

<template>
  <div class="floor-layout tpl-50">
    <div class="layout-main">
      <div class="left">
        <layout-item :block="data.blockList[0]" @handle-edit="handleEditBlock(0)"/>
        <layout-item :block="data.blockList[1]" @handle-edit="handleEditBlock(1)"/>
      </div>
      <div class="right">
        <layout-item :block="data.blockList[2]" @handle-edit="handleEditBlock(2)"/>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from '../mixin'

  export default {
    name: 'tpl_50',
    mixins: [mixin],
    title: '左二右一竖排模板',
    dataTpl: {
      tpl_id: 50,
      blockList: [
        { block_type: 'IMAGE', block_value: '', block_opt: '' },
        { block_type: 'IMAGE', block_value: '', block_opt: '' },
        { block_type: 'IMAGE', block_value: '', block_opt: '' }
      ]
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>

</style>

然后在同级目录下的index.js中引入并导出

import tpl_50 from './tpl_50'

export default {
  50: tpl_50
}

楼层图片

这个时候，我们再看页面。模块50已经有了，但是我们没有设置这个模块的图片，所以是是默认的背景图

接下来，将制作好的模块图片命名为mobile-tpl-50.png复制到@/src/assets目录下。\ 编辑@/src/views/page/mobile-decoration/mobileFloorManage.vue

在227行下添加

&.item-50 .img-tpl {
  background: url("../../../assets/mobile-tpl-50.png") no-repeat;
}

这时我们再看，就有模块50的图片了。

添加模块样式

这个时候我们拖拽到右侧，楼层中是不会显示这个模块的。因为我们还没给这个模块添加样式。\ 在tpl_50.vue的style标签中添加以下样式即可。

<style type="text/scss" lang="scss" scoped>
  .tpl-50 {
    height: 125px;
    .layout-item {width: 50%; float: left }
    .left /deep/ .no-image {
      background-size: 75% auto;
    }
    .right {
      .layout-item {
        width: 100%;
      }
    }
  }
</style>

以下是效果图：