Merge branch 'v2' of http://10.0.0.22:3000/lingxi/lingxi-business-system into v2

c8ddb459 · 前端-钟卫鹏 · bf99c0d1 · 41660ce0 · c8ddb459 · c8ddb459
Commit c8ddb459 authored Aug 02, 2021 by 前端-钟卫鹏
33 changed files
--- a/src/pages/pageCustomized/components/marketingSwitch/index.less
+++ b/src/pages/pageCustomized/components/marketingSwitch/index.less
+.marketingSwitch {
+  width: 136px;
+  height: 100px;
+  border: 1px solid #FAFBFB;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  .marketingSwitch_img{
+    width: 20px;
+    height: 20px;
+  }
+  .marketingSwitch_text{
+    font-size: 12px;
+    color: #5C626A;
+    margin: 9px 0;
+  }
+}
--- a/src/pages/pageCustomized/components/marketingSwitch/index.tsx
+++ b/src/pages/pageCustomized/components/marketingSwitch/index.tsx
+import React from 'react';
+import { Switch } from 'antd';
+
+import styles from './index.less';
+
+interface MarketingSwitchProps {
+  key: number,
+  title: string,
+  img: any
+}
+
+const MarketingSwitch: React.FC<MarketingSwitchProps> = (props: any) => {
+  const { key, title, img } = props;
+  return (
+    <div className={styles.marketingSwitch}>
+      <img src={img} className={styles.marketingSwitch_img} />
+      <div className={styles.marketingSwitch_text}>{title}</div>
+      <Switch size='small' />
+    </div>
+  );
+}
+
+export default MarketingSwitch;
--- a/src/pages/pageCustomized/components/mobileClientEditLeft/iconsConfig.ts
+++ b/src/pages/pageCustomized/components/mobileClientEditLeft/iconsConfig.ts
+import icon1 from '../../icons/marketing-1.svg';
+import icon2 from '../../icons/marketing-2.svg';
+import icon3 from '../../icons/marketing-3.svg';
+import icon4 from '../../icons/marketing-4.svg';
+import icon5 from '../../icons/marketing-5.svg';
+import icon6 from '../../icons/marketing-6.svg';
+import icon7 from '../../icons/marketing-7.svg';
+import icon8 from '../../icons/marketing-8.svg';
+import icon9 from '../../icons/marketing-9.svg';
+import icon10 from '../../icons/marketing-10.svg';
+import icon11 from '../../icons/marketing-11.svg';
+import icon12 from '../../icons/marketing-12.svg';
+import icon13 from '../../icons/marketing-13.svg';
+import icon14 from '../../icons/marketing-14.svg';
+import icon15 from '../../icons/marketing-15.svg';
+import icon16 from '../../icons/marketing-16.svg';
+import icon17 from '../../icons/marketing-17.svg';
+import icon18 from '../../icons/marketing-18.svg';
+import icon19 from '../../icons/marketing-19.svg';
+
+const ICON_CONFIGS = [
+  {key : 1, title: '特价促销',img: icon1},
+  {key : 2, title: '直降促销',img: icon2},
+  {key : 3, title: '满量减',img: icon3},
+  {key : 4, title: '折扣促销',img: icon4},
+  {key : 5, title: '满量折',img: icon5},
+  {key : 6, title: '满额减',img: icon6},
+  {key : 7, title: '满额折',img: icon7},
+  {key : 8, title: '赠商品',img: icon8},
+  {key : 9, title: '赠优惠券',img: icon9},
+  {key : 10, title: '多件促销',img: icon10},
+  {key : 11, title: '组合促销',img: icon11},
+  {key : 12, title: '秒杀',img: icon12},
+  {key : 13, title: '拼团',img: icon13},
+  {key : 14, title: '满额换购',img: icon14},
+  {key : 15, title: '买商品换购',img: icon15},
+  {key : 16, title: '预售',img: icon16},
+  {key : 17, title: '试用',img: icon17},
+  {key : 18, title: '套餐',img: icon18},
+  {key : 19, title: '砍价',img: icon19},
+]
+
+export default ICON_CONFIGS;
--- a/src/pages/pageCustomized/components/mobileClientEditLeft/index.less
+++ b/src/pages/pageCustomized/components/mobileClientEditLeft/index.less
+.edit_container {
+  width: 320px;
+  background-color: #FFF;
+
+  :global {
+    .ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab:not(:last-of-type), .ant-tabs-card.ant-tabs-bottom > .ant-tabs-nav .ant-tabs-tab:not(:last-of-type), .ant-tabs-card.ant-tabs-top > div > .ant-tabs-nav .ant-tabs-tab:not(:last-of-type), .ant-tabs-card.ant-tabs-bottom > div > .ant-tabs-nav .ant-tabs-tab:not(:last-of-type){
+      margin: 0;
+    }
+    .ant-tabs-nav-list{
+      width: 100%;
+      .ant-tabs-tab{
+        border: 0;
+        margin: 0;
+        flex: 1;
+        height: 48px;
+        background-color: #FAFBFC;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #8E959D;
+        font-size: 16px;
+      }
+      .ant-tabs-tab-active{
+        background-color: #fff;
+        color: #1F2C3D;
+      }
+    }
+    .ant-tabs-card .ant-tabs-content {
+      margin-top: -16px;
+    }
+
+    .ant-tabs-card .ant-tabs-content>.ant-tabs-tabpane {
+      padding: 16px;
+      background: #fff;
+    }
+
+    .ant-tabs-card>.ant-tabs-nav::before {
+      display: none;
+    }
+  }
+}
--- a/src/pages/pageCustomized/components/mobileClientEditLeft/index.tsx
+++ b/src/pages/pageCustomized/components/mobileClientEditLeft/index.tsx
+import React, { useEffect, useState } from 'react';
+import { Tabs, Row, Col } from 'antd';
+import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
+import map from 'lodash/map';
+import cx from 'classnames';
+import { cloneDeep } from 'lodash';
+import { selectComponent, PageConfigType, PropsType, ChildNodesType, SelectedInfoBaseType, SelectedInfoType, clearSelectedStatus, STATE_PROPS } from '@lingxi-disign/core';
+import { useSelector } from '@lingxi-disign/react';
+
+import MarketingSwitch from '../marketingSwitch';
+import TreeSelect from '../treeSelect';
+
+import ICONS_CONFIG from './iconsConfig';
+import styles from './index.less';
+
+const { TabPane } = Tabs;
+
+export interface VirtualDOMType {
+  key?: string;
+  componentName: string;
+  props?: PropsType;
+  childNodes?: ChildNodesType;
+  condition?: string;
+  isStateDomain?: boolean;
+  propFields?: string[];
+  methods?: {
+    [key: string]: string;
+  };
+  loop?: string | any[];
+  fileName?: string;
+  [custom: string]: any;
+}
+
+type SettingPanelType = {
+  selectedInfo: SelectedInfoType,
+  pageConfig: PageConfigType
+}
+
+interface MobileClientEditLeftProps {
+  pageConfig: PageConfigType,
+  changePageConfig: (config) => void
+}
+
+const MobileClientEditLeft: React.FC<MobileClientEditLeftProps> = (props: any) => {
+  const { pageConfig, changePageConfig } = props;
+  const [treeConfigs, setTreeConfigs] = useState<VirtualDOMType[]>([]);
+  const { selectedInfo } = useSelector<SettingPanelType, STATE_PROPS>(['selectedInfo']);
+
+
+  useEffect(() => {
+    const newList: VirtualDOMType[] = [];
+    const config = cloneDeep(pageConfig);
+    let _level1: any = [];
+    let _level2: any = [];
+    let _level3: any = [];
+    Object.keys(config).forEach(key => {
+      if (config[key].level) {
+        config[key].key = key;
+        switch (config[key].level) {
+          case 1:
+            _level1.push(config[key]);
+            break;
+          case 2:
+            _level2.push(config[key]);
+            break;
+          case 3:
+            _level3.push(config[key]);
+            break;
+          default:
+            break;
+        }
+      }
+    });
+    if (_level1.length > 0) {
+      _level1?.forEach((item: any) => {
+        const _childNode = item.childNodes;
+        if (_childNode?.length > 0) {
+          const _levelChild = _level2.filter((child) => child.key.split('-')[0] == item.key);
+          item.props.dataList = [..._levelChild]
+        }
+        if (item?.props?.dataList) {
+          item?.props?.dataList.forEach((items: any) => {
+            const _childNode2 = items.childNodes;
+            if (_childNode2?.length > 0) {
+              const _levelChild2 = _level3.filter((child2) => child2.key.split('-')[1] == items.key.split('-')[1]);
+              items.props.dataList = [..._levelChild2]
+            }
+          })
+        }
+      });
+    }
+    console.log(_level1)
+    console.log(pageConfig)
+    console.log(selectedInfo)
+    setTreeConfigs(_level1);
+  }, [pageConfig, selectedInfo]);
+
+  const handleSelectComponent = (key: string | undefined) => {
+    if (!key) return;
+    if (!selectedInfo || selectedInfo.selectedKey !== key) {
+      const specialProps: SelectedInfoBaseType = {
+        parentKey: "0",
+        key,
+        domTreeKeys: ["0", key],
+      };
+      selectComponent(specialProps);
+    } else {
+      clearSelectedStatus();
+    }
+  };
+
+  const renderCompontentItem = (item: VirtualDOMType) => {
+    return (
+      <div className={cx(styles.components_item, (selectedInfo && selectedInfo.selectedKey === item.key) ? styles.active : {})} key={item.title} onClick={() => handleSelectComponent(item.key)}>
+        <span className={styles.components_item_text}>{item.title}</span>
+        {
+          item.canHide && (item.props?.visible !== false ? <EyeOutlined className={cx(styles.components_item_icon)} /> : <EyeInvisibleOutlined className={cx(styles.components_item_icon, styles.disable)} />)
+        }
+      </div>
+    );
+  };
+
+  return (
+    <div className={styles.edit_container}>
+      <Tabs type="card">
+        <TabPane tab="已添加" key="1">
+          <TreeSelect config={treeConfigs} changePageConfig={changePageConfig} pageConfig={pageConfig} />
+        </TabPane>
+        <TabPane tab="全部模块" key="2">
+          <Row gutter={16}>
+            {ICONS_CONFIG.map((item, index) => <Col key={index} span={12} style={{ marginBottom: 16 }}><MarketingSwitch {...item} /></Col>)}
+          </Row>
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+
+export default MobileClientEditLeft;
--- a/src/pages/pageCustomized/components/treeSelect/index.less
+++ b/src/pages/pageCustomized/components/treeSelect/index.less
+.treeSelect {
+  .treeSelect_category {
+    border: 1px solid #EDEEEF;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #252D37;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 8px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    span{
+      margin-right: 8px;
+    }
+  }
+  .treeSelect_category_active{
+    background-color: rgba(0,169,143,0.08);
+    border-color: #00A98F;
+  }
+  .treeSelect_category_level2 {
+    border: 1px solid #EDEEEF;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #252D37;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 8px 8px 8px 16px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    span{
+      margin-right: 8px;
+    }
+  }
+  .treeSelect_category_level3 {
+    border: 1px solid #EDEEEF;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #252D37;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 8px 8px 8px 24px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    span{
+      margin-right: 8px;
+    }
+  }
+}
--- a/src/pages/pageCustomized/components/treeSelect/index.tsx
+++ b/src/pages/pageCustomized/components/treeSelect/index.tsx
+import React, { useCallback } from 'react';
+import { Button } from 'antd';
+import { CaretDownOutlined, CaretRightOutlined, PlusOutlined, PictureOutlined } from '@ant-design/icons';
+import cx from 'classnames';
+import { cloneDeep } from 'lodash';
+import { selectComponent, PageConfigType, PropsType, ChildNodesType, SelectedInfoBaseType, SelectedInfoType, clearSelectedStatus, STATE_PROPS, createActions } from '@lingxi-disign/core';
+import { useSelector } from '@lingxi-disign/react';
+
+
+import styles from './index.less';
+
+interface TreeSelectProps {
+  config: any,
+  changePageConfig: (config) => void,
+  pageConfig: PageConfigType
+}
+
+type SettingPanelType = {
+  selectedInfo: SelectedInfoType,
+  pageConfig: PageConfigType
+}
+
+const ControlUpdate = () => true;
+
+const TreeSelect: React.FC<TreeSelectProps> = (props: any) => {
+  const { config, changePageConfig, pageConfig } = props;
+  const { selectedInfo } = useSelector<SettingPanelType, STATE_PROPS>(['selectedInfo']);
+
+  const _handleActive = (key: string, isActive: boolean) => {
+    console.log(pageConfig)
+    let _pageConfig: any = cloneDeep(pageConfig);
+    _pageConfig[key].isActive = !isActive;
+    changePageConfig(_pageConfig);
+    setTimeout(() => {
+      _handleSelectComponent(key)
+    }, 1000)
+  }
+
+  const _handleSelectComponent = (key: string | undefined) => {
+    if (!key) return;
+    if (!selectedInfo || selectedInfo.selectedKey !== key) {
+      const specialProps: SelectedInfoBaseType = {
+        parentKey: "0",
+        key,
+        domTreeKeys: ["0", key],
+      };
+      selectComponent(specialProps);
+    } else {
+      clearSelectedStatus();
+    }
+  };
+
+  const _handleAddComponent = (parentKey: string, level: number) => {
+    let _pageConfig: any = cloneDeep(pageConfig);
+    const _key = `${parentKey}-${new Date().getTime()}`;
+    const _props = {
+      key: _key,
+      title: '顶部导航1',
+      canEdit: true,
+      canHide: false,
+      componentName: "MobileHeaderNav",
+      componentType: "mobileHeaderNav",
+      level: 2,
+      props: {}
+    }
+    _pageConfig[parentKey].childNodes ? _pageConfig[parentKey].childNodes.push(_key) : _pageConfig[parentKey].childNodes = [_key];
+    _pageConfig[parentKey].props.dataList ? _pageConfig[parentKey].props.dataList.push(_props) : _pageConfig[parentKey].props.dataList = [_props];
+    _pageConfig[_key] = _props;
+    console.log(_pageConfig)
+    createActions({type: 'resetPageConfig',payload: {..._pageConfig}})
+    changePageConfig(_pageConfig);
+  }
+
+  const _render = (item: any) => {
+    if (item.componentName != 'MallLayout') {
+      if (item.level === 1) {
+        return (
+          <div key={item.key}>
+            <div className={cx(styles.treeSelect_category, item.isActive ? styles.treeSelect_category_active : {})} onClick={() => { _handleActive(item.key, item.isActive) }}>
+              {item.isActive ? <CaretRightOutlined /> : <CaretDownOutlined />} {item.title}
+            </div>
+            {item.isActive ? (<div>
+              {item.props.dataList.map((child) => _render(child))}
+              <Button type="dashed" block icon={<PlusOutlined />} onClick={() => { _handleAddComponent(item.key, item.level) }}>{item.addButton}</Button>
+            </div>) : null}
+          </div>
+        )
+      } else if (item.level === 2) {
+        if (item.isCategory) {
+          return (
+            <div key={item.key}>
+              <div className={cx(styles.treeSelect_category_level2, item.isActive ? styles.treeSelect_category_active : {})} onClick={() => { _handleActive(item.key, item.isActive) }}>
+                {item.isActive ? <CaretRightOutlined /> : <CaretDownOutlined />} {item.title}
+              </div>
+              {item.isActive ? (<div>
+                {item.props.dataList.map((child) => _render(child))}
+                <Button type="dashed" block icon={<PlusOutlined />} onClick={() => { _handleAddComponent(item.key, item.level) }}>{item.addButton}</Button>
+              </div>) : null}
+            </div>
+          )
+        } else {
+          return (
+            <div key={item.key}>
+              <div className={cx(styles.treeSelect_category_level2, item.isActive ? styles.treeSelect_category_active : {})} onClick={() => { _handleActive(item.key, item.isActive) }}>
+                <PictureOutlined /> {item.title}
+              </div>
+            </div>
+          )
+        }
+      } else {
+        return (
+          <div key={item.key}>
+            <div className={cx(styles.treeSelect_category_level3, item.isActive ? styles.treeSelect_category_active : {})} onClick={() => { _handleActive(item.key, item.isActive) }}>
+              <PictureOutlined /> {item.title}
+            </div>
+          </div>
+        )
+      }
+    }
+    return null
+  }
+
+  return (
+    <div className={styles.treeSelect}>
+      {config.map((item) => _render(item))}
+    </div>
+  );
+}
+
+export default TreeSelect;
--- a/src/pages/pageCustomized/icons/marketing-1.svg
+++ b/src/pages/pageCustomized/icons/marketing-1.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/特价促销</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FF3457" offset="0%"></stop>
+            <stop stop-color="#FF738C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/特价促销" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标">
+            <circle id="椭圆形" fill="url(#linearGradient-1)" cx="8" cy="8" r="8"></circle>
+            <g id="线稿" transform="translate(2.000000, 2.000000)">
+                <polygon id="矩形" points="0 0 12 0 12 12 0 12"></polygon>
+                <path d="M7.16187137,1.48155295 L6.78038571,5.05261401 L8.1203957,5.12836168 C8.34131457,5.14084972 8.51101898,5.34414215 8.49944111,5.58242805 C8.49576169,5.65815486 8.47366869,5.73150334 8.43538217,5.79510297 L5.42055075,10.8031889 C5.30007641,11.0033148 5.05200269,11.0602075 4.86646259,10.9302623 C4.73889395,10.8409182 4.66924665,10.68135 4.68668356,10.5183726 L5.09649538,6.68798677 L3.87943687,6.61863779 C3.65852287,6.60604993 3.48889743,6.40268082 3.50056785,6.16440018 C3.50427465,6.0887166 3.52637394,6.01541629 3.5646474,5.95185712 L6.42802566,1.19676221 C6.54852503,0.996653842 6.79660587,0.939797204 6.98212971,1.06976935 C7.10964988,1.15910596 7.17927701,1.31861996 7.16187137,1.48155295 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-10.svg
+++ b/src/pages/pageCustomized/icons/marketing-10.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/多件促销</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FD8525" offset="0%"></stop>
+            <stop stop-color="#FEB85F" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/多件促销" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" fill="url(#linearGradient-1)">
+            <circle id="椭圆形" cx="8" cy="8" r="8"></circle>
+        </g>
+        <path d="M8,3 C9.65685425,3 11,4.34314575 11,6 L12.5,6 C12.7761424,6 13,6.22385763 13,6.5 L13,7.5 C13,7.77614237 12.7761424,8 12.5,8 L12,8 L11.5450248,12.5497519 C11.5194647,12.8053528 11.3043819,13 11.0475062,13 L4.95249378,13 C4.69561806,13 4.48053528,12.8053528 4.45497519,12.5497519 L4,8 L3.5,8 C3.22385763,8 3,7.77614237 3,7.5 L3,6.5 C3,6.22385763 3.22385763,6 3.5,6 L5,6 C5,4.34314575 6.34314575,3 8,3 Z M7,9 C6.72385763,9 6.5,9.22385763 6.5,9.5 L6.5,9.5 L6.5,10.5 L6.50805567,10.5898756 C6.55039163,10.8231248 6.75454011,11 7,11 C7.27614237,11 7.5,10.7761424 7.5,10.5 L7.5,10.5 L7.5,9.5 L7.49194433,9.41012437 C7.44960837,9.17687516 7.24545989,9 7,9 Z M9,9 C8.72385763,9 8.5,9.22385763 8.5,9.5 L8.5,9.5 L8.5,10.5 L8.50805567,10.5898756 C8.55039163,10.8231248 8.75454011,11 9,11 C9.27614237,11 9.5,10.7761424 9.5,10.5 L9.5,10.5 L9.5,9.5 L9.49194433,9.41012437 C9.44960837,9.17687516 9.24545989,9 9,9 Z M8,4 C6.8954305,4 6,4.8954305 6,6 L10,6 C10,4.8954305 9.1045695,4 8,4 Z" id="形状结合" fill="#FFFFFF"></path>
+        <g id="编组" transform="translate(6.500000, 9.000000)"></g>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-11.svg
+++ b/src/pages/pageCustomized/icons/marketing-11.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/组合促销</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#8469FD" offset="0%"></stop>
+            <stop stop-color="#A4A3FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/组合促销" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="椭圆形" fill="url(#linearGradient-1)" cx="8" cy="8" r="8"></circle>
+        <path d="M7.99997376,11.2838941 L4.79386339,12.9469085 C4.57073954,13.0626432 4.29213586,12.9828139 4.17158464,12.7686048 C4.12188435,12.6802917 4.1050647,12.5783395 4.12390648,12.4796042 L4.78060699,9.03834051 L2.1424213,6.62487631 C1.95882122,6.45691534 1.95180976,6.17786548 2.12676077,6.00160101 C2.19888875,5.92893152 2.29468876,5.88206925 2.39832207,5.86876198 L6.01029567,5.40495852 L7.58591762,2.25034118 C7.69557037,2.03080091 7.96984074,1.93816789 8.19851763,2.04343955 C8.29279545,2.08684045 8.36882278,2.15983016 8.41402989,2.25034118 L9.98965184,5.40495852 L13.6016254,5.86876198 C13.8529947,5.9010396 14.0295145,6.12283911 13.9958936,6.36416505 C13.9820325,6.46365776 13.93322,6.55563016 13.8575262,6.62487631 L11.2193405,9.03834051 L11.876041,12.4796042 C11.921743,12.7190931 11.7565679,12.9488057 11.5071121,12.9926817 C11.4811689,12.9972448 11.4550125,12.9996293 11.4289247,12.999878 C11.3515948,13.0006153 11.2748679,12.9825867 11.2060841,12.9469085 L7.99997376,11.2838941 Z" id="🎨-Icon-Сolor" fill="#FFFFFF"></path>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-12.svg
+++ b/src/pages/pageCustomized/icons/marketing-12.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/秒杀</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FF3457" offset="0%"></stop>
+            <stop stop-color="#FF738C" offset="100%"></stop>
+        </linearGradient>
+        <path d="M5.55565,11.50005 C5.49865,11.50005 5.44115,11.49005 5.38465,11.46955 C5.16865,11.39105 5.03365,11.17505 5.05865,10.94655 L5.44265,7.40005 L2.50015,7.40005 C2.31565,7.40005 2.14615,7.29855 2.05915,7.13555 C1.97215,6.97255 1.98215,6.77555 2.08465,6.62205 L6.02865,0.72205 C6.15665,0.53055 6.39865,0.45105 6.61515,0.53055 C6.83165,0.60905 6.96615,0.82505 6.94115,1.05355 L6.55715,4.60005 L9.50015,4.60005 C9.68465,4.60005 9.85415,4.70155 9.94115,4.86455 C10.02765,5.02755 10.01815,5.22455 9.91565,5.37805 L5.97115,11.27805 C5.87665,11.42005 5.71865,11.50005 5.55565,11.50005" id="path-2"></path>
+    </defs>
+    <g id="icon/秒杀" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" fill="url(#linearGradient-1)">
+            <circle id="椭圆形" cx="8" cy="8" r="8"></circle>
+        </g>
+        <g id="图标" transform="translate(2.000000, 2.000000)">
+            <rect id="矩形" x="0" y="0" width="12" height="12"></rect>
+            <mask id="mask-3" fill="white">
+                <use xlink:href="#path-2"></use>
+            </mask>
+            <use id="🎨-Icon-Сolor" fill="#FFFFFF" xlink:href="#path-2"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-13.svg
+++ b/src/pages/pageCustomized/icons/marketing-13.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/拼团</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FD8525" offset="0%"></stop>
+            <stop stop-color="#FEB85F" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/拼团" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标">
+            <circle id="椭圆形" fill="url(#linearGradient-1)" cx="8" cy="8" r="8"></circle>
+            <g transform="translate(2.000000, 2.000000)">
+                <polygon id="矩形" points="0 0 12 0 12 12 0 12"></polygon>
+                <path d="M5,2 C6.1045695,2 7,2.8954305 7,4 C7,4.6907363 6.64983692,5.29968763 6.11733951,5.65902526 C7.7410029,6.12949164 8.93885181,7.60241828 8.99772946,9.36394106 L9,9.5 C9,9.77640155 8.77593227,10.0004775 8.49953072,10.0004775 L1.50046928,10.0004775 C1.24381069,10.0004775 1.03227668,9.80726806 1.00336702,9.55836529 L1,9.5 C1,7.67861206 2.21736471,6.14155488 3.88282755,5.65809504 C3.35016308,5.29968763 3,4.6907363 3,4 C3,2.8954305 3.8954305,2 5,2 Z M7.5,2 C8.46649831,2 9.25,2.78350169 9.25,3.75 C9.25,4.3544968 8.94350333,4.88740748 8.4774349,5.20180712 C9.89433982,5.6121576 10.9405209,6.89479272 10.9975487,8.43028186 L11,8.5625 C11,8.78575325 10.8329392,8.96998737 10.6170099,8.99701005 L10.5620075,9.00042083 L9.72402799,9.00028618 C9.60775454,7.88816432 9.10773693,6.8902225 8.35875721,6.14124279 C8.06619935,5.84868493 7.73565609,5.59411246 7.37516005,5.38555801 C7.61345822,4.979668 7.75,4.50577952 7.75,4 C7.75,3.28807044 7.47946893,2.6393268 7.03559984,2.15096211 L6.97014999,2.08164651 C7.13729006,2.02861241 7.31530364,2 7.5,2 Z" id="形状" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-14.svg
+++ b/src/pages/pageCustomized/icons/marketing-14.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/满额换购</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#2179FD" offset="0%"></stop>
+            <stop stop-color="#3BADEC" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/满额换购" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="椭圆形" fill="url(#linearGradient-1)" cx="8" cy="8" r="8"></circle>
+        <g id="编组" transform="translate(3.000000, 3.171573)" fill="#FFFFFF">
+            <path d="M9.70710678,7.53553391 L6.87867966,10.363961 L6.79145884,10.4416674 C6.39894119,10.7524929 5.82709579,10.7265907 5.46446609,10.363961 C5.10398213,10.0034771 5.0762526,9.43624601 5.38127749,9.04395481 L5.46446609,8.94974747 L6.585,7.82842712 L1,7.82842712 C0.44771525,7.82842712 0,7.38071187 0,6.82842712 C0,6.31559129 0.38604019,5.89291996 0.883378875,5.83515486 L1,5.82842712 L9.02462975,5.82872859 C9.04509957,5.82922977 9.06555694,5.83035586 9.08597078,5.83210685 L9.08,5.832 L9.14392965,5.83870811 L9.14392965,5.83870811 C9.16411407,5.84170021 9.18410113,5.84521405 9.20398692,5.84933782 L9.231441,5.8553551 L9.231441,5.8553551 L9.25877513,5.86223287 C9.27673458,5.86710654 9.29474284,5.87245528 9.31261846,5.87832126 C9.33593075,5.88593188 9.35876255,5.89439227 9.38118435,5.90364435 C9.39220295,5.90818161 9.4032072,5.9129454 9.41414034,5.91791628 C9.43738348,5.92853685 9.46009053,5.93995913 9.4822828,5.95219998 C9.4955854,5.95943724 9.50912518,5.96731026 9.52251336,5.97552755 C9.54682575,5.99056115 9.57037,6.00644359 9.59317379,6.02327164 L9.6514232,6.06965622 L9.6514232,6.06965622 L9.61675008,6.04121309 C9.68018175,6.09097884 9.73744829,6.14824537 9.78721404,6.21167704 L9.80366542,6.23312051 L9.80366542,6.23312051 C9.82150991,6.25729643 9.8382813,6.28215217 9.85393257,6.30776694 C9.86139308,6.31981402 9.86850117,6.33203268 9.87532883,6.34436503 C9.88620608,6.36413318 9.89662336,6.38453573 9.90634622,6.40532798 L9.92877451,6.4570911 L9.92877451,6.4570911 C9.93668426,6.47684792 9.94387751,6.49662945 9.95045332,6.51669071 L9.96415486,6.56243416 L9.96415486,6.56243416 C9.97016637,6.58399065 9.9753602,6.60568105 9.97983485,6.62763303 C9.98329783,6.64505186 9.98637192,6.66247811 9.9889822,6.67996026 C9.9920328,6.69990246 9.99446658,6.72054108 9.99626233,6.74136211 C9.9978436,6.76016164 9.99890526,6.77816076 9.99948292,6.79617251 C9.99981828,6.80621634 10,6.81730051 10,6.82842712 L9.99638403,6.91365135 L9.99638403,6.91365135 L9.98898066,6.97738834 L9.98898066,6.97738834 C9.98637192,6.99437613 9.98329783,7.01180239 9.97975993,7.02915289 C9.9753602,7.0511732 9.97016637,7.0728636 9.96427903,7.09426674 L9.95026191,7.14056965 L9.95026191,7.14056965 C9.94387751,7.1602248 9.93668426,7.18000633 9.92889604,7.19948565 L9.90632664,7.25164867 L9.90632664,7.25164867 C9.89662336,7.27231852 9.88620608,7.29272107 9.87512423,7.31270408 C9.86850117,7.32482157 9.86139308,7.33704023 9.85400455,7.34913588 C9.8382813,7.37470208 9.82150991,7.39955782 9.80368649,7.42358643 L9.773,7.461 L9.768,7.466 L9.767,7.468 L9.773,7.461 L9.78,7.453 L9.767,7.468 L9.763,7.472 L9.75779461,7.48097475 L9.75779461,7.48097475 L9.70710678,7.53553391 Z M0.292893219,3.12132034 L3.12132034,0.292893219 L3.20854116,0.215186855 C3.60105881,-0.0956386021 4.17290421,-0.0697364807 4.53553391,0.292893219 C4.89601787,0.65337718 4.9237474,1.22060824 4.61872251,1.61289944 L4.53553391,1.70710678 L3.414,2.828 L9,2.82842712 C9.55228475,2.82842712 10,3.27614237 10,3.82842712 C10,4.34126296 9.61395981,4.76393429 9.11662113,4.82169939 L9,4.82842712 L1,4.82842712 C0.949379716,4.82842712 0.899637905,4.82466594 0.851038784,4.81740778 C0.83626037,4.81511998 0.821607146,4.81258973 0.807005356,4.80973182 C0.779008717,4.80434874 0.751319073,4.79767803 0.724104404,4.78988305 C0.716262607,4.78756693 0.707927,4.7850697 0.699618714,4.78246147 C0.673251598,4.77421985 0.647804142,4.76503306 0.622859366,4.75486809 C0.607705462,4.74870152 0.592676686,4.7421553 0.577783475,4.7352223 C0.559865704,4.72683073 0.542136404,4.7179062 0.524718555,4.70847966 C0.508600465,4.69985335 0.492422491,4.69051971 0.4764607,4.68069615 C0.459227937,4.66998327 0.442368213,4.65888347 0.425874415,4.64729798 L0.357552198,4.59482397 L0.357552198,4.59482397 L0.377441931,4.61104979 C0.317927654,4.56364474 0.263942355,4.50959363 0.216609189,4.45001961 L0.186463402,4.41020674 L0.186463402,4.41020674 C0.172267065,4.39028046 0.158426988,4.36937758 0.145370459,4.34794493 C0.138911202,4.33750572 0.132717312,4.32689543 0.126735197,4.31619858 C0.115033742,4.2951384 0.103995121,4.27363077 0.0937298872,4.25168899 C0.0849725826,4.23302219 0.0768052939,4.21399922 0.0692553107,4.19478975 C0.0628806649,4.17866357 0.0568101517,4.16197984 0.0511777005,4.14509573 C0.0451409909,4.12676606 0.0397254918,4.10878197 0.0348267799,4.09068716 C0.0293235224,4.07073728 0.0243890427,4.04997104 0.0201130486,4.02896543 C0.016812336,4.01232446 0.013852717,3.99563564 0.0113186144,3.97889485 C0.00816835491,3.95847527 0.00572722774,3.93806244 0.00391025009,3.91747037 C0.00191464755,3.89464281 0.000658894511,3.87155088 0.000199149206,3.84844605 L0.000179732159,3.80940905 L0.001,3.774 L0.001,3.809 L0.003,3.746 L0.0109109995,3.68019319 L0.0109109995,3.68019319 C0.01364052,3.66230093 0.0168901096,3.64394858 0.0206541794,3.62568113 L0.0343478124,3.56763146 L0.0343478124,3.56763146 C0.0392765631,3.5495663 0.0448946183,3.53082951 0.0510732771,3.51223817 C0.0568101517,3.49487441 0.0628806649,3.47819068 0.0693757535,3.4617208 L0.0937571768,3.4050261 L0.0937571768,3.4050261 C0.103995121,3.38322348 0.115033742,3.36171585 0.126810667,3.34067745 C0.132717312,3.32995882 0.138911202,3.31934853 0.145316865,3.30883092 C0.160444524,3.28416483 0.176562998,3.26012649 0.193664647,3.23685551 L0.22,3.202 L0.221,3.201 L0.292893219,3.12132034 L0.292893219,3.12132034 Z" id="形状结合"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-15.svg
+++ b/src/pages/pageCustomized/icons/marketing-15.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/买商品换购</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#2179FD" offset="0%"></stop>
+            <stop stop-color="#3BADEC" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/买商品换购" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="椭圆形" fill="url(#linearGradient-1)" cx="8" cy="8" r="8"></circle>
+        <rect id="矩形" x="2" y="2" width="12" height="12"></rect>
+        <path d="M8,3 C9.1045695,3 10,3.8954305 10,5 L11.2954116,5 C11.691459,5 12.0192463,5.3079401 12.043951,5.70321629 L12.450201,12.2032163 C12.4760389,12.6166232 12.1618522,12.9727015 11.7484453,12.9985394 L11.7016616,13 L4.29833842,13 C3.88412485,13 3.54833842,12.6642136 3.54833842,12.25 L3.54979898,12.2032163 L3.95604898,5.70321629 C3.98075374,5.3079401 4.30854095,5 4.70458842,5 L6,5 L6,5 C6,3.8954305 6.8954305,3 8,3 Z M8,4 C7.44771525,4 7,4.44771525 7,5 L9,5 L9,5 C9,4.44771525 8.55228475,4 8,4 Z" id="形状结合" fill="#FFFFFF"></path>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-16.svg
+++ b/src/pages/pageCustomized/icons/marketing-16.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/预售</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FF3457" offset="0%"></stop>
+            <stop stop-color="#FF738C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/预售" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" fill="url(#linearGradient-1)">
+            <circle id="椭圆形" cx="8" cy="8" r="8"></circle>
+        </g>
+        <g id="图标" transform="translate(2.000000, 2.000000)">
+            <polygon id="矩形" points="0 0 12 0 12 12 0 12"></polygon>
+            <path d="M5.34876958,1.07374461 L5.52681674,1.23723101 L5.52681674,1.23723101 L5.86559116,1.55620485 C7.22904041,2.86304319 7.99110434,3.89214005 8.15178296,4.64349542 C8.27944815,4.39740307 8.50717166,4.13124144 8.8349535,3.84501053 L8.96256283,3.73673437 C9.01191131,3.69599514 9.08382271,3.70437747 9.12318145,3.75545684 C9.13860209,3.77546959 9.1473353,3.80011973 9.14807009,3.82570687 L9.15307574,3.96976741 L9.16762519,4.234429 C9.19984583,4.69096919 9.26257299,4.98980944 9.35580666,5.13094976 L9.44348378,5.25650883 L9.58136852,5.44830425 L9.65566514,5.56224564 C9.82665329,5.84111172 9.97600469,6.2227094 9.99783241,6.95298263 L10,7.15634107 L9.99897938,7.28374898 C9.98994242,7.67820549 9.94272957,7.98243334 9.86490439,8.21634418 C9.55662284,9.40622936 8.74850329,10.3853303 7.68754257,10.8969075 C7.70950833,10.6393154 7.71469391,10.3683504 7.71469391,10.0991213 C7.71469391,9.75342398 7.63943868,9.37889995 7.51122607,9.00759435 L7.47866472,8.91643038 C7.43858855,8.8078238 7.39412031,8.69971916 7.34582135,8.59292322 L7.30418467,8.50474498 C7.23850206,8.36619935 7.16651271,8.23027053 7.08947538,8.09875891 L6.94858787,7.87133354 L6.87657987,7.76500637 L6.76946898,7.61656069 L6.66641109,7.48432 L6.56073518,7.358689 L6.50165176,7.29259574 L6.3702505,7.15605279 L6.2991751,7.0879786 L6.21108092,7.00919624 L6.14417532,6.9534798 C6.09631302,6.91489485 6.04829938,6.87892824 6.00028573,6.84579643 C5.96362448,6.9406643 5.92528328,7.03299095 5.88562857,7.12302004 L5.78550659,7.34024877 C5.72684311,7.46220509 5.66635056,7.57964565 5.60487487,7.69361288 L5.48184308,7.91548308 L5.39758964,8.06178546 L5.04745233,8.65266785 C4.71339018,9.22312898 4.44915453,9.74669024 4.44915453,10.3526271 C4.44915453,10.5784455 4.48338524,10.7959885 4.54676879,11 L4.443194,10.95676 C3.03900476,10.3420063 2.04451546,8.92095678 2.0014554,7.25434187 L2,7.14155323 C2,7.03000262 2.00135983,6.92370488 2.00394683,6.82241298 L2.01525665,6.53330775 C2.03734563,6.12143507 2.08159821,5.80592811 2.13592516,5.56427565 L2.17350295,5.41386837 L2.21326975,5.28386169 L2.23372527,5.22604537 L2.27528306,5.1238604 L2.31703985,5.03837047 L2.35819964,4.96809336 L2.39796644,4.91154683 L2.43554423,4.86724868 L2.47013703,4.83371668 L2.50094884,4.8094686 L2.53833592,4.78726149 C2.55734016,4.78051481 2.57824335,4.78927863 2.58735453,4.8078129 L2.68045541,4.99720183 L2.83581383,5.29691636 L2.95012861,5.51216529 L2.982674,5.5829063 L3.02873898,5.70590383 L3.10411952,5.95743508 L3.14293878,5.9579345 L3.14870692,5.82177444 C3.19054187,5.31569689 3.45480145,4.75952969 3.77279863,4.19011802 L3.95056708,3.8784378 L4.27002835,3.32890368 L4.40209033,3.09575898 L4.52821751,2.86374397 C4.72265711,2.49611185 4.83554992,2.03410746 4.86689592,1.47773078 L4.87429704,1.28877595 C4.87803778,1.12546426 5.00897432,0.996212817 5.16675198,1 C5.21711493,1.00132071 5.26595526,1.01629937 5.30850007,1.04308923 L5.34876958,1.07374461 Z" id="路径" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-17.svg
+++ b/src/pages/pageCustomized/icons/marketing-17.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/试用</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#27C7A4" offset="0%"></stop>
+            <stop stop-color="#5DEBCC" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/试用" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="椭圆形" fill="url(#linearGradient-1)" cx="8" cy="8" r="8"></circle>
+        <g id="图标" transform="translate(2.000000, 2.000000)">
+            <rect id="矩形" x="0" y="0" width="12" height="12"></rect>
+            <path d="M6.43592865,1.68004869 C6.50327529,1.72815343 6.56219536,1.7870735 6.6103001,1.85442014 L8.03964542,3.85550359 C8.28040216,4.19256303 8.74881473,4.27063179 9.08587417,4.02987505 L9.11846681,4.00522655 L9.78147871,3.47481703 C10.1049252,3.21605987 10.5768944,3.2685009 10.8356516,3.59194735 C10.9420394,3.72493214 11,3.89016501 11,4.06046864 L11,9.75 C11,10.1642136 10.6642136,10.5 10.25,10.5 L1.75,10.5 C1.33578644,10.5 1,10.1642136 1,9.75 L1,4.06046864 C1,3.64625507 1.33578644,3.31046864 1.75,3.31046864 C1.92030362,3.31046864 2.0855365,3.3684292 2.21852129,3.47481703 L2.88153319,4.00522655 C3.20497964,4.26398371 3.67694892,4.21154268 3.93570608,3.88809623 L3.96035458,3.85550359 L5.3896999,1.85442014 C5.63045664,1.5173607 6.09886921,1.43929194 6.43592865,1.68004869 Z M6,6 C5.44771525,6 5,6.44771525 5,7 C5,7.55228475 5.44771525,8 6,8 C6.55228475,8 7,7.55228475 7,7 C7,6.44771525 6.55228475,6 6,6 Z" id="形状结合" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-18.svg
+++ b/src/pages/pageCustomized/icons/marketing-18.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/套餐</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#E0B26C" offset="0%"></stop>
+            <stop stop-color="#F6CF85" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/套餐" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="椭圆形" fill="url(#linearGradient-1)" cx="8" cy="8" r="8"></circle>
+        <g id="图标" transform="translate(2.000000, 2.000000)">
+            <rect id="矩形" x="0" y="0" width="12" height="12"></rect>
+        </g>
+        <g id="图标" transform="translate(2.000000, 2.000000)">
+            <rect id="矩形" x="0" y="0" width="12" height="12"></rect>
+            <path d="M4,1.30901699 C4.07762255,1.30901699 4.15417908,1.32708954 4.2236068,1.3618034 L6,2.25 L7.7763932,1.3618034 C8.02338245,1.23830877 8.32371897,1.33842095 8.4472136,1.5854102 C8.48192745,1.65483791 8.5,1.73139445 8.5,1.80901699 L8.5,3 L10.25,3 C10.6642136,3 11,3.33578644 11,3.75 L11,5.25 C11,5.66421356 10.6642136,6 10.25,6 L10,5.99990747 L10,10.25 C10,10.6642136 9.66421356,11 9.25,11 L2.75,11 C2.33578644,11 2,10.6642136 2,10.25 L2,5.99990747 L1.75,6 C1.33578644,6 1,5.66421356 1,5.25 L1,3.75 C1,3.33578644 1.33578644,3 1.75,3 L3.5,3 L3.5,1.80901699 C3.5,1.53287462 3.72385763,1.30901699 4,1.30901699 Z M6,6.5 C5.72385763,6.5 5.5,6.72385763 5.5,7 L5.5,7 L5.5,9 L5.50805567,9.08987563 C5.55039163,9.32312484 5.75454011,9.5 6,9.5 C6.27614237,9.5 6.5,9.27614237 6.5,9 L6.5,9 L6.5,7 L6.49194433,6.91012437 C6.44960837,6.67687516 6.24545989,6.5 6,6.5 Z" id="形状结合" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-19.svg
+++ b/src/pages/pageCustomized/icons/marketing-19.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/砍价</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FF3457" offset="0%"></stop>
+            <stop stop-color="#FF738C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/砍价" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标">
+            <circle id="椭圆形" fill="url(#linearGradient-1)" cx="8" cy="8" r="8"></circle>
+            <rect id="矩形" x="2" y="2" width="12" height="12"></rect>
+        </g>
+        <path d="M6,3.5 C6,3.22385763 6.22385763,3 6.5,3 L9.5,3 C9.77614237,3 10,3.22385763 10,3.5 L10,8 L11.7928932,8 C11.9255015,8 12.0526784,8.05267842 12.1464466,8.14644661 C12.3417088,8.34170876 12.3417088,8.65829124 12.1464466,8.85355339 L12.1464466,8.85355339 L8.35355339,12.6464466 C8.15829124,12.8417088 7.84170876,12.8417088 7.64644661,12.6464466 L7.64644661,12.6464466 L3.85355339,8.85355339 C3.7597852,8.7597852 3.70710678,8.63260824 3.70710678,8.5 C3.70710678,8.22385763 3.93096441,8 4.20710678,8 L4.20710678,8 L6,8 L6,3.5 Z" id="形状结合" fill="#FFFFFF"></path>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-2.svg
+++ b/src/pages/pageCustomized/icons/marketing-2.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/直降促销</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FF3457" offset="0%"></stop>
+            <stop stop-color="#FF738C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/直降促销" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" fill="url(#linearGradient-1)">
+            <circle id="椭圆形" cx="8" cy="8" r="8"></circle>
+        </g>
+        <g id="线稿" transform="translate(8.000000, 8.000000) rotate(-45.000000) translate(-8.000000, -8.000000) translate(2.000000, 2.000000)">
+            <rect id="矩形" x="0" y="0" width="12" height="12"></rect>
+        </g>
+        <path d="M2.18289322,5.48289322 C2.54552292,5.12026352 3.11736831,5.0943614 3.50988597,5.40518685 L3.59710678,5.48289322 L5.71842712,7.60421356 L7.13264069,6.19 L7.13264069,6.19 C7.52316498,5.79947571 8.15632996,5.79947571 8.54685425,6.19 L11.0952671,8.73982705 L12.1495397,7.68563517 C12.3448019,7.49037303 12.6613844,7.49037303 12.8566465,7.68563517 C12.9503919,7.77938059 13.0030685,7.9065196 13.0030931,8.03909564 L13.0037371,11.5032671 C13.0039477,11.748727 12.8271289,11.9529083 12.5938896,11.9952876 L12.5038299,12.0031742 L9.03965839,12.0025304 C8.76351602,12.002479 8.5397,11.7785798 8.53975132,11.5024374 C8.53977596,11.3698614 8.5924525,11.2427224 8.68619792,11.148977 L9.68105353,10.1540406 L7.83904036,8.31202745 L6.42553391,9.72553391 C6.06290421,10.0881636 5.49105881,10.1140657 5.09854116,9.80324027 L5.01132034,9.72553391 L2.18289322,6.89710678 C1.79236893,6.50658249 1.79236893,5.87341751 2.18289322,5.48289322 Z" id="路径" fill="#FFFFFF"></path>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-3.svg
+++ b/src/pages/pageCustomized/icons/marketing-3.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/满量减</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#8469FD" offset="0%"></stop>
+            <stop stop-color="#A4A3FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/满量减" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="椭圆形" fill="url(#linearGradient-1)" cx="8" cy="8" r="8"></circle>
+        <rect id="矩形" x="2" y="2" width="12" height="12"></rect>
+        <path d="M8,3 C9.1045695,3 10,3.8954305 10,5 L11.2954116,5 C11.691459,5 12.0192463,5.3079401 12.043951,5.70321629 L12.450201,12.2032163 C12.4760389,12.6166232 12.1618522,12.9727015 11.7484453,12.9985394 L11.7016616,13 L4.29833842,13 C3.88412485,13 3.54833842,12.6642136 3.54833842,12.25 L3.54979898,12.2032163 L3.95604898,5.70321629 C3.98075374,5.3079401 4.30854095,5 4.70458842,5 L6,5 C6,3.8954305 6.8954305,3 8,3 Z M9.5,8 L6.5,8 L6.41012437,8.00805567 C6.17687516,8.05039163 6,8.25454011 6,8.5 C6,8.77614237 6.22385763,9 6.5,9 L6.5,9 L9.5,9 L9.58987563,8.99194433 C9.82312484,8.94960837 10,8.74545989 10,8.5 C10,8.22385763 9.77614237,8 9.5,8 L9.5,8 Z M8,4 C7.44771525,4 7,4.44771525 7,5 L9,5 C9,4.44771525 8.55228475,4 8,4 Z" id="形状结合" fill="#FFFFFF"></path>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-4.svg
+++ b/src/pages/pageCustomized/icons/marketing-4.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/折扣促销</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FD8525" offset="0%"></stop>
+            <stop stop-color="#FEB85F" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/折扣促销" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标" fill="url(#linearGradient-1)">
+            <circle id="椭圆形" cx="8" cy="8" r="8"></circle>
+        </g>
+        <g id="图标" transform="translate(2.000000, 2.000000)">
+            <polygon id="矩形" points="0 0 12 0 12 12 0 12"></polygon>
+            <path d="M6.3232233,1.68413601 C6.46387559,1.54348372 6.65464102,1.46446609 6.85355339,1.46446609 L9.93198052,1.46446609 C10.2081229,1.46446609 10.4319805,1.68832372 10.4319805,1.96446609 L10.4319805,5.04289322 C10.4319805,5.24180559 10.3529629,5.43257102 10.2123106,5.5732233 L5.30545635,10.4800776 C5.11019421,10.6753397 4.79361172,10.6753397 4.59834957,10.4800776 L1.41636906,7.29809704 C1.22110691,7.10283489 1.22110691,6.7862524 1.41636906,6.59099026 L6.3232233,1.68413601 Z M7.4267767,3.40900974 C7.13388348,3.70190296 7.13388348,4.1767767 7.4267767,4.46966991 C7.71966991,4.76256313 8.19454365,4.76256313 8.48743687,4.46966991 C8.78033009,4.1767767 8.78033009,3.70190296 8.48743687,3.40900974 C8.19454365,3.11611652 7.71966991,3.11611652 7.4267767,3.40900974 Z" id="形状" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-5.svg
+++ b/src/pages/pageCustomized/icons/marketing-5.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/满量折</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#E0B26C" offset="0%"></stop>
+            <stop stop-color="#F6CF85" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/满量折" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="椭圆形" fill="url(#linearGradient-1)" cx="8" cy="8" r="8"></circle>
+        <rect id="矩形" x="2" y="2" width="12" height="12"></rect>
+        <path d="M8,3 C9.1045695,3 10,3.8954305 10,5 L11.2954116,5 C11.691459,5 12.0192463,5.3079401 12.043951,5.70321629 L12.450201,12.2032163 C12.4760389,12.6166232 12.1618522,12.9727015 11.7484453,12.9985394 L11.7016616,13 L4.29833842,13 C3.88412485,13 3.54833842,12.6642136 3.54833842,12.25 L3.54979898,12.2032163 L3.95604898,5.70321629 C3.98075374,5.3079401 4.30854095,5 4.70458842,5 L6,5 C6,3.8954305 6.8954305,3 8,3 Z M9.76776695,9.69454365 C9.47487373,9.40165043 9,9.40165043 8.70710678,9.69454365 C8.41421356,9.98743687 8.41421356,10.4623106 8.70710678,10.7552038 C9,11.048097 9.47487373,11.048097 9.76776695,10.7552038 C10.0606602,10.4623106 10.0606602,9.98743687 9.76776695,9.69454365 Z M9.76776695,7.21966991 C9.57250481,7.02440777 9.25592232,7.02440777 9.06066017,7.21966991 L9.06066017,7.21966991 L6.23223305,10.048097 L6.1743776,10.1173449 C6.03938154,10.3122131 6.0586667,10.5816375 6.23223305,10.7552038 C6.42749519,10.950466 6.74407768,10.950466 6.93933983,10.7552038 L6.93933983,10.7552038 L9.76776695,7.9267767 L9.8256224,7.85752881 C9.96061846,7.66266067 9.9413333,7.39323627 9.76776695,7.21966991 Z M7.29289322,7.21966991 C7,6.9267767 6.52512627,6.9267767 6.23223305,7.21966991 C5.93933983,7.51256313 5.93933983,7.98743687 6.23223305,8.28033009 C6.52512627,8.5732233 7,8.5732233 7.29289322,8.28033009 C7.58578644,7.98743687 7.58578644,7.51256313 7.29289322,7.21966991 Z M8,4 C7.44771525,4 7,4.44771525 7,5 L9,5 C9,4.44771525 8.55228475,4 8,4 Z" id="形状结合" fill="#FFFFFF"></path>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-6.svg
+++ b/src/pages/pageCustomized/icons/marketing-6.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/满额减</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#8469FD" offset="0%"></stop>
+            <stop stop-color="#A4A3FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/满额减" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="椭圆形" fill="url(#linearGradient-1)" cx="8" cy="8" r="8"></circle>
+        <g id="图标" transform="translate(2.000000, 2.000000)">
+            <rect id="矩形" x="0" y="0" width="12" height="12"></rect>
+            <path d="M6,1 C7.38071187,1 8.5,1.67157288 8.5,2.5 C8.5,2.7937507 8.35926857,3.13064613 8.11605229,3.4431549 C9.81948922,4.1851489 11,5.74601553 11,7.25 L10.9970093,7.4429745 C10.9345703,9.42436149 9.875,11 6,11 C2,11 1,9.32106781 1,7.25 C1,5.74601553 2.18051078,4.1851489 3.8844864,3.44313898 C3.64073143,3.13064613 3.5,2.7937507 3.5,2.5 C3.5,1.67157288 4.61928813,1 6,1 Z M8,6 L4,6 L3.91012437,6.00805567 C3.67687516,6.05039163 3.5,6.25454011 3.5,6.5 C3.5,6.77614237 3.72385763,7 4,7 L4,7 L8,7 L8.08987563,6.99194433 C8.32312484,6.94960837 8.5,6.74545989 8.5,6.5 C8.5,6.22385763 8.27614237,6 8,6 L8,6 Z" id="形状结合" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-7.svg
+++ b/src/pages/pageCustomized/icons/marketing-7.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/满额折</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#E0B26C" offset="0%"></stop>
+            <stop stop-color="#F6CF85" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/满额折" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="椭圆形" fill="url(#linearGradient-1)" cx="8" cy="8" r="8"></circle>
+        <g id="线稿" transform="translate(2.000000, 2.000000)">
+            <rect id="矩形" x="0" y="0" width="12" height="12"></rect>
+            <path d="M6,1 C7.38071187,1 8.5,1.67157288 8.5,2.5 C8.5,2.7937507 8.35926857,3.13064613 8.11605229,3.4431549 C9.81948922,4.1851489 11,5.74601553 11,7.25 L10.9970093,7.4429745 C10.9345703,9.42436149 9.875,11 6,11 C2,11 1,9.32106781 1,7.25 C1,5.74601553 2.18051078,4.1851489 3.8844864,3.44313898 C3.64073143,3.13064613 3.5,2.7937507 3.5,2.5 C3.5,1.67157288 4.61928813,1 6,1 Z M7.76776695,7.69454365 C7.47487373,7.40165043 7,7.40165043 6.70710678,7.69454365 C6.41421356,7.98743687 6.41421356,8.4623106 6.70710678,8.75520382 C7,9.04809704 7.47487373,9.04809704 7.76776695,8.75520382 C8.06066017,8.4623106 8.06066017,7.98743687 7.76776695,7.69454365 Z M7.76776695,5.21966991 C7.57250481,5.02440777 7.25592232,5.02440777 7.06066017,5.21966991 L7.06066017,5.21966991 L4.23223305,8.04809704 L4.1743776,8.11734493 C4.03938154,8.31221307 4.0586667,8.58163747 4.23223305,8.75520382 C4.42749519,8.95046597 4.74407768,8.95046597 4.93933983,8.75520382 L4.93933983,8.75520382 L7.76776695,5.9267767 L7.8256224,5.85752881 C7.96061846,5.66266067 7.9413333,5.39323627 7.76776695,5.21966991 Z M5.29289322,5.21966991 C5,4.9267767 4.52512627,4.9267767 4.23223305,5.21966991 C3.93933983,5.51256313 3.93933983,5.98743687 4.23223305,6.28033009 C4.52512627,6.5732233 5,6.5732233 5.29289322,6.28033009 C5.58578644,5.98743687 5.58578644,5.51256313 5.29289322,5.21966991 Z" id="形状结合" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-8.svg
+++ b/src/pages/pageCustomized/icons/marketing-8.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/赠商品</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#E0B26C" offset="0%"></stop>
+            <stop stop-color="#F6CF85" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/赠商品" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" x="2" y="2" width="12" height="12"></rect>
+        <circle id="椭圆形" fill="url(#linearGradient-1)" cx="8" cy="8" r="8"></circle>
+        <path d="M3.91181982,9.15369477 C2.69606006,7.93793501 2.69606006,5.96679896 3.91181982,4.7510392 C5.02779142,3.6350676 6.77954787,3.8591266 8,4.79190286 C9.2190931,3.8591266 10.9722086,3.6350676 12.0881802,4.7510392 C13.3039399,5.96679896 13.3039399,7.93793501 12.0881802,9.15369477 L8.56568542,12.6761895 C8.25326599,12.988609 7.74673401,12.988609 7.43431458,12.6761895 L3.91181982,9.15369477 L3.91181982,9.15369477 Z" id="路径" fill="#FFFFFF"></path>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/icons/marketing-9.svg
+++ b/src/pages/pageCustomized/icons/marketing-9.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/赠优惠券</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FD8525" offset="0%"></stop>
+            <stop stop-color="#FEB85F" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/赠优惠券" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="椭圆形" fill="url(#linearGradient-1)" cx="8" cy="8" r="8"></circle>
+        <g id="图标" transform="translate(2.000000, 2.000000)">
+            <polygon id="矩形" points="0 0 12 0 12 12 0 12"></polygon>
+            <path d="M10,2 C10.5522847,2 11,2.44771525 11,3 L11,4.5 C10.1715729,4.5 9.5,5.17157288 9.5,6 C9.5,6.82842712 10.1715729,7.5 11,7.5 L11,9 C11,9.55228475 10.5522847,10 10,10 L2,10 C1.44771525,10 1,9.55228475 1,9 L1,7.5 C1.82842712,7.5 2.5,6.82842712 2.5,6 C2.5,5.17157288 1.82842712,4.5 1,4.5 L1,3 C1,2.44771525 1.44771525,2 2,2 L10,2 Z M5,4.5 C4.72385763,4.5 4.5,4.72385763 4.5,5 L4.5,5 L4.5,7 L4.50805567,7.08987563 C4.55039163,7.32312484 4.75454011,7.5 5,7.5 C5.27614237,7.5 5.5,7.27614237 5.5,7 L5.5,7 L5.5,5 L5.49194433,4.91012437 C5.44960837,4.67687516 5.24545989,4.5 5,4.5 Z M7,4.5 C6.72385763,4.5 6.5,4.72385763 6.5,5 L6.5,5 L6.5,7 L6.50805567,7.08987563 C6.55039163,7.32312484 6.75454011,7.5 7,7.5 C7.27614237,7.5 7.5,7.27614237 7.5,7 L7.5,7 L7.5,5 L7.49194433,4.91012437 C7.44960837,4.67687516 7.24545989,4.5 7,4.5 Z" id="形状结合" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/pages/pageCustomized/mobileClientEdit/config.ts
+++ b/src/pages/pageCustomized/mobileClientEdit/config.ts
+import { PROPS_SETTING_TYPES } from '@lingxi-disign/core'
+
+export const mallLayoutConfig = {
+  key: "0",
+  "0": {
+    "componentName": "MallLayout",
+    "props": {
+      "style": {
+        "width": "100%",
+        "minHeight": "100%",
+        "background": "#F7F8FA",
+        "overflowX": "hidden",
+        "paddingBottom": "50px",
+      }
+    },
+    "childNodes": ["1", "5", "6", "7", "8", "9", "10"]
+  },
+}
+
+export const divWrap = {
+  key: "1",
+  "1": {
+    "componentName": "div",
+    "props": {
+      "style": {
+        "width": "100%",
+        "background": "#FFF",
+      }
+    },
+    "childNodes": ["2", "3"]
+  }
+}
+
+export const mobileHeaderNav = {
+  key: "2",
+  "2": {
+    "componentName": "MobileHeaderNav",
+    "componentType": PROPS_SETTING_TYPES.mobileHeaderNav,
+    "title": "顶部导航",
+    "canEdit": true,
+    "canHide": false,
+    "props": {
+      styleTheme: 0,
+      dataList: [],
+    },
+    "isActive": false,
+    "level" : 1
+  }
+}
+
+export const bannerWrap = {
+  key: "3",
+  "3": {
+    "componentName": "div",
+    "props": {
+      "style": {
+        "marginTop": "-50px",
+
+      }
+    },
+    "childNodes": ["4"]
+  }
+}
+
+export const mobileBanner = {
+  key: "4",
+  "4": {
+    "componentName": "MobileBanner",
+    "componentType": PROPS_SETTING_TYPES.mobileBanner,
+    "title": "轮播广告",
+    "canEdit": true,
+    "canHide": true,
+    "props": {
+      visible: true,
+      dataList: []
+    },
+    "isActive": false,
+    "level" : 1
+  }
+}
+
+export const mobileQuickNav = {
+  key: "5",
+  "5": {
+    "componentName": "MobileQuickNav",
+    "componentType": PROPS_SETTING_TYPES.mobileQuickNav,
+    "title": "功能入口",
+    "canEdit": true,
+    "canHide": true,
+    "props": {
+      dataList: []
+    },
+    "isActive": false,
+    "level" : 1
+  }
+}
+
+export const mobileShowCase = {
+  key: "6",
+  "6": {
+    "componentName": "MobileShowCase",
+    "componentType": PROPS_SETTING_TYPES.mobileShowCase,
+    "title": "橱窗位",
+    "canEdit": true,
+    "canHide": true,
+    "props": {}
+  }
+}
+
+export const mobileInformation = {
+  key: "7",
+  "7": {
+    "componentName": "MobileInformation",
+    "title": "资讯",
+    "canEdit": false,
+    "canHide": true,
+    "props": {
+      title: "8月钢市价格走势判断"
+    }
+  }
+}
+
+
+export const mobileRecommendShops = {
+  key: "8",
+  "8": {
+    "componentName": "MobileRecommendShops",
+    "componentType": PROPS_SETTING_TYPES.mobileRecommentShops,
+    "title": "推荐店铺",
+    "canEdit": true,
+    "canHide": true,
+    "props": {},
+    "isActive": false,
+    "level" : 1
+  }
+}
+
+
+export const mobileQuality = {
+  key: "9",
+  "9": {
+    "componentName": "MobileQuality",
+    "componentType": PROPS_SETTING_TYPES.mobileQuality,
+    "title": "优质推荐",
+    "canEdit": true,
+    "canHide": true,
+    "props": {
+      dataList: []
+    },
+    "isActive": false,
+    "level" : 1
+  }
+}
+
+export const mobileBottomNavigation = {
+  key: "10",
+  "10": {
+    "componentName": "MobileBottomNavigation",
+    "componentType": PROPS_SETTING_TYPES.mobileBottomNavigation,
+    "title": "底部导航",
+    "canEdit": true,
+    "canHide": false,
+    "props": {
+      dataList: []
+    },
+    "isActive": false,
+    "level" : 1
+  }
+}
--- a/src/pages/pageCustomized/mobileClientEdit/index.less
+++ b/src/pages/pageCustomized/mobileClientEdit/index.less
+@content-height: calc(100vh - 120px);
+
+.wrapper {
+  background: white;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 4px 0 rgba(174, 174, 174, 0.50);
+  transition: all .3s;
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: center;
+  background-color: #F2F3F5;
+  height: calc(100vh - 64px);
+}
+
+.app-wrapper {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+}
+
+.app-canvas-container {
+  display: flex;
+  width: 381px;
+  margin-top: 40px;
+  margin-bottom: 52px;
+  justify-content: center;
+  background-color: #F4F5F7;
+  // height: calc(@content-height + 50px);
+  overflow: hidden;
+
+}
+
+.loading_wrap {
+  width: 100%;
+  height: 100vh;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+
+  .loading_text {
+    margin-top: 16px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+}
--- a/src/pages/pageCustomized/mobileClientEdit/index.tsx
+++ b/src/pages/pageCustomized/mobileClientEdit/index.tsx
+import React, { useEffect, useState } from 'react';
+import { BrickProvider } from '@lingxi-disign/react';
+import { initPageBrickdState,removePageBrickdState } from '@lingxi-disign/core';
+import { message } from 'antd';
+
+import { PublicApi } from '@/services/api';
+import { GetTemplateAdornAppEnterpriseFindResponse } from '@/services/TemplateApi';
+
+import ToolBar from '../components/toolBar';
+import MobileDesignPanel from '../components/MobileDesignPanel';
+import MobileClientEditLeft from '../components/mobileClientEditLeft';
+import Loading from '../components/Loading';
+
+import config from '../configs';
+import MobileSettingPanel from '../mobileSettingPanel';
+
+import {
+  mallLayoutConfig,
+  divWrap,
+  bannerWrap,
+  mobileHeaderNav,
+  mobileBanner,
+  mobileQuickNav,
+  mobileShowCase,
+  mobileInformation,
+  mobileRecommendShops,
+  mobileQuality,
+  mobileBottomNavigation,
+} from './config';
+import styles from './index.less';
+
+interface ShopPreviewPropsType {
+  location: {
+    query: {
+      /**
+       * 模板id
+       */
+      id: number;
+      /**
+       * 模板名称
+       */
+      template: string;
+      environment: string;
+    }
+  }
+}
+
+const TemplateList = ['science'];
+
+const mobileClientEdit: React.FC<ShopPreviewPropsType> = (props) => {
+  const { query: { id, template, environment } } = props.location;
+  const [loading, setLoading] = useState<boolean>(true);
+  const [theme, setTheme] = useState<string>('theme-mall-science');
+  const [componentConfigs, setComponentConfigs] = useState<any>({
+    ...mallLayoutConfig,
+    ...divWrap,
+    ...mobileHeaderNav,
+    ...bannerWrap,
+    ...mobileBanner,
+    ...mobileQuickNav,
+    ...mobileShowCase,
+    ...mobileInformation,
+    ...mobileRecommendShops,
+    ...mobileQuality,
+    ...mobileBottomNavigation,
+  });
+
+  const headers = {
+    environment
+  };
+
+  useEffect(() => {
+    if (!TemplateList.includes(template)) {
+      setTheme(`theme-mall-${TemplateList[0]}`);
+    } else {
+      setTheme(`theme-mall-${template}`);
+    }
+    // getComponentsConfig();
+  }, []);
+
+  const _setComponentConfigs = (config) => {
+    let _config = {...config};
+    delete _config['key'];
+    setComponentConfigs(_config);
+  }
+
+  const _customReducer = (state,action) => {
+    console.log(state)
+    console.log(action)
+    return state
+  }
+
+  return (
+    <BrickProvider
+      config={config}
+      warn={(msg: string) => {
+        message.warning(msg);
+      }}
+      customReducer={_customReducer}
+    >
+      <div className={styles['wrapper']}>
+        <ToolBar type={1} title="APP首页" showActions={true} templateId={id} />
+        <div className={styles['content']}>
+          <MobileClientEditLeft changePageConfig={_setComponentConfigs} pageConfig={componentConfigs} />
+          <div className={styles['app-wrapper']}>
+            <div className={styles['app-canvas-container']}>
+              {React.useMemo(() => <MobileDesignPanel theme={theme} onlyEidt pageConfig={componentConfigs} />,[componentConfigs])}
+            </div>
+          </div>
+          <MobileSettingPanel />
+        </div>
+      </div>
+    </BrickProvider>
+  );
+};
+
+export default mobileClientEdit;
--- a/src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/marketingCardCoupon/index.less
+++ b/src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/marketingCardCoupon/index.less
+@import "../../common.less";
+
+.marketingCardCoupon {
+  &-box {
+    margin-top: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+
+    &-label {
+      color: #91959B;
+      width: 80px;
+    }
+
+    &-content {
+      flex: 1;
+      color: #303133;
+    }
+  }
+}
--- a/src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/marketingCardCoupon/index.tsx
+++ b/src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/marketingCardCoupon/index.tsx
+import React from 'react';
+import { Button } from 'antd';
+
+import styles from './index.less';
+
+const MarketingCardCoupon = () => {
+  return (
+    <div className={styles['marketingCardCoupon']}>
+      <Button>选择</Button>
+      <div className={styles['marketingCardCoupon-box']}>
+        <div className={styles['marketingCardCoupon-box-label']}>优惠券ID：</div>
+        <div className={styles['marketingCardCoupon-box-content']}></div>
+      </div>
+      <div className={styles['marketingCardCoupon-box']}>
+        <div className={styles['marketingCardCoupon-box-label']}>优惠券名称：</div>
+        <div className={styles['marketingCardCoupon-box-content']}></div>
+      </div>
+      <div className={styles['marketingCardCoupon-box']}>
+        <div className={styles['marketingCardCoupon-box-label']}>类型：</div>
+        <div className={styles['marketingCardCoupon-box-content']}></div>
+      </div>
+      <div className={styles['marketingCardCoupon-box']}>
+        <div className={styles['marketingCardCoupon-box-label']}>领劵方式：</div>
+        <div className={styles['marketingCardCoupon-box-content']}></div>
+      </div>
+      <div className={styles['marketingCardCoupon-box']}>
+        <div className={styles['marketingCardCoupon-box-label']}>商家名称：</div>
+        <div className={styles['marketingCardCoupon-box-content']}></div>
+      </div>
+      <div className={styles['marketingCardCoupon-box']}>
+        <div className={styles['marketingCardCoupon-box-label']}>面额：</div>
+        <div className={styles['marketingCardCoupon-box-content']}></div>
+      </div>
+      <div className={styles['marketingCardCoupon-box']}>
+        <div className={styles['marketingCardCoupon-box-label']}>使用条件：</div>
+        <div className={styles['marketingCardCoupon-box-content']}></div>
+      </div>
+      <div className={styles['marketingCardCoupon-box']}>
+        <div className={styles['marketingCardCoupon-box-label']}>有效期：</div>
+        <div className={styles['marketingCardCoupon-box-content']}></div>
+      </div>
+    </div>
+  );
+}
+
+export default MarketingCardCoupon;
--- a/src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/marketingCardHeader/index.less
+++ b/src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/marketingCardHeader/index.less
+@import "../../common.less";
+
+.marketingCardHeader {
+  &-box {
+    margin-bottom: 16px;
+
+    &-label {
+      font-size: 12px;
+      color: #91959B;
+      margin-bottom: 8px;
+    }
+
+    &-icon {
+      height: 96px;
+      background-color: #FAFBFC;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &>img {
+        width: 40px;
+        height: 40px;
+      }
+    }
+  }
+}
--- a/src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/marketingCardHeader/index.tsx
+++ b/src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/marketingCardHeader/index.tsx
+import React from 'react';
+import { Input } from 'antd';
+
+import styles from './index.less';
+
+interface MarketingCardHeaderProps {
+  // 活动类型
+  type: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19,
+  // 自定title
+  title?: React.ReactNode,
+  // 自定info
+  explain?: React.ReactNode,
+  // 自定icon
+  icon?: any,
+  // 倒计时数组[时,分,秒]
+  countDown?: string[]
+}
+
+const MarketingCardHeader: React.FC<MarketingCardHeaderProps> = (props: MarketingCardHeaderProps) => {
+  const { title, explain, icon } = props;
+  return (
+    <div className={styles['marketingCardHeader']}>
+      <div className={styles['marketingCardHeader-box']}>
+        <div className={styles['marketingCardHeader-box-label']}>标题</div>
+        <Input />
+      </div>
+      <div className={styles['marketingCardHeader-box']}>
+        <div className={styles['marketingCardHeader-box-label']}>标题说明</div>
+        <Input />
+      </div>
+      <div className={styles['marketingCardHeader-box']}>
+        <div className={styles['marketingCardHeader-box-label']}>图标</div>
+        <div className={styles['marketingCardHeader-box-icon']}>
+          <img src='' />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MarketingCardHeader;