@fonixtree/magic-design 0.0.16 → 0.0.17

package/dist/src/components/composite-comp/bol/components/ImageText/mobile/index.js

@@ -0,0 +1,145 @@
+import { __extends } from '../../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import classNames from '../../../../../../../my_my_node_modules/classnames/index.js';
+import './index.less.js';
+import { alignItemMap } from '../../../../../common/AlignSelector/index.js';
+import Text from '../../../../../meta-comp/components/Text/index.js';
+import Button from '../../../../../meta-comp/components/Button/index.js';
+import Image from '../../../../../meta-comp/components/Image/index.js';
+import { computeStyle } from '../../../../../utils/businessUtil.js';
+
+var maxWidthAndHeight = {
+  normal1: 60,
+  normal2: 375,
+  normal3: 107,
+  outsideM: 60,
+  centerM: 60
+};
+
+var ImageTextMobile =
+/** @class */
+function (_super) {
+  __extends(ImageTextMobile, _super);
+
+  function ImageTextMobile() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.calcWidth = function (num) {
+      return "".concat((100 - (num - 1) * 2) / num, "%");
+    };
+
+    _this.getCardStyle = function (source, i) {
+      var data = _this.props.data;
+      var cardStyle = {
+        textAlign: data.customize.align
+      };
+
+      if (data.customize.layout.h5Layout !== 'centerM' && data.customize.layout.h5Layout !== 'normal1') {
+        cardStyle.alignItems = alignItemMap[data.customize.align];
+      }
+
+      if (data.customize.layout.h5Layout === 'normal3') {
+        cardStyle.width = _this.calcWidth(data.customize.rowNum);
+        cardStyle.marginRight = (1 + i) % data.customize.rowNum !== 0 ? '2%' : 0;
+      }
+
+      if (source.background.bgType == 'color') {
+        cardStyle.backgroundColor = source.background.color;
+        cardStyle.opacity = source.background.opacity ? source.background.opacity : 1;
+      } else {
+        cardStyle.backgroundImage = "url(".concat(source.background.image, ")");
+        cardStyle.backgroundPosition = 'center';
+      }
+
+      return cardStyle;
+    };
+
+    return _this;
+  }
+
+  ImageTextMobile.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data; // const { ready } = this.state;
+    // console.log('----imagetext mobile', data);
+
+    var wrapStyle = computeStyle(data, window.magicDesign.device);
+    wrapStyle.textAlign = data.customize.align; // if (data.background.bgType === 'color') {
+    //   wrapStyle.backgroundColor = data.background.color;
+    //   wrapStyle.opacity = data.background.opacity ? data.background.opacity : 1;
+    // } else {
+    //   wrapStyle.backgroundImage = `url(${data.background.image})`;
+    //   wrapStyle.backgroundPosition = 'center';
+    // }
+
+    var cardBtnStyle = {};
+
+    if (data.customize.layout.h5Layout === 'normal3') {
+      cardBtnStyle.alignItems = alignItemMap[data.customize.align];
+    }
+
+    if (data.customize.layout.h5Layout === 'normal2' || data.customize.layout.h5Layout === 'normal1' || data.customize.layout.h5Layout === 'outsideM') {
+      cardBtnStyle.justifyContent = alignItemMap[data.customize.align];
+    }
+
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('image-text-mobile', data.customize.layout.h5Layout),
+      style: wrapStyle
+    }, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/React__default.createElement("div", {
+      className: "group-wrap"
+    }, data.groupSource.map(function (source, i) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: source.id,
+        className: data.groupSource.length > data.customize.rowNum ? 'one-card card-margin-bottom' : 'one-card',
+        style: _this.getCardStyle(source, i)
+      }, source.image.open && data.customize.layout.h5Layout !== 'centerM' && /*#__PURE__*/React__default.createElement("div", {
+        className: "card-image-wrap"
+      }, /*#__PURE__*/React__default.createElement(Image, {
+        className: "card-image",
+        data: source.image,
+        limitWidthHeight: true,
+        maxHeight: maxWidthAndHeight[data.customize.layout.h5Layout],
+        maxWidth: maxWidthAndHeight[data.customize.layout.h5Layout]
+      })), /*#__PURE__*/React__default.createElement("div", {
+        className: "card-content-wrap"
+      }, data.customize.layout.h5Layout === 'centerM' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, source.title.open && /*#__PURE__*/React__default.createElement(Text, {
+        className: "card-title",
+        data: source.title
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "image-subtext-wrap"
+      }, source.image.open && /*#__PURE__*/React__default.createElement("div", {
+        className: "card-image-wrap"
+      }, /*#__PURE__*/React__default.createElement(Image, {
+        className: "card-image",
+        data: source.image,
+        limitWidthHeight: true,
+        maxHeight: 110
+      })), source.text.open && /*#__PURE__*/React__default.createElement(Text, {
+        className: "card-text",
+        data: source.text
+      }))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, source.title.open && /*#__PURE__*/React__default.createElement(Text, {
+        className: "card-title",
+        data: source.title
+      }), source.text.open && /*#__PURE__*/React__default.createElement(Text, {
+        className: "card-text",
+        data: source.text
+      })), /*#__PURE__*/React__default.createElement("div", {
+        className: "card-btn-wrap",
+        style: cardBtnStyle
+      }, source.button.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "card-first-btn",
+        data: source.button
+      }), source.secondButton.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "card-second-btn",
+        data: source.secondButton
+      }))));
+    })));
+  };
+
+  ImageTextMobile.defaultProps = {
+    data: {}
+  };
+  return ImageTextMobile;
+}(React__default.Component);
+
+export { ImageTextMobile as default };

package/dist/src/components/composite-comp/bol/components/ImageText/mobile/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../../my_my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_image-text-mobile__wcodl {\n  padding: 17px 0;\n}\n.index_image-text-mobile__wcodl .index_headline__C24a8 {\n  margin-bottom: 8px;\n}\n.index_image-text-mobile__wcodl .index_subtitle__rrdfn {\n  margin-bottom: 36px;\n}\n.index_image-text-mobile__wcodl .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-btn-wrap__jdwtW .index_card-first-btn__LiSqH,\n.index_image-text-mobile__wcodl .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-btn-wrap__jdwtW .index_card-second-btn__XqmWw {\n  width: fit-content;\n}\n.index_image-text-mobile__wcodl .index_btn-wrap__1Cgdm {\n  display: flex;\n  width: 100%;\n  justify-content: center;\n}\n.index_image-text-mobile__wcodl .index_btn-wrap__1Cgdm .index_first-btn__ZCEBD {\n  margin-top: 36px;\n}\n.index_image-text-mobile__wcodl .index_btn-wrap__1Cgdm .index_second-btn__jaGp6 {\n  margin-top: 36px;\n  margin-left: 12px;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt {\n  padding: 0 15px;\n  width: 100%;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD {\n  display: flex;\n  align-items: stretch;\n  padding: 18px;\n  margin-bottom: 8px;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD:last-of-type {\n  margin-bottom: 0;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-image-wrap__r9cJr {\n  flex-shrink: 0;\n  margin-right: 12px;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-title__ZPyCN {\n  margin-bottom: 6px;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-text__2Ntaj {\n  margin-bottom: 12px;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW {\n  display: flex;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW .index_card-first-btn__LiSqH {\n  margin-right: 12px;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt {\n  width: 100%;\n  padding: 0 15px;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt .index_one-card__mEbCD {\n  width: 100%;\n  padding: 20px 16px;\n  margin-bottom: 36px;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt .index_one-card__mEbCD:last-of-type {\n  margin-bottom: 0;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-image-wrap__r9cJr .index_card-image__NBvlh {\n  width: fit-content;\n  margin: 0 auto;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-title__ZPyCN {\n  margin-bottom: 8px;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-text__2Ntaj {\n  margin-bottom: 16px;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW {\n  display: flex;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW .index_card-first-btn__LiSqH {\n  margin-right: 12px;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt {\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  padding: 0 15px;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_one-card__mEbCD {\n  display: flex;\n  flex-direction: column;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-image-wrap__r9cJr {\n  width: 100%;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-image-wrap__r9cJr .index_card-image__NBvlh {\n  width: fit-content;\n  margin: 0 auto 7px;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-title__ZPyCN {\n  margin-bottom: 4px;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-text__2Ntaj {\n  margin-bottom: 7px;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-btn-wrap__jdwtW {\n  display: flex;\n  flex-direction: column;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-second-btn__XqmWw {\n  margin-top: 8px;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_card-margin-bottom__D6rgm {\n  margin-bottom: 10px;\n}\n.index_outsideM__g6TyU .index_group-wrap__ByNFt {\n  padding: 0 15px;\n  width: 100%;\n}\n.index_outsideM__g6TyU .index_group-wrap__ByNFt .index_one-card__mEbCD {\n  margin-top: 35px;\n  position: relative;\n  padding: 30px 10px 20px 36px;\n}\n.index_outsideM__g6TyU .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-image-wrap__r9cJr {\n  position: absolute;\n  left: 18px;\n  top: 0;\n  transform: translateY(-50%);\n}\n.index_outsideM__g6TyU .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-title__ZPyCN {\n  margin-bottom: 4px;\n}\n.index_outsideM__g6TyU .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-text__2Ntaj {\n  margin-bottom: 12px;\n}\n.index_outsideM__g6TyU .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW {\n  display: flex;\n}\n.index_outsideM__g6TyU .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW .index_card-first-btn__LiSqH {\n  margin-right: 12px;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt {\n  position: relative;\n  width: 100%;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt::before {\n  content: '';\n  position: absolute;\n  width: 1px;\n  height: 100%;\n  border-right: 1px dashed #D2D9E5;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD {\n  width: calc((100% - 1px)/2);\n  position: relative;\n  padding: 0 14px 16px;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD::before {\n  content: '';\n  position: absolute;\n  border-radius: 50%;\n  background: #2F54EB;\n  width: 10px;\n  height: 10px;\n  z-index: 10;\n  border: 2px solid #CCE3FF;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1) {\n  left: 0;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1)::before {\n  right: -5px;\n  top: 5px;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1) .index_card-content-wrap__4JBAu {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1) .index_card-content-wrap__4JBAu .index_card-title__ZPyCN,\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1) .index_card-content-wrap__4JBAu .index_card-text__2Ntaj {\n  text-align: right !important;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1) .index_card-content-wrap__4JBAu .index_image-subtext-wrap__c0fgm {\n  flex-direction: row-reverse;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1) .index_card-content-wrap__4JBAu .index_image-subtext-wrap__c0fgm .index_card-image-wrap__r9cJr {\n  margin-left: 8px;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1) .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n) {\n  left: 50%;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n)::before {\n  left: -5px;\n  top: 5px;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n) .index_card-content-wrap__4JBAu .index_card-title__ZPyCN,\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n) .index_card-content-wrap__4JBAu .index_card-text__2Ntaj {\n  text-align: left !important;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n) .index_card-content-wrap__4JBAu .index_image-subtext-wrap__c0fgm .index_card-image-wrap__r9cJr {\n  margin-right: 8px;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-title__ZPyCN {\n  margin-bottom: 10px;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_image-subtext-wrap__c0fgm {\n  display: flex;\n  margin-bottom: 20px;\n  align-items: center;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW .index_card-second-btn__XqmWw {\n  margin-top: 12px;\n}\n";
+styleInject(css_248z);

package/dist/src/components/composite-comp/bol/components/ImageText/pc/index.js

@@ -0,0 +1,126 @@
+import { __extends, __assign } from '../../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import './index.less.js';
+import classNames from '../../../../../../../my_my_node_modules/classnames/index.js';
+import { alignItemMap } from '../../../../../common/AlignSelector/index.js';
+import Text from '../../../../../meta-comp/components/Text/index.js';
+import Button from '../../../../../meta-comp/components/Button/index.js';
+import Image from '../../../../../meta-comp/components/Image/index.js';
+import { computeStyle } from '../../../../../utils/businessUtil.js';
+
+var maxWidthAndHeight = {
+  normal: 410,
+  outside: 100,
+  center: 410
+};
+
+var ImageTextPc =
+/** @class */
+function (_super) {
+  __extends(ImageTextPc, _super);
+
+  function ImageTextPc() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      hoverState: false
+    }; // componentDidMount() {
+    //   this.distroy = autorun(() => {
+    //     this.setState({
+    //       clickedGroup: store.clickedGroup,
+    //     });
+    //   });
+    // }
+    // componentWillUnmount() {
+    //   this.distroy();
+    // }
+
+    _this.calcWidth = function (num) {
+      return "".concat((100 - (num - 1) * 2) / num, "%");
+    };
+
+    _this.getCardStyle = function (source, i) {
+      var data = _this.props.data;
+      var cardStyle = {
+        width: _this.calcWidth(data.customize.pcRowNum),
+        marginRight: (1 + i) % data.customize.pcRowNum !== 0 ? '2%' : 0,
+        alignItems: alignItemMap[data.customize.align],
+        textAlign: data.customize.align
+      };
+      var wrapStyle = computeStyle(source, window.magicDesign.device);
+      return __assign(__assign({}, cardStyle), wrapStyle);
+    };
+
+    return _this;
+  }
+
+  ImageTextPc.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data;
+    this.state.hoverState;
+    console.log('====================================');
+    console.log(data);
+    console.log('====================================');
+    var wrapStyle = computeStyle(data, window.magicDesign.device);
+    wrapStyle.alignItems = alignItemMap[data.customize.align];
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('image-text-pc', data.customize.layout.pcLayout),
+      style: wrapStyle
+    }, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/React__default.createElement("div", {
+      className: "group-wrap"
+    }, data.groupSource.map(function (source, i) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: source.id,
+        className: data.groupSource.length > data.customize.pcRowNum ? 'one-card card-margin-bottom' : 'one-card',
+        onMouseEnter: function () {
+          if (source.hover.open) {
+            _this.setState({
+              hoverState: true
+            });
+          }
+        },
+        onMouseLeave: function () {
+          _this.setState({
+            hoverState: false
+          });
+        },
+        style: _this.getCardStyle(source, i)
+      }, source.title.open && data.customize.layout.pcLayout === 'center' && /*#__PURE__*/React__default.createElement(Text, {
+        className: "card-title",
+        data: source.title
+      }), source.image.open && /*#__PURE__*/React__default.createElement("div", {
+        className: "card-image-wrap"
+      }, /*#__PURE__*/React__default.createElement(Image, {
+        className: "card-image",
+        data: source.image,
+        limitWidthHeight: true,
+        maxHeight: maxWidthAndHeight[data.customize.layout.pcLayout],
+        maxWidth: maxWidthAndHeight[data.customize.layout.pcLayout]
+      })), source.title.open && data.customize.layout.pcLayout !== 'center' && /*#__PURE__*/React__default.createElement(Text, {
+        className: "card-title",
+        data: source.title
+      }), source.text.open && /*#__PURE__*/React__default.createElement(Text, {
+        className: "card-text",
+        data: source.text
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: classNames({
+          'card-btn-wrap': data.customize.pcRowNum <= 3
+        })
+      }, source.button.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "card-first-btn",
+        data: source.button
+      }), source.secondButton.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "card-second-btn",
+        data: source.secondButton
+      })));
+    })));
+  };
+
+  ImageTextPc.defaultProps = {
+    data: {}
+  };
+  return ImageTextPc;
+}(React__default.Component);
+
+export { ImageTextPc as default };

package/dist/src/components/composite-comp/bol/components/ImageText/pc/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../../my_my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_image-text-pc__U30U8 {\n  display: flex;\n  flex-direction: column;\n  padding: 17px 70px;\n}\n.index_image-text-pc__U30U8 .index_headline__CyykA {\n  margin-bottom: 8px;\n}\n.index_image-text-pc__U30U8 .index_subtitle__qXvkY {\n  margin-bottom: 36px;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK {\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols {\n  display: flex;\n  flex-direction: column;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-image-wrap__EE8VR {\n  width: 100%;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-image-wrap__EE8VR .index_card-image__mLns4 {\n  width: fit-content;\n  margin: 0 auto 7px;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-title__GZL0K {\n  margin-bottom: 4px;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-text__byGz2 {\n  margin-bottom: 7px;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-btn-wrap__xfbbO {\n  width: fit-content;\n  display: flex;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-btn-wrap__xfbbO .index_card-first-btn__VJL1d {\n  margin-right: 12px;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-btn-wrap__xfbbO .index_card-second-btn__kwtrw {\n  margin-top: 0;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-first-btn__VJL1d {\n  width: fit-content;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-second-btn__kwtrw {\n  margin-top: 8px;\n  width: fit-content;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_card-margin-bottom__Wt1F5 {\n  margin-bottom: 10px;\n}\n.index_image-text-pc__U30U8 .index_btn-wrap__-p9e8 {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n.index_image-text-pc__U30U8 .index_btn-wrap__-p9e8 > div {\n  margin-right: 12px;\n}\n.index_image-text-pc__U30U8 .index_btn-wrap__-p9e8 > div:last-of-type {\n  margin-right: 0;\n}\n.index_image-text-pc__U30U8 .index_btn-wrap__-p9e8 .index_first-btn__D9m7W {\n  margin-top: 36px;\n}\n.index_image-text-pc__U30U8 .index_btn-wrap__-p9e8 .index_second-btn__w7JgY {\n  margin-top: 36px;\n}\n.index_normal__xHk2t .index_group-wrap__Kb8tK .index_one-card__NWols {\n  padding: 40px 24px;\n}\n.index_outside__-x9jW .index_group-wrap__Kb8tK .index_one-card__NWols {\n  padding: 40px 24px 24px;\n  position: relative;\n  margin-top: 40px;\n}\n.index_outside__-x9jW .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-image-wrap__EE8VR .index_card-image__mLns4 {\n  position: absolute;\n  top: 0;\n  transform: translateY(-50%);\n  left: 24px;\n}\n.index_center__LBeZ- .index_group-wrap__Kb8tK .index_one-card__NWols {\n  padding: 20px 20px;\n}\n.index_center__LBeZ- .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-title__GZL0K {\n  margin-bottom: 10px;\n}\n";
+styleInject(css_248z);

package/dist/src/components/composite-comp/bol/components/Newsletter/defaultJSON.js

@@ -0,0 +1,114 @@
+import { __assign } from '../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import uuid_1 from '../../../../../../my_my_node_modules/uuid/index.js';
+
+/**
+ * 获取 text 元组件json
+ */
+
+var getDefaultMetaTextJson = function () {
+  return {
+    id: uuid_1.v4(),
+    open: true,
+    type: 'Text',
+    specialContent: [],
+    text: 'Thank you for you subscription',
+    content: {
+      sizeType: 'Customize font styles',
+      fontFamily: 'Open Sans',
+      fontWeight: 400,
+      fontSize: 14,
+      color: '#8493AF'
+    },
+    underline: {
+      open: false,
+      textDecorationColor: '',
+      textDecorationStyle: 'solid'
+    },
+    vertical: {
+      open: false,
+      lineHeight: 18
+    }
+  };
+};
+/**
+ * 获取 text 元组件json
+ */
+
+
+var getDefaultMetaButtonJson = function () {
+  return {
+    id: uuid_1.v4(),
+    open: true,
+    content: {
+      url: '',
+      backgroundColor: '#2F54EB'
+    },
+    buttonText: {
+      sizeType: 'Customize font styles',
+      fontFamily: 'Open Sans',
+      fontWeight: 600,
+      fontSize: 14,
+      fontStyle: 'normal',
+      color: '#fff',
+      padding: '12px 30px'
+    },
+    buttonBorder: {
+      open: true,
+      borderColor: '',
+      borderRadius: 8
+    },
+    buttonIcon: {
+      iconUrl: '',
+      layout: 'right'
+    },
+    text: 'Subscribe',
+    hover: null
+  };
+};
+
+var getDefaultJSON = function () {
+  return {
+    id: uuid_1.v4(),
+    type: 'NEWSLETTER',
+    content: {
+      inputField: {
+        open: true,
+        type: 'InputField',
+        placeholder: 'Email Address',
+        content: {
+          sizeType: 'Customize font styles',
+          fontFamily: 'Open Sans',
+          fontWeight: 600,
+          fontSize: 16,
+          color: '#CE1126'
+        }
+      },
+      button: __assign({}, getDefaultMetaButtonJson()),
+      confirmation: __assign({}, getDefaultMetaTextJson())
+    },
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: 'layout1',
+      align: 'center'
+    },
+    background: {
+      opacity: 100,
+      color: '#fff',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+export { getDefaultJSON };

package/dist/src/components/composite-comp/bol/components/Newsletter/index.js

@@ -0,0 +1,65 @@
+import { __extends, __assign } from '../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import classNames from '../../../../../../my_my_node_modules/classnames/index.js';
+import { getDefaultJSON } from './defaultJSON.js';
+import Text, { contentStyle } from '../../../../meta-comp/components/Text/index.js';
+import Button from '../../../../meta-comp/components/Button/index.js';
+import '../../../../meta-comp/components/Image/index.js';
+import './index.less.js';
+import { computeStyle } from '../../../../utils/businessUtil.js';
+
+var Newsletter =
+/** @class */
+function (_super) {
+  __extends(Newsletter, _super);
+
+  function Newsletter() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  Newsletter.prototype.render = function () {
+    var _a;
+
+    var nodeData = this.props.nodeData; // const wrapStyle = {};
+    // if (nodeData.background.bgType === 'color') {
+    //   wrapStyle.backgroundColor = nodeData.background.color;
+    //   wrapStyle.opacity = nodeData.background.opacity ? nodeData.background.opacity : 1;
+    // } else {
+    //   wrapStyle.backgroundImage = `url(${nodeData.background.image})`;
+    //   wrapStyle.backgroundPosition = 'center';
+    // }
+
+    var wrapStyle = computeStyle(nodeData, window.magicDesign.device);
+
+    var style = __assign({}, contentStyle(nodeData.content.inputField.content));
+
+    Reflect.deleteProperty(style, 'width');
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('newsletter-wrap', (_a = {}, _a[nodeData.customize.layout] = true, _a[nodeData.customize.align] = true, _a[window.magicDesign.device] = true, _a)),
+      onClick: this.onComponentClick,
+      style: wrapStyle
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "top-wrap"
+    }, nodeData.content.inputField.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "input-wrap"
+    }, /*#__PURE__*/React__default.createElement("input", {
+      placeholder: nodeData.content.inputField.placeholder,
+      style: style,
+      type: "text"
+    })), nodeData.content.inputField.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "btn-wrap"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      data: nodeData.content.button
+    }))), nodeData.content.button.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "confirmation-text"
+    }, /*#__PURE__*/React__default.createElement(Text, {
+      data: nodeData.content.confirmation
+    })));
+  };
+
+  Newsletter.type = 'NEWSLETTER';
+  Newsletter.getDefaultJSON = getDefaultJSON;
+  return Newsletter;
+}(Component);
+
+export { Newsletter as default };

package/dist/src/components/composite-comp/bol/components/Newsletter/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../my_my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_newsletter-wrap__f0Sjc {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.index_newsletter-wrap__f0Sjc .index_top-wrap__-xnJZ {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: 0 20px;\n}\n.index_newsletter-wrap__f0Sjc .index_top-wrap__-xnJZ .index_input-wrap__MZj-C input {\n  border: 1px solid #D2D9E5;\n  width: 600px;\n  height: 56px;\n  padding: 0 20px;\n  border-radius: 8px;\n  background-color: #fff;\n}\n.index_newsletter-wrap__f0Sjc .index_top-wrap__-xnJZ .index_btn-wrap__u-LM- {\n  margin-left: 12px;\n}\n.index_newsletter-wrap__f0Sjc .index_confirmation-text__ZMmib {\n  margin-top: 12px;\n}\n.index_newsletter-wrap__f0Sjc.index_layout1__c6SFz {\n  flex-direction: column;\n}\n.index_newsletter-wrap__f0Sjc.index_layout1__c6SFz.index_left__VGwZJ {\n  align-items: flex-start;\n}\n.index_newsletter-wrap__f0Sjc.index_layout1__c6SFz.index_left__VGwZJ .index_top-wrap__-xnJZ {\n  justify-content: flex-start;\n}\n.index_newsletter-wrap__f0Sjc.index_layout1__c6SFz.index_center__FNodw {\n  align-items: center;\n}\n.index_newsletter-wrap__f0Sjc.index_layout1__c6SFz.index_center__FNodw .index_top-wrap__-xnJZ {\n  justify-content: center;\n}\n.index_newsletter-wrap__f0Sjc.index_layout1__c6SFz.index_right__S7rnh {\n  align-items: flex-end;\n}\n.index_newsletter-wrap__f0Sjc.index_layout1__c6SFz.index_right__S7rnh .index_top-wrap__-xnJZ {\n  justify-content: flex-end;\n}\n.index_newsletter-wrap__f0Sjc.index_mobile__TS-KA .index_input-wrap__MZj-C input {\n  border: 1px solid #D2D9E5;\n  width: 100%;\n  height: 48px;\n  border-radius: 8px;\n  background-color: #fff;\n}\n";
+styleInject(css_248z);

package/dist/src/components/composite-comp/bol/components/Tag/defaultJSON.js

@@ -0,0 +1,91 @@
+import { __assign } from '../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import uuid_1 from '../../../../../../my_my_node_modules/uuid/index.js';
+
+/**
+ * 获取 text 元组件json
+ */
+
+var getDefaultMetaButtonJson = function () {
+  return {
+    id: uuid_1.v4(),
+    open: true,
+    content: {
+      url: '',
+      backgroundColor: '#e6eaf0'
+    },
+    buttonText: {
+      sizeType: 'Customize font styles',
+      fontFamily: 'Open Sans',
+      fontWeight: 600,
+      fontSize: 12,
+      fontStyle: 'normal',
+      color: '#8493AF',
+      padding: '2px 8px'
+    },
+    buttonBorder: {
+      open: true,
+      borderColor: '',
+      borderRadius: 4
+    },
+    buttonIcon: {
+      iconUrl: '',
+      layout: 'right'
+    },
+    text: 'Button Tag',
+    hover: null
+  };
+};
+
+var getDefaultJSON = function () {
+  return {
+    id: uuid_1.v4(),
+    type: 'TAG',
+    content: {
+      image: {
+        id: uuid_1.v4(),
+        open: false,
+        type: 'IMAGE',
+        content: {
+          h5Name: '',
+          pcName: '',
+          h5ImgSrc: '',
+          pcImgSrc: '',
+          clickUrl: ''
+        },
+        hover: {
+          open: false,
+          backgroundType: 'enlarge',
+          magnification: 1.5,
+          pcImgHoverUrl: '',
+          h5ImgHoverUrl: ''
+        }
+      },
+      button: __assign({}, getDefaultMetaButtonJson()),
+      secondaryButton: __assign({}, getDefaultMetaButtonJson())
+    },
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: 'layout1',
+      align: 'center'
+    },
+    background: {
+      opacity: 100,
+      color: '#F2F2F2',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+export { getDefaultJSON };

package/dist/src/components/composite-comp/bol/components/Tag/index.js

@@ -0,0 +1,52 @@
+import { __extends, __decorate } from '../../../../../../my_my_node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import classNames from '../../../../../../my_my_node_modules/classnames/index.js';
+import { getDefaultJSON } from './defaultJSON.js';
+import '../../../../meta-comp/components/Text/index.js';
+import Button from '../../../../meta-comp/components/Button/index.js';
+import Image from '../../../../meta-comp/components/Image/index.js';
+import compositeDecorator from '../../../../decorator/compositeDecorator.js';
+import { computeStyle } from '../../../../utils/businessUtil.js';
+import './index.less.js';
+
+var Tag =
+/** @class */
+function (_super) {
+  __extends(Tag, _super);
+
+  function Tag() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  Tag.prototype.render = function () {
+    var _a;
+
+    var nodeData = this.props.nodeData;
+    var wrapStyle = computeStyle(nodeData, window.magicDesign.device);
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('tag-comp-wrap', (_a = {}, _a[nodeData.customize.layout] = true, _a[nodeData.customize.align] = true, _a)),
+      onClick: this.onComponentClick,
+      style: wrapStyle
+    }, nodeData.content.image.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "tag-image"
+    }, /*#__PURE__*/React__default.createElement(Image, {
+      data: nodeData.content.image
+    })), nodeData.content.button.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "first-button"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      data: nodeData.content.button
+    })), nodeData.content.secondaryButton.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "secondary-button"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      data: nodeData.content.secondaryButton
+    })));
+  };
+
+  Tag.defaultProps = {};
+  Tag.type = 'TAG';
+  Tag.getDefaultJSON = getDefaultJSON;
+  Tag = __decorate([compositeDecorator], Tag);
+  return Tag;
+}(Component);
+
+export { Tag as default };

package/dist/src/components/composite-comp/bol/components/Tag/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../my_my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_tag-comp-wrap__UjbcC {\n  display: flex;\n  align-items: center;\n}\n.index_tag-comp-wrap__UjbcC .index_tag-image__5FKgB {\n  width: 26px;\n  height: 26px;\n}\n.index_tag-comp-wrap__UjbcC .index_first-button__SE0VE {\n  margin: 5px;\n}\n.index_tag-comp-wrap__UjbcC .index_secondary-button__T8X9y {\n  margin: 5px;\n}\n.index_tag-comp-wrap__UjbcC.index_layout1__NKtEQ {\n  flex-direction: row;\n}\n.index_tag-comp-wrap__UjbcC.index_layout1__NKtEQ.index_left__ra7iR {\n  justify-content: flex-start;\n}\n.index_tag-comp-wrap__UjbcC.index_layout1__NKtEQ.index_center__TNrNg {\n  justify-content: center;\n}\n.index_tag-comp-wrap__UjbcC.index_layout1__NKtEQ.index_right__T9842 {\n  justify-content: flex-end;\n}\n";
+styleInject(css_248z);