@fonixtree/magic-design 0.0.100 → 0.0.102

package/lib/composite-comp/bol/components/Carousel/mobile/index.less

@@ -1,29 +1,12 @@
 .m-carousel-mobile {
+  display: flex;
   position: relative;
-  width: 100%;
-
-  .content {
-    display: flex;
-    margin: 0 auto;
-  }
+  margin: 0 auto;
 
   .slider-wrap {
     width: 100%;
+    padding: 30px 0;
     margin: 0 auto;
-    line-height: 1;
-
-    .slick-track {
-      display: flex;
-      align-items: center;
-
-      .slick-slide {
-        margin-right: 12px;
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
 
     .img-wrap {
       .img {
@@ -47,7 +30,6 @@
 
       .tags {
         margin-top: 8px;
-        margin-bottom: 12px;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -62,12 +44,17 @@
         }
       }
     }
+
+    .slick-track {
+      display: flex;
+      align-items: center;
+    }
   }
 
   .swiper-ban {
     position: absolute;
     width: 100%;
-    bottom: 6px;
+    bottom: 0;
     display: flex;
     align-items: center;
     justify-content: center;

package/lib/composite-comp/bol/components/Carousel/pc/index.js

@@ -15,10 +15,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
-var _mobx = require("../../../../../mobx");
-
 var _components = require("../../../../../meta-comp/components");
 
+var _commonUtil = require("../../../../../utils/commonUtil");
+
 var _Iconfont = _interopRequireDefault(require("../../../../../common/Iconfont"));
 
 require("slick-carousel/slick/slick.css");
@@ -56,35 +56,29 @@ var __extends = void 0 && (void 0).__extends || function () {
 }();
 
 var PC_IMG_SIZE = [{
-  minW: 150,
+  minW: 806,
   maxW: 1072,
-  minH: 150,
-  maxH: 400
+  maxH: 662
 }, {
-  minW: 150,
+  minW: 390,
   maxW: 524,
-  minH: 150,
-  maxH: 524
+  maxH: 393
 }, {
-  minW: 100,
+  minW: 258,
   maxW: 341,
-  minH: 100,
-  maxH: 341
+  maxH: 256
 }, {
-  minW: 100,
+  minW: 184,
   maxW: 251,
-  minH: 100,
-  maxH: 251
+  maxH: 188
 }, {
-  minW: 100,
+  minW: 142,
   maxW: 195,
-  minH: 100,
-  maxH: 195
+  maxH: 147
 }, {
-  minW: 100,
+  minW: 124,
   maxW: 168,
-  minH: 100,
-  maxH: 168
+  maxH: 126
 }];
 
 var CarouselPc =
@@ -99,17 +93,6 @@ function (_super) {
       sliderIndex: 0
     };
     _this.sliderRef = /*#__PURE__*/_react["default"].createRef();
-    _this.destroy = null;
-
-    _this.sliderGoTo = function (groupSource) {
-      var nextIndex = groupSource.findIndex(function (item) {
-        return item.id === _mobx.store.clickedGroup;
-      });
-
-      if (nextIndex != -1 && nextIndex != _this.state.sliderIndex) {
-        _this.sliderRef.slickGoTo(nextIndex);
-      }
-    };
 
     _this.mouseEnterBtn = function (e) {
       var _a, _b;
@@ -142,23 +125,7 @@ function (_super) {
     return _this;
   }
 
-  CarouselPc.prototype.componentDidMount = function () {
-    var _this = this;
-
-    this.destroy = (0, _mobx.autorun)(function () {
-      _this.sliderGoTo(_this.props.data.groupSource);
-      /** 设计器模式下 如果选中特定group 自动播放关闭 */
-
-
-      if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
-        _this.sliderRef.slickPause();
-      }
-    });
-  };
-
   CarouselPc.prototype.componentWillReceiveProps = function (nextProps) {
-    this.sliderGoTo(nextProps.data.groupSource);
-
     if (nextProps.data.setting.autoplay.open) {
       this.sliderRef.slickPlay();
     } else {
@@ -166,10 +133,6 @@ function (_super) {
     }
   };
 
-  CarouselPc.prototype.componentWillUnmount = function () {
-    this.destroy();
-  };
-
   CarouselPc.prototype.render = function () {
     var _this = this;
 
@@ -177,23 +140,30 @@ function (_super) {
     var sliderIndex = this.state.sliderIndex;
     var showText = data.customize.layout === 'layout2';
     var colNum = showText ? 1 : Math.min(data.customize.pcRowNum, data.groupSource.length);
-    var autoplay = data.setting.autoplay.open;
-    /** 设计器模式下 如果选中特定group 自动播放关闭 */
+    var bgStyle = {};
 
-    if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
-      autoplay = false;
+    if (data.background.bgType === 'color') {
+      bgStyle = {
+        backgroundColor: (0, _commonUtil.getColorRgba)(data.background.color || '#fff', data.background.opacity / 100 || 1)
+      };
+    } else {
+      bgStyle = {
+        background: "url(" + data.background.image + ") no-repeat center",
+        backgroundSize: '100%'
+      };
     }
 
+    var spacing = data.spacing[window.magicDesign.device];
+    if (spacing.contentWidth) bgStyle.width = spacing.contentWidth;
     var settings = {
       className: 'slider-wrap',
       arrows: false,
       dots: false,
-      autoplay: autoplay,
+      autoplay: data.setting.autoplay.open,
       autoplaySpeed: data.setting.autoplay.interval * 1000,
       speed: 500,
-      draggable: window.magicDesign.mode === 'renderer',
       slidesToShow: colNum,
-      slidesToScroll: 1,
+      slidesToScroll: colNum,
       beforeChange: function beforeChange(oldIndex, newIndex) {
         _this.setState({
           sliderIndex: newIndex
@@ -205,12 +175,8 @@ function (_super) {
       color: data.setting.navigation.color
     };
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-carousel-pc"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "content",
-      style: {
-        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '30px' : '0'
-      }
+      className: "m-carousel-pc",
+      style: bgStyle
     }, data.setting.navigation.open && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-left",
       onClick: function onClick() {
@@ -232,8 +198,9 @@ function (_super) {
         className: "img"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         data: item.image,
+        isBackground: true,
         maxHeight: PC_IMG_SIZE[colNum - 1].maxH,
-        minHeight: PC_IMG_SIZE[colNum - 1].minH,
+        maxWidth: PC_IMG_SIZE[colNum - 1].maxW,
         minWidth: PC_IMG_SIZE[colNum - 1].minW
       })), showText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && !((0, _coreUtil.isPc)() && item.title.pcText === '') && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
@@ -253,7 +220,7 @@ function (_super) {
       }), item.secondButtonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.secondButtonTag
       }))));
-    })), data.setting.dots.open && Math.ceil(data.groupSource.length / colNum) > 1 && /*#__PURE__*/_react["default"].createElement("div", {
+    })), 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", {
@@ -278,7 +245,7 @@ function (_super) {
       onMouseLeave: this.mouseLeaveBtn,
       style: navStyle,
       type: "icon-right"
-    })));
+    }));
   };
 
   CarouselPc.defaultProps = {

package/lib/composite-comp/bol/components/Carousel/pc/index.less

@@ -1,43 +1,28 @@
 .m-carousel-pc {
+  display: flex;
   position: relative;
-  width: 100%;
-
-  .content {
-    display: flex;
-    margin: 0 auto;
-  }
+  margin: 0 auto;
 
   .carousel-icon-left {
-    margin-right: 20px;
-    cursor: pointer;
+    float: left;
+    margin-left: 50px;
   }
 
   .carousel-icon-right {
-    margin-left: 20px;
-    cursor: pointer;
+    float: right;
+    margin-right: 50px;
   }
 
   .slider-wrap {
-    width: calc(100% - 72px);
+    width: calc(100% - 200px);
+    padding: 30px 0;
     margin: 0 auto;
-    line-height: 1;
-
-    .slick-track {
-      display: flex;
-      align-items: center;
-
-      .slick-slide {
-        margin-right: 24px;
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
 
     .img-wrap {
       .img {
         width: fit-content;
+        height: fit-content;
+        display: block;
         margin: 0 auto;
       }
 
@@ -55,7 +40,6 @@
 
       .tags {
         margin-top: 8px;
-        margin-bottom: 12px;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -70,14 +54,17 @@
         }
       }
     }
+
+    .slick-track {
+      display: flex;
+      align-items: center;
+    }
   }
 
   .swiper-ban {
     position: absolute;
     width: 100%;
-    bottom: 10px;
-    left: 0;
-    right: 0;
+    bottom: 0;
     display: flex;
     align-items: center;
     justify-content: center;

package/lib/composite-comp/bol/components/ImageGallery/defaultJSON.js

@@ -22,8 +22,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON() {
       open: true,
       type: 'IMAGE',
       content: {
-        h5Name: 'Image Name',
-        pcName: 'Image Name',
+        h5Name: 'name2',
+        pcName: 'name2',
         h5ImgSrc: '',
         pcImgSrc: '',
         clickUrl: ''
@@ -48,28 +48,19 @@ var getDefaultJSON = function getDefaultJSON() {
     groupSource: [imagesGroupSourceJSON()],
     spacing: {
       pc: {
-        paddingTop: 0,
-        paddingBottom: 0,
-        marginBottom: window.magicDesign.compSpacing * 1.5
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
       },
       mobile: {
-        paddingTop: 0,
-        paddingBottom: 0,
-        marginBottom: window.magicDesign.compSpacing
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
       }
     },
     customize: {
-      layout: {
-        h5Layout: 'layout1',
-        pcLayout: 'layout1'
-      },
-      align: 'left',
-      pcRowNum: 2,
-      rowNum: 2,
-      mobileMinRowNum: 2,
-      mobileMaxRowNum: 5,
-      pcMinRowNum: 2,
-      pcMaxRowNum: 6
+      layout: 'layout1',
+      align: 'left'
     },
     background: {
       opacity: 100,

package/lib/composite-comp/bol/components/ImageGallery/index.js

@@ -7,8 +7,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _pc = _interopRequireDefault(require("./pc"));
-
 var _mobile = _interopRequireDefault(require("./mobile"));
 
 var _defaultJSON = require("./defaultJSON");
@@ -70,9 +68,7 @@ function (_super) {
 
   ImageGallery.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    return /*#__PURE__*/_react["default"].createElement("div", null, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
-      data: nodeData
-    }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
+    return /*#__PURE__*/_react["default"].createElement("div", null, window.magicDesign.device === 'pc' ? null : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       data: nodeData
     }));
   };

package/lib/composite-comp/bol/components/ImageGallery/mobile/index.js

@@ -7,11 +7,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 require("./index.less");
 
-var _components = require("../../../../../meta-comp/components");
+var _mobx = require("../../../../../mobx");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -41,48 +39,6 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
-  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
-    s += arguments[i].length;
-  }
-
-  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
-    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
-      r[k] = a[j];
-    }
-  }
-
-  return r;
-};
-
-var MOBILE_IMG_SIZE = {
-  1: {
-    maxW: 343,
-    maxH: 258,
-    gap: 12
-  },
-  2: {
-    maxW: 165,
-    maxH: 124,
-    gap: 12
-  },
-  3: {
-    maxW: 106,
-    maxH: 80,
-    gap: 12
-  },
-  4: {
-    maxW: 77,
-    maxH: 56,
-    gap: 12
-  },
-  5: {
-    maxW: 62,
-    maxH: 45,
-    gap: 8
-  }
-};
-
 var ImageGalleryMobile =
 /** @class */
 function (_super) {
@@ -92,45 +48,27 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {};
+    _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
+    _this.destroy = null;
     return _this;
   }
 
+  ImageGalleryMobile.prototype.componentDidMount = function () {
+    this.destroy = (0, _mobx.autorun)(function () {// this.init(this.props.data.groupSource);
+    });
+  };
+
+  ImageGalleryMobile.prototype.componentWillReceiveProps = function (nextProps) {// this.init(nextProps.data.groupSource);
+  };
+
+  ImageGalleryMobile.prototype.componentWillUnmount = function () {// this.destroy();
+  };
+
   ImageGalleryMobile.prototype.render = function () {
     var data = this.props.data;
-    var isHorizontal = data.customize.layout.h5Layout === 'layout2';
-    var colNum = isHorizontal ? data.customize.rowNum : 1;
-    var newData = data.groupSource.reduce(function (prev, curr, index) {
-      var i = Math.floor(index / colNum);
-      prev[i] = __spreadArrays(prev[i] || [], [curr]);
-      return prev;
-    }, []);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-image-gallery-mobile"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "content"
-    }, newData.map(function (arr, index) {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        key: index,
-        className: (0, _classnames["default"])('line', {
-          isHorizontal: isHorizontal
-        }),
-        style: isHorizontal ? {
-          gap: MOBILE_IMG_SIZE[colNum].gap
-        } : {}
-      }, arr.map(function (item) {
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          key: item.id,
-          className: "img-wrap",
-          style: {
-            width: "calc((100% - " + MOBILE_IMG_SIZE[colNum].gap * (colNum - 1) + "px) / " + colNum + ")"
-          }
-        }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
-          data: item.image,
-          maxHeight: MOBILE_IMG_SIZE[colNum].maxH,
-          maxWidth: "100%"
-        }));
-      }));
-    })));
+    }, "image gallery");
   };
 
   ImageGalleryMobile.defaultProps = {

package/lib/composite-comp/bol/components/ImageGallery/mobile/index.less

@@ -1,21 +1,72 @@
-.m-image-gallery-mobile {
-  .content {
-    .line {
-      margin-bottom: 12px;
-
-      &.isHorizontal {
-        display: flex;
-        justify-content: flex-start;
-      }
+.m-banner-mobile {
+  position: relative;
+  // .turnPage {
+  //   position: absolute;
+  //   top: 50%;
+  //   transform: translateY(-50%);
+  //   z-index: 3;
+  //   cursor: pointer;
+  // }
+  // .leftBtn {
+  //   left: 20px;
+  // }
+  // .rightBtn {
+  //   right: 20px;
+  // }
+
+  .carouselItem {
+    height: 386px;
+    position: relative;
+    display: flex;
+
+    .carouseContent {
+      padding: 80px 28px 0;
+      position: relative;
+      z-index: 2;
+      display: flex;
+      flex-direction: column;
+      margin-bottom: auto;
+    }
 
-      &:last-child {
-        margin-bottom: 0;
+    .title {
+      margin-bottom: 8px;
+    }
+
+    .sub-title {
+      margin-bottom: 20px;
+    }
+
+    .btn-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      .btn {
+        margin-right: 12px;
       }
+    }
+  }
+
+  .swiper-ban {
+    position: absolute;
+    width: 100%;
+    bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .ban {
+      font-size: 16px;
+      width: 1.5em;
+      height: 0.3em;
+      background: #FFF;
+      cursor: inherit;
+      margin-right: 0.3em;
+      transition: all .5s;
 
-      .img-wrap {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+      &.active {
+        width: 1.5em;
+        opacity: 1;
       }
     }
   }