@fonixtree/magic-design 0.0.8 → 0.0.9

package/src/components/composite-comp/bol/components/Banner/index.js

@@ -0,0 +1,34 @@
+import { __extends, __decorate } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import BannerPc from './pc/index.js';
+import BannerMobile from './mobile/index.js';
+import { getDefaultJSON } from './defaultJSON.js';
+import compositeDecorator from '../../../../decorator/compositeDecorator.js';
+
+var Banner =
+/** @class */
+function (_super) {
+  __extends(Banner, _super);
+
+  function Banner() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  Banner.prototype.render = function () {
+    var nodeData = this.props.nodeData;
+    console.log('---banner', nodeData);
+    return /*#__PURE__*/React__default.createElement("div", null, window.magicDesign.device === 'pc' ? /*#__PURE__*/React__default.createElement(BannerPc, {
+      data: nodeData
+    }) : /*#__PURE__*/React__default.createElement(BannerMobile, {
+      data: nodeData
+    }));
+  };
+
+  Banner.defaultProps = {};
+  Banner.type = 'BANNER';
+  Banner.getDefaultJSON = getDefaultJSON;
+  Banner = __decorate([compositeDecorator], Banner);
+  return Banner;
+}(Component);
+
+export { Banner as default };

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

@@ -0,0 +1,256 @@
+import { __extends } from '../../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import classNames from 'classnames';
+import '../../../../../../../node_modules/antd/es/affix/index.js';
+import '../../../../../../../node_modules/antd/es/anchor/index.js';
+import '../../../../../../../node_modules/antd/es/auto-complete/index.js';
+import '../../../../../../../node_modules/antd/es/alert/index.js';
+import '../../../../../../../node_modules/antd/es/avatar/index.js';
+import '../../../../../../../node_modules/antd/es/back-top/index.js';
+import '../../../../../../../node_modules/antd/es/badge/index.js';
+import '../../../../../../../node_modules/antd/es/breadcrumb/Breadcrumb.js';
+import '../../../../../../../node_modules/antd/es/button/button.js';
+import '../../../../../../../node_modules/rc-picker/node_modules/moment/moment.js';
+import '../../../../../../../node_modules/rc-util/es/hooks/useMergedState.js';
+import '../../../../../../../node_modules/lodash/_baseToString.js';
+import '../../../../../../../node_modules/lodash/_baseGetTag.js';
+import '../../../../../../../node_modules/rc-util/es/raf.js';
+import '../../../../../../../node_modules/rc-picker/es/panels/DatetimePanel/index.js';
+import '../../../../../../../node_modules/rc-trigger/es/index.js';
+import '../../../../../../../node_modules/antd/es/locale-provider/LocaleReceiver.js';
+import '../../../../../../../node_modules/antd/es/date-picker/locale/en_US.js';
+import '../../../../../../../node_modules/antd/es/config-provider/index.js';
+import '../../../../../../../node_modules/rc-field-form/es/index.js';
+import '../../../../../../../node_modules/antd/es/select/index.js';
+import '../../../../../../../node_modules/antd/es/radio/index.js';
+import '../../../../../../../node_modules/antd/es/card/index.js';
+import '../../../../../../../node_modules/antd/es/collapse/Collapse.js';
+import Carousel from '../../../../../../../node_modules/antd/es/carousel/index.js';
+import '../../../../../../../node_modules/antd/es/cascader/index.js';
+import '../../../../../../../node_modules/antd/es/checkbox/index.js';
+import '../../../../../../../node_modules/antd/es/grid/row.js';
+import '../../../../../../../node_modules/antd/es/grid/col.js';
+import '../../../../../../../node_modules/antd/es/comment/index.js';
+import '../../../../../../../node_modules/antd/es/date-picker/index.js';
+import '../../../../../../../_virtual/index2.js';
+import '../../../../../../../node_modules/antd/es/_util/warning.js';
+import '../../../../../../../node_modules/antd/es/divider/index.js';
+import '../../../../../../../node_modules/antd/es/dropdown/dropdown.js';
+import '../../../../../../../node_modules/antd/es/drawer/index.js';
+import '../../../../../../../node_modules/antd/es/empty/index.js';
+import '../../../../../../../node_modules/antd/es/form/index.js';
+import '../../../../../../../node_modules/antd/es/input/index.js';
+import '../../../../../../../node_modules/antd/es/image/index.js';
+import '../../../../../../../node_modules/antd/es/input-number/index.js';
+import '../../../../../../../node_modules/antd/es/layout/index.js';
+import '../../../../../../../node_modules/antd/es/list/index.js';
+import '../../../../../../../node_modules/antd/es/message/index.js';
+import '../../../../../../../node_modules/antd/es/menu/index.js';
+import '../../../../../../../node_modules/antd/es/mentions/index.js';
+import '../../../../../../../node_modules/antd/es/modal/index.js';
+import '../../../../../../../node_modules/antd/es/statistic/index.js';
+import '../../../../../../../node_modules/antd/es/notification/index.js';
+import '../../../../../../../node_modules/@ant-design/icons/es/icons/ArrowLeftOutlined.js';
+import '../../../../../../../node_modules/@ant-design/icons/es/icons/ArrowRightOutlined.js';
+import '../../../../../../../node_modules/rc-resize-observer/es/index.js';
+import '../../../../../../../node_modules/antd/es/space/index.js';
+import '../../../../../../../node_modules/antd/es/_util/transButton.js';
+import '../../../../../../../node_modules/antd/es/pagination/Pagination.js';
+import '../../../../../../../node_modules/antd/es/popconfirm/index.js';
+import '../../../../../../../node_modules/antd/es/popover/index.js';
+import '../../../../../../../node_modules/antd/es/progress/progress.js';
+import '../../../../../../../node_modules/antd/es/rate/index.js';
+import '../../../../../../../node_modules/antd/es/result/index.js';
+import '../../../../../../../node_modules/antd/es/segmented/index.js';
+import '../../../../../../../node_modules/antd/es/skeleton/Skeleton.js';
+import '../../../../../../../node_modules/antd/es/slider/index.js';
+import '../../../../../../../node_modules/antd/es/spin/index.js';
+import '../../../../../../../node_modules/antd/es/steps/index.js';
+import '../../../../../../../node_modules/antd/es/switch/index.js';
+import '../../../../../../../node_modules/antd/es/table/Table.js';
+import '../../../../../../../node_modules/antd/es/transfer/list.js';
+import '../../../../../../../node_modules/@ant-design/icons/es/icons/LeftOutlined.js';
+import '../../../../../../../node_modules/@ant-design/icons/es/icons/RightOutlined.js';
+import '../../../../../../../node_modules/@ant-design/icons/es/icons/SearchOutlined.js';
+import '../../../../../../../node_modules/antd/es/_util/statusUtils.js';
+import '../../../../../../../node_modules/antd/es/tree/Tree.js';
+import '../../../../../../../node_modules/antd/es/tree-select/index.js';
+import '../../../../../../../node_modules/antd/es/tabs/index.js';
+import '../../../../../../../node_modules/antd/es/tag/index.js';
+import '../../../../../../../node_modules/antd/es/time-picker/index.js';
+import '../../../../../../../node_modules/antd/es/timeline/Timeline.js';
+import '../../../../../../../node_modules/antd/es/tooltip/index.js';
+import '../../../../../../../node_modules/antd/es/typography/index.js';
+import '../../../../../../../node_modules/antd/es/upload/index.js';
+import './index.less.js';
+import { store } from '../../../../../mobx/index.js';
+import { isDesignMode } from '../../../../../utils/coreUtil.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';
+import { autorun } from '../../../../../../../node_modules/mobx/dist/mobx.esm.js';
+
+var BannerMobile =
+/** @class */
+function (_super) {
+  __extends(BannerMobile, _super);
+
+  function BannerMobile() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      carouseIndex: 0,
+      hoverState: false,
+      clickedGroup: ''
+    };
+    _this.carouselRef = /*#__PURE__*/React__default.createRef();
+    _this.destroy = null;
+
+    _this.bannerGoto = function (groupSource) {
+      var nextIndex = groupSource.findIndex(function (item) {
+        return item.id === store.clickedGroup;
+      });
+
+      if (nextIndex != -1 && nextIndex != _this.state.carouseIndex) {
+        _this.carouselRef.current.goTo(nextIndex);
+      }
+    };
+
+    _this.getItemStyle = function (item) {
+      var data = _this.props.data;
+      return {
+        justifyContent: alignItemMap[item.customize.layout],
+        height: data.setting.mobileHeight
+      };
+    };
+
+    _this.mouseEnterWrap = function () {
+      _this.setState({
+        hoverState: true
+      });
+    };
+
+    _this.mouseLeaveWrap = function () {
+      _this.setState({
+        hoverState: false
+      });
+    };
+
+    return _this;
+  }
+
+  BannerMobile.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.destroy = autorun(function () {
+      _this.bannerGoto(_this.props.data.groupSource);
+    });
+  };
+
+  BannerMobile.prototype.componentWillReceiveProps = function (nextProps) {
+    this.bannerGoto(nextProps.data.groupSource);
+  };
+
+  BannerMobile.prototype.componentWillUnmount = function () {
+    this.destroy();
+  };
+
+  BannerMobile.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data;
+    var _a = this.state,
+        carouseIndex = _a.carouseIndex,
+        hoverState = _a.hoverState,
+        clickedGroup = _a.clickedGroup;
+    var autoplay = data.setting.autoplay.open;
+    /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+    if (isDesignMode() && clickedGroup) {
+      autoplay = false;
+    }
+
+    var wrapStyle = computeStyle(data, window.magicDesign.device);
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "m-banner-mobile",
+      style: wrapStyle
+    }, /*#__PURE__*/React__default.createElement(Carousel, {
+      ref: this.carouselRef,
+      afterChange: function (n) {
+        return _this.setState({
+          carouseIndex: n
+        });
+      },
+      autoplay: autoplay,
+      autoplaySpeed: data.setting.autoplay.interval * 1000,
+      dots: false
+    }, data.groupSource.map(function (item, index) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: item.id
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "carouselItem",
+        onMouseEnter: _this.mouseEnterWrap,
+        onMouseLeave: _this.mouseLeaveWrap,
+        style: _this.getItemStyle(item)
+      }, item.image.open && /*#__PURE__*/React__default.createElement(Image, {
+        data: item.image,
+        hoverState: hoverState && carouseIndex === index,
+        isBackground: true,
+        style: {
+          position: 'absolute',
+          ZIndex: 1,
+          inset: '0px',
+          height: '100%'
+        }
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "carouseContent",
+        style: {
+          alignItems: alignItemMap[item.customize.align]
+        }
+      }, item.title.open && /*#__PURE__*/React__default.createElement(Text, {
+        className: "title",
+        data: item.title
+      }), item.text.open && /*#__PURE__*/React__default.createElement(Text, {
+        className: "sub-title",
+        data: item.text
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "btn-wrap"
+      }, item.button.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "btn",
+        data: item.button
+      }), item.secondButton.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "btn",
+        data: item.secondButton
+      })))));
+    })), data.setting.dots.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "swiper-ban"
+    }, data.groupSource.length > 1 && data.groupSource.map(function (item, i) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: classNames('ban', {
+          active: i == carouseIndex
+        }),
+        onClick: function () {
+          var _a;
+
+          return (_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.goTo(i);
+        },
+        style: {
+          backgroundColor: i == carouseIndex ? data.setting.dots.hoverColor : data.setting.dots.color,
+          fontSize: i == carouseIndex ? data.setting.dots.hoverSize : data.setting.dots.size
+        }
+      });
+    })));
+  };
+
+  BannerMobile.defaultProps = {
+    data: {
+      setting: {},
+      groupSource: []
+    }
+  };
+  return BannerMobile;
+}(React__default.Component);
+
+export { BannerMobile as default };

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

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_m-banner-mobile__-pLQc {\n  position: relative;\n}\n.index_m-banner-mobile__-pLQc .index_carouselItem__60C1U {\n  height: 386px;\n  position: relative;\n  display: flex;\n}\n.index_m-banner-mobile__-pLQc .index_carouselItem__60C1U .index_carouseContent__QROKR {\n  padding: 80px 28px 0;\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: auto;\n}\n.index_m-banner-mobile__-pLQc .index_carouselItem__60C1U .index_title__9gBzo {\n  margin-bottom: 8px;\n}\n.index_m-banner-mobile__-pLQc .index_carouselItem__60C1U .index_sub-title__IzStK {\n  margin-bottom: 20px;\n}\n.index_m-banner-mobile__-pLQc .index_carouselItem__60C1U .index_btn-wrap__zgVTO {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n.index_m-banner-mobile__-pLQc .index_carouselItem__60C1U .index_btn-wrap__zgVTO .index_btn__jkzPm {\n  margin-right: 12px;\n}\n.index_m-banner-mobile__-pLQc .index_swiper-ban__cckJN {\n  position: absolute;\n  width: 100%;\n  bottom: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.index_m-banner-mobile__-pLQc .index_swiper-ban__cckJN .index_ban__3LkkJ {\n  font-size: 16px;\n  width: 1.5em;\n  height: 0.3em;\n  background: #FFF;\n  cursor: inherit;\n  margin-right: 0.3em;\n  transition: all 0.5s;\n}\n.index_m-banner-mobile__-pLQc .index_swiper-ban__cckJN .index_ban__3LkkJ.index_active__Nn5EX {\n  width: 1.5em;\n  opacity: 1;\n}\n";
+styleInject(css_248z);

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

@@ -0,0 +1,334 @@
+import { __extends } from '../../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import classNames from 'classnames';
+import '../../../../../../../node_modules/antd/es/affix/index.js';
+import '../../../../../../../node_modules/antd/es/anchor/index.js';
+import '../../../../../../../node_modules/antd/es/auto-complete/index.js';
+import '../../../../../../../node_modules/antd/es/alert/index.js';
+import '../../../../../../../node_modules/antd/es/avatar/index.js';
+import '../../../../../../../node_modules/antd/es/back-top/index.js';
+import '../../../../../../../node_modules/antd/es/badge/index.js';
+import '../../../../../../../node_modules/antd/es/breadcrumb/Breadcrumb.js';
+import '../../../../../../../node_modules/antd/es/button/button.js';
+import '../../../../../../../node_modules/rc-picker/node_modules/moment/moment.js';
+import '../../../../../../../node_modules/rc-util/es/hooks/useMergedState.js';
+import '../../../../../../../node_modules/lodash/_baseToString.js';
+import '../../../../../../../node_modules/lodash/_baseGetTag.js';
+import '../../../../../../../node_modules/rc-util/es/raf.js';
+import '../../../../../../../node_modules/rc-picker/es/panels/DatetimePanel/index.js';
+import '../../../../../../../node_modules/rc-trigger/es/index.js';
+import '../../../../../../../node_modules/antd/es/locale-provider/LocaleReceiver.js';
+import '../../../../../../../node_modules/antd/es/date-picker/locale/en_US.js';
+import '../../../../../../../node_modules/antd/es/config-provider/index.js';
+import '../../../../../../../node_modules/rc-field-form/es/index.js';
+import '../../../../../../../node_modules/antd/es/select/index.js';
+import '../../../../../../../node_modules/antd/es/radio/index.js';
+import '../../../../../../../node_modules/antd/es/card/index.js';
+import '../../../../../../../node_modules/antd/es/collapse/Collapse.js';
+import Carousel from '../../../../../../../node_modules/antd/es/carousel/index.js';
+import '../../../../../../../node_modules/antd/es/cascader/index.js';
+import '../../../../../../../node_modules/antd/es/checkbox/index.js';
+import '../../../../../../../node_modules/antd/es/grid/row.js';
+import '../../../../../../../node_modules/antd/es/grid/col.js';
+import '../../../../../../../node_modules/antd/es/comment/index.js';
+import '../../../../../../../node_modules/antd/es/date-picker/index.js';
+import '../../../../../../../_virtual/index2.js';
+import '../../../../../../../node_modules/antd/es/_util/warning.js';
+import '../../../../../../../node_modules/antd/es/divider/index.js';
+import '../../../../../../../node_modules/antd/es/dropdown/dropdown.js';
+import '../../../../../../../node_modules/antd/es/drawer/index.js';
+import '../../../../../../../node_modules/antd/es/empty/index.js';
+import '../../../../../../../node_modules/antd/es/form/index.js';
+import '../../../../../../../node_modules/antd/es/input/index.js';
+import '../../../../../../../node_modules/antd/es/image/index.js';
+import '../../../../../../../node_modules/antd/es/input-number/index.js';
+import '../../../../../../../node_modules/antd/es/layout/index.js';
+import '../../../../../../../node_modules/antd/es/list/index.js';
+import '../../../../../../../node_modules/antd/es/message/index.js';
+import '../../../../../../../node_modules/antd/es/menu/index.js';
+import '../../../../../../../node_modules/antd/es/mentions/index.js';
+import '../../../../../../../node_modules/antd/es/modal/index.js';
+import '../../../../../../../node_modules/antd/es/statistic/index.js';
+import '../../../../../../../node_modules/antd/es/notification/index.js';
+import '../../../../../../../node_modules/@ant-design/icons/es/icons/ArrowLeftOutlined.js';
+import '../../../../../../../node_modules/@ant-design/icons/es/icons/ArrowRightOutlined.js';
+import '../../../../../../../node_modules/rc-resize-observer/es/index.js';
+import '../../../../../../../node_modules/antd/es/space/index.js';
+import '../../../../../../../node_modules/antd/es/_util/transButton.js';
+import '../../../../../../../node_modules/antd/es/pagination/Pagination.js';
+import '../../../../../../../node_modules/antd/es/popconfirm/index.js';
+import '../../../../../../../node_modules/antd/es/popover/index.js';
+import '../../../../../../../node_modules/antd/es/progress/progress.js';
+import '../../../../../../../node_modules/antd/es/rate/index.js';
+import '../../../../../../../node_modules/antd/es/result/index.js';
+import '../../../../../../../node_modules/antd/es/segmented/index.js';
+import '../../../../../../../node_modules/antd/es/skeleton/Skeleton.js';
+import '../../../../../../../node_modules/antd/es/slider/index.js';
+import '../../../../../../../node_modules/antd/es/spin/index.js';
+import '../../../../../../../node_modules/antd/es/steps/index.js';
+import '../../../../../../../node_modules/antd/es/switch/index.js';
+import '../../../../../../../node_modules/antd/es/table/Table.js';
+import '../../../../../../../node_modules/antd/es/transfer/list.js';
+import '../../../../../../../node_modules/@ant-design/icons/es/icons/LeftOutlined.js';
+import '../../../../../../../node_modules/@ant-design/icons/es/icons/RightOutlined.js';
+import '../../../../../../../node_modules/@ant-design/icons/es/icons/SearchOutlined.js';
+import '../../../../../../../node_modules/antd/es/_util/statusUtils.js';
+import '../../../../../../../node_modules/antd/es/tree/Tree.js';
+import '../../../../../../../node_modules/antd/es/tree-select/index.js';
+import '../../../../../../../node_modules/antd/es/tabs/index.js';
+import '../../../../../../../node_modules/antd/es/tag/index.js';
+import '../../../../../../../node_modules/antd/es/time-picker/index.js';
+import '../../../../../../../node_modules/antd/es/timeline/Timeline.js';
+import '../../../../../../../node_modules/antd/es/tooltip/index.js';
+import '../../../../../../../node_modules/antd/es/typography/index.js';
+import '../../../../../../../node_modules/antd/es/upload/index.js';
+import './index.less.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 { isDesignMode } from '../../../../../utils/coreUtil.js';
+import { store } from '../../../../../mobx/index.js';
+import { alignItemMap } from '../../../../../common/AlignSelector/index.js';
+import '../../../../../common/LayoutSelector/index.js';
+import '../../../../../common/Field/index.js';
+import '../../../../../common/UrlPicker/index.js';
+import Iconfont from '../../../../../common/Iconfont/index.js';
+import '../../../../../common/Button/index.js';
+import '../../../../../common/Collapse/index.js';
+import '../../../../../common/ColorPickerInput/index.js';
+import '../../../../../common/ImagePicker/index.js';
+import '../../../../../common/IconPicker/index.js';
+import '../../../../../common/SwitchCollapse/index.js';
+import '../../../../../common/Slider/index.js';
+import '../../../../../common/FontStyles/index.js';
+import '../../../../../common/ButtonIconLayout/index.js';
+import '../../../../../../../node_modules/axios/index.js';
+import '../../../../../../../node_modules/qs/lib/stringify.js';
+import '../../../../../../../node_modules/qs/lib/utils.js';
+import '../../../../../common/ProductModal/index.js';
+import '../../../../../common/ProductSource/index.less.js';
+import { computeStyle } from '../../../../../utils/businessUtil.js';
+import { autorun } from '../../../../../../../node_modules/mobx/dist/mobx.esm.js';
+
+// @observer
+
+var BannerPc =
+/** @class */
+function (_super) {
+  __extends(BannerPc, _super);
+
+  function BannerPc() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      carouseIndex: 0,
+      hoverState: false
+    };
+    _this.carouselRef = /*#__PURE__*/React__default.createRef();
+    _this.destroy = null;
+
+    _this.bannerGoto = function (groupSource) {
+      var nextIndex = groupSource.findIndex(function (item) {
+        return item.id === store.clickedGroup;
+      });
+
+      if (nextIndex != -1 && nextIndex != _this.state.carouseIndex) {
+        _this.carouselRef.current.goTo(nextIndex);
+      }
+    };
+
+    _this.mouseEnterWrap = function () {
+      _this.setState({
+        hoverState: true
+      });
+    };
+
+    _this.mouseLeaveWrap = function () {
+      _this.setState({
+        hoverState: false
+      });
+    };
+
+    _this.mouseEnterBtn = function (e) {
+      var _a, _b;
+
+      var data = _this.props.data;
+
+      if ((_a = data.setting.navigation) === null || _a === void 0 ? void 0 : _a.hoverColor) {
+        e.target.style.color = data.setting.navigation.hoverColor;
+      }
+
+      if ((_b = data.setting.navigation) === null || _b === void 0 ? void 0 : _b.hoverSize) {
+        e.target.style.fontSize = data.setting.navigation.hoverSize;
+      }
+    };
+
+    _this.mouseLeaveBtn = function (e) {
+      var _a, _b;
+
+      var data = _this.props.data;
+
+      if ((_a = data.setting.navigation) === null || _a === void 0 ? void 0 : _a.color) {
+        e.target.style.color = data.setting.navigation.color;
+      }
+
+      if ((_b = data.setting.navigation) === null || _b === void 0 ? void 0 : _b.size) {
+        e.target.style.fontSize = data.setting.navigation.size;
+      }
+    };
+
+    _this.getBgStyle = function (item) {
+      var data = _this.props.data;
+      var bgStyle = {
+        justifyContent: alignItemMap[item.customize.layout]
+      };
+
+      if (item.background.bgType === 'color') {
+        bgStyle.opacity = item.background.opacity ? item.background.opacity / 100 : 1;
+        bgStyle.backgroundColor = item.background.color;
+      } else {
+        bgStyle.backgroundImage = "url(".concat(item.background.image, ")");
+      }
+
+      if (data.setting.pcHeight) bgStyle.height = data.setting.pcHeight;
+      return bgStyle;
+    };
+
+    return _this;
+  }
+
+  BannerPc.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.destroy = autorun(function () {
+      _this.bannerGoto(_this.props.data.groupSource);
+    });
+  };
+
+  BannerPc.prototype.componentWillReceiveProps = function (nextProps) {
+    this.bannerGoto(nextProps.data.groupSource);
+  };
+
+  BannerPc.prototype.componentWillUnmount = function () {
+    this.destroy();
+  };
+
+  BannerPc.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data;
+    var _a = this.state,
+        carouseIndex = _a.carouseIndex,
+        hoverState = _a.hoverState;
+    var navStyle = {
+      fontSize: data.setting.navigation.size,
+      color: data.setting.navigation.color
+    };
+    var autoplay = data.setting.autoplay.open;
+    /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+    if (isDesignMode() && store.clickedGroup) {
+      autoplay = false;
+    }
+
+    var wrapStyle = computeStyle(data, window.magicDesign.device);
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "m-banner-pc",
+      style: wrapStyle
+    }, data.setting.navigation.open && /*#__PURE__*/React__default.createElement(Iconfont, {
+      className: "turnPage leftBtn",
+      onClick: function () {
+        _this.carouselRef.current.prev();
+      },
+      onMouseEnter: this.mouseEnterBtn,
+      onMouseLeave: this.mouseLeaveBtn,
+      style: navStyle,
+      type: "icon-outlined-left"
+    }), /*#__PURE__*/React__default.createElement(Carousel, {
+      ref: this.carouselRef,
+      afterChange: function (n) {
+        return _this.setState({
+          carouseIndex: n
+        });
+      },
+      autoplay: autoplay,
+      autoplaySpeed: data.setting.autoplay.interval * 1000,
+      dots: false
+    }, data.groupSource.map(function (item, index) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: item.id
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "carouselItem",
+        onMouseEnter: _this.mouseEnterWrap,
+        onMouseLeave: _this.mouseLeaveWrap,
+        style: _this.getBgStyle(item)
+      }, item.image.open && /*#__PURE__*/React__default.createElement(Image, {
+        data: item.image,
+        hoverState: hoverState && carouseIndex === index,
+        isBackground: true,
+        style: {
+          position: 'absolute',
+          zIndex: 1,
+          inset: '0px',
+          height: '100%'
+        }
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "carouseContent",
+        style: {
+          alignItems: alignItemMap[item.customize.align]
+        }
+      }, item.title.open && /*#__PURE__*/React__default.createElement(Text, {
+        className: "title",
+        data: item.title
+      }), item.text.open && /*#__PURE__*/React__default.createElement(Text, {
+        className: "sub-title",
+        data: item.text
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "btn-wrap"
+      }, item.button.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "btn",
+        data: item.button
+      }), item.secondButton.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "btn",
+        data: item.secondButton
+      })))));
+    })), data.setting.dots.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "swiper-ban"
+    }, data.groupSource.length > 1 && data.groupSource.map(function (item, i) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: i,
+        className: classNames('ban', {
+          active: i == carouseIndex
+        }),
+        onClick: function () {
+          var _a;
+
+          return (_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.goTo(i);
+        },
+        style: {
+          backgroundColor: i == carouseIndex ? data.setting.dots.hoverColor : data.setting.dots.color,
+          fontSize: i == carouseIndex ? data.setting.dots.hoverSize : data.setting.dots.size
+        }
+      });
+    })), data.setting.navigation.open && /*#__PURE__*/React__default.createElement(Iconfont, {
+      className: "turnPage rightBtn",
+      onClick: function () {
+        _this.carouselRef.current.next();
+      },
+      onMouseEnter: this.mouseEnterBtn,
+      onMouseLeave: this.mouseLeaveBtn,
+      style: navStyle,
+      type: "icon-outlined-right"
+    }));
+  };
+
+  BannerPc.defaultProps = {
+    data: {
+      setting: {},
+      groupSource: []
+    }
+  };
+  return BannerPc;
+}(React__default.Component);
+
+export { BannerPc as default };

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

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_m-banner-pc__2B6sk {\n  position: relative;\n}\n.index_m-banner-pc__2B6sk .index_swiper-ban__Qin-o {\n  position: absolute;\n  width: 100%;\n  bottom: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.index_m-banner-pc__2B6sk .index_swiper-ban__Qin-o .index_ban__QUyn5 {\n  font-size: 16px;\n  width: 1em;\n  height: 0.3em;\n  background: #FFF;\n  cursor: inherit;\n  margin-right: 0.3em;\n  transition: all 0.5s;\n}\n.index_m-banner-pc__2B6sk .index_swiper-ban__Qin-o .index_ban__QUyn5.index_active__BQfgr {\n  width: 1.5em;\n  opacity: 1;\n}\n.index_m-banner-pc__2B6sk .index_turnPage__E56Ka {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 3;\n  cursor: pointer;\n}\n.index_m-banner-pc__2B6sk .index_leftBtn__vz0jN {\n  left: 20px;\n}\n.index_m-banner-pc__2B6sk .index_rightBtn__8I75P {\n  right: 20px;\n}\n.index_m-banner-pc__2B6sk .index_carouselItem__6x9q3 {\n  height: 360px;\n  display: flex;\n  position: relative;\n}\n.index_m-banner-pc__2B6sk .index_carouselItem__6x9q3 .index_carouseContent__UdT6C {\n  padding: 100px 80px 0;\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: auto;\n}\n.index_m-banner-pc__2B6sk .index_carouselItem__6x9q3 .index_title__effje {\n  margin-bottom: 8px;\n}\n.index_m-banner-pc__2B6sk .index_carouselItem__6x9q3 .index_sub-title__nykUG {\n  margin-bottom: 20px;\n}\n.index_m-banner-pc__2B6sk .index_carouselItem__6x9q3 .index_btn-wrap__Ya144 {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n.index_m-banner-pc__2B6sk .index_carouselItem__6x9q3 .index_btn-wrap__Ya144 .index_btn__scvxl {\n  margin-right: 12px;\n  cursor: pointer;\n}\n";
+styleInject(css_248z);