@fonixtree/magic-design 0.1.15 → 0.1.16

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

@@ -1,103 +1,84 @@
 .m-carousel-mobile {
   position: relative;
   width: 100%;
-
-  .content {
-    display: flex;
-    margin: 0 auto;
-  }
-
-  .slider-wrap {
-    width: 100%;
-    margin: 0 auto;
-    line-height: 1;
-
-    .slick-list {
-      // margin-left: -11px;
-      // margin-right: -11px;
-      padding: 0;
-
-      &:hover {
-        padding-top: 100px;
-        margin-top: -100px;
-        padding-bottom: 100px;
-        margin-bottom: -100px;
-      }
-
-      .slick-track {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-      }
-    }
-
-    .img-wrap {
-      .img {
-        width: fit-content;
-        height: fit-content;
-        display: block;
-        margin: 0 auto;
-      }
-
-      .title {
-        display: flex;
-        justify-content: center;
-        margin-top: 12px;
-      }
-
-      .text {
-        display: flex;
-        justify-content: center;
-        margin-top: 6px;
-      }
-
-      .tags {
-        margin-top: 8px;
-        margin-bottom: 12px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-
-        >div {
-          margin-right: 8px;
-
-          &:last-child {
-            margin-right: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .swiper-ban {
-    position: absolute;
-    width: 100%;
-    bottom: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .ban {
-      font-size: 8px;
-      width: 1em;
-      height: 1em;
-      border-radius: 50%;
-      background: #FFF;
-      cursor: inherit;
-      margin-right: 10px;
-      transition: all .5s;
-
-      &:last-child {
-        margin-right: 0;
-      }
-
-      &.active {
-        width: 2em;
-        height: 1em;
-        border-radius: 100px;
-        opacity: 1;
-      }
-    }
-  }
-}
+}
+.m-carousel-mobile .content {
+  display: flex;
+  margin: 0 auto;
+}
+.m-carousel-mobile .slider-wrap {
+  width: 100%;
+  margin: 0 auto;
+  line-height: 1;
+}
+.m-carousel-mobile .slider-wrap .slick-list {
+  padding: 0;
+}
+.m-carousel-mobile .slider-wrap .slick-list:hover {
+  padding-top: 2rem;
+  margin-top: -2rem;
+  padding-bottom: 2rem;
+  margin-bottom: -2rem;
+}
+.m-carousel-mobile .slider-wrap .slick-list .slick-track {
+  display: flex;
+  align-items: center;
+  gap: 0.24rem;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .img {
+  width: fit-content;
+  height: fit-content;
+  display: block;
+  margin: 0 auto;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .title {
+  display: flex;
+  justify-content: center;
+  margin-top: 0.24rem;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .text {
+  display: flex;
+  justify-content: center;
+  margin-top: 0.12rem;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .tags {
+  margin-top: 0.16rem;
+  margin-bottom: 0.24rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .tags > div {
+  margin-right: 0.16rem;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .tags > div:last-child {
+  margin-right: 0;
+}
+.m-carousel-mobile .swiper-ban {
+  position: absolute;
+  width: 100%;
+  bottom: 0.12rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.m-carousel-mobile .swiper-ban .ban {
+  font-size: 0.16rem;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  background: #FFF;
+  cursor: inherit;
+  margin-right: 0.2rem;
+  transition: all 0.5s;
+}
+.m-carousel-mobile .swiper-ban .ban:last-child {
+  margin-right: 0;
+}
+.m-carousel-mobile .swiper-ban .ban.active {
+  width: 2em;
+  height: 1em;
+  border-radius: 2rem;
+  opacity: 1;
+}

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

@@ -11,6 +11,8 @@ var _defaultJSON = require("./defaultJSON");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
+var _commonUtil = require("../../../../utils/commonUtil");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -84,9 +86,9 @@ function (_super) {
       width: content.width + "%"
     } : {};
     return /*#__PURE__*/_react["default"].createElement("div", {
-      style: style
+      style: (0, _commonUtil.pxToRem)(style)
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      style: lineStyle
+      style: (0, _commonUtil.pxToRem)(lineStyle)
     }));
   };
 

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

@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _components = require("../../../../../meta-comp/components");
 
+var _commonUtil = require("../../../../../utils/commonUtil");
+
 var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
 
 require("./index.less");
@@ -131,16 +133,16 @@ function (_super) {
         className: (0, _classnames["default"])('line', {
           isHorizontal: isHorizontal
         }),
-        style: isHorizontal ? {
+        style: isHorizontal ? (0, _commonUtil.pxToRem)({
           gap: MOBILE_IMG_SIZE[colNum].gap
-        } : {}
+        }) : {}
       }, arr.map(function (item) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: item.id,
           className: "img-wrap",
-          style: {
+          style: (0, _commonUtil.pxToRem)({
             width: "calc((100% - " + MOBILE_IMG_SIZE[colNum].gap * (colNum - 1) + "px) / " + colNum + ")"
-          }
+          })
         }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
           data: item.image,
           GAData: __assign(__assign({}, GAData), {

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

@@ -1,22 +1,15 @@
-.m-image-gallery-mobile {
-  .content {
-    .line {
-      margin-bottom: 12px;
-
-      &.isHorizontal {
-        display: flex;
-        justify-content: flex-start;
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      .img-wrap {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-  }
-}
+.m-image-gallery-mobile .content .line {
+  margin-bottom: 0.24rem;
+}
+.m-image-gallery-mobile .content .line.isHorizontal {
+  display: flex;
+  justify-content: flex-start;
+}
+.m-image-gallery-mobile .content .line:last-child {
+  margin-bottom: 0;
+}
+.m-image-gallery-mobile .content .line .img-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -15,6 +15,8 @@ var _components = require("../../../../../meta-comp/components");
 
 var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
 
+var _commonUtil = require("../../../../../utils/commonUtil");
+
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -154,7 +156,7 @@ function (_super) {
       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)
+        style: (0, _commonUtil.pxToRem)(_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(_components.MetaImage, {
@@ -215,7 +217,7 @@ function (_super) {
         })
       })), /*#__PURE__*/_react["default"].createElement("div", {
         className: "card-btn-wrap",
-        style: cardBtnStyle
+        style: (0, _commonUtil.pxToRem)(cardBtnStyle)
       }, source.button.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         className: "card-first-btn",
         data: source.button,