CRMEB多店版商城系统更新到V4.1了，相信很多小伙伴都用上了，看到了很多的功能更新，但是也有一些非常好用的功能被淘汰掉了。最近有个客户反馈说，他们系统更新后找不到背景边距设置的功能了，导致他们之前设置的好多diy装修排版不能用了。今天给大家分析背景边距功能的添加恢复的教程。（其他CRMEB其他版本参考该文档也可以添加）
首先给大家介绍下背景边距是什么？背景边距再给商品列表整体添加背景色的时候非常好用，它配合着卷轴类的装饰设计非常实用。给大家用图片介绍。
以上图片展示的事diy装修的两个商品列表组件，每个组件上面有一个卷轴。这两个商品组件的左右边距都是0.上面的商品组件设置有背景边距，可以看到商品完全展示在卷轴的里面，而下面的商品展示没有背景边距，商品和卷轴配合就非常不好看。单调试左右边距的话商品又会发现商品位置对了，但是一大片背景无法和卷轴进行对齐，设置成什么颜色都显得卷轴装饰很突兀。
相信通过以上图片的展示和说明，能够理解背景边距设置的功能和使用场景，接下来分享添加这个功能的步骤。该功能涉及admin后端和uniAPP端的修改，修改后需要重新打包发布才可以正常使用哦。适用版本：多店版V3.5-V4.1。CRMEB的其他系统如果没有该功能可以仿照该功能添加。小企在这里的分析是以商品列表组件为例进行的背景边距添加。
第一步：修改admin端代码文件，代码路径admin\src\components\mobilePage\home\_goods\_list.vue.在该文件中，在data(){}属性中设置添加背景边距的代码
```
bgConfig: {
title: '背景边距',
val: 0,
min: 0
}, // bgConfig是要添加的代码，就添加在prConfig的旁边就可以
prConfig: {
title: '左右边距',
val: 10,
min: 0
},
prConfig: 0,
bgConfig: 0, // 还要设置这个默认值，参考prConfig
```
接下来要在 methods方法中setConfig(data) {} 添加` this.bgConfig = data.bgConfig.val;`设置获取变量值大代码。也是擦考prConfig设置在它的旁边就可以。
第二步：修改修改admin端代码文件，代码路径admin\src\components\mobileConfig\c\_home\_goods\_list.vue。在该文件的代码中也是在data()里面定义背景边距的获取。添加代码(大概在221行)
{
components: toolCom.c_slider,
configNme: 'bgConfig'
},
通过以上两个步骤，在后台diy装修界面就实现了添加背景边距的按钮。这个添加的数据是保存在数据库的一个字段json中，不用修改数据。
第三步就需要修改前端的文件了，修改路径：uniapp\pages\index\components\goodList.vue。在该前端文件中，需要修改以下代码：
1.把第二行代码第一个view标签修改为
<view :style="[boxStyle,{margin: '0 ' + bgConfigVal + 'px' }]">
2.在data(){}中添加获取边距值的代码
bgConfigVal: this.dataConfig.bgConfig.val, //背景边距
把以上代码修改好，diy装修添加背景边距的功能就在前后端添加完成了。如果你能看到这里，祝愿这个功能帮助你有更多的diy装修设计灵感。顺便介绍下自己：专注于CRMEB商城全系列系统开发5年了，服务了十几个老板了，如果您有部署商城，二开相关需求可以留言联系小企：Gsd151010。敬请关注！
