修改

src/components/sallCenter/plugin/tradeCustom.vue

+<style>
+  /*-----------------设置部分--------------*/
+  .diy-goods .diy-component-edit .diy-goods-label {
+    width: 85px;
+  }
+
+  .diy-goods .diy-component-edit .cat-item {
+    border: 1px solid #e2e2e2;
+    margin-bottom: 5px;
+    padding: 15px;
+    max-width: 400px;
+  }
+
+  .diy-goods .diy-component-edit .goods-list {
+    flex-wrap: wrap;
+  }
+
+  .diy-goods .diy-component-edit .goods-pic {
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+  }
+
+  .diy-goods .diy-component-edit .goods-delete {
+    position: absolute;
+    left: calc(100% - 10px);
+    top: -10px;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    padding: 0 0;
+    visibility: hidden;
+    z-index: 1;
+  }
+
+  .diy-goods .diy-component-edit .goods-item:hover .goods-delete {
+    visibility: visible;
+  }
+
+  /*-----------------预览部分--------------*/
+
+  .diy-goods .diy-component-preview .goods-list {
+    padding: 11px;
+  }
+
+  .diy-goods .diy-component-preview .goods-item {
+    padding: 11px;
+  }
+
+  .diy-goods .diy-component-preview .goods-pic {
+    background-size: cover;
+    background-position: center;
+    width: 99.8%;
+    height: 700px;
+    background-color: #f6f6f6;
+    background-repeat: no-repeat;
+    position: relative;
+    border-radius: 10px 10px 0 0;
+  }
+
+  .diy-goods .diy-component-preview .goods-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 10px;
+  }
+
+  .diy-goods .diy-component-preview .goods-name-static {
+    height: 94px;
+  }
+
+  .diy-goods .diy-component-preview .goods-price {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #ff4544;
+    line-height: 48px;
+  }
+
+  .diy-goods .diy-component-preview .goods-list-style--1 .goods-item,
+  .diy-goods .diy-component-preview .goods-list-style-1 .goods-item {
+    width: 100%;
+  }
+
+  .diy-goods .diy-component-preview .goods-list-style-2 .goods-item {
+    width: 50%;
+  }
+
+  .diy-goods .diy-component-preview .goods-list-style-3 .goods-item {
+    width: 33.333333%;
+  }
+
+  .diy-goods .diy-component-preview .goods-list-style-0 .goods-item {
+    width: 249px;
+  }
+
+  .diy-goods .diy-component-preview .goods-list-style--1 .goods-pic {
+    width: 200px;
+    height: 200px;
+    border-radius: 10px 0 0 10px;
+  }
+
+  .diy-goods .diy-component-preview .goods-list-style-2 .goods-pic {
+    height: 342px;
+    border-radius: 10px 10px 0 0;
+  }
+
+  .diy-goods .diy-component-preview .goods-list-style-0 .goods-pic,
+  .diy-goods .diy-component-preview .goods-list-style-3 .goods-pic {
+    height: 200px;
+    border-radius: 10px 10px 0 0;
+  }
+
+  .diy-goods .diy-component-preview .goods-pic-fill-0 {
+    background-size: contain;
+  }
+
+  .diy-goods .diy-component-preview .buy-btn {
+    border-color: #ff4544;
+    color: #ff4544;
+    padding: 0 20px;
+    height: 48px;
+    line-height: 50px;
+    font-size: 24px;
+  }
+
+  .diy-goods .diy-component-preview .buy-btn.el-button--primary {
+    background-color: #ff4544;
+    color: #fff;
+  }
+
+  .diy-goods .diy-component-preview .goods-tag {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 64px;
+    height: 64px;
+    z-index: 1;
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  .diy-goods hr {
+    border: none;
+    height: 1px;
+    background-color: #e2e2e2;
+  }
+
+  .diy-goods .goods-item.goods-cat-list {
+    border-top: 1px solid #e2e2e2;
+  }
+
+  .diy-goods .goods-item.goods-cat-list:first-of-type {
+    border-top: 0;
+  }
+
+  .diy-goods .cat-list {
+    max-height: 500px;
+    overflow: auto;
+  }
+
+  .goodsDialog .el-dialog__body {
+    padding: 10px 20px;
+  }
+  .education-edit-item {
+    border: 1px solid #dcdfe6;
+    padding: 5px;
+    margin-bottom: 5px;
+    position: relative;
+}
+.education_image_upload .pic-box {
+    width: 70px;
+    height: 70px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    background-color: #fff;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    position: relative;
+}
+.education-edit-options .el-button {
+    height: 25px;
+    line-height: 25px;
+    width: 25px;
+    padding: 0;
+    text-align: center;
+    border: none;
+    border-radius: 0;
+    position: absolute;
+    margin-left: 0;
+}
+.education_image_upload .pic-box .size-tip {
+    line-height: 1.35;
+    text-align: center;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 12px;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.2);
+    letter-spacing: -1px;
+}
+.education_image_upload .image-delete {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    padding: 5px;
+    visibility: hidden;
+    z-index: 1;
+}
+.education_image_upload:hover .image-delete {
+    visibility: visible;
+}
+</style>
+<template>
+  <div :class="{'active':cusData.isCked}">
+    <div class="diy-component-options" v-if="cusData.isCked">
+      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
+      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
+      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
+        style="right: -25px; top: 0;"></el-button>
+      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
+        style="right: -25px; top: 30px;"></el-button>
+    </div>
+    <div class="diy-goods">
+      <div class="diy-component-preview"
+        :style="{'backgroundColor':data.backgroundColor}">
+        <div :flex="cMainFlex" :style="{marginLeft:data.PaddingLeft+'px',
+        marginRight:data.PaddingRight+'px',marginTop:data.PaddingTop+'px',
+        marginBottom:data.PaddingBottom+'px'}">
+          <div class="goods-list" :class="'goods-list-style-'+data.listStyle">
+            <div v-for="(cat,catIndex) in cCatList" :key="catIndex">
+              <div :style="cGoodsListStyle" flex>
+                <div v-for="(goods,goodsIndex) in cCatGoodsList(cat, catIndex)" class="goods-item" :key="goodsIndex"
+                  :class="data.catPosition==='left'?'goods-cat-list':''">
+                  <div style="display: inline-block;" :style="cGoodsItemWidth">
+                    <div :style="{'borderRadius':data.SearchFilletPX+'px'}" :flex="cGoodsItemFlex" style="position: relative;border:1px solid rgb(226, 226, 226);overflow:hidden">
+                      <div class="goods-pic"
+                        :class="'goods-pic-'+data.goodsCoverProportion+' goods-pic-fill-'+data.fill"
+                        :style="'background-image: url('+getIconLink(goods.picUrl)+')'">
+                      </div>
+                      <div :style="cGoodsItemInfoStyle">
+                        <div class="goods-name" :class="data.listStyle===-1?'goods-name-static':''">
+                          <div style="font-size:30px;">{{goods.name}}</div>
+                          <div style="font-size:25px;margin-top:10px;">{{goods.lableName}}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="diy-component-edit" v-if="cusData.isCked">
+        <el-form label-width='150px' @submit.native.prevent>
+          <template>
+            <el-form-item label="自定义数量">
+              <el-input size="small" v-model.number="data.goodsLength" type="number"></el-input>
+            </el-form-item>
+            <el-form-item label="自定义列表">
+              <div flex="dir:top">
+                <div class="education-edit-item" v-for="(item,index) in data.list" :key="index">
+                  <div class="education-edit-options">
+                    <el-button type="primary" icon="el-icon-delete" @click="delBanner(index)"
+                      style="position:absolute;top: -1px; right: -26px;"></el-button>
+                  </div>
+                  <div flex="box:first">
+                    <div>
+                      <div class="education_image_upload" style="margin:5px 5px 0 0;">
+                        <div flex="main:center cross:center" @click="choiceMyImg(index)" class="pic-box"
+                          :style="{backgroundImage:'url(' + getIconLink(item.picUrl) + ')'}">
+                          <i style="font-size:22px;color:#909399;" class="el-icon-picture-outline"
+                            v-if="item.picUrl==''"></i>
+                          <div class="size-tip">720 × 250</div>
+                          <el-button type="danger" v-if="item.picUrl!=''" class="image-delete" size="mini"
+                            icon="el-icon-close" @click.stop="item.picUrl=''" circle></el-button>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div>
+                        <el-input type="text" v-model="item.name" placeholder="标题" size="small" style="margin-bottom:5px;"></el-input>
+                        <el-input type="text" v-model="item.lableName" placeholder="副标题" size="small" style="margin-bottom:5px;"></el-input>
+                        <el-input type="text" v-model="item.linkUrl" placeholder="点击选择链接" size="small">
+                          <el-button slot="append" @click="getMyChoice(index)">选择链接</el-button>
+                        </el-input>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <el-button size="small" @click="addBanner()">添加自定义</el-button>
+            </el-form-item>
+          </template>
+          <hr>
+          <el-form-item label="列表样式">
+            <el-radio v-model="data.listStyle" :label="-1">列表模式</el-radio>
+            <el-radio v-model="data.listStyle" :label="0">左右滑动</el-radio>
+            <el-radio v-model="data.listStyle" :label="1">一行一个</el-radio>
+            <el-radio v-model="data.listStyle" :label="2">一行两个</el-radio>
+          </el-form-item>
+          <el-form-item label="背景颜色">
+            <div class="input-color" flex="dir:left cross:center">
+              <el-color-picker size="small" v-model="data.backgroundColor"></el-color-picker>
+              <el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.backgroundColor"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="上边距">
+            <el-input type="number" size="small" :min="0" v-model="data.PaddingTop">
+              <template slot="append">px</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="下边距">
+            <el-input type="number" size="small" :min="0" v-model="data.PaddingBottom">
+              <template slot="append">px</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="左边距">
+            <el-input type="number" size="small" :min="0" v-model="data.PaddingLeft">
+              <template slot="append">px</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="右边距">
+            <el-input type="number" size="small" :min="0" v-model="data.PaddingRight">
+              <template slot="append">px</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="圆角">
+            <el-input type="number" size="small" :min="0" v-model="data.SearchFilletPX">
+              <template slot="append">px</template>
+            </el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <!-- 选择图片文件 -->
+    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
+      <ChooseImg @SelectId="SelectId"></ChooseImg>
+    </el-dialog>
+    <!-- 选择商品 -->
+    <el-dialog title="选择商品" :visible.sync="isShowGoods" custom-class="goodsDialog">
+      <choiceGood ref="choiceGood"></choiceGood>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="isShowGoods=false">取 消</el-button>
+        <el-button size="small" type="danger" @click="getGoodsChoice()">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
+        <chooseMenu ref="chooseMenu"></chooseMenu>
+        <span slot="footer" class="dialog-footer">
+            <el-button size="small" @click="isShowLink=false">取 消</el-button>
+            <el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button>
+        </span>
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+  import choiceGood from "../../common/choiceGood.vue";
+  import chooseMenu from "../../common/chooseMenu.vue";
+
+  export default {
+    props: ["cusData", "index", "dataLeng"],
+    components: {
+      ChooseImg,
+      choiceGood,
+      chooseMenu
+    },
+    data() {
+      return {
+        //可以选择的商品数
+        ckGoods: 0,
+        data: this.cusData.data,
+        position: 'center center',
+        repeat: 'no-repeat',
+        choicImg: false,
+        isShowGoods: false,
+        //添加的下标
+        comIndex: -1,
+        commonIndex:0,
+        isShowLink:false,
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      //向父组件传值 并调用排序
+      resetSord(IsUp) {
+        this.$emit('getSord', this.index, IsUp);
+      },
+      //点击触发父组件删除
+      delPlugin() {
+        this.$emit('comDelPlugin', this.index);
+      },
+      cCatGoodsList(cat, catIndex) {
+        const goodsList = cat.goodsList;
+        let newList = [];
+        if (catIndex > 0) {
+          newList = [];
+        } else {
+          if (goodsList && goodsList.length) {
+            newList = goodsList;
+          } else {
+            const defaultGoodsItem = {
+              id: 0,
+              name: '商品名称',
+              lableName:'',
+              picUrl: '',
+              linkUrl:'',
+            };
+            newList = new Array(cat.goodsNum).fill(defaultGoodsItem);
+          }
+        }
+        return newList;
+      },
+      //选择图片
+      SelectId(msg) {
+        this.data.list[this.commonIndex].picUrl=this.getIconLink(msg.url);
+        this.choicImg=false;
+      },
+      //选择商品
+      getGoodsChoice() {
+        var ckedArr = this.$refs.choiceGood.getChoicedGoods();
+        var myArray = [];
+        if (ckedArr && ckedArr.length > 0) {
+          ckedArr.forEach(element => {
+            myArray.push({
+              id: element.Id,
+              name: element.Name,
+              picUrl: element.CoverImage,
+              price: element.SellingPrice
+            });
+          });
+        }
+        if (this.comIndex !== null) {
+
+        } else {
+          this.data.list = this.data.list.concat(myArray);
+        }
+        this.isShowGoods = false;
+        this.$refs.choiceGood.toggleSelection();
+      },
+      //删除banner
+      delBanner(index){
+        this.data.list.splice(index,1);
+      },
+      //选取图片
+      choiceMyImg(index){
+        this.choicImg = true;
+        this.commonIndex=index;
+      },
+      //选择链接
+      getMyChoice(index){
+        this.isShowLink=true;
+        this.commonIndex=index;
+      },
+      //添加商品
+      addBanner(){
+        let obj={
+            id:0,
+            name:'', //标题
+            lableName:'', //副标题
+            picUrl:'', //商品图片
+            linkUrl:'' //链接
+        }
+        if(this.data.list.length<this.data.goodsLength){
+          // if(this.data.list.length>0){
+            for(var i=0;i<this.data.list.length;i++){
+              if(this.data.list[i].linkUrl==''){
+                this.Error(`请选择第${i+1}个的链接`);
+                return;
+              }
+            }
+            this.data.list.push(obj);
+          // }
+        }else{
+          this.Error('超出自定义数量');
+        }
+      },
+      //获取选择链接
+      getChoiceLink(){
+        //调用子组件方法
+        var obj = this.$refs.chooseMenu.getChooseMenu();
+        this.data.list[this.commonIndex].linkUrl=obj.PageUrl;
+        this.isShowLink = false;
+      },
+    },
+    computed: {
+      cMainFlex() {
+        if (this.data.catPosition === 'left') {
+          return 'dir:left box:first';
+        }
+        if (this.data.catPosition === 'top') {
+          return 'dir:top';
+        }
+      },
+      cCatFlex() {
+        if (this.data.catPosition === 'left') {
+          return 'dir:top';
+        }
+        if (this.data.catPosition === 'top') {
+          return 'dir:left';
+        }
+      },
+      cCatList() {
+        if (this.data.showCat) {
+          if (this.data.catList && this.data.catList.length) {
+            return this.data.catList;
+          } else {
+            const defaultCatItem = {
+              id: 0,
+              name: '分类名称',
+              menuName: '分类名称',
+              goodsList: [],
+              goodsNum: 3,
+            };
+            return [defaultCatItem, defaultCatItem];
+          }
+        } else {
+          return [{
+            id: null,
+            name: null,
+            menuName: null,
+            goodsList: this.data.list,
+          }];
+        }
+      },
+      cCatStyle() {},
+      cGoodsListStyle() {
+        if (this.data.listStyle === 0) {
+          return 'flex-wrap: nowrap;overflow-x:auto;';
+        } else {
+          return 'flex-wrap: wrap;';
+        }
+      },
+      cGoodsItemFlex() {
+        if (this.data.listStyle === -1) {
+          return 'dir:left box:first cross:center';
+        }
+        return 'dir:top';
+      },
+      cGoodsItemStyle() {
+        let style;
+        if (this.data.goodsStyle != 3) {
+          if (this.data.listStyle === -1) {
+            style = 'border: 1px solid #e2e2e2;border-radius:10px;background:#fff;'
+          } else {
+            style = 'border: 1px solid #e2e2e2;border-radius:10px;background:#fff;'
+          }
+        } else {
+          return style
+        }
+        if (this.data.goodsStyle === 2) {
+          return style
+        } else if (this.data.goodsStyle === 1) {
+          if (this.data.listStyle === -1) {
+            return 'border-radius:10px;background:#fff;'
+          } else {
+            return 'border-radius:10px;background:#fff;'
+          }
+        } else {
+          return 'background:#fff;';
+        }
+      },
+      cShowBuyBtn() {
+        if (!this.data.showBuyBtn) {
+          return false;
+        }
+        if (this.data.textStyle === 2 || this.data.listStyle === 0) {
+          return false;
+        }
+        return true;
+      },
+      cGoodsItemInfoStyle() {
+        let style = '';
+        if (this.data.textStyle === 2) {
+          style += `text-align: center;`;
+        }
+        if (this.data.listStyle === -1) {
+          style += `height: 200px;padding: 20px 24px 20px 32px;`;
+        } else {
+          style += `padding:24px 24px;`;
+        }
+        return style;
+      },
+      cGoodsItemWidth() {
+        if (this.data.listStyle === 0) {
+          return 'width: 200px;';
+        }
+        return 'width: 100%;';
+      },
+      cButtonStyle() {
+        let style =
+          `background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height:46px;padding:0 20px;`;
+        if (this.data.buyBtnStyle === 3 || this.data.buyBtnStyle === 4) {
+          style += `border-radius:999px;`;
+        }
+        if (this.data.buyBtnStyle === 2 || this.data.buyBtnStyle === 4) {
+          style += `background:#fff;color:${this.data.buttonColor}`;
+        }
+        return style;
+      },
+    },
+    mounted() {
+
+    }
+  };
+
+</script>

src/components/sallCenter/templateEdit.vue

 <style>
-.tpEdit_header {
+  .tpEdit_header {
     padding: 18px;
     background: #fff;
     color: #606266;
     margin-bottom: 10px;
-}
+  }
 
-.tpEdit_Content {
+  .tpEdit_Content {
     margin-bottom: 10px;
     min-width: 1280px;
     height: 725px;
-}
+  }
 
-.Myall-components {
+  .Myall-components {
     max-height: 725px;
     overflow-y: auto;
     background: #fff;
     padding: 20px;
-}
+  }
 
-.Myall-components .component-group {
+  .Myall-components .component-group {
     border: 1px solid #eeeeee;
     width: 300px;
     margin-bottom: 20px;
-}
+  }
 
-.Myall-components .component-group-name {
+  .Myall-components .component-group-name {
     height: 35px;
     line-height: 35px;
     background: #f7f7f7;
     padding: 0 20px;
     border-bottom: 1px solid #eeeeee;
-}
+  }
 
-.Myall-components .Mycomponent-list {
+  .Myall-components .Mycomponent-list {
     margin-right: -2px;
     margin-top: -2px;
     flex-wrap: wrap;
-}
+  }
 
-.Myall-components .Mycomponent-list .Mycomponent-item {
+  .Myall-components .Mycomponent-list .Mycomponent-item {
     width: 100px;
     height: 100px;
     border: 0 solid #eeeeee;
@@ -47,58 +47,58 @@
     text-align: center;
     padding: 15px 0 0;
     cursor: pointer;
-}
+  }
 
-.Mycomponent-item:nth-child(3n) {
+  .Mycomponent-item:nth-child(3n) {
     border-right: 0 !important;
-}
+  }
 
-.template_right {
+  .template_right {
     padding-left: 2px;
     position: relative;
     overflow-y: auto;
-}
+  }
 
-.template_Mobile {
+  .template_Mobile {
     overflow-y: auto;
     padding: 0px 25px;
     width: 435px;
     height: 705px;
     margin-left: 6px;
-}
+  }
 
-.mobile-framework {
+  .mobile-framework {
     width: 375px;
-}
+  }
 
-.mobile-framework-header {
+  .mobile-framework-header {
     height: 60px;
     line-height: 60px;
     background: #333;
     color: #fff;
     text-align: center;
     background: url("../../assets/img/sallCenter/head.png") no-repeat;
-}
+  }
 
-.mobile-framework-body {
+  .mobile-framework-body {
     background-color: rgb(245, 247, 249);
     min-height: 645px;
     border: 1px solid #e2e2e2;
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: left center;
-}
+  }
 
-.diy-component-preview {
+  .diy-component-preview {
     cursor: pointer;
     position: relative;
     zoom: 0.5;
     -moz-transform: scale(0.5);
     -moz-transform-origin: top left;
     font-size: 28px;
-}
+  }
 
-.diy-component-edit {
+  .diy-component-edit {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -109,26 +109,26 @@
     overflow: auto;
     min-width: 650px;
     padding-right: 20%;
-}
+  }
 
-.diy-component-options {
+  .diy-component-options {
     position: relative;
-}
+  }
 
-.active .diy-component-preview {
+  .active .diy-component-preview {
     border: 2px dashed #409eff;
     left: -2px;
     right: -2px;
     width: calc(100% + 4px);
-}
+  }
 
-.diy-search {
+  .diy-search {
     padding: 24px;
     cursor: pointer;
     background: rgb(242, 242, 242);
-}
+  }
 
-.diy-component-options .el-button {
+  .diy-component-options .el-button {
     height: 25px;
     line-height: 25px;
     width: 25px;
@@ -138,78 +138,63 @@
     border-radius: 0;
     position: absolute;
     margin-left: 0 !important;
-}
+  }
 
-.diy-search > div {
+  .diy-search>div {
     height: 60px;
     line-height: 60px;
     padding: 0 24px;
     font-size: 28px;
-}
+  }
 
-.diy-component-edit .el-color-picker {
+  .diy-component-edit .el-color-picker {
     vertical-align: middle;
-}
+  }
 
-.tpEdit_btmMenu {
+  .tpEdit_btmMenu {
     height: 54px;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #fff;
-}
+  }
 
-.bgMsg_Div div {
+  .bgMsg_Div div {
     height: 50px;
     width: 50px;
     margin-bottom: 10px;
     cursor: pointer;
     background-color: #f5f7f9;
-}
+  }
 
-.bgMsg_Div .active {
+  .bgMsg_Div .active {
     background-color: #e6f4ff;
     border: 2px dashed #5cb3fd;
-}
+  }
+
 </style>
 <template>
   <div class="templateEdit">
     <div class="tpEdit_header">
-      <span
-        style="color: rgb(64, 158, 255); cursor: pointer"
-        @click="CommonJump('templateManage', {})"
-        >模板管理</span
-      ><span style="margin: 0 9px; color: #c0c4cc">/</span><span>新增</span>
+      <span style="color: rgb(64, 158, 255); cursor: pointer" @click="CommonJump('templateManage', {})">模板管理</span><span
+        style="margin: 0 9px; color: #c0c4cc">/</span><span>新增</span>
     </div>
     <div flex="box:first" class="tpEdit_Content">
       <div class="Myall-components">
         <el-form label-width="80px">
           <el-form-item label="模板名称">
-            <el-input
-              type="text"
-              size="small"
-              v-model="addMsg.TemplateName"
-              maxlength="50"
-            ></el-input>
+            <el-input type="text" size="small" v-model="addMsg.TemplateName" maxlength="50"></el-input>
           </el-form-item>
           <el-form-item label="背景设置">
             <el-button size="small" @click="bgVisible = true">设置</el-button>
           </el-form-item>
         </el-form>
-        <div
-          class="component-group"
-          v-for="(item, index) in allComponents"
-          :key="index"
-        >
+        <div class="component-group" v-for="(item, index) in allComponents" :key="index">
           <div class="component-group-name">{{ item.GroupName }}</div>
           <div flex class="Mycomponent-list">
-            <div
-              class="Mycomponent-item"
-              v-for="(subItem, subIndex) in item.SubList"
-              @click="addPlugin(subItem.Id)"
-              :key="subIndex"
-            >
+            <div class="Mycomponent-item" v-for="(subItem, subIndex) in item.SubList" @click="addPlugin(subItem.Id)"
+              :key="subIndex">
               <img :src="subItem.Icon" alt="" />
               <div>{{ subItem.Name }}</div>
             </div>
@@ -220,9 +205,7 @@
         <div class="template_Mobile">
           <div class="mobile-framework" style="height: 705px">
             <div class="mobile-framework-header"></div>
-            <div
-              class="mobile-framework-body"
-              :style="
+            <div class="mobile-framework-body" :style="
                 'background-color:' +
                 bgMsg.data.backgroundColor +
                 ';background-image:url(' +
@@ -235,385 +218,111 @@
                 repeat +
                 ';background-position:' +
                 position
-              "
-            >
+              ">
               <!-- 为空的样式开始 -->
-              <div
-                v-if="dataList.length == 0"
-                flex="main:center cross:center"
-                style="
+              <div v-if="dataList.length == 0" flex="main:center cross:center" style="
                   height: 200px;
                   color: rgb(173, 177, 184);
                   text-align: center;
-                "
-              >
+                ">
                 <div>
-                  <i
-                    class="el-icon-folder-opened"
-                    style="font-size: 32px; margin-bottom: 10px"
-                  ></i>
+                  <i class="el-icon-folder-opened" style="font-size: 32px; margin-bottom: 10px"></i>
                   <div>空空如也</div>
                   <div>请从左侧组件库添加组件</div>
                 </div>
               </div>
               <!-- 为空的样式结束 -->
-              <div
-                v-for="(item, index) in dataList"
-                :key="index"
-                @click="getItem(item)"
-              >
-                <search
-                  v-if="item.Id == 'search'"
-                  :searchData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></search>
-                <navigationIcon
-                  v-if="item.Id == 'nav'"
-                  :navData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></navigationIcon>
-                <banner
-                  v-if="item.Id == 'banner'"
-                  :banData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></banner>
-                <rubik
-                  v-if="item.Id == 'rubik'"
-                  :rubData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></rubik>
-                <goods
-                  v-if="item.Id == 'goods'"
-                  :goodData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></goods>
-                <Posts
-                  v-if="item.Id == 'blindDatePPPlus'"
-                  :goodData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></Posts>
-                <notice
-                  v-if="item.Id == 'notice'"
-                  :noticeData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></notice>
-                <mylink
-                  v-if="item.Id == 'link'"
-                  :linkData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></mylink>
-                <myvideo
-                  v-if="item.Id == 'video'"
-                  :videoData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></myvideo>
-                <mystore
-                  v-if="item.Id == 'store'"
-                  :storeData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></mystore>
-                <copyright
-                  v-if="item.Id == 'copyright'"
-                  :copyData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></copyright>
-                <checkIn
-                  v-if="item.Id == 'check-in'"
-                  :checkData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></checkIn>
-                <userInfo
-                  v-if="item.Id == 'user-info'"
-                  :userData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></userInfo>
-                <userOrder
-                  v-if="item.Id == 'user-order'"
-                  :orderData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></userOrder>
-                <mymap
-                  v-if="item.Id == 'map'"
-                  :mapData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></mymap>
-                <mpLink
-                  v-if="item.Id == 'mp-link'"
-                  :mpData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></mpLink>
-                <coupon
-                  v-if="item.Id == 'coupon'"
-                  :couponData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></coupon>
-                <timer
-                  v-if="item.Id == 'timer'"
-                  :timerData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></timer>
-                <pintuan
-                  v-if="item.Id == 'pintuan'"
-                  :pintuanData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></pintuan>
-                <booking
-                  v-if="item.Id == 'booking'"
-                  :bookData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></booking>
-                <bargain
-                  v-if="item.Id == 'bargain'"
-                  :barData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></bargain>
-                <integralMall
-                  v-if="item.Id == 'integral-mall'"
-                  :mallData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></integralMall>
-                <lottery
-                  v-if="item.Id == 'lottery'"
-                  :lottData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></lottery>
-                <advance
-                  v-if="item.Id == 'advance'"
-                  :advanceData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></advance>
-                <vipCard
-                  v-if="item.Id == 'vip-card'"
-                  :vipData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></vipCard>
-                <live
-                  v-if="item.Id == 'live'"
-                  :liveData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></live>
-                <empty
-                  v-if="item.Id == 'empty'"
-                  :emptyData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></empty>
-                <advert
-                  v-if="item.Id == 'ad'"
-                  :advData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></advert>
-                <modal
-                  v-if="item.Id == 'modal'"
-                  :modalData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></modal>
-                <quickNav
-                  v-if="item.Id == 'quick-nav'"
-                  :quickData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></quickNav>
-                <imageText
-                  v-if="item.Id == 'image-text'"
-                  :imageData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></imageText>
-                <topic
-                  v-if="item.Id == 'topic'"
-                  :topicData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></topic>
-                <shopinfo
-                  v-if="item.Id == 'shop-info'"
-                  :shopinfoData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></shopinfo>
-                <sidao
-                  v-if="item.Id == 'drive-guide'"
-                  :sidaoData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></sidao>
-                <education
-                  v-if="item.Id == 'education'"
-                  :eduData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></education>
-                <educationArticle
-                  v-if="item.Id == 'educationArticle'"
-                  :zxData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></educationArticle>
-                <educationCustom
-                  v-if="item.Id == 'educationCustom'"
-                  :cusData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></educationCustom>
-                <reservestore
-                  v-if="item.Id == 'reservestore'"
-                  :reserData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></reservestore>
-                <storeGoods
-                  v-if="item.Id == 'storeGoods'"
-                  :storeData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></storeGoods>
-                <educationteacher
-                  v-if="item.Id == 'educationteacher'"
-                  :lsData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></educationteacher>
-                <navPage
-                  v-if="item.Id == 'nav-page'"
-                  :navData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></navPage>
-                <miaiuser
-                  v-if="item.Id == 'miaiuser'"
-                  :pData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></miaiuser>
-                <miaiactivitytype
-                  v-if="item.Id == 'miaiactivitytype'"
-                  :mData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></miaiactivitytype>
-                <miaiactivityCustom
-                  v-if="item.Id == 'miaiactivityCustom'"
-                  :mcData="item"
-                  @getSord="getSord"
-                  @comDelPlugin="comDelPlugin"
-                  :index="index"
-                  :dataLeng="dataList.length"
-                ></miaiactivityCustom>
+              <div v-for="(item, index) in dataList" :key="index" @click="getItem(item)">
+                <search v-if="item.Id == 'search'" :searchData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></search>
+                <navigationIcon v-if="item.Id == 'nav'" :navData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></navigationIcon>
+                <banner v-if="item.Id == 'banner'" :banData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></banner>
+                <rubik v-if="item.Id == 'rubik'" :rubData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></rubik>
+                <goods v-if="item.Id == 'goods'" :goodData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></goods>
+                <Posts v-if="item.Id == 'blindDatePPPlus'" :goodData="item" @getSord="getSord"
+                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></Posts>
+                <notice v-if="item.Id == 'notice'" :noticeData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></notice>
+                <mylink v-if="item.Id == 'link'" :linkData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></mylink>
+                <myvideo v-if="item.Id == 'video'" :videoData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></myvideo>
+                <mystore v-if="item.Id == 'store'" :storeData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></mystore>
+                <copyright v-if="item.Id == 'copyright'" :copyData="item" @getSord="getSord"
+                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></copyright>
+                <checkIn v-if="item.Id == 'check-in'" :checkData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></checkIn>
+                <userInfo v-if="item.Id == 'user-info'" :userData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></userInfo>
+                <userOrder v-if="item.Id == 'user-order'" :orderData="item" @getSord="getSord"
+                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></userOrder>
+                <mymap v-if="item.Id == 'map'" :mapData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></mymap>
+                <mpLink v-if="item.Id == 'mp-link'" :mpData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></mpLink>
+                <coupon v-if="item.Id == 'coupon'" :couponData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></coupon>
+                <timer v-if="item.Id == 'timer'" :timerData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></timer>
+                <pintuan v-if="item.Id == 'pintuan'" :pintuanData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></pintuan>
+                <booking v-if="item.Id == 'booking'" :bookData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></booking>
+                <bargain v-if="item.Id == 'bargain'" :barData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></bargain>
+                <integralMall v-if="item.Id == 'integral-mall'" :mallData="item" @getSord="getSord"
+                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></integralMall>
+                <lottery v-if="item.Id == 'lottery'" :lottData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></lottery>
+                <advance v-if="item.Id == 'advance'" :advanceData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></advance>
+                <vipCard v-if="item.Id == 'vip-card'" :vipData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></vipCard>
+                <live v-if="item.Id == 'live'" :liveData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></live>
+                <empty v-if="item.Id == 'empty'" :emptyData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></empty>
+                <advert v-if="item.Id == 'ad'" :advData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></advert>
+                <modal v-if="item.Id == 'modal'" :modalData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></modal>
+                <quickNav v-if="item.Id == 'quick-nav'" :quickData="item" @getSord="getSord"
+                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></quickNav>
+                <imageText v-if="item.Id == 'image-text'" :imageData="item" @getSord="getSord"
+                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></imageText>
+                <topic v-if="item.Id == 'topic'" :topicData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></topic>
+                <shopinfo v-if="item.Id == 'shop-info'" :shopinfoData="item" @getSord="getSord"
+                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></shopinfo>
+                <sidao v-if="item.Id == 'drive-guide'" :sidaoData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></sidao>
+                <education v-if="item.Id == 'education'" :eduData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></education>
+                <educationArticle v-if="item.Id == 'educationArticle'" :zxData="item" @getSord="getSord"
+                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></educationArticle>
+                <educationCustom v-if="item.Id == 'educationCustom'" :cusData="item" @getSord="getSord"
+                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></educationCustom>
+                <reservestore v-if="item.Id == 'reservestore'" :reserData="item" @getSord="getSord"
+                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></reservestore>
+                <storeGoods v-if="item.Id == 'storeGoods'" :storeData="item" @getSord="getSord"
+                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></storeGoods>
+                <educationteacher v-if="item.Id == 'educationteacher'" :lsData="item" @getSord="getSord"
+                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></educationteacher>
+                <navPage v-if="item.Id == 'nav-page'" :navData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></navPage>
+                <miaiuser v-if="item.Id == 'miaiuser'" :pData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></miaiuser>
+                <miaiactivitytype v-if="item.Id == 'miaiactivitytype'" :mData="item" @getSord="getSord"
+                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></miaiactivitytype>
+                <miaiactivityCustom v-if="item.Id == 'miaiactivityCustom'" :mcData="item" @getSord="getSord"
+                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></miaiactivityCustom>
+                <tradeCustom v-if="item.Id == 'tradePavilionCustom'" :cusData="item" @getSord="getSord"
+                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></tradeCustom>
               </div>
             </div>
           </div>
@@ -621,101 +330,43 @@
       </div>
     </div>
     <div class="tpEdit_btmMenu">
-      <el-button type="primary" size="small" @click="SaveData()"
-        >保存</el-button
-      >
+      <el-button type="primary" size="small" @click="SaveData()">保存</el-button>
     </div>
     <!-- 背景设置 -->
     <el-dialog title="背景设置" :visible.sync="bgVisible" width="950px">
       <el-form label-width="100px">
         <el-form-item label="背景颜色">
           <div flex="dir:left cross:center">
-            <el-color-picker
-              size="small"
-              v-model="bgMsg.data.backgroundColor"
-            ></el-color-picker>
-            <el-input
-              size="small"
-              style="width: 80px; margin-right: 25px"
-              v-model="bgMsg.data.backgroundColor"
-            >
+            <el-color-picker size="small" v-model="bgMsg.data.backgroundColor"></el-color-picker>
+            <el-input size="small" style="width: 80px; margin-right: 25px" v-model="bgMsg.data.backgroundColor">
             </el-input>
           </div>
         </el-form-item>
         <el-form-item label="背景图片">
-          <el-switch
-            v-model="bgMsg.data.showImg"
-            @change="showBackground"
-          ></el-switch>
+          <el-switch v-model="bgMsg.data.showImg" @change="showBackground"></el-switch>
           <slot name="about"></slot>
         </el-form-item>
         <el-form-item v-if="bgMsg.data.showImg" label="上传背景">
-          <div
-            class="zk_pic_box"
-            @click="choicImg = true"
-            flex="main:center cross:center"
-            :style="{
+          <div class="zk_pic_box" @click="choicImg = true" flex="main:center cross:center" :style="{
               backgroundImage:
                 'url(' + getIconLink(bgMsg.data.backgroundPicUrl) + ')',
-            }"
-          >
-            <i
-              v-if="bgMsg.data.backgroundPicUrl == ''"
-              class="el-icon-picture-outline"
-            ></i>
-            <el-button
-              type="danger"
-              v-if="bgMsg.data.backgroundPicUrl != ''"
-              class="image-delete"
-              size="mini"
-              icon="el-icon-close"
-              @click.stop="bgMsg.data.backgroundPicUrl = ''"
-              circle
-            ></el-button>
+            }">
+            <i v-if="bgMsg.data.backgroundPicUrl == ''" class="el-icon-picture-outline"></i>
+            <el-button type="danger" v-if="bgMsg.data.backgroundPicUrl != ''" class="image-delete" size="mini"
+              icon="el-icon-close" @click.stop="bgMsg.data.backgroundPicUrl = ''" circle></el-button>
           </div>
         </el-form-item>
         <el-form-item v-if="bgMsg.data.showImg" label="图片位置">
-          <div
-            class="bgMsg_Div"
-            flex="main:justify wrap:wrap"
-            style="width: 170px; height: 180px"
-          >
-            <div
-              @click="choose(1, 'top left')"
-              :class="bgMsg.data.position == 1 ? 'active' : ''"
-            ></div>
-            <div
-              @click="choose(2, 'top center')"
-              :class="bgMsg.data.position == 2 ? 'active' : ''"
-            ></div>
-            <div
-              @click="choose(3, 'top right')"
-              :class="bgMsg.data.position == 3 ? 'active' : ''"
-            ></div>
-            <div
-              @click="choose(4, 'center left')"
-              :class="bgMsg.data.position == 4 ? 'active' : ''"
-            ></div>
-            <div
-              @click="choose(5, 'center center')"
-              :class="bgMsg.data.position == 5 ? 'active' : ''"
-            ></div>
-            <div
-              @click="choose(6, 'center right')"
-              :class="bgMsg.data.position == 6 ? 'active' : ''"
-            ></div>
-            <div
-              @click="choose(7, 'bottom left')"
-              :class="bgMsg.data.position == 7 ? 'active' : ''"
-            ></div>
-            <div
-              @click="choose(8, 'bottom center')"
-              :class="bgMsg.data.position == 8 ? 'active' : ''"
-            ></div>
-            <div
-              @click="choose(9, 'bottom right')"
-              :class="bgMsg.data.position == 9 ? 'active' : ''"
-            ></div>
+          <div class="bgMsg_Div" flex="main:justify wrap:wrap" style="width: 170px; height: 180px">
+            <div @click="choose(1, 'top left')" :class="bgMsg.data.position == 1 ? 'active' : ''"></div>
+            <div @click="choose(2, 'top center')" :class="bgMsg.data.position == 2 ? 'active' : ''"></div>
+            <div @click="choose(3, 'top right')" :class="bgMsg.data.position == 3 ? 'active' : ''"></div>
+            <div @click="choose(4, 'center left')" :class="bgMsg.data.position == 4 ? 'active' : ''"></div>
+            <div @click="choose(5, 'center center')" :class="bgMsg.data.position == 5 ? 'active' : ''"></div>
+            <div @click="choose(6, 'center right')" :class="bgMsg.data.position == 6 ? 'active' : ''"></div>
+            <div @click="choose(7, 'bottom left')" :class="bgMsg.data.position == 7 ? 'active' : ''"></div>
+            <div @click="choose(8, 'bottom center')" :class="bgMsg.data.position == 8 ? 'active' : ''"></div>
+            <div @click="choose(9, 'bottom right')" :class="bgMsg.data.position == 9 ? 'active' : ''"></div>
           </div>
         </el-form-item>
         <el-form-item v-if="bgMsg.data.showImg" label="填充方式">
@@ -726,30 +377,14 @@
             <el-radio :label="4">平铺满</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item
-          v-if="bgMsg.data.showImg && bgMsg.data.mode != 1"
-          label="背景图宽"
-        >
-          <el-slider
-            v-model="bgMsg.data.backgroundWidth"
-            :show-input-controls="false"
-            style="float: left; width: 95%"
-            :max="100"
-            show-input
-          ></el-slider>
+        <el-form-item v-if="bgMsg.data.showImg && bgMsg.data.mode != 1" label="背景图宽">
+          <el-slider v-model="bgMsg.data.backgroundWidth" :show-input-controls="false" style="float: left; width: 95%"
+            :max="100" show-input></el-slider>
           <div style="float: right">%</div>
         </el-form-item>
-        <el-form-item
-          v-if="bgMsg.data.showImg && bgMsg.data.mode != 1"
-          label="背景图高"
-        >
-          <el-slider
-            v-model="bgMsg.data.backgroundHeight"
-            :show-input-controls="false"
-            style="float: left; width: 95%"
-            :max="100"
-            show-input
-          ></el-slider>
+        <el-form-item v-if="bgMsg.data.showImg && bgMsg.data.mode != 1" label="背景图高">
+          <el-slider v-model="bgMsg.data.backgroundHeight" :show-input-controls="false" style="float: left; width: 95%"
+            :max="100" show-input></el-slider>
           <div style="float: right">%</div>
         </el-form-item>
       </el-form>
@@ -765,52 +400,53 @@
   </div>
 </template>
 <script>
-import search from "../sallCenter/plugin/search.vue";
-import navigationIcon from "../sallCenter/plugin/navigationIcon.vue";
-import banner from "../sallCenter/plugin/banner.vue";
-import rubik from "../sallCenter/plugin/rubik.vue";
-import goods from "../sallCenter/plugin/goods.vue";
-import notice from "../sallCenter/plugin/notice.vue";
-import mylink from "../sallCenter/plugin/link.vue";
-import myvideo from "../sallCenter/plugin/video.vue";
-import mystore from "../sallCenter/plugin/store.vue";
-import copyright from "../sallCenter/plugin/copyright.vue";
-import checkIn from "../sallCenter/plugin/check-in.vue";
-import mymap from "../sallCenter/plugin/map.vue";
-import userInfo from "../sallCenter/plugin/user-info.vue";
-import userOrder from "../sallCenter/plugin/user-order.vue";
-import mpLink from "../sallCenter/plugin/mp-link.vue";
-import coupon from "../sallCenter/plugin/coupon.vue";
-import timer from "../sallCenter/plugin/timer.vue";
-import pintuan from "../sallCenter/plugin/pintuan.vue";
-import booking from "../sallCenter/plugin/booking.vue";
-import bargain from "../sallCenter/plugin/bargain.vue";
-import integralMall from "../sallCenter/plugin/integral-mall.vue";
-import lottery from "../sallCenter/plugin/lottery.vue";
-import advance from "../sallCenter/plugin/advance.vue";
-import vipCard from "../sallCenter/plugin/vip-card.vue";
-import live from "../sallCenter/plugin/live.vue";
-import empty from "../sallCenter/plugin/empty.vue";
-import advert from "../sallCenter/plugin/advert.vue";
-import modal from "../sallCenter/plugin/modal.vue";
-import quickNav from "../sallCenter/plugin/quick-nav.vue";
-import imageText from "../sallCenter/plugin/image-text.vue";
-import topic from "../sallCenter/plugin/topic.vue";
-import shopinfo from "../sallCenter/plugin/shopinfo.vue";
-import sidao from "../sallCenter/plugin/sidao.vue";
-import education from "../sallCenter/plugin/education";
-import educationArticle from "../sallCenter/plugin/educationArticle";
-import educationteacher from "../sallCenter/plugin/educationteacher";
-import educationCustom from "../sallCenter/plugin/educationCustom";
-import reservestore from "../sallCenter/plugin/reservestore";
-import storeGoods from "../sallCenter/plugin/storeGoods";
-import navPage from "../sallCenter/plugin/nav-page";
-import miaiuser from "../sallCenter/plugin/miaiuser";
-import miaiactivitytype from "../sallCenter/plugin/miaiactivitytype";
-import miaiactivityCustom from "../sallCenter/plugin/miaiactivityCustom";
-import ChooseImg from "@/components/global/ChooseImg.vue";
-import Posts from "./plugin/posts.vue"; //贴子插件
-export default {
+  import search from "../sallCenter/plugin/search.vue";
+  import navigationIcon from "../sallCenter/plugin/navigationIcon.vue";
+  import banner from "../sallCenter/plugin/banner.vue";
+  import rubik from "../sallCenter/plugin/rubik.vue";
+  import goods from "../sallCenter/plugin/goods.vue";
+  import notice from "../sallCenter/plugin/notice.vue";
+  import mylink from "../sallCenter/plugin/link.vue";
+  import myvideo from "../sallCenter/plugin/video.vue";
+  import mystore from "../sallCenter/plugin/store.vue";
+  import copyright from "../sallCenter/plugin/copyright.vue";
+  import checkIn from "../sallCenter/plugin/check-in.vue";
+  import mymap from "../sallCenter/plugin/map.vue";
+  import userInfo from "../sallCenter/plugin/user-info.vue";
+  import userOrder from "../sallCenter/plugin/user-order.vue";
+  import mpLink from "../sallCenter/plugin/mp-link.vue";
+  import coupon from "../sallCenter/plugin/coupon.vue";
+  import timer from "../sallCenter/plugin/timer.vue";
+  import pintuan from "../sallCenter/plugin/pintuan.vue";
+  import booking from "../sallCenter/plugin/booking.vue";
+  import bargain from "../sallCenter/plugin/bargain.vue";
+  import integralMall from "../sallCenter/plugin/integral-mall.vue";
+  import lottery from "../sallCenter/plugin/lottery.vue";
+  import advance from "../sallCenter/plugin/advance.vue";
+  import vipCard from "../sallCenter/plugin/vip-card.vue";
+  import live from "../sallCenter/plugin/live.vue";
+  import empty from "../sallCenter/plugin/empty.vue";
+  import advert from "../sallCenter/plugin/advert.vue";
+  import modal from "../sallCenter/plugin/modal.vue";
+  import quickNav from "../sallCenter/plugin/quick-nav.vue";
+  import imageText from "../sallCenter/plugin/image-text.vue";
+  import topic from "../sallCenter/plugin/topic.vue";
+  import shopinfo from "../sallCenter/plugin/shopinfo.vue";
+  import sidao from "../sallCenter/plugin/sidao.vue";
+  import education from "../sallCenter/plugin/education";
+  import educationArticle from "../sallCenter/plugin/educationArticle";
+  import educationteacher from "../sallCenter/plugin/educationteacher";
+  import educationCustom from "../sallCenter/plugin/educationCustom";
+  import reservestore from "../sallCenter/plugin/reservestore";
+  import storeGoods from "../sallCenter/plugin/storeGoods";
+  import navPage from "../sallCenter/plugin/nav-page";
+  import miaiuser from "../sallCenter/plugin/miaiuser";
+  import miaiactivitytype from "../sallCenter/plugin/miaiactivitytype";
+  import miaiactivityCustom from "../sallCenter/plugin/miaiactivityCustom";
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+  import Posts from "./plugin/posts.vue"; //贴子插件
+  import tradeCustom from "./plugin/tradeCustom.vue"  //自定义首店
+  export default {
     data() {
       return {
         addMsg: {
@@ -887,6 +523,7 @@ export default {
       miaiactivitytype,
       miaiactivityCustom,
       Posts, //帖子
+      tradeCustom
     },
     methods: {
       //选择图片
@@ -949,7 +586,9 @@ export default {
       },
       //获取左侧菜单
       GetPlugInList() {
-      this.apipost("/api/Tenant/GetPlugInList", {QPlugTypeStr:"1,2,3"}, (res) => {
+        this.apipost("/api/Tenant/GetPlugInList", {
+          QPlugTypeStr: "1,2,3"
+        }, (res) => {
           if (res.data.resultCode == 1) {
             this.allComponents = res.data.data;
           } else {
@@ -1033,8 +672,7 @@ export default {
                 icon: this.domainManager().ImageUrl + "/Static/icon-notice.png", //公告图标
                 textColor: "#ffffff", //文字颜色
                 background: "#f67f79", //背景颜色
-              headerUrl:
-                this.domainManager().ImageUrl + "/Static/icon-notice-title.png", //头部图片
+                headerUrl: this.domainManager().ImageUrl + "/Static/icon-notice-title.png", //头部图片
                 btnColor: "#ff4544", //按钮颜色
                 btnWidth: 500, //按钮宽度
                 btnHeight: 80, //按钮高度
@@ -1053,10 +691,8 @@ export default {
               data: {
                 style: "normal", //专题样式
                 count: 1, //显示行数
-              logo_1:
-                this.domainManager().ImageUrl + "/Static/icon-topic-1.png", //logo(1行)
-              logo_2:
-                this.domainManager().ImageUrl + "/Static/icon-topic-2.png", //logo(2行)
+                logo_1: this.domainManager().ImageUrl + "/Static/icon-topic-1.png", //logo(1行)
+                logo_2: this.domainManager().ImageUrl + "/Static/icon-topic-2.png", //logo(2行)
                 icon: this.domainManager().ImageUrl + "/Static/icon-topic-r.png", //专题标签
                 list: [],
                 cat_show: false, //是否显示分类
@@ -1175,8 +811,7 @@ export default {
               isCked: false,
               data: {
                 navPicUrl: this.domainManager().ImageUrl + "/Static/nav-icon.png", //导航图标
-              scorePicUrl:
-                this.domainManager().ImageUrl + "/Static/score-icon.png", //评分图标
+                scorePicUrl: this.domainManager().ImageUrl + "/Static/score-icon.png", //评分图标
                 showName: true, //显示门店名称
                 showScore: true, //显示评分
                 showTel: true, //显示电话
@@ -1205,8 +840,7 @@ export default {
               Id: "check-in",
               isCked: false,
               data: {
-              backgroundPicUrl:
-                this.domainManager().ImageUrl +
+                backgroundPicUrl: this.domainManager().ImageUrl +
                   "/Static/check-in-default-bg.png", //背景图
                 showText: true, //显示文字
                 textPosition: "left", //文字位置
@@ -1235,44 +869,38 @@ export default {
               Id: "user-order",
               isCked: false,
               data: {
-              navs: [
-                {
+                navs: [{
                     url: "",
                     openType: "navigate",
-                  picUrl:
-                    this.domainManager().ImageUrl +
+                    picUrl: this.domainManager().ImageUrl +
                       "/Static/user-order-dfk.png",
                     text: "待付款",
                   },
                   {
                     url: "",
                     openType: "navigate",
-                  picUrl:
-                    this.domainManager().ImageUrl +
+                    picUrl: this.domainManager().ImageUrl +
                       "/Static/user-order-dfh.png",
                     text: "待发货",
                   },
                   {
                     url: "",
                     openType: "navigate",
-                  picUrl:
-                    this.domainManager().ImageUrl +
+                    picUrl: this.domainManager().ImageUrl +
                       "/Static/user-order-dsh.png",
                     text: "待收货",
                   },
                   {
                     url: "",
                     openType: "navigate",
-                  picUrl:
-                    this.domainManager().ImageUrl +
+                    picUrl: this.domainManager().ImageUrl +
                       "/Static/user-order-ywc.png",
                     text: "待评价",
                   },
                   {
                     url: "",
                     openType: "navigate",
-                  picUrl:
-                    this.domainManager().ImageUrl + "/Static/user-order-sh.png",
+                    picUrl: this.domainManager().ImageUrl + "/Static/user-order-sh.png",
                     text: "售后",
                   },
                 ],
@@ -1330,10 +958,8 @@ export default {
               isCked: false,
               data: {
                 textColor: "#ffffff", //字体颜色
-              receiveBg:
-                this.domainManager().ImageUrl + "/Static/icon-coupon-no.png", //不可领取
-              unclaimedBg:
-                this.domainManager().ImageUrl + "/Static/icon-coupon-index.png", //可领取
+                receiveBg: this.domainManager().ImageUrl + "/Static/icon-coupon-no.png", //不可领取
+                unclaimedBg: this.domainManager().ImageUrl + "/Static/icon-coupon-index.png", //可领取
                 showImg: false,
                 backgroundColor: "#fff", //背景颜色
                 backgroundPicUrl: "",
@@ -1465,8 +1091,7 @@ export default {
                 showCoupon: true,
                 showGoods: true,
                 couponColor: "#ffffff",
-              couponPicUrl:
-                this.domainManager().ImageUrl + "/Static/coupon-background.png",
+                couponPicUrl: this.domainManager().ImageUrl + "/Static/coupon-background.png",
                 buttonColor: "#ff4544",
                 list: [],
                 listStyle: 1,
@@ -1635,16 +1260,14 @@ export default {
               isCked: false,
               data: {
                 opened: false, //是否开启
-              list: [
-                {
+                list: [{
                   //广告图片数组
                   picUrl: "",
                   link: {
                     url: "",
                     openType: "",
                   },
-                },
-              ],
+                }, ],
                 times: 0, //弹窗次数
               },
             };
@@ -1717,8 +1340,7 @@ export default {
                 headInfo: "赞美生活,样样满意", //用户介绍
                 backgroundPicUrl: "", //背景图片
                 backgroundColor: "#ffffff", //背景颜色
-              bottonImg:
-                "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1598255454000_522.png", //按钮图片
+                bottonImg: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1598255454000_522.png", //按钮图片
                 fontColor: "", //字体颜色
                 fontName: "", //字体
                 fontSize: 12, //字体大小
@@ -1813,6 +1435,25 @@ export default {
             };
             this.dataList.push(customObj);
             break;
+            //首店自定义组件
+          case "tradePavilionCustom":
+            let tradeObj = {
+              Id: "tradePavilionCustom",
+              isCked: false,
+              data: {
+                goodsLength: 10, //商品数量
+                listStyle: -1, //列表样式[-1-列表模式,0-左右滑动,1-一行一个,2-一行两个3-一行三个]
+                backgroundColor: "#fff", //背景颜色
+                PaddingTop: 0, //上边距
+                PaddingBottom: 0, //下边距
+                PaddingLeft: 0, //左边距
+                PaddingRight: 0, //右边距
+                SearchFilletPX: 0, //组件圆角
+                list: [], //自定义列表
+              },
+            };
+            this.dataList.push(tradeObj);
+            break;
           case "reservestore":
             let reserObj = {
               Id: "reservestore",
@@ -2057,8 +1698,7 @@ export default {
       //获取数据
       GetData() {
         this.apipost(
-        "/api/Template/GetMiniTemplate",
-        {
+          "/api/Template/GetMiniTemplate", {
             Id: this.addMsg.Id,
           },
           (res) => {
@@ -2093,5 +1733,6 @@ export default {
         this.GetData();
       }
     },
-};
+  };
+
 </script>