111

src/views/diy/edit copy.ts

@@ -0,0 +1,2454 @@
+export const data1 = {
+  'id': 0,
+  'name': 'DIY_PAGE_RANDOM_1768979643',
+  'page_title': '页面1768979643',
+  'title': '页面1768979643',
+  'type': 'DIY_PAGE',
+  'type_name': '微页面',
+  'template': '',
+  'page': '/app/pages/index/diy',
+  'mode': 'diy',
+  'value': '',
+  'is_default': 0,
+  'component': {
+    'BASIC': {
+      'title': '基础组件',
+      'list': {
+        'Text': {
+          'title': '标题',
+          'icon': 'iconfont iconbiaotipc',
+          'path': 'edit-text',
+          'uses': 0,
+          'position': '',
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 0
+            }
+          },
+          'value': {
+            'style': 'style-1',
+            'styleName': '风格1',
+            'text': '标题栏',
+            'link': {
+              'name': ''
+            },
+            'textColor': '#303133',
+            'fontSize': 16,
+            'fontWeight': 'normal',
+            'textAlign': 'center',
+            'subTitle': {
+              'text': '副标题',
+              'color': '#999999',
+              'fontSize': 14,
+              'control': false,
+              'fontWeight': 'normal'
+            },
+            'more': {
+              'text': '更多',
+              'control': false,
+              'isShow': true,
+              'link': {
+                'name': ''
+              },
+              'color': '#999999'
+            }
+          }
+        },
+        'ImageAds': {
+          'title': '图片广告',
+          'icon': 'iconfont icontupiandaohangpc',
+          'path': 'edit-image-ads',
+          'uses': 0,
+          'value': {
+            'imageHeight': 180,
+            'isSameScreen': false,
+            'list': [
+              {
+                'link': {
+                  'name': ''
+                },
+                'imageUrl': '',
+                'imgWidth': 0,
+                'imgHeight': 0
+              }
+            ]
+          }
+        },
+        'GraphicNav': {
+          'title': '图文导航',
+          'icon': 'iconfont icontuwendaohangpc',
+          'path': 'edit-graphic-nav',
+          'uses': 0,
+          'value': {
+            'layout': 'horizontal',
+            'mode': 'graphic',
+            'type': 'img',
+            'showStyle': 'fixed',
+            'rowCount': 4,
+            'pageCount': 2,
+            'carousel': {
+              'type': 'circle',
+              'color': '#FFFFFF'
+            },
+            'imageSize': 40,
+            'aroundRadius': 25,
+            'font': {
+              'size': 14,
+              'weight': 'normal',
+              'color': '#303133'
+            },
+            'list': [
+              {
+                'title': '',
+                'link': {
+                  'name': ''
+                },
+                'imageUrl': '',
+                'label': {
+                  'control': false,
+                  'text': '热门',
+                  'textColor': '#FFFFFF',
+                  'bgColorStart': '#F83287',
+                  'bgColorEnd': '#FE3423'
+                }
+              },
+              {
+                'title': '',
+                'link': {
+                  'name': ''
+                },
+                'imageUrl': '',
+                'label': {
+                  'control': false,
+                  'text': '热门',
+                  'textColor': '#FFFFFF',
+                  'bgColorStart': '#F83287',
+                  'bgColorEnd': '#FE3423'
+                }
+              },
+              {
+                'title': '',
+                'link': {
+                  'name': ''
+                },
+                'imageUrl': '',
+                'label': {
+                  'control': false,
+                  'text': '热门',
+                  'textColor': '#FFFFFF',
+                  'bgColorStart': '#F83287',
+                  'bgColorEnd': '#FE3423'
+                }
+              },
+              {
+                'title': '',
+                'link': {
+                  'name': ''
+                },
+                'imageUrl': '',
+                'label': {
+                  'control': false,
+                  'text': '热门',
+                  'textColor': '#FFFFFF',
+                  'bgColorStart': '#F83287',
+                  'bgColorEnd': '#FE3423'
+                }
+              }
+            ],
+            'swiper': {
+              'indicatorColor': 'rgba(0, 0, 0, 0.3)',
+              'indicatorActiveColor': '#FF0E0E',
+              'indicatorStyle': 'style-1',
+              'indicatorAlign': 'center'
+            },
+            'template': {
+              'margin': {
+                'top': 10,
+                'bottom': 10,
+                'both': 0
+              }
+            }
+          }
+        },
+        'RubikCube': {
+          'title': '魔方',
+          'icon': 'iconfont iconmofangpc',
+          'path': 'edit-rubik-cube',
+          'uses': 0,
+          'value': {
+            'mode': 'row1-of2',
+            'imageGap': 0,
+            'list': [
+              {
+                'imageUrl': '',
+                'imgWidth': 0,
+                'imgHeight': 0,
+                'link': {
+                  'name': ''
+                }
+              },
+              {
+                'imageUrl': '',
+                'imgWidth': 0,
+                'imgHeight': 0,
+                'link': {
+                  'name': ''
+                }
+              }
+            ]
+          }
+        },
+        'HotArea': {
+          'title': '热区',
+          'icon': 'iconfont iconrequpc',
+          'path': 'edit-hot-area',
+          'uses': 0,
+          'value': {
+            'imageUrl': '',
+            'imgWidth': 0,
+            'imgHeight': 0,
+            'heatMapData': []
+          }
+        },
+        'MemberLevel': {
+          'title': '会员等级',
+          'icon': 'iconfont iconhuiyuandengjipc',
+          'path': 'edit-member-level',
+          'uses': 1,
+          'value': {
+            'style': 'style-1',
+            'styleName': '风格1'
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 12,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        },
+        'Notice': {
+          'title': '公告',
+          'icon': 'iconfont icongonggaopc',
+          'path': 'edit-notice',
+          'uses': 0,
+          'value': {
+            'noticeType': 'img',
+            'imgType': 'system',
+            'systemUrl': 'style_1',
+            'imageUrl': '',
+            'showType': 'popup',
+            'scrollWay': 'upDown',
+            'fontSize': 14,
+            'fontWeight': 'normal',
+            'noticeTitle': '公告',
+            'list': [
+              {
+                'text': '公告',
+                'link': {
+                  'name': ''
+                }
+              }
+            ]
+          }
+        },
+        'RichText': {
+          'title': '富文本',
+          'icon': 'iconfont iconfuwenbenpc',
+          'path': 'edit-rich-text',
+          'uses': 0,
+          'value': {
+            'html': ''
+          }
+        },
+        'ActiveCube': {
+          'title': '活动魔方',
+          'icon': 'iconfont iconmofangpc',
+          'path': 'edit-active-cube',
+          'uses': 0,
+          'value': {
+            'titleStyle': {
+              'title': '风格1',
+              'value': 'style-1'
+            },
+            'text': '超值爆款',
+            'textImg': 'static/resource/images/diy/active_cube/active_cube_text1.png',
+            'textLink': {
+              'name': ''
+            },
+            'titleColor': '#F91700',
+            'subTitle': {
+              'text': '为您精选爆款',
+              'textColor': '#FFFFFF',
+              'startColor': '#FB792F',
+              'endColor': '#F91700',
+              'link': {
+                'name': ''
+              }
+            },
+            'blockStyle': {
+              'title': '风格1',
+              'value': 'style-1',
+              'fontWeight': 'normal',
+              'btnText': 'normal'
+            },
+            'list': [
+              {
+                'title': {
+                  'text': '今日推荐',
+                  'textColor': '#303133'
+                },
+                'subTitle': {
+                  'text': '诚意推荐',
+                  'textColor': '#999999',
+                  'startColor': '',
+                  'endColor': ''
+                },
+                'moreTitle': {
+                  'text': '去看看',
+                  'startColor': '#FEA715',
+                  'endColor': '#FE1E00'
+                },
+                'listFrame': {
+                  'startColor': '#FFFAF5',
+                  'endColor': '#FFFFFF'
+                },
+                'link': {
+                  'name': ''
+                },
+                'imageUrl': 'static/resource/images/diy/active_cube/active_cube_goods1.png'
+              },
+              {
+                'title': {
+                  'text': '优惠好物',
+                  'textColor': '#303133'
+                },
+                'subTitle': {
+                  'text': '领券更优惠',
+                  'textColor': '#999999',
+                  'startColor': '',
+                  'endColor': ''
+                },
+                'moreTitle': {
+                  'text': '去看看',
+                  'startColor': '#FFBF50',
+                  'endColor': '#FF9E03'
+                },
+                'listFrame': {
+                  'startColor': '#FFFAF5',
+                  'endColor': '#FFFFFF'
+                },
+                'link': {
+                  'name': ''
+                },
+                'imageUrl': 'static/resource/images/diy/active_cube/active_cube_goods2.png'
+              },
+              {
+                'title': {
+                  'text': '热销推荐',
+                  'textColor': '#303133'
+                },
+                'subTitle': {
+                  'text': '本周热销商品',
+                  'textColor': '#999999',
+                  'startColor': '',
+                  'endColor': ''
+                },
+                'moreTitle': {
+                  'text': '去看看',
+                  'startColor': '#A2E792',
+                  'endColor': '#49CD2D'
+                },
+                'listFrame': {
+                  'startColor': '#FFFAF5',
+                  'endColor': '#FFFFFF'
+                },
+                'link': {
+                  'name': ''
+                },
+                'imageUrl': 'static/resource/images/diy/active_cube/active_cube_goods3.png'
+              },
+              {
+                'title': {
+                  'text': '书桌好物',
+                  'textColor': '#303133'
+                },
+                'subTitle': {
+                  'text': '办公好物推荐',
+                  'textColor': '#999999',
+                  'startColor': '',
+                  'endColor': ''
+                },
+                'moreTitle': {
+                  'text': '去看看',
+                  'startColor': '#4AC1FF',
+                  'endColor': '#1D7CFF'
+                },
+                'listFrame': {
+                  'startColor': '#FFFAF5',
+                  'endColor': '#FFFFFF'
+                },
+                'link': {
+                  'name': ''
+                },
+                'imageUrl': 'static/resource/images/diy/active_cube/active_cube_goods4.png'
+              }
+            ],
+            'template': {
+              'textColor': '#303133',
+              'pageStartBgColor': '',
+              'pageEndBgColor': '',
+              'pageGradientAngle': 'to bottom',
+              'componentBgUrl': '',
+              'componentBgAlpha': 2,
+              'componentStartBgColor': '',
+              'componentEndBgColor': '',
+              'componentGradientAngle': 'to bottom',
+              'topRounded': 12,
+              'bottomRounded': 12,
+              'elementBgColor': '#FFFAF5',
+              'topElementRounded': 10,
+              'bottomElementRounded': 10,
+              'margin': {
+                'top': 10,
+                'bottom': 10,
+                'both': 10
+              }
+            }
+          }
+        },
+        'CarouselSearch': {
+          'title': '轮播搜索',
+          'icon': 'iconfont iconlunbosousuopc',
+          'path': 'edit-carousel-search',
+          'uses': 1,
+          'position': 'top_fixed',
+          'value': {
+            'positionWay': 'static',
+            'fixedBgColor': '',
+            'bgGradient': false,
+            'search': {
+              'logo': '',
+              'text': '请输入搜索关键词',
+              'link': {
+                'name': ''
+              },
+              'style': 'style-1',
+              'styleName': '风格一',
+              'subTitle': {
+                'text': '本地好价·优选生活',
+                'textColor': '#000000',
+                'startColor': 'rgba(255,255,255,0.7)',
+                'endColor': ''
+              },
+              'positionColor': '#ffffff',
+              'hotWord': {
+                'interval': 3,
+                'list': []
+              },
+              'color': '#999999',
+              'btnColor': '#ffffff',
+              'bgColor': '#ffffff',
+              'btnBgColor': '#ff3434'
+            },
+            'tab': {
+              'control': true,
+              'noColor': '',
+              'selectColor': '',
+              'fixedNoColor': '',
+              'fixedSelectColor': '',
+              'list': [
+                {
+                  'text': '分类名称',
+                  'source': 'diy_page',
+                  'diy_id': '',
+                  'diy_title': ''
+                },
+                {
+                  'text': '分类名称',
+                  'source': 'diy_page',
+                  'diy_id': '',
+                  'diy_title': ''
+                },
+                {
+                  'text': '分类名称',
+                  'source': 'diy_page',
+                  'diy_id': '',
+                  'diy_title': ''
+                },
+                {
+                  'text': '分类名称',
+                  'source': 'diy_page',
+                  'diy_id': '',
+                  'diy_title': ''
+                }
+              ]
+            },
+            'swiper': {
+              'control': true,
+              'interval': 5,
+              'indicatorColor': 'rgba(0, 0, 0, 0.3)',
+              'indicatorActiveColor': '#FF0E0E',
+              'indicatorStyle': 'style-1',
+              'indicatorAlign': 'center',
+              'swiperStyle': 'style-1',
+              'imageHeight': 168,
+              'topRounded': 0,
+              'bottomRounded': 0,
+              'list': [
+                {
+                  'imageUrl': '',
+                  'imgWidth': 690,
+                  'imgHeight': 330,
+                  'link': {
+                    'name': ''
+                  }
+                }
+              ]
+            }
+          }
+        },
+        'FloatBtn': {
+          'title': '浮动按钮',
+          'icon': 'iconfont iconfudonganniupc',
+          'path': 'edit-float-btn',
+          'uses': 1,
+          'position': 'fixed',
+          'value': {
+            'imageSize': 40,
+            'aroundRadius': 0,
+            'style': 'style-1',
+            'styleName': '风格一',
+            'bottomPosition': 'lowerRight',
+            'list': [
+              {
+                'imageUrl': '',
+                'link': {
+                  'name': ''
+                }
+              }
+            ],
+            'offset': 0,
+            'lateralOffset': 15
+          }
+        },
+        'HorzBlank': {
+          'title': '辅助空白',
+          'icon': 'iconfont iconfuzhukongbaipc',
+          'path': 'edit-horz-blank',
+          'uses': 0,
+          'value': {
+            'height': 20
+          }
+        },
+        'HorzLine': {
+          'title': '辅助线',
+          'icon': 'iconfont iconfuzhuxianpc',
+          'path': 'edit-horz-line',
+          'uses': 0,
+          'value': {
+            'borderWidth': 1,
+            'borderColor': '#303133',
+            'borderStyle': 'solid'
+          }
+        },
+        'PictureShow': {
+          'title': '图片展播',
+          'icon': 'iconfont icona-tupianzhanbopc302',
+          'path': 'edit-picture-show',
+          'uses': 0,
+          'value': {
+            'moduleOne': {
+              'head': {
+                'textImg': 'static/resource/images/diy/picture_show/picture_show_head_text3.png',
+                'subText': '最高补1200元',
+                'subTextColor': '#666666'
+              },
+              'list': [
+                {
+                  'btnTitle': {
+                    'text': '全网低价',
+                    'color': '#ffffff',
+                    'startColor': '#F5443E',
+                    'endColor': '#F5443E'
+                  },
+                  'link': {
+                    'name': ''
+                  },
+                  'imageUrl': 'static/resource/images/diy/picture_show/picture_05.png'
+                },
+                {
+                  'btnTitle': {
+                    'text': '大牌特惠',
+                    'color': '#ffffff',
+                    'startColor': '#F5443E',
+                    'endColor': '#F5443E'
+                  },
+                  'link': {
+                    'name': ''
+                  },
+                  'imageUrl': 'static/resource/images/diy/picture_show/picture_06.png'
+                }
+              ],
+              'listFrame': {
+                'startColor': '#D4EFFF',
+                'endColor': '#EBF4FA'
+              }
+            },
+            'moduleTwo': {
+              'head': {
+                'textImg': 'static/resource/images/diy/picture_show/picture_show_head_text4.png',
+                'subText': '每日上新',
+                'subTextColor': '#666666'
+              },
+              'list': [
+                {
+                  'btnTitle': {
+                    'text': '人气爆款',
+                    'color': '#ffffff',
+                    'startColor': '#F5443E',
+                    'endColor': '#F5443E'
+                  },
+                  'link': {
+                    'name': ''
+                  },
+                  'imageUrl': 'static/resource/images/diy/picture_show/picture_07.png'
+                },
+                {
+                  'btnTitle': {
+                    'text': '官方正品',
+                    'color': '#ffffff',
+                    'startColor': '#F5443E',
+                    'endColor': '#F5443E'
+                  },
+                  'link': {
+                    'name': ''
+                  },
+                  'imageUrl': 'static/resource/images/diy/picture_show/picture_08.png'
+                }
+              ],
+              'listFrame': {
+                'startColor': '#FFF1D4',
+                'endColor': '#F9F2E5'
+              }
+            },
+            'moduleRounded': {
+              'topRounded': 10,
+              'bottomRounded': 10
+            }
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        }
+      }
+    },
+    'SHOP_COMPONENT': {
+      'title': '商城组件',
+      'list': {
+        'GoodsList': {
+          'title': '商品列表',
+          'icon': 'iconfont iconshangpinliebiaopc',
+          'path': 'edit-goods-list',
+          'uses': 0,
+          'value': {
+            'style': 'style-1',
+            'source': 'all',
+            'num': 10,
+            'goods_category': '',
+            'goods_category_name': '请选择',
+            'goods_ids': [],
+            'sortWay': 'default',
+            'goodsNameStyle': {
+              'color': '#303133',
+              'control': true,
+              'fontWeight': 'normal',
+              'isShow': true
+            },
+            'priceStyle': {
+              'color': '#FF4142',
+              'control': true,
+              'isShow': true
+            },
+            'saleStyle': {
+              'color': '#999999',
+              'control': true,
+              'isShow': true
+            },
+            'labelStyle': {
+              'control': true,
+              'isShow': true
+            },
+            'btnStyle': {
+              'fontWeight': false,
+              'padding': 0,
+              'aroundRadius': 25,
+              'cartEvent': 'detail',
+              'text': '购买',
+              'textColor': '#FFFFFF',
+              'startBgColor': '#FF4142',
+              'endBgColor': '#FF4142',
+              'style': 'button',
+              'control': true
+            },
+            'imgElementRounded': 10
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 10,
+            'bottomElementRounded': 10,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        },
+        'ShopSearch': {
+          'title': '搜索',
+          'icon': 'iconfont iconsousuopc-1',
+          'path': 'edit-shop-search',
+          'uses': 1,
+          'value': {
+            'searchStyle': 'style-1',
+            'searchLink': {
+              'name': ''
+            },
+            'text': '请输入搜索关键词',
+            'iconType': 'img',
+            'icon': '',
+            'imageUrl': ''
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 10,
+              'bottom': 10,
+              'both': 10
+            }
+          }
+        },
+        'ManyGoodsList': {
+          'title': '多商品组',
+          'icon': 'iconfont iconduoshangpinzupc',
+          'path': 'edit-many-goods-list',
+          'uses': 0,
+          'value': {
+            'style': 'style-2',
+            'num': 6,
+            'sortWay': 'default',
+            'headStyle': 'style-1',
+            'aroundRadius': 25,
+            'source': 'custom',
+            'goods_category': '',
+            'goods_category_name': '请选择',
+            'goodsNameStyle': {
+              'color': '#303133',
+              'control': true,
+              'fontWeight': 'normal',
+              'isShow': true
+            },
+            'priceStyle': {
+              'color': '#FF4142',
+              'control': true,
+              'isShow': true
+            },
+            'saleStyle': {
+              'color': '#999999',
+              'control': true,
+              'isShow': true
+            },
+            'labelStyle': {
+              'control': true,
+              'isShow': true
+            },
+            'btnStyle': {
+              'fontWeight': false,
+              'padding': 0,
+              'aroundRadius': 25,
+              'cartEvent': 'detail',
+              'text': '购买',
+              'textColor': '#FFFFFF',
+              'startBgColor': '#FF4142',
+              'endBgColor': '#FF4142',
+              'style': 'button',
+              'control': true
+            },
+            'list': [
+              {
+                'title': '推荐',
+                'desc': '猜你喜欢',
+                'source': 'all',
+                'goods_category': '',
+                'goods_category_name': '请选择',
+                'goods_ids': [],
+                'imageUrl': ''
+              }
+            ],
+            'imgElementRounded': 0
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        },
+        'GoodsCoupon': {
+          'title': '优惠券',
+          'icon': 'iconfont iconyouhuiquanpc',
+          'path': 'edit-goods-coupon',
+          'uses': 0,
+          'value': {
+            'style': 'style-1',
+            'styleName': '风格一',
+            'source': 'all',
+            'num': 6,
+            'couponIds': [],
+            'btnText': '立即领取',
+            'couponTitle': '先领券 再购物',
+            'couponSubTitle': '领券下单 享购物优惠',
+            'titleColor': '#ffffff',
+            'subTitleColor': '#ffffff',
+            'couponItem': {
+              'bgColor': '#ffffff',
+              'textColor': '#333333',
+              'subTextColor': '#666666',
+              'moneyColor': '#333333',
+              'aroundRadius': 12
+            }
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 10,
+              'bottom': 10,
+              'both': 10
+            }
+          }
+        },
+        'ShopExchangeInfo': {
+          'title': '积分兑换',
+          'icon': 'iconfont iconjifenpc',
+          'path': 'edit-shop-exchange-info',
+          'uses': 0,
+          'value': {
+            'bgUrl': 'addon/shop/diy/point/point_index_bg.jpg'
+          }
+        },
+        'ShopExchangeGoods': {
+          'title': '积分商品',
+          'icon': 'iconfont iconjifenshangpinpc',
+          'path': 'edit-shop-exchange-goods',
+          'uses': 0,
+          'value': {
+            'style': 'style-2',
+            'source': 'all',
+            'num': 10,
+            'goods_category': '',
+            'goods_category_name': '请选择',
+            'goods_ids': [],
+            'sortWay': 'total_order_num',
+            'goodsNameStyle': {
+              'color': '#333',
+              'control': true,
+              'fontWeight': 'normal'
+            },
+            'priceStyle': {
+              'mainColor': '#FF4142',
+              'mainControl': true,
+              'lineColor': '#999CA7',
+              'lineControl': true
+            },
+            'saleStyle': {
+              'color': '#999999',
+              'control': true
+            },
+            'imgElementRounded': 10
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        },
+        'ShopGoodsRecommend': {
+          'title': '商品推荐',
+          'icon': 'iconfont icona-shangpintuijianpc30',
+          'path': 'edit-shop-goods-recommend',
+          'uses': 0,
+          'value': {
+            'priceStyle': {
+              'mainColor': '#333333'
+            },
+            'source': 'all',
+            'goods_ids': [],
+            'list': [
+              {
+                'title': {
+                  'text': '今日推荐',
+                  'textColor': '#303133'
+                },
+                'moreTitle': {
+                  'text': '精选',
+                  'textColor': '#FFFFFF',
+                  'startColor': '#FF7234',
+                  'endColor': '#FF213F'
+                },
+                'listFrame': {
+                  'startColor': '#FFE5E5',
+                  'endColor': '#FFF5F0'
+                },
+                'button': {
+                  'text': '首单',
+                  'textColor': '#FFFFFF',
+                  'color': '#FF1128'
+                }
+              },
+              {
+                'title': {
+                  'text': '品质好物',
+                  'textColor': '#303133'
+                },
+                'moreTitle': {
+                  'text': '精选',
+                  'textColor': '#FFFFFF',
+                  'startColor': '#F2C719',
+                  'endColor': '#FBBA08'
+                },
+                'listFrame': {
+                  'startColor': '#FFEFBA',
+                  'endColor': '#FFF5D7'
+                },
+                'button': {
+                  'text': '首单',
+                  'textColor': '#FFFFFF',
+                  'color': '#FF1128'
+                }
+              },
+              {
+                'title': {
+                  'text': '热销爆款',
+                  'textColor': '#303133'
+                },
+                'moreTitle': {
+                  'text': '精选',
+                  'textColor': '#FFFFFF',
+                  'startColor': '#FFA629',
+                  'endColor': '#FF8E1E'
+                },
+                'listFrame': {
+                  'startColor': '#FFE4D9',
+                  'endColor': '#FFFBF9'
+                },
+                'button': {
+                  'text': '首单',
+                  'textColor': '#FFFFFF',
+                  'color': '#FF1128'
+                }
+              }
+            ],
+            'imgElementRounded': 10
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 10,
+            'bottomElementRounded': 10,
+            'margin': {
+              'top': 10,
+              'bottom': 10,
+              'both': 10
+            }
+          }
+        },
+        'SingleRecommend': {
+          'title': '精选推荐',
+          'icon': 'iconfont icona-jingxuantuijianpc30-12',
+          'path': 'edit-single-recommend',
+          'uses': 0,
+          'value': {
+            'titleStyle': {
+              'title': '风格1',
+              'value': 'style-1'
+            },
+            'textImg': 'addon/shop/diy/index/style3/single_recommend_text1.png',
+            'textLink': {
+              'name': ''
+            },
+            'titleColor': '#999999',
+            'subTitle': {
+              'text': '更多',
+              'textColor': '#999999',
+              'link': {
+                'name': ''
+              }
+            },
+            'source': 'all',
+            'goods_ids': [],
+            'imageHeight': 250,
+            'list': [
+              {
+                'link': {
+                  'name': ''
+                },
+                'imageUrl': 'addon/shop/diy/index/style3/single_recommend_banner1.jpg',
+                'imgWidth': 345,
+                'imgHeight': 495
+              },
+              {
+                'link': {
+                  'name': ''
+                },
+                'imageUrl': 'addon/shop/diy/index/style3/single_recommend_banner2.jpg',
+                'imgWidth': 345,
+                'imgHeight': 495
+              }
+            ],
+            'goodsNameStyle': {
+              'color': '#303133',
+              'control': true,
+              'fontWeight': 'normal'
+            },
+            'priceStyle': {
+              'mainColor': '#FF4142',
+              'mainControl': true,
+              'lineColor': '#999CA7',
+              'lineControl': true
+            },
+            'saleStyle': {
+              'color': '#FF0000',
+              'control': true
+            },
+            'topCarouselRounded': 12,
+            'bottomCarouselRounded': 12,
+            'indicatorColor': 'rgba(255, 255, 255, 0.6)',
+            'indicatorActiveColor': '#ffffff'
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 10,
+              'bottom': 10,
+              'both': 10
+            }
+          }
+        },
+        'ShopNewcomer': {
+          'title': '新人专享',
+          'icon': 'iconfont icona-xinrenzhuanxiangpc30',
+          'path': 'edit-shop-newcomer',
+          'uses': 1,
+          'value': {
+            'style': {
+              'title': '风格1',
+              'value': 'style-1'
+            },
+            'textImg': 'addon/shop/diy/newcomer/style_title_01.png',
+            'subTitle': {
+              'text': '查看更多',
+              'textColor': '#FFFFFF',
+              'startColor': '#FB792F',
+              'endColor': '#F91700',
+              'link': {
+                'name': ''
+              }
+            },
+            'countDown': {
+              'numberColor': 'rgba(255, 0, 0, 1)',
+              'numberBg': {
+                'startColor': 'rgba(255, 255, 255, 1)',
+                'endColor': ''
+              },
+              'otherColor': 'rgba(255, 255, 255, 1)'
+            },
+            'source': 'all',
+            'num': 10,
+            'goods_category': '',
+            'goods_category_name': '请选择',
+            'goods_ids': [],
+            'imgElementRounded': 10
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentStartBgColor': '#ff6D1A',
+            'componentEndBgColor': 'rgba(255, 70, 56, 1)',
+            'componentGradientAngle': 'to right',
+            'topRounded': 12,
+            'bottomRounded': 12,
+            'elementBgColor': '',
+            'topElementRounded': 10,
+            'bottomElementRounded': 10,
+            'margin': {
+              'top': 10,
+              'bottom': 10,
+              'both': 10
+            }
+          }
+        },
+        'ShopGoodsRanking': {
+          'title': '排行榜',
+          'icon': 'iconfont icona-paihangbangpc30',
+          'path': 'edit-shop-goods-ranking',
+          'uses': 0,
+          'value': {
+            'list': [
+              {
+                'bgUrl': 'addon/shop/rank/rank_bg_01.jpg',
+                'text': '热销排行榜',
+                'textColor': '#FFFFFF',
+                'imgUrl': 'addon/shop/rank/rank_trophy.png',
+                'subTitle': {
+                  'text': '查看更多',
+                  'textColor': '#FFFFFF',
+                  'link': {
+                    'name': 'SHOP_GOODS_RANK',
+                    'parent': 'SHOP_LINK',
+                    'title': '商品排行榜',
+                    'url': '/addon/shop/pages/goods/rank',
+                    'action': ''
+                  }
+                },
+                'listFrame': {
+                  'startColor': '#FEA715',
+                  'endColor': '#FE1E00'
+                },
+                'source': 'default',
+                'rankIds': []
+              },
+              {
+                'bgUrl': 'addon/shop/rank/rank_bg_02.jpg',
+                'text': '人气排行榜',
+                'textColor': '#FFFFFF',
+                'imgUrl': 'addon/shop/rank/rank_top.png',
+                'subTitle': {
+                  'text': '查看更多',
+                  'textColor': '#FFFFFF',
+                  'link': {
+                    'name': 'SHOP_GOODS_RANK',
+                    'parent': 'SHOP_LINK',
+                    'title': '商品排行榜',
+                    'url': '/addon/shop/pages/goods/rank',
+                    'action': ''
+                  }
+                },
+                'listFrame': {
+                  'startColor': '#FEA715',
+                  'endColor': '#FE1E00'
+                },
+                'source': 'default',
+                'rankIds': []
+              }
+            ]
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 10,
+            'bottomElementRounded': 10,
+            'margin': {
+              'top': 10,
+              'bottom': 10,
+              'both': 10
+            }
+          }
+        }
+      }
+    },
+    'SHOP_FENXIAO_COMPONENT': {
+      'title': '分销组件',
+      'list': {
+        'FenxiaoGoodsList': {
+          'title': '分销商品',
+          'icon': 'iconfont iconfenxiaoshangpinpc',
+          'path': 'edit-fenxiao-goods-list',
+          'uses': 0,
+          'value': {
+            'style': 'style-1',
+            'source': 'all',
+            'num': 20,
+            'is_become_fenxiao': '1',
+            'goods_category': '',
+            'goods_category_name': '请选择',
+            'goods_ids': [],
+            'sortWay': 'default',
+            'goodsNameStyle': {
+              'color': '#303133',
+              'control': true,
+              'fontWeight': 'normal'
+            },
+            'priceStyle': {
+              'mainColor': '#333',
+              'mainControl': true,
+              'lineColor': '#999CA7',
+              'lineControl': true
+            },
+            'commissionStyle': {
+              'color': '#FF4142',
+              'control': true
+            },
+            'imgElementRounded': 10
+          },
+          'template': {
+            'topElementRounded': 10,
+            'bottomElementRounded': 10
+          }
+        }
+      }
+    },
+    'SHOP_GIFTCARD_COMPONENT': {
+      'title': '礼品卡组件',
+      'list': {
+        'GiftcardList': {
+          'title': '礼品卡列表',
+          'icon': 'iconfont iconshangpinliebiaopc',
+          'path': 'edit-giftcard-list',
+          'uses': 0,
+          'value': {
+            'style': 'style-1',
+            'source': 'all',
+            'num': 10,
+            'category_id': '',
+            'category_name': '请选择',
+            'giftcard_ids': [],
+            'sortWay': 'default',
+            'cardNameStyle': {
+              'color': '#303133',
+              'control': true,
+              'fontWeight': 'normal'
+            }
+          }
+        }
+      }
+    },
+    'PINTUAN_COMPONENT': {
+      'title': '拼团组件',
+      'list': {
+        'PintuanList': {
+          'title': '拼团列表',
+          'icon': 'iconfont iconjifenshangpinpc',
+          'path': 'edit-pintuan-list',
+          'uses': 0,
+          'value': {
+            'titleStyle': {
+              'imgUrl': '',
+              'way': 'text',
+              'text': '超值团购',
+              'textColor': '#ffffff',
+              'fontWeight': 'bold',
+              'fontSize': 16,
+              'link': {
+                'name': ''
+              }
+            },
+            'subTitleStyle': {
+              'textColor': '#ffffff',
+              'fontSize': 11
+            },
+            'headImgUrl': 'addon/pintuan/diy/pintuan_list/head_bg.jpg',
+            'moreStyle': {
+              'text': '更多',
+              'textColor': '#ffffff',
+              'link': {
+                'name': ''
+              },
+              'fontSize': 11
+            },
+            'btnStyle': {
+              'text': '立即团购',
+              'textColor': '#FFFFFF',
+              'startBgColor': '#FF621F',
+              'endBgColor': '#FF000D',
+              'rounded': 20
+            },
+            'list': [
+              {
+                'title': '推荐',
+                'id': 1,
+                'source': 'all',
+                'num': 10,
+                'pintuan_ids': []
+              }
+            ],
+            'goodsStyle': {
+              'imgRounded': 10
+            }
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 12,
+            'bottomRounded': 12,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        },
+        'PintuanHot': {
+          'title': '爆款拼团',
+          'icon': 'iconfont iconjifenshangpinpc',
+          'path': 'edit-pintuan-hot',
+          'uses': 0,
+          'value': {
+            'titleStyle': {
+              'text': '大牌直降',
+              'textColor': '#FFFFFF',
+              'fontWeight': 'bold',
+              'fontSize': 18,
+              'imgUrl': '',
+              'way': 'text',
+              'link': {
+                'name': ''
+              }
+            },
+            'subTitleStyle': {
+              'text': '7月10日-29日',
+              'textColor': '#ffffff',
+              'bgColor': '#ff737a',
+              'rounded': 6,
+              'fontSize': 12
+            },
+            'btnStyle': {
+              'text': '立即抢购',
+              'textColor': '#ee695c',
+              'startBgColor': '',
+              'endBgColor': '',
+              'gradientType': 'radial',
+              'fontSize': 12,
+              'link': {
+                'name': ''
+              }
+            },
+            'goodsStyle': {
+              'bgColor': '#ffffff',
+              'labelText': '大牌直降',
+              'labelSize': 10,
+              'labelColor': '#ffffff',
+              'labelBgColor': '#FF0000',
+              'rounded': 8,
+              'imgRounded': 7,
+              'source': 'all',
+              'num': 10,
+              'pintuanIds': []
+            }
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '#FF0000',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 12,
+              'bottom': 12,
+              'both': 10
+            }
+          }
+        },
+        'PintuanImmediately': {
+          'title': '立即参团',
+          'icon': 'iconfont iconjifenshangpinpc',
+          'path': 'edit-pintuan-immediately',
+          'uses': 0,
+          'value': {
+            'titleStyle': {
+              'text': '参与团购 立即团购',
+              'textColor': '#333333',
+              'fontWeight': 'bold',
+              'fontSize': 16,
+              'link': {
+                'name': ''
+              }
+            },
+            'titleImgUrl': 'addon/pintuan/diy/immediately_title_head.png',
+            'moreStyle': {
+              'text': '更多',
+              'textColor': '#999999',
+              'link': {
+                'name': ''
+              },
+              'fontSize': 12
+            },
+            'moduleStyle': {
+              'rounded': 12,
+              'bgColor': '#ffffff'
+            },
+            'goodsStyle': {
+              'rounded': 10,
+              'imgRounded': 8,
+              'bgColor': '#FFFCF8',
+              'source': 'all',
+              'num': 10,
+              'pintuanIds': []
+            },
+            'btnStyle': {
+              'text': '直接拼成',
+              'textColor': '#FFFFFF',
+              'bgColor': '#FF000D',
+              'rounded': 4
+            }
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': 'addon/pintuan/diy/immediately_bg.png',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 17,
+            'bottomElementRounded': 17,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 0
+            }
+          }
+        },
+        'PintuanLimit': {
+          'title': '限量拼团',
+          'icon': 'iconfont iconjifenshangpinpc',
+          'path': 'edit-pintuan-limit',
+          'uses': 0,
+          'value': {
+            'headStyle': {
+              'title': '风格1',
+              'value': 'style-1'
+            },
+            'titleStyle': {
+              'text': '限量团购',
+              'textColor': '#333333',
+              'fontWeight': 'bold',
+              'fontSize': 16,
+              'way': 'text',
+              'imgUrl': '',
+              'fontStyle': 'italic',
+              'link': {
+                'name': ''
+              }
+            },
+            'subTitleStyle': {
+              'text': '最高5折限量购',
+              'textColor': '#613030',
+              'fontSize': 12
+            },
+            'moreStyle': {
+              'text': '更多',
+              'textColor': '#333333',
+              'link': {
+                'name': ''
+              },
+              'fontSize': 12
+            },
+            'goodsStyle': {
+              'title': '风格1',
+              'value': 'style-1',
+              'rounded': 8,
+              'imgRounded': 7,
+              'bgColor': '#ffffff',
+              'source': 'all',
+              'num': 10,
+              'pintuanIds': []
+            },
+            'btnStyle': {
+              'textColor': '#FFFFFF',
+              'startBgColor': '#FF4142',
+              'endBgColor': '#FF4142'
+            }
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': 'addon/pintuan/diy/pintuan_limit/bg_one.jpg',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 12,
+            'bottomRounded': 12,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        }
+      }
+    },
+    'SECKILL_COMPONENT': {
+      'title': '秒杀组件',
+      'list': {
+        'SeckillGoods': {
+          'title': '秒杀商品',
+          'icon': 'iconfont iconmiaoshashangpin',
+          'path': 'edit-seckill-goods',
+          'uses': 0,
+          'value': {
+            'headStyle': {
+              'title': '风格1',
+              'value': 'style-1'
+            },
+            'headBgUrl': 'addon/seckill/diy/seckill-goods/header-bg.jpg',
+            'navList': [
+              {
+                'title': '',
+                'goodsIds': []
+              }
+            ],
+            'progress': {
+              'title': '正在秒杀',
+              'color': '#FF212B',
+              'fontWeight': 'normal'
+            },
+            'inComing': {
+              'title': '即将开抢',
+              'color': '#ffffff',
+              'fontWeight': 'normal',
+              'startBgColor': '#FF0011',
+              'endBgColor': '#FF0011'
+            },
+            'num': 10,
+            'goodsStyle': {
+              'title': '风格1',
+              'value': 'style-1'
+            },
+            'goodsElementBgColor': '#FFF',
+            'goodsElementRounded': 10,
+            'imgElementRounded': 10,
+            'btnStyle': {
+              'aroundRadius': 25,
+              'text': '抢',
+              'color': '#FF0000',
+              'startBgColor': '#FB7939',
+              'endBgColor': '#FE120E'
+            }
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '#FFEAEB',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 10,
+            'bottomRounded': 10,
+            'elementBgColor': '',
+            'topElementRounded': 10,
+            'bottomElementRounded': 10,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 0
+            }
+          }
+        },
+        'SeckillHot': {
+          'title': '爆款秒杀',
+          'icon': 'iconfont iconbaokuanmiaosha',
+          'path': 'edit-seckill-hot',
+          'uses': 0,
+          'value': {
+            'titleStyle': {
+              'text': '爆款秒杀',
+              'color': '#EF000C',
+              'fontWeight': 'bold',
+              'fontSize': 16,
+              'fontStyle': 'normal',
+              'imgUrl': '',
+              'way': 'text',
+              'link': {
+                'name': ''
+              }
+            },
+            'subTitleStyle': {
+              'text': '',
+              'color': '#666666',
+              'fontWeight': 'normal',
+              'fontSize': 12
+            },
+            'moreStyle': {
+              'isShow': true,
+              'text': '更多',
+              'color': '#333',
+              'fontSize': 12,
+              'way': 'member',
+              'link': {
+                'name': ''
+              }
+            },
+            'source': 'all',
+            'num': 10,
+            'goodsIds': [],
+            'timeIds': [],
+            'goodsStyle': {
+              'title': '风格1',
+              'value': 'style-1'
+            },
+            'imgElementRounded': 10,
+            'btnStyle': {
+              'text': '抢',
+              'aroundRadius': 25,
+              'color': '#FFF',
+              'startBgColor': '#FF4142',
+              'endBgColor': '#FF4142'
+            }
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '#FFF0E8',
+            'componentEndBgColor': '#fff',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 10,
+            'bottomRounded': 10,
+            'elementBgColor': '',
+            'topElementRounded': 10,
+            'bottomElementRounded': 10,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        },
+        'SeckillRubikCube': {
+          'title': '秒杀魔方',
+          'icon': 'iconfont iconmiaoshamofang',
+          'path': 'edit-seckill-rubik-cube',
+          'uses': 0,
+          'value': {
+            'list': [
+              {
+                'source': 'all',
+                'goodsIds': [],
+                'timeIds': [],
+                'listGoods': [],
+                'bgUrl': 'addon/seckill/diy/seckill-rubik-cube/bg1.png',
+                'startBgColor': '#FFD2D7',
+                'endBgColor': '#FFF',
+                'titleStyle': {
+                  'text': '9.9疯抢',
+                  'textColor': '#303133'
+                },
+                'subTitleStyle': {
+                  'text': '买不了吃亏',
+                  'textColor': '#E53130'
+                }
+              },
+              {
+                'source': 'all',
+                'goodsIds': [],
+                'timeIds': [],
+                'listGoods': [],
+                'bgUrl': 'addon/seckill/diy/seckill-rubik-cube/bg2.png',
+                'startBgColor': '#FFD2D7',
+                'endBgColor': '#FFF',
+                'titleStyle': {
+                  'text': '产地优选',
+                  'textColor': '#303133'
+                },
+                'subTitleStyle': {
+                  'text': '享低价直销',
+                  'textColor': '#FFA20D'
+                }
+              }
+            ],
+            'titleFontWeight': 'bold',
+            'titleFontSize': 16,
+            'subTitleFontSize': 12
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 10,
+            'bottomRounded': 10,
+            'elementBgColor': '',
+            'topElementRounded': 10,
+            'bottomElementRounded': 10,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        },
+        'SeckillSpecialOffer': {
+          'title': '特惠秒杀',
+          'icon': 'iconfont icontehuimiaosha',
+          'path': 'edit-seckill-special-offer',
+          'uses': 0,
+          'value': {
+            'titleStyle': {
+              'text': '零食秒杀',
+              'color': '#303133'
+            },
+            'imgElementRounded': 10,
+            'btnStyle': {
+              'text': '最低1折',
+              'color': '#fff',
+              'aroundRadius': 10,
+              'startBgColor': '#F0262E',
+              'endBgColor': '#FF4142',
+              'link': {
+                'name': ''
+              }
+            },
+            'source': 'all',
+            'num': 10,
+            'timeIds': [],
+            'goodsIds': []
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '#FFF',
+            'componentEndBgColor': '#FFE2DA',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 10,
+            'bottomRounded': 10,
+            'elementBgColor': '',
+            'topElementRounded': 10,
+            'bottomElementRounded': 10,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        }
+      }
+    },
+    'FRIEND_HELP_COMPONENT': {
+      'title': '好友助力组件',
+      'list': {
+        'FriendHelpList': {
+          'title': '好友助力列表',
+          'icon': 'iconfont icona-zhulipc301',
+          'path': 'edit-friend-help-list',
+          'uses': 0,
+          'value': {
+            'titleStyle': {
+              'imgUrl': '',
+              'way': 'text',
+              'text': '好友助力',
+              'textColor': '#ffffff',
+              'fontWeight': 'normal',
+              'fontStyle': 'normal',
+              'fontSize': 16,
+              'link': {
+                'name': ''
+              }
+            },
+            'subTitleStyle': {
+              'textColor': '#ffffff',
+              'fontSize': 11
+            },
+            'headImgUrl': 'addon/friend_help/diy/friend_help_list/head_bg.jpg',
+            'moreStyle': {
+              'text': '更多',
+              'textColor': '#ffffff',
+              'link': {
+                'name': ''
+              },
+              'fontSize': 11
+            },
+            'btnStyle': {
+              'text': '发起助力',
+              'textColor': '#FFFFFF',
+              'startBgColor': '#FF621F',
+              'endBgColor': '#FF000D',
+              'rounded': 20
+            },
+            'goodsStyle': {
+              'imgRounded': 10,
+              'source': 'all',
+              'type': 'help',
+              'num': 10,
+              'goodsIds': []
+            }
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 0,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 12,
+            'bottomRounded': 12,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 0
+            }
+          }
+        },
+        'FriendHelpHot': {
+          'title': '爆款好友助力',
+          'icon': 'iconfont icona-zhulixiangqingpc30',
+          'path': 'edit-friend-help-hot',
+          'uses': 0,
+          'value': {
+            'titleStyle': {
+              'text': '好友助力',
+              'color': '#EF000C',
+              'fontWeight': 'bold',
+              'fontSize': 16,
+              'fontStyle': 'normal',
+              'imgUrl': '',
+              'way': 'text',
+              'link': {
+                'name': ''
+              }
+            },
+            'subTitleStyle': {
+              'text': '',
+              'textColor': '#613030',
+              'fontSize': 12
+            },
+            'moreStyle': {
+              'text': '更多',
+              'textColor': '#333333',
+              'link': {
+                'name': ''
+              },
+              'fontSize': 12
+            },
+            'goodsStyle': {
+              'title': '风格1',
+              'value': 'style-1',
+              'rounded': 8,
+              'imgRounded': 8,
+              'source': 'all',
+              'type': 'help',
+              'num': 10,
+              'goodsIds': [],
+              'startBgColor': '#FFFFFF',
+              'endBgColor': '#FFFFFF'
+            },
+            'btnStyle': {
+              'textColor': '#FFFFFF',
+              'startBgColor': '#FF8383',
+              'endBgColor': '#FF5555',
+              'fontSize': 12,
+              'rounded': 10
+            }
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '#FF0000',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 2,
+            'componentStartBgColor': '#ffffff',
+            'componentEndBgColor': '#FFE2DA',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 12,
+            'bottomRounded': 12,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 10
+            }
+          }
+        },
+        'FriendHelpCarousel': {
+          'title': '好友助力轮播',
+          'icon': 'iconfont icona-zhulilunbopc30',
+          'path': 'edit-friend-help-carousel',
+          'uses': 0,
+          'value': {
+            'goodsStyle': {
+              'source': 'all',
+              'type': 'help',
+              'num': 10,
+              'goodsIds': [],
+              'rounded': 10,
+              'imgRounded': 8,
+              'startBgColor': '#FFDADA',
+              'endBgColor': '#FFFFFF'
+            }
+          },
+          'template': {
+            'textColor': '#303133',
+            'pageStartBgColor': '',
+            'pageEndBgColor': '',
+            'pageGradientAngle': 'to bottom',
+            'componentBgUrl': '',
+            'componentBgAlpha': 0,
+            'componentStartBgColor': '',
+            'componentEndBgColor': '',
+            'componentGradientAngle': 'to bottom',
+            'topRounded': 0,
+            'bottomRounded': 0,
+            'elementBgColor': '',
+            'topElementRounded': 0,
+            'bottomElementRounded': 0,
+            'margin': {
+              'top': 0,
+              'bottom': 0,
+              'both': 0
+            }
+          }
+        }
+      }
+    }
+  },
+  'domain_url': {
+    'wap_domain': 'http://localhost:5173',
+    'wap_url': 'http://localhost:5173/wap',
+    'web_url': 'http://localhost:5173/web',
+    'service_domain': 'http://localhost:5173'
+    // 'wap_domain': 'https://v6.site.niucloud.com',
+    // 'wap_url': 'https://v6.site.niucloud.com/wap',
+    // 'web_url': 'https://v6.site.niucloud.com/web',
+    // 'service_domain': 'https://v6.site.niucloud.com'
+  },
+  'global': []
+};
+
+export const data2 = {
+  'shop_goods_detail_style1': {
+    'title': '商品详情',
+    'cover': '',
+    'preview': '',
+    'desc': '',
+    'mode': 'diy',
+    'data': {
+      'global': {
+        'title': '商品详情',
+        'completeLayout': 'style-1',
+        'completeAlign': 'left',
+        'borderControl': true,
+        'pageStartBgColor': 'rgba(246, 246, 246, 1)',
+        'pageEndBgColor': '',
+        'pageGradientAngle': 'to bottom',
+        'bgUrl': '',
+        'bgHeightScale': 100,
+        'imgWidth': '',
+        'imgHeight': '',
+        'topStatusBar': {
+          'control': false,
+          'isShow': false,
+          'bgColor': '#ffffff',
+          'rollBgColor': '#ffffff',
+          'style': 'style-1',
+          'styleName': '风格1',
+          'textColor': '#333333',
+          'rollTextColor': '#333333',
+          'textAlign': 'center',
+          'inputPlaceholder': '请输入搜索关键词',
+          'imgUrl': '',
+          'link': {
+            'name': ''
+          }
+        },
+        'bottomTabBar': {
+          'control': false,
+          'isShow': false
+        },
+        'popWindow': {
+          'imgUrl': '',
+          'imgWidth': '',
+          'imgHeight': '',
+          'count': 'once',
+          'show': false,
+          'link': {
+            'name': ''
+          }
+        },
+        'template': {
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 0,
+          'bottomRounded': 0,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 0,
+            'bottom': 0,
+            'both': 0
+          },
+          'isHidden': false
+        }
+      },
+      'value': [
+        {
+          'path': 'edit-shop-goods-detail-basic-info',
+          'uses': 1,
+          'position': 'top_fixed',
+          'id': 'j3hqu5tg1zk',
+          'componentName': 'ShopGoodsDetailBasicInfo',
+          'componentTitle': '基础信息',
+          'ignore': ['pageBgColor', 'componentBgUrl', 'marginTop', 'marginBottom', 'marginBoth', 'topRounded', 'bottomRounded'],
+          'menuContent': 'index,search,cart,member',
+          'medium': {
+            'type': 'square_img',
+            'indicator': true
+          },
+          'priceRegion': {
+            'showWay': 'normal',
+            'bgImg': 'addon/shop/diy/goods_detail/style_01.jpg',
+            'marketingBgImg': 'addon/shop/diy/goods_detail/marketing_style_01.jpg',
+            'goodsStyle': {
+              'title': '风格1',
+              'value': 'style-1'
+            },
+            'marketingStyle': {
+              'title': '风格1',
+              'value': 'style-1'
+            }
+          },
+          'goodsInfo': {
+            'titleColor': '#333333',
+            'subTitleColor': '#999999',
+            'saleInfoColor': '#999999',
+            'priceTopRounded': 17,
+            'priceBottomRounded': 0,
+            'topRounded': 12,
+            'bottomRounded': 0,
+            'priceBgColor': '',
+            'startBgColor': '#ffffff',
+            'endBgColor': '#f6f6f6',
+            'priceAboutMargin': 0,
+            'priceTopMargin': -22,
+            'topMargin': -13,
+            'aboutMargin': 0
+          },
+          'saleInfo': ['underlined_price', 'sales', 'stock'],
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 0,
+          'bottomRounded': 0,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 0,
+            'bottom': 0,
+            'both': 0
+          },
+          'isHidden': false
+        },
+        {
+          'path': 'edit-shop-goods-detail-purchase-service',
+          'uses': 1,
+          'id': 'c4wh1kcz3i0',
+          'componentName': 'ShopGoodsDetailPurchaseService',
+          'componentTitle': '商品服务',
+          'ignore': [],
+          'serviceConfig': ['goods_service', 'spec_select', 'delivery_info', 'coupons', 'activity'],
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '#FFFFFF',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 12,
+          'bottomRounded': 12,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 12,
+            'bottom': 0,
+            'both': 10
+          },
+          'isHidden': false
+        },
+        {
+          'path': 'edit-shop-goods-detail-sow',
+          'uses': 0,
+          'id': '1zi5tkyxurpc',
+          'componentName': 'ShopGoodsDetailSow',
+          'componentTitle': '种草秀',
+          'ignore': [],
+          'isShow': true,
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '#FFFFFF',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 12,
+          'bottomRounded': 12,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 12,
+            'bottom': 0,
+            'both': 10
+          },
+          'isHidden': false
+        },
+        {
+          'path': 'edit-shop-goods-detail-evaluate',
+          'uses': 1,
+          'id': '1jgv7ysvlh0g',
+          'componentName': 'ShopGoodsDetailEvaluate',
+          'componentTitle': '商品评价',
+          'ignore': [],
+          'isShow': true,
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '#FFFFFF',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 12,
+          'bottomRounded': 12,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 12,
+            'bottom': 0,
+            'both': 10
+          },
+          'isHidden': false
+        },
+        {
+          'path': 'edit-shop-goods-detail-attr',
+          'uses': 1,
+          'id': '19m7738ofq68',
+          'componentName': 'ShopGoodsDetailAttr',
+          'componentTitle': '商品属性',
+          'ignore': [],
+          'isShow': true,
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '#FFFFFF',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 12,
+          'bottomRounded': 12,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 12,
+            'bottom': 0,
+            'both': 10
+          },
+          'isHidden': false
+        },
+        {
+          'path': 'edit-shop-goods-detail-desc',
+          'uses': 1,
+          'id': '37i90so3cly0',
+          'componentName': 'ShopGoodsDetailDesc',
+          'componentTitle': '商品详情',
+          'ignore': [],
+          'isShow': true,
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '#FFFFFF',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 12,
+          'bottomRounded': 12,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 12,
+            'bottom': 20,
+            'both': 10
+          },
+          'isHidden': false
+        },
+        {
+          'path': 'edit-shop-goods-detail-bottom',
+          'position': 'bottom_fixed',
+          'uses': 1,
+          'id': 'p313pc2eduo',
+          'componentName': 'ShopGoodsDetailBottom',
+          'componentTitle': '底部菜单',
+          'ignore': ['pageBgColor', 'componentBgUrl', 'marginTop', 'marginBottom', 'marginBoth', 'topRounded', 'bottomRounded'],
+          'menuContent': ['index', 'service', 'cart'],
+          'cartName': '加入购物车',
+          'buyName': '立即购买',
+          'cartIsShow': true,
+          'cartStyle': {
+            'textColor': '#FFFFFF',
+            'fontSize': 12,
+            'gradientAngle': 'to right',
+            'startColor': '#FFB000',
+            'endColor': '#FFA029'
+          },
+          'buyStyle': {
+            'textColor': '#FFFFFF',
+            'fontSize': 12,
+            'gradientAngle': 'to right',
+            'startColor': '#FB7939',
+            'endColor': '#FF4142'
+          },
+          'textColor': '#303133',
+          'pageStartBgColor': '',
+          'pageEndBgColor': '',
+          'pageGradientAngle': 'to bottom',
+          'componentBgUrl': '',
+          'componentBgAlpha': 2,
+          'componentStartBgColor': '#FFFFFF',
+          'componentEndBgColor': '',
+          'componentGradientAngle': 'to bottom',
+          'topRounded': 0,
+          'bottomRounded': 0,
+          'elementBgColor': '',
+          'topElementRounded': 0,
+          'bottomElementRounded': 0,
+          'margin': {
+            'top': 0,
+            'bottom': 0,
+            'both': 0
+          },
+          'isHidden': false
+        }
+      ]
+    }
+  }
+};

src/views/diy/edit copy.vue

@@ -0,0 +1,888 @@
+<template>
+  <div class="flex-1 diy-edit">
+    <el-header class="flex items-center h-[60px] bg-primary px-[20px]">
+      <div class="text-white cursor-pointer flex items-center" @click="goBack">
+        <el-icon size="14">
+          <ArrowLeft />
+        </el-icon>
+        <span class="pl-[5px] text-[14px]">返回</span>
+      </div>
+      <div class="text-white ml-[10px] mr-[20px] flex items-center">
+        <span class="mr-[5px] text-[rgba(255,255,255,.5)]">｜</span>
+        <span class="mr-[5px] text-[14px]">正在装修：页面名字</span>
+      </div>
+
+      <!-- <div v-if="diyStore.type && diyStore.type != 'DIY_PAGE'" class="flex items-center">
+        <span class="text-white mr-[10px] text-base">选择模板</span>
+        <div class="w-[180px]">
+          <el-select size="small" v-model="template" placeholder="选择模板" @change="changeTemplatePage">
+            <el-option label="无" value="" />
+            <el-option v-for="(item, key) in templatePages" :label="item.title" :value="key" :key="key" />
+          </el-select>
+        </div>
+      </div> -->
+      <div class="flex-1"></div>
+      <el-button @click="preview()">保存并预览</el-button>
+      <el-button @click="save()">保存</el-button>
+    </el-header>
+    <div class="full-container flex flex-row flex-1 bg-page">
+      <div class="component-list w-[290px]">
+        <!-- 组件列表区域 -->
+        <el-scrollbar class="px-[10px]">
+          <el-collapse v-model="activeNames" @change="handleChange">
+            <el-collapse-item v-for="(item, key) in component" :key="key" :title="item.title" :name="key">
+              <ul class="flex flex-row flex-wrap">
+                <li
+                  v-for="(compItem, compKey) in item.list"
+                  :key="compKey"
+                  class="w-2/6 text-center cursor-pointer h-[65px]"
+                  :title="compItem.title"
+                  @click="diyStore.addComponent(compKey, compItem)"
+                >
+                  <icon v-if="compItem.icon" :name="compItem.icon" size="20px" class="inline-block mt-[3px]" />
+                  <icon v-else name="iconfont iconkaifazujian" size="20px" class="inline-block mt-[3px]" />
+                  <span class="block text-[12px] truncate">{{ compItem.title }}</span>
+                </li>
+              </ul>
+            </el-collapse-item>
+          </el-collapse>
+        </el-scrollbar>
+      </div>
+
+      <div class="preview-wrap flex-1 relative mt-[20px]">
+        <el-scrollbar>
+          <el-button class="page-btn absolute right-[20px]" @click="diyStore.changeCurrentIndex(-99)">页面设置</el-button>
+          <div class="diy-view-wrap w-[375px] shadow-lg mx-auto">
+            <div
+              class="preview-head bg-no-repeat bg-center bg-cover cursor-pointer h-[64px]"
+              :class="[diyStore.global.topStatusBar.style]"
+              :style="{ backgroundColor: diyStore.global.topStatusBar.bgColor }"
+              @click="diyStore.changeCurrentIndex(-99)"
+            >
+              <div v-if="diyStore.global.topStatusBar.style == 'style-1' && diyStore.global.topStatusBar.isShow" class="content-wrap">
+                <div
+                  class="title-wrap"
+                  :style="`color: ${diyStore.global.topStatusBar?.textColor || ''}; text-align: ${diyStore.global.topStatusBar?.textAlign || ''};`"
+                >
+                  {{ diyStore.global.title }}
+                </div>
+              </div>
+              <div v-if="diyStore.global.topStatusBar.style == 'style-2' && diyStore.global.topStatusBar.isShow" class="content-wrap">
+                <div class="title-wrap" :style="{ color: diyStore.global.topStatusBar.textColor }">
+                  <div class="h-[28px] max-w-[150px] mr-[8px]" v-if="diyStore.global.topStatusBar.imgUrl">
+                    <img class="max-w-[100%] max-h-[100%]" :src="img(diyStore.global.topStatusBar.imgUrl)" mode="heightFix" />
+                  </div>
+                  <div :style="{ color: diyStore.global.topStatusBar.textColor }">{{ diyStore.global.title }}</div>
+                </div>
+              </div>
+              <div v-if="diyStore.global.topStatusBar.style == 'style-3' && diyStore.global.topStatusBar.isShow" class="content-wrap">
+                <div class="title-wrap" v-if="diyStore.global.topStatusBar.imgUrl">
+                  <img class="max-w-[100%] max-h-[100%]" :src="img(diyStore.global.topStatusBar.imgUrl)" />
+                </div>
+                <div class="search">
+                  <span class="nc-iconfont nc-icon-sousuo-duanV6xx1 !text-[12px] absolute left-[10px]"></span>
+                  <span class="text-[12px]">{{ diyStore.global.topStatusBar.inputPlaceholder }}</span>
+                </div>
+              </div>
+              <div v-if="diyStore.global.topStatusBar.style == 'style-4' && diyStore.global.topStatusBar.isShow" class="content-wrap">
+                <span class="iconfont iconxiazai19 !text-[14px]" :style="{ color: diyStore.global.topStatusBar.textColor }"></span>
+                <div class="title-wrap" :style="{ color: diyStore.global.topStatusBar.textColor }">我的位置</div>
+                <span class="iconfont iconxiangyoujiantou !text-[12px]" :style="{ color: diyStore.global.topStatusBar.textColor }"></span>
+              </div>
+            </div>
+            <div class="preview-block relative">
+              <ul class="quick-action absolute text-center -right-[70px] top-[20px] w-[42px] rounded shadow-md">
+                <el-tooltip effect="light" content="上移" placement="right">
+                  <icon name="iconfont iconjiantoushang" size="20px" class="block cursor-pointer leading-[40px]" @click="diyStore.moveUpComponent" />
+                </el-tooltip>
+                <el-tooltip effect="light" content="下移" placement="right">
+                  <icon name="iconfont iconjiantouxia" size="20px" class="block cursor-pointer leading-[40px]" @click="diyStore.moveDownComponent" />
+                </el-tooltip>
+                <el-tooltip effect="light" content="复制" placement="right">
+                  <icon name="iconfont iconcopy-line" size="20px" class="block cursor-pointer leading-[40px]" @click="diyStore.copyComponent" />
+                </el-tooltip>
+                <el-tooltip effect="light" content="删除" placement="right">
+                  <icon name="iconfont icondelete-line" size="20px" class="block cursor-pointer leading-[40px]" @click="diyStore.delComponent" />
+                </el-tooltip>
+                <el-tooltip effect="light" content="重置" placement="right">
+                  <icon name="iconfont iconloader-line" size="20px" class="block cursor-pointer leading-[40px]" @click="diyStore.resetComponent" />
+                </el-tooltip>
+              </ul>
+
+              <!-- 组件预览渲染区域 -->
+              <iframe id="previewIframe" v-show="loadingIframe" :src="wapPreview" frameborder="0" class="preview-iframe w-[375px]"></iframe>
+
+              <div v-show="loadingDev" class="preview-iframe w-[375px] pt-[20px] px-[20px]">
+                <div class="font-bold text-xl mb-[40px]">开发环境配置</div>
+                <div class="mb-[20px] flex flex-col">
+                  <text class="mb-[10px]">wap域名（WAP_DOMAIN）</text>
+                  <el-input v-model.trim="wapDomain" placeholder="请输入wap域名" clearable />
+                </div>
+                <el-button type="primary" @click="saveWapDomain">确认</el-button>
+                <el-button type="primary" @click="settingTips()" plain>点击查看如何配置</el-button>
+              </div>
+            </div>
+          </div>
+        </el-scrollbar>
+      </div>
+
+      <div class="edit-attribute-wrap w-[400px]">
+        <!-- 编辑组件属性区域 -->
+        <el-scrollbar>
+          <el-card class="box-card" shadow="never">
+            <template #header>
+              <div class="card-header flex justify-between items-center">
+                <span class="title flex-1">{{ diyStore.currentIndex == -99 ? '页面设置' : diyStore.editComponent.componentTitle }}</span>
+                <div class="tab-wrap flex rounded-[50px] bg-gray-100 text-[14px]" v-if="diyStore.currentComponent">
+                  <span
+                    class="cursor-pointer rounded-[50px] py-[5px] px-[15px]"
+                    :class="{ 'bg-primary text-white': diyStore.editTab == 'content' }"
+                    @click="diyStore.editTab = 'content'"
+                    >内容</span
+                  >
+                  <span
+                    class="cursor-pointer rounded-[50px] py-[5px] px-[15px]"
+                    :class="{ 'bg-primary text-white': diyStore.editTab == 'style' }"
+                    @click="diyStore.editTab = 'style'"
+                    >样式</span
+                  >
+                </div>
+              </div>
+            </template>
+
+            <div class="edit-component-wrap">
+              <component
+                v-if="diyStore.currentComponent"
+                :is="modules[diyStore.currentComponent]"
+                :key="diyStore.currentIndex"
+                :value="diyStore.value[diyStore.currentIndex]"
+              >
+                <template #style>
+                  <div class="edit-attr-item-wrap">
+                    <h3 class="mb-[10px]">组件样式</h3>
+                    <el-form label-width="90px" class="px-[10px]">
+                      <template v-if="diyStore.editComponent.ignore.indexOf('pageBgColor') == -1">
+                        <el-form-item label="底部背景">
+                          <el-color-picker v-model="diyStore.editComponent.pageStartBgColor" show-alpha :predefine="diyStore.predefineColors" />
+                          <icon name="iconfont iconmap-connect" size="20px" class="block !text-gray-400 mx-[5px]" />
+                          <el-color-picker v-model="diyStore.editComponent.pageEndBgColor" show-alpha :predefine="diyStore.predefineColors" />
+                        </el-form-item>
+                        <div class="text-sm text-gray-400 ml-[90px] mb-[10px]">底部背景包含边距和圆角</div>
+                      </template>
+
+                      <el-form-item label="渐变角度" v-if="diyStore.editComponent.ignore.indexOf('pageBgColor') == -1">
+                        <el-radio-group v-model="diyStore.editComponent.pageGradientAngle">
+                          <el-radio value="to bottom">从上到下</el-radio>
+                          <el-radio value="to right">从左到右</el-radio>
+                        </el-radio-group>
+                      </el-form-item>
+
+                      <!-- <el-form-item label="组件背景图" v-if="diyStore.editComponent.ignore.indexOf('componentBgUrl') == -1">
+                        <upload-image v-model="diyStore.editComponent.componentBgUrl" :limit="1" />
+                      </el-form-item> -->
+
+                      <el-form-item
+                        label="透明度"
+                        v-if="diyStore.editComponent.ignore.indexOf('componentBgUrl') == -1 && diyStore.editComponent.componentBgUrl"
+                      >
+                        <el-slider
+                          v-model="diyStore.editComponent.componentBgAlpha"
+                          show-input
+                          size="small"
+                          :min="0"
+                          :max="10"
+                          class="ml-[10px] diy-nav-slider"
+                        />
+                      </el-form-item>
+
+                      <el-form-item label="组件背景色" v-if="diyStore.editComponent.ignore.indexOf('componentBgColor') == -1">
+                        <el-color-picker v-model="diyStore.editComponent.componentStartBgColor" show-alpha :predefine="diyStore.predefineColors" />
+                        <icon name="iconfont iconmap-connect" size="20px" class="block !text-gray-400 mx-[5px]" />
+                        <el-color-picker v-model="diyStore.editComponent.componentEndBgColor" show-alpha :predefine="diyStore.predefineColors" />
+                      </el-form-item>
+
+                      <el-form-item label="渐变角度" v-if="diyStore.editComponent.ignore.indexOf('componentBgColor') == -1">
+                        <el-radio-group v-model="diyStore.editComponent.componentGradientAngle">
+                          <el-radio value="to bottom">从上到下</el-radio>
+                          <el-radio value="to right">从左到右</el-radio>
+                        </el-radio-group>
+                      </el-form-item>
+
+                      <el-form-item label="上边距" v-if="diyStore.editComponent.ignore.indexOf('marginTop') == -1">
+                        <el-slider v-model="diyStore.editComponent.margin.top" show-input size="small" :min="-100" class="ml-[10px] diy-nav-slider" />
+                      </el-form-item>
+                      <el-form-item label="下边距" v-if="diyStore.editComponent.ignore.indexOf('marginBottom') == -1">
+                        <el-slider
+                          v-model="diyStore.editComponent.margin.bottom"
+                          show-input
+                          size="small"
+                          class="ml-[10px] diy-nav-slider"
+                          :min="-100"
+                        />
+                      </el-form-item>
+                      <el-form-item label="左右边距" v-if="diyStore.editComponent.ignore.indexOf('marginBoth') == -1">
+                        <el-slider v-model="diyStore.editComponent.margin.both" show-input size="small" class="ml-[10px] diy-nav-slider" />
+                      </el-form-item>
+                      <el-form-item label="上圆角" v-if="diyStore.editComponent.ignore.indexOf('topRounded') == -1">
+                        <el-slider v-model="diyStore.editComponent.topRounded" show-input size="small" class="ml-[10px] diy-nav-slider" :max="100" />
+                      </el-form-item>
+                      <el-form-item label="下圆角" v-if="diyStore.editComponent.ignore.indexOf('bottomRounded') == -1">
+                        <el-slider
+                          v-model="diyStore.editComponent.bottomRounded"
+                          show-input
+                          size="small"
+                          class="ml-[10px] diy-nav-slider"
+                          :max="100"
+                        />
+                      </el-form-item>
+                    </el-form>
+                  </div>
+                </template>
+              </component>
+            </div>
+          </el-card>
+        </el-scrollbar>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="Index" lang="ts">
+import { ArrowLeft } from '@element-plus/icons-vue';
+import { useRoute, useRouter } from 'vue-router';
+import { cloneDeep } from 'lodash-es';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import useDiyStore from '@/store/modules/diy';
+import storage from '@/utils/storage';
+import { diyInit, addDiy, editDiy } from '@/api/diy/index';
+import { data1, data2 } from './edit';
+
+import icon from '@/components/icon/index.vue';
+
+const diyStore = useDiyStore();
+const route = useRoute();
+const router = useRouter();
+
+route.query.id = route.query.id || '0';
+route.query.name = route.query.name || '';
+route.query.url = route.query.url || ''; // 页面路径
+route.query.type = route.query.type || ''; // 页面模板，新页面传入
+route.query.title = route.query.title || '';
+route.query.back = route.query.back || '/admin/diy/list';
+
+const backPath = ref<any>(route.query.back);
+const template = ref('');
+const oldTemplate = ref('');
+const wapUrl = ref('');
+const wapDomain = ref('');
+const wapPreview = ref('');
+
+const loadingIframe = ref(false); // 加载iframe
+const loadingDev = ref(false); // 加载开发环境配置
+const timeIframe = ref(0); // iframe打开时间
+const difference = ref(0); // 检测页面加载差异，小于1000毫秒，则配置wap端域名
+
+const component = ref<any>([]);
+const componentType: string[] = reactive([]);
+const page = ref('');
+
+const activeNames = ref(componentType);
+
+const handleChange = (val: string[]) => {};
+
+onMounted(() => {
+  // diyInit({ id: route.query.id, name: route.query.name, url: route.query.url, type: route.query.type, title: route.query.title }).then((res) => {
+  //   if (res.code == 200) {
+  //   }
+  // });
+  const data = data1;
+  diyStore.init(); // 初始化清空数据
+  diyStore.id = data.id || 0;
+  diyStore.name = data.name;
+  diyStore.pageTitle = data.page_title;
+  diyStore.type = data.type;
+  diyStore.typeName = data.type_name;
+  diyStore.templateName = data.template;
+  template.value = data.template;
+  diyStore.isDefault = data.is_default;
+  diyStore.pageMode = data.mode;
+  if (data.global) {
+    for (const key in data.global) {
+      if (data.global[key]) {
+        for (const childKey in data.global[key]) {
+          diyStore.global[key][childKey] = data.global[key][childKey];
+        }
+      } else {
+        diyStore.global[key] = data.global[key];
+      }
+    }
+  }
+  if (data.value) {
+    const sources = JSON.parse(data.value);
+    diyStore.global = sources.global;
+    if (sources.value.length) {
+      diyStore.value = sources.value;
+    }
+  } else {
+    diyStore.global.title = data.title;
+  }
+
+  // 初始化原数据
+  originData.id = diyStore.id;
+  originData.name = diyStore.name;
+  originData.pageTitle = diyStore.pageTitle;
+  originData.title = diyStore.global.title;
+  originData.value = JSON.stringify({
+    global: toRaw(diyStore.global),
+    value: toRaw(diyStore.value)
+  });
+  component.value = data.component;
+  for (const type in component.value) {
+    componentType.push(type);
+    for (const key in component.value[type].list) {
+      const com = cloneDeep(component.value[type].list[key]);
+      com.id = diyStore.generateRandom();
+      com.componentName = key;
+      com.componentTitle = com.title;
+      Object.assign(com, com.value);
+      delete com.name;
+      delete com.title;
+      delete com.value;
+      delete com.type;
+      delete com.icon;
+      diyStore.components.push(com);
+    }
+  }
+
+  loadDiyTemplatePages(data.type);
+
+  // 加载预览
+  wapDomain.value = data.domain_url.wap_domain;
+  wapUrl.value = data.domain_url.wap_url;
+  page.value = data.page;
+
+  let repeat = true; // 防重复执行
+
+  // 开发模式下执行
+  if (import.meta.env.MODE == 'development') {
+    // env文件配置过wap域名
+    if (wapDomain.value) {
+      wapUrl.value = wapDomain.value + '/wap';
+      repeat = false;
+      setDomain();
+    }
+
+    // const wap_domain_storage = storage.get('wap_domain');
+    // if (wap_domain_storage) {
+    //   wapUrl.value = wap_domain_storage;
+    //   repeat = false;
+    //   setDomain();
+    // }
+  }
+
+  if (repeat) {
+    setDomain();
+  }
+  // diyStore.global = data2.shop_goods_detail_style1.data.global;
+  // diyStore.value = data2.shop_goods_detail_style1.data.value;
+  // if (data.value.length) {
+  //   diyStore.value = data.value;
+  // }
+});
+
+// 初始化原数据
+const originData = reactive({
+  id: diyStore.id,
+  name: diyStore.name,
+  pageTitle: diyStore.pageTitle,
+  title: diyStore.global.title,
+  value: JSON.stringify({
+    global: toRaw(diyStore.global),
+    value: toRaw(diyStore.value)
+  })
+});
+
+// 返回上一页
+const isChange = ref(true); // 数据是否发生变化，true：没变化，false：变化了
+const goBack = () => {
+  if (isChange.value) {
+    location.href = `${location.origin}${backPath.value}`;
+    router.push(backPath.value);
+  } else {
+    // 数据发生变化，弹框提示：确定离开此页面
+    ElMessageBox.confirm('确定离开此页面？', '系统可能不会保存您所做的更改。', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+      autofocus: false
+    })
+      .then(() => {
+        location.href = `${location.origin}${backPath.value}`;
+      })
+      .catch(() => {});
+  }
+};
+
+// 动态加载后台自定义组件编辑
+const modulesFiles = import.meta.glob('./components/*.vue', { eager: true });
+const addonModulesFiles = import.meta.glob('@/views/diy/components/*.vue', { eager: true });
+addonModulesFiles && Object.assign(modulesFiles, addonModulesFiles);
+const modules = {};
+for (const [key, value] of Object.entries(modulesFiles)) {
+  const moduleName = key.split('/').pop();
+  const name = moduleName.split('.')[0];
+  modules[name] = (value as any).default;
+}
+
+// 获取模板页面列表
+const templatePages: any = reactive({});
+
+const loadDiyTemplatePages = (type: any) => {
+  // 获取展示的数据
+  // getDiyTemplatePages({
+  //   type,
+  //   mode: 'diy'
+  // }).then((res) => {
+  //   for (const key in res.data) {
+  //     templatePages[key] = res.data[key];
+  //   }
+  // });
+};
+
+// 全局监听自定义数据变化
+watch(
+  () => template.value,
+  (newValue, oldValue) => {
+    oldTemplate.value = oldValue;
+  }
+);
+
+// 切换模板页面
+const changeTemplatePage = (value: any) => {
+  // 存在数据则弹框提示确认
+  if (diyStore.value.length) {
+    ElMessageBox.confirm('切换模板后，当前页面内容将被替换且不被保存，请谨慎操作', '提示', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+      .then(() => {
+        diyStore.changeCurrentIndex(-99);
+        diyStore.init(); // 清空
+        if (value) {
+          const data = cloneDeep(templatePages[value].data);
+          diyStore.global = data.global;
+          if (data.value.length) {
+            diyStore.value = data.value;
+          }
+        } else {
+          if (route.query.title) diyStore.global.title = diyStore.typeName;
+        }
+      })
+      .catch(() => {
+        // 还原
+        template.value = oldTemplate.value;
+      });
+  } else {
+    diyStore.init(); // 清空
+    if (value) {
+      const data = cloneDeep(templatePages[value].data);
+      diyStore.global = data.global;
+      if (data.value.length) {
+        diyStore.value = data.value;
+      }
+    } else {
+      if (route.query.title) diyStore.global.title = diyStore.typeName;
+    }
+  }
+};
+
+// 全局监听自定义数据变化
+watch(
+  () => diyStore,
+  (newValue, oldValue) => {
+    const data = {
+      id: newValue.id,
+      name: newValue.name,
+      pageTitle: newValue.pageTitle,
+      title: newValue.global.title,
+      value: JSON.stringify({
+        global: toRaw(newValue.global),
+        value: toRaw(newValue.value)
+      })
+    };
+
+    diyStore.postMessage();
+    isChange.value = JSON.stringify(data) == JSON.stringify(originData);
+  },
+  { deep: true }
+);
+
+// diyInit({ id: route.query.id, name: route.query.name, url: route.query.url, type: route.query.type, title: route.query.title }).then((res) => {
+//   if (res.code == 200) {
+//   }
+// });
+
+const uniAppLoadStatus = ref(false); // uni-app 加载状态，true：加载完成，false：未完成
+
+// 监听组件数据 uni-app端
+window.addEventListener(
+  'message',
+  (event) => {
+    try {
+      let data = {
+        type: '',
+        index: null,
+        component: null,
+        global: null,
+        value: null
+      };
+      if (typeof event.data == 'string') {
+        data = JSON.parse(event.data);
+      } else if (typeof event.data == 'object') {
+        data = event.data;
+      }
+      if (!data.type) return;
+
+      switch (data.type) {
+        case 'appOnLaunch':
+        case 'appOnReady':
+          // uni-app 加载完成
+          loadingDev.value = false;
+          loadingIframe.value = true;
+          const loadTime = new Date().getTime();
+          difference.value = loadTime - timeIframe.value;
+          uniAppLoadStatus.value = true; // 加载完成
+          break;
+        case 'init':
+          // 初始化，与uniapp建立连接传输数据
+          diyStore.load = true;
+          diyStore.postMessage();
+          break;
+        case 'change':
+          // 切换
+          diyStore.changeCurrentIndex(data.index, data.component);
+          break;
+        case 'data':
+          // 传数据
+          diyStore.changeCurrentIndex(data.index, data.component);
+          diyStore.global = data.global;
+          diyStore.value = data.value;
+          break;
+      }
+    } catch (e) {
+      console.log('diy edit 后台接受数据错误', e);
+    }
+  },
+  false
+);
+
+const saveWapDomain = () => {
+  if (wapDomain.value.trim().length == 0) {
+    ElMessage({
+      type: 'warning',
+      message: '请输入wap域名'
+    });
+    return;
+  }
+  wapUrl.value = wapDomain.value + '/wap';
+  setDomain();
+  storage.set({ key: 'wap_domain', data: wapUrl.value });
+  loadingIframe.value = true;
+  loadingDev.value = false;
+};
+
+const setDomain = () => {
+  wapPreview.value = `${wapUrl.value}${page.value}?mode=decorate`; // 模式：decorate 装修 访问预览页面
+
+  console.log(wapPreview.value, 'wapPreview.valuewapPreview.valuewapPreview.valuewapPreview.valuewapPreview.valuewapPreview.valuewapPreview.value');
+
+  const send = () => {
+    timeIframe.value = new Date().getTime();
+    postMessage();
+  };
+
+  // 同步发送一次消息
+  send();
+
+  // 如果同步发送消息的 uni-app没有接收到回应，则定时发送消息
+  let sendCount = 0;
+  const timeInterVal = setInterval(() => {
+    // 接收 uni-app 发送的消息 或者 发送50次后未响应，则停止发送
+    if (uniAppLoadStatus.value || sendCount >= 50) {
+      clearInterval(timeInterVal);
+      return;
+    }
+
+    send();
+    sendCount++;
+  }, 200);
+
+  // 如果10秒内加载不出来，则需要配置域名
+  setTimeout(() => {
+    if (difference.value == 0) initLoad();
+  }, 1000 * 10);
+};
+
+// 将数据发送到uniapp
+const postMessage = () => {
+  const data = JSON.stringify({
+    type: 'appOnReady',
+    message: '加载完成'
+  });
+
+  const win = window as any;
+  if (win.previewIframe) win.previewIframe.contentWindow.postMessage(data, '*');
+};
+
+// 初始化加载状态
+const initLoad = () => {
+  loadingDev.value = true;
+  loadingIframe.value = false;
+  wapPreview.value = '';
+};
+
+const isRepeat = ref(false);
+
+// 保存
+const save = (callback: any) => {
+  if (!diyStore.verify()) {
+    return;
+  }
+
+  if (isRepeat.value) return;
+  isRepeat.value = true;
+
+  diyStore.templateName = template.value;
+
+  const data = {
+    id: diyStore.id,
+    name: diyStore.name,
+    page_title: diyStore.pageTitle,
+    title: diyStore.global.title,
+    type: diyStore.type,
+    template: diyStore.templateName,
+    is_default: diyStore.isDefault,
+    is_change: isChange.value ? 0 : 1,
+    value: JSON.stringify({
+      global: toRaw(diyStore.global),
+      value: toRaw(diyStore.value)
+    })
+  };
+
+  const api = diyStore.id ? editDiy : addDiy;
+  api(data)
+    .then((res: any) => {
+      isRepeat.value = false;
+      if (res.code == 200) {
+        if (diyStore.id) {
+          isRepeat.value = false; // 不刷新
+        } else {
+          location.href = `${location.origin}${backPath}`;
+        }
+        if (callback) callback(res.data.id);
+      }
+    })
+    .catch(() => {
+      isRepeat.value = false;
+    });
+};
+
+// 预览
+const preview = () => {};
+
+const settingTips = () => {
+  window.open('https://www.kancloud.cn/niucloud/niucloud-admin-develop/3213393');
+};
+
+const img = (res: any) => {
+  return res;
+};
+</script>
+
+<style lang="scss">
+.diy-edit {
+  background-color: #f2f2f2;
+}
+.el-collapse-item__wrap {
+  border-bottom: none;
+}
+
+.el-collapse-item__content {
+  padding-bottom: 0;
+}
+
+.el-collapse-item__header {
+  font-size: var(--el-font-size-base);
+}
+
+.display-block {
+  .el-form-item__content {
+    display: block;
+  }
+}
+
+.edit-component-wrap {
+  .content-wrap,
+  .style-wrap {
+    .edit-attr-item-wrap {
+      border-top: 2px solid var(--el-color-info-light-8);
+      padding-top: 20px;
+
+      &:first-of-type {
+        border-top: none;
+        padding-top: 0;
+      }
+    }
+  }
+}
+
+.diy-nav-slider {
+  .el-slider__input {
+    width: 100px;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.full-container {
+  height: calc(100vh - 60px);
+}
+
+.preview-iframe {
+  height: calc(100vh - 160px);
+}
+
+.component-list {
+  background: var(--el-bg-color);
+}
+
+.component-list ul li {
+  &:not(.disabled):hover {
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+  }
+}
+
+.diy-view-wrap {
+  background: var(--el-bg-color-page);
+}
+
+.diy-view-wrap .preview-head {
+  background-image: url(@/assets/images/diy/diy_preview_head.png);
+  background-color: var(--el-bg-color);
+}
+
+.quick-action {
+  background: var(--el-bg-color);
+}
+
+.edit-attribute-wrap {
+  background: var(--el-bg-color);
+}
+
+.edit-attribute-wrap .box-card {
+  border: none;
+}
+
+.diy-view-wrap .preview-head {
+  padding: 28px 15px 0;
+
+  .content-wrap {
+    height: 30px;
+  }
+
+  &.style-1 {
+    .content-wrap {
+      .title-wrap {
+        height: 30px;
+        line-height: 30px;
+      }
+    }
+  }
+
+  &.style-2 {
+    .content-wrap {
+      .title-wrap {
+        display: flex;
+        align-items: center;
+
+        > div {
+          height: 30px;
+          line-height: 30px;
+          max-width: 150px;
+          font-size: 14px;
+
+          &:last-child {
+            overflow: hidden; //超出的文本隐藏
+            text-overflow: ellipsis; //用省略号显示
+            white-space: nowrap; //不换行
+            flex: 1;
+            max-width: 200px;
+          }
+        }
+      }
+    }
+  }
+
+  &.style-3 {
+    .content-wrap {
+      display: flex;
+      align-items: center;
+
+      .title-wrap {
+        height: 30px;
+        max-width: 85px;
+        margin-right: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .search {
+        flex: 1;
+        padding-right: 10px;
+        padding-left: 31px;
+        position: relative;
+        background-color: #fff;
+        text-align: left;
+        border-radius: 30px;
+        height: 30px;
+        line-height: 30px;
+        border: 1px solid #eeeeee;
+        color: rgb(102, 102, 102);
+        display: flex;
+        align-items: center;
+        margin-right: 105px;
+        overflow: hidden;
+        box-sizing: border-box;
+
+        span {
+          overflow: hidden; //超出的文本隐藏
+          text-overflow: ellipsis; //用省略号显示
+          white-space: nowrap; //不换行
+        }
+
+        .iconfont {
+          color: #909399;
+          font-size: 16px;
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+
+  &.style-4 {
+    .content-wrap {
+      display: flex;
+      align-items: center;
+
+      .title-wrap {
+        flex: none;
+        margin: 0 5px;
+        max-width: 180px;
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>