@fonixtree/magic-design 0.1.57 → 0.1.59

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

@@ -1,26 +1,30 @@
 .video-layout1-wrap {
   display: flex;
   flex-direction: column;
-}
-.video-layout1-wrap .video-item-wrap {
-  height: 4.24rem;
-  position: relative;
-  margin-bottom: 0.2rem;
-}
-.video-layout1-wrap .video-item-wrap:last-child {
-  margin-bottom: 0;
-}
-.video-layout1-wrap .video-item-wrap .play-btn {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 1.2rem;
-  height: 1.2rem;
-  z-index: 1;
-  cursor: pointer;
-}
-.video-layout1-wrap .video-item-wrap .play-btn img {
-  width: 100%;
-  height: 100%;
-}
+
+  .video-item-wrap {
+    height: 212px;
+    position: relative;
+    margin-bottom: 10px;
+
+    &:last-child{
+      margin-bottom: 0;
+    }
+
+    .play-btn {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 60px;
+      height: 60px;
+      z-index: 1;
+      cursor: pointer;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}

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

@@ -192,7 +192,7 @@ function (_super) {
         alt: "",
         src: _playCircle["default"]
       })), !isPlaying && /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        align: data.customize.align,
+        customize: data.customize,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,

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

@@ -2,41 +2,48 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  padding-bottom: 0.72rem;
-}
-.video-layout2-wrap .slider-wrap {
-  width: 100%;
-  overflow: hidden;
-}
-.video-layout2-wrap .slider-wrap .slider-list-wrap {
-  display: flex;
-  transform: translateX(-100%);
-  transition: all 0.3s linear;
-  position: relative;
-}
-.video-layout2-wrap .slider-wrap .slider-list-wrap.noAnimation {
-  animation: none;
-}
-.video-layout2-wrap .slider-wrap .video-item-wrap {
-  height: 4.24rem;
-  position: relative;
-  width: 100%;
-  flex-shrink: 0;
-}
-.video-layout2-wrap .slider-wrap .video-item-wrap:last-child {
-  margin-bottom: 0;
-}
-.video-layout2-wrap .slider-wrap .video-item-wrap .play-btn {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 1.2rem;
-  height: 1.2rem;
-  z-index: 1;
-  cursor: pointer;
-}
-.video-layout2-wrap .slider-wrap .video-item-wrap .play-btn img {
-  width: 100%;
-  height: 100%;
-}
+  padding-bottom: 36px;
+
+  .slider-wrap {
+    width: 100%;
+    overflow: hidden;
+
+    .slider-list-wrap {
+      display: flex;
+      transform: translateX(-100%);
+      transition: all .3s linear;
+      position: relative;
+
+      &.noAnimation {
+        animation: none;
+      }
+    }
+
+    .video-item-wrap {
+      height: 212px;
+      position: relative;
+      width: 100%;
+      flex-shrink: 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .play-btn {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 60px;
+        height: 60px;
+        z-index: 1;
+        cursor: pointer;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}

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

@@ -167,7 +167,7 @@ function (_super) {
       })), data.share.open && !isPlaying && /*#__PURE__*/_react["default"].createElement(_ShareBtn["default"], {
         data: data.share
       })), /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        align: data.customize.align,
+        customize: data.customize,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,
@@ -175,6 +175,7 @@ function (_super) {
         }),
         layout: 'h5-' + data.customize.layout.h5Layout,
         noShare: true,
+        notVertical: true,
         onPlayClick: function onPlayClick() {
           return _this.playOrPause(group);
         },

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

@@ -1,44 +1,57 @@
 .video-layout3-wrap {
   display: flex;
   flex-direction: column;
-}
-.video-layout3-wrap .video-layout3-item-con {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 0.2rem;
-}
-.video-layout3-wrap .video-layout3-item-con:last-child {
-  margin-bottom: 0;
-}
-.video-layout3-wrap .video-item-wrap {
-  height: 4.24rem;
-  position: relative;
-}
-.video-layout3-wrap .video-item-wrap:last-child {
-  margin-bottom: 0;
-}
-.video-layout3-wrap .video-item-wrap .play-btn {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 1.2rem;
-  height: 1.2rem;
-  z-index: 1;
-  cursor: pointer;
-}
-.video-layout3-wrap .video-item-wrap .play-btn img {
-  width: 100%;
-  height: 100%;
-}
-.video-layout3-wrap .video-item-wrap .play-btn.bottomLeft {
-  left: 0.24rem;
-  bottom: 0.2rem;
-  transform: unset;
-  top: unset;
-}
-.video-layout3-wrap .video-item-wrap .video-share-btn {
-  position: absolute;
-  right: 0.24rem;
-  bottom: 0.24rem;
-}
+  .video-tag-container {
+    padding-top: 20px;
+    padding-bottom: 38px;
+  }
+
+  .video-layout3-item-con {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .video-item-wrap {
+    height: 212px;
+    position: relative;
+
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .play-btn {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 60px;
+      height: 60px;
+      z-index: 1;
+      cursor: pointer;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      &.bottomLeft {
+        left: 12px;
+        bottom: 10px;
+        transform: unset;
+        top: unset;
+      }
+    }
+
+    .video-share-btn {
+      position: absolute;
+      right: 12px;
+      bottom: 12px;
+    }
+  }
+}

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

@@ -43,60 +43,19 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-var __assign = void 0 && (void 0).__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-
-      for (var p in s) {
-        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-    }
-
-    return t;
-  };
-
-  return __assign.apply(this, arguments);
-};
-
-var BannerMobile =
+var VideoMobile =
 /** @class */
 function (_super) {
-  __extends(BannerMobile, _super);
+  __extends(VideoMobile, _super);
 
-  function BannerMobile() {
+  function VideoMobile() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
-    _this.state = {}; // padding用统一设置
-
-    _this.getBackgroundStyle = function (item) {
-      // const { data: { spacing }  } = this.props;
-      // const { spacing, background } = data;
-      // const { device } = window.magicDesign;
-      var wrapStyle = {}; // 边距
-      // if (spacing && spacing[device]) {
-      //   wrapStyle = { ...wrapStyle, ...spacing[device] };
-      // }
-      // 背景
-
-      if (item.background) {
-        if (item.background.bgType === 'color') {
-          wrapStyle.backgroundColor = item.background.color;
-          wrapStyle.opacity = item.background.opacity ? item.background.opacity : 1;
-        } else {
-          wrapStyle.backgroundImage = "url(" + item.background.image + ")";
-          wrapStyle.backgroundPosition = 'center';
-          wrapStyle.backgroundSize = 'cover';
-        }
-      }
-
-      return __assign({}, wrapStyle);
-    };
-
+    _this.state = {};
     return _this;
   }
 
-  BannerMobile.prototype.render = function () {
+  VideoMobile.prototype.render = function () {
     var data = this.props.data;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-video-mobile"
@@ -112,9 +71,9 @@ function (_super) {
     }));
   };
 
-  BannerMobile.defaultProps = {};
-  return BannerMobile;
+  VideoMobile.defaultProps = {};
+  return VideoMobile;
 }(_react["default"].Component);
 
-var _default = BannerMobile;
+var _default = VideoMobile;
 exports["default"] = _default;

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

@@ -1,3 +1,4 @@
 .m-video-mobile {
-  position: relative;
-}
+	position: relative;
+
+}

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

@@ -159,7 +159,7 @@ function (_super) {
         alt: "",
         src: _playCircle["default"]
       })), !isPlaying && /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        align: data.customize.align,
+        customize: data.customize,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,

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

@@ -161,7 +161,7 @@ function (_super) {
       alt: "",
       src: _playCircle["default"]
     })), !isFirstGroupPlaying && /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-      align: data.customize.align,
+      customize: data.customize,
       data: firstGroup,
       GAData: __assign(__assign({}, GAData), {
         groupId: firstGroup.id,
@@ -214,7 +214,7 @@ function (_super) {
         alt: "",
         src: _playCircle["default"]
       })), !isPlaying && /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        align: data.customize.align,
+        customize: data.customize,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,

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

@@ -168,7 +168,7 @@ function (_super) {
         alt: "",
         src: _playCircle["default"]
       })), !isPlaying && /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        align: data.customize.align,
+        customize: data.customize,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,

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

@@ -175,7 +175,7 @@ function (_super) {
       })), /*#__PURE__*/_react["default"].createElement("div", {
         className: "video-tag-wrap"
       }, /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        align: data.customize.align,
+        customize: data.customize,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,
@@ -186,7 +186,7 @@ function (_super) {
         onPlayClick: function onPlayClick() {
           return _this.playOrPause(group);
         },
-        position: "relative"
+        position: "absolute"
       })));
     }));
   };

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

@@ -4,9 +4,9 @@
 
   .video-container-wrap {
     display: flex;
-    align-items: center;
     padding: 0px 40px;
     margin-bottom: 40px;
+    align-items: stretch;
 
     &:last-child {
       margin-bottom: 0;
@@ -47,7 +47,8 @@
   }
 
   .video-tag-wrap {
-    padding: 40px;
+    padding: 0 20px;
+    position: relative;
     flex: 1;
   }
 }

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

@@ -175,7 +175,7 @@ function (_super) {
       })), /*#__PURE__*/_react["default"].createElement("div", {
         className: "video-tag-wrap"
       }, /*#__PURE__*/_react["default"].createElement(_VideoTag["default"], {
-        align: data.customize.align,
+        customize: data.customize,
         data: group,
         GAData: __assign(__assign({}, GAData), {
           groupId: group.id,
@@ -186,7 +186,7 @@ function (_super) {
         onPlayClick: function onPlayClick() {
           return _this.playOrPause(group);
         },
-        position: "relative"
+        position: "absolute"
       })));
     }));
   };

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

@@ -5,20 +5,21 @@
   .video-container-wrap {
     display: flex;
     flex-direction: row-reverse;
-    align-items: center;
-    padding: 40px;
+    padding: 0 40px;
+    margin-bottom: 40px;
+    align-items: stretch;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   .video-item-wrap {
     height: 212px;
     position: relative;
-    margin-bottom: 10px;
+    // margin-bottom: 10px;
     width: 440px;
 
-    &:last-child {
-      margin-bottom: 0;
-    }
-
     .play-btn {
       position: absolute;
       top: 50%;
@@ -44,7 +45,8 @@
   }
 
   .video-tag-wrap {
-    padding: 40px;
+    padding: 0 20px;
+    position: relative;
     flex: 1;
   }
 }

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

@@ -318,7 +318,7 @@ function (_super) {
           return _this.setState((_a = {}, _a["hover_" + item.id] = false, _a));
         },
         style: (0, _commonUtil.pxToRem)({
-          width: "calc((100% - " + MOBILE_IMG_SIZE[colNum].gap * (colNum - 1) + "px) / " + colNum + ")"
+          width: "calc((100% - " + (0, _commonUtil.convertToRem)(MOBILE_IMG_SIZE[colNum].gap * (colNum - 1)) + ") / " + colNum + ")"
         })
       }, item.image.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         className: "image",

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

@@ -1,27 +1,40 @@
-.m-Wallet-mobile .headline {
-  margin-bottom: 0.14rem;
-}
-.m-Wallet-mobile .content {
-  display: flex;
-  flex-wrap: wrap;
-}
-.m-Wallet-mobile .content.column_3 .item-wrap .title {
-  top: 13%;
-}
-.m-Wallet-mobile .content.column_3 .item-wrap .amount {
-  bottom: 13%;
-}
-.m-Wallet-mobile .content .item-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  border-radius: 0.2rem;
-}
-.m-Wallet-mobile .content .item-wrap .image {
-  border-radius: 0.2rem;
-  overflow: hidden;
-}
-.m-Wallet-mobile .content .item-wrap .text-content {
-  position: absolute;
-}
+.m-Wallet-mobile {
+
+  .headline {
+    margin-bottom: 7px;
+  }
+
+  .content {
+    display: flex;
+    flex-wrap: wrap;
+
+    &.column_3 {
+      .item-wrap {
+        .title {
+          top: 13%;
+        }
+
+        .amount {
+          bottom: 13%;
+        }
+      }
+    }
+
+    .item-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      border-radius: 10px;
+
+      .image {
+        border-radius: 10px;
+        overflow: hidden;
+      }
+
+      .text-content {
+        position: absolute;
+      }
+    }
+  }
+}

package/lib/composite-comp/bol/config-panels/ImageTextConfig/ImageTextConfigGroup/index.js

@@ -76,8 +76,6 @@ function (_super) {
     _this.state = {};
 
     _this.onClickItem = function (node) {
-      console.log('---group', node);
-
       _this.props.store.setState({
         clickedGroup: node.id
       });

package/lib/composite-comp/bol/config-panels/NewsletterConfig/InputField/index.js

@@ -89,7 +89,6 @@ function (_super) {
 
     var data = this.props.data;
     var textData = data.content;
-    console.log('data', data);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-text-config",
       style: {

package/lib/composite-comp/bol/config-panels/VideoConfig/index.js

@@ -140,10 +140,12 @@ function (_super) {
         name: (0, _locale.i18n)('CUSTOMIZE'),
         value: /*#__PURE__*/_react["default"].createElement(_CustomizeConfig["default"], {
           data: data.customize,
+          defaultVertical: "bottom",
           layoutSource: (0, _coreUtil.isPc)() ? _layout.videoPCLayout : _layout.videoH5Layout,
           selectedLayoutFun: function selectedLayoutFun(v) {
             _this.getLayout(v);
-          }
+          },
+          showVertical: true
         })
       }, {
         key: 'Background',

package/lib/composite-comp/common/config-panels/CustomizeConfig/index.js

@@ -199,7 +199,8 @@ function (_super) {
         isHideAlign = _a.isHideAlign,
         layoutSource = _a.layoutSource,
         selectedLayoutFun = _a.selectedLayoutFun,
-        showVertical = _a.showVertical;
+        showVertical = _a.showVertical,
+        defaultVertical = _a.defaultVertical;
     var showRowNum = this.state.showRowNum;
     var layoutVal = data.layout;
 
@@ -246,7 +247,7 @@ function (_super) {
 
         _this.selfRender();
       },
-      value: (data === null || data === void 0 ? void 0 : data.vertical) || 'top'
+      value: (data === null || data === void 0 ? void 0 : data.vertical) || defaultVertical
     }))), _showRowNum && /*#__PURE__*/_react["default"].createElement("div", {
       className: "selectWrap"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
@@ -278,7 +279,8 @@ function (_super) {
     isHideAlign: false,
     layoutObj: null,
     component: '',
-    showVertical: false
+    showVertical: false,
+    defaultVertical: 'top'
   };
   CustomizeConfig = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer], CustomizeConfig);
   return CustomizeConfig;

package/lib/composite-comp/common/config-panels/SpacingConfig/index.js

@@ -87,7 +87,6 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
       checked: obj.fillUp,
       onChange: function onChange(e) {
-        console.log('ddd fill up', e.target.checked);
         obj.fillUp = e.target.checked;
 
         _this.selfRender();