@fonixtree/magic-design 0.1.15 → 0.1.17

package/es/assets/less/input.less

@@ -16,4 +16,7 @@
       height: 30px;
     }
   }
+  &:focus {
+    box-shadow: none
+  }
 }

package/es/common/ImageModal/utils.js

@@ -373,9 +373,7 @@ var fileUpload = function fileUpload(_a, cb) {
 
         case 4:
           error_1 = _b.sent();
-
-          _antd.message.warning(fileStatus[res.uploadState]);
-
+          console.log(error_1);
           return [3
           /*break*/
           , 5];
@@ -417,7 +415,8 @@ var uploadFileCheck = function uploadFileCheck(_a, chunks, fileName, cb) {
             return [2
             /*return*/
             ]; // 拦截停下
-          }
+          } // 曾经删除过，已恢复 不需要上传
+
 
           if (res.uploadState == 3) {
             _antd.message.warning(fileStatus[res.uploadState]);
@@ -460,8 +459,7 @@ var uploadFileCheck = function uploadFileCheck(_a, chunks, fileName, cb) {
                 formData: formData
               };
             });
-          } // 说明曾经上传过，需要过滤一下，曾经上传过的就不用再上传了
-          else {
+          } else {
             formDataList = chunks.filter(function (_, index) {
               return !doneFileList.includes(index);
             }).map(function (item, index) {

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

@@ -17,6 +17,8 @@ var _mobx = require("../../../../../mobx");
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
+var _commonUtil = require("../../../../../utils/commonUtil");
+
 var _AlignSelector = require("../../../../../common/AlignSelector");
 
 var _components = require("../../../../../meta-comp/components");
@@ -257,10 +259,10 @@ function (_super) {
 
           return (_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.goTo(i);
         },
-        style: {
+        style: (0, _commonUtil.pxToRem)({
           backgroundColor: i == carouseIndex ? data.setting.dots.hoverColor.mobile : data.setting.dots.color.mobile,
           fontSize: i == carouseIndex ? data.setting.dots.hoverSize.mobile : data.setting.dots.size.mobile
-        }
+        })
       });
     })));
   };

package/es/composite-comp/bol/components/Carousel/mobile/index.js

@@ -15,6 +15,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
+var _commonUtil = require("../../../../../utils/commonUtil");
+
 var _components = require("../../../../../meta-comp/components");
 
 require("slick-carousel/slick/slick.css");
@@ -230,9 +232,9 @@ function (_super) {
       className: "m-carousel-mobile"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "content",
-      style: {
+      style: (0, _commonUtil.pxToRem)({
         paddingBottom: data.setting.dots.open && data.groupSource.length / floorColNum > 1 ? dotsSpace : '0'
-      }
+      })
     }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {
         return _this.sliderRef = slider;
@@ -298,10 +300,10 @@ function (_super) {
         onClick: function onClick() {
           return _this.sliderRef.slickGoTo(i);
         },
-        style: {
+        style: (0, _commonUtil.pxToRem)({
           backgroundColor: i == sliderIndex ? data.setting.dots.hoverColor : data.setting.dots.color,
           fontSize: i == sliderIndex ? data.setting.dots.hoverSize : data.setting.dots.size
-        }
+        })
       });
     }))));
   };

package/es/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/es/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/es/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,

package/es/composite-comp/bol/components/Newsletter/index.js

@@ -17,6 +17,8 @@ var _Text = require("../../../../meta-comp/components/Text");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
+var _commonUtil = require("../../../../utils/commonUtil");
+
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -117,7 +119,7 @@ function (_super) {
       className: "input-wrap"
     }, /*#__PURE__*/_react["default"].createElement("input", {
       placeholder: nodeData.content.inputField.placeholder,
-      style: style,
+      style: (0, _commonUtil.pxToRem)(style),
       type: "text"
     })), nodeData.content.inputField.open && /*#__PURE__*/_react["default"].createElement("div", {
       className: "btn-wrap"

package/es/composite-comp/bol/components/Video/components/ShareBtn/index.js

@@ -109,10 +109,10 @@ function (_super) {
       className: (0, _classnames["default"])('video-share-btn', {
         pc: pc
       }),
-      style: {
+      style: (0, _commonUtil.pxToRem)({
         right: padding,
         bottom: padding
-      }
+      })
     }, /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
       className: "share-img",

package/es/composite-comp/bol/components/Video/components/VideoTag/index.js

@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _components = require("../../../../../../meta-comp/components");
 
+var _commonUtil = require("../../../../../../utils/commonUtil");
+
 var _playCircle = _interopRequireDefault(require("../../imgs/play-circle.png"));
 
 var _index = _interopRequireDefault(require("../ShareBtn/index"));
@@ -76,10 +78,10 @@ function (_super) {
     var showBtn = data.video.playButton == 'Bottom Left' && !['h5-layout3', 'pc-layout4', 'pc-layout5'].includes(layout);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-tag-container",
-      style: {
+      style: (0, _commonUtil.pxToRem)({
         position: position,
         padding: padding
-      }
+      })
     }, showBtn && /*#__PURE__*/_react["default"].createElement("div", {
       className: "left-wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -126,9 +126,9 @@ function (_super) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: group.id,
         className: "video-item-wrap",
-        style: {
+        style: pxToRem({
           height: data.mobileHeight
-        }
+        })
       }, /*#__PURE__*/_react["default"].createElement(_common.Video, {
         ref: function ref(el) {
           if (!_this.videoRefMap[group.id]) {

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

@@ -158,9 +158,9 @@ function (_super) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: group.id,
         className: "video-item-wrap",
-        style: {
+        style: (0, _commonUtil.pxToRem)({
           height: data.mobileHeight
-        }
+        })
       }, /*#__PURE__*/_react["default"].createElement(_common.Video, {
         ref: function ref(el) {
           if (!_this.videoRefMap[group.id]) {

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

@@ -128,9 +128,9 @@ function (_super) {
       }, /*#__PURE__*/_react["default"].createElement("div", {
         key: group.id,
         className: "video-item-wrap",
-        style: {
+        style: (0, _commonUtil.pxToRem)({
           height: data.mobileHeight
-        }
+        })
       }, /*#__PURE__*/_react["default"].createElement(_common.Video, {
         ref: function ref(el) {
           if (!_this.videoRefMap[group.id]) {

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

@@ -298,9 +298,9 @@ function (_super) {
       data: data.title.headline
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "content column_" + colNum,
-      style: {
+      style: (0, _commonUtil.pxToRem)({
         gap: MOBILE_IMG_SIZE[colNum].gap
-      }
+      })
     }, data.groupSource.map(function (item) {
       var _amount = _this.getAmount(item.sourceType);
 
@@ -317,9 +317,9 @@ function (_super) {
 
           return _this.setState((_a = {}, _a["hover_" + item.id] = false, _a));
         },
-        style: {
+        style: (0, _commonUtil.pxToRem)({
           width: "calc((100% - " + MOBILE_IMG_SIZE[colNum].gap * (colNum - 1) + "px) / " + colNum + ")"
-        }
+        })
       }, item.image.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         className: "image",
         data: item.hover.open && item.hover.image.open && _this.state["hover_" + item.id] ? item.hover.image : item.image,

package/es/decorator/compositeDecorator.js

@@ -13,6 +13,8 @@ var _mobx = require("../mobx");
 
 var _constants = require("../constants");
 
+var _commonUtil = require("../utils/commonUtil");
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -254,14 +256,14 @@ function compositeDecorator(WrappedComponent) {
         onClick: this.onCompositeCompClick,
         onMouseEnter: this.onMouseEnter,
         onMouseLeave: this.onMouseLeave,
-        style: this.getCompositeStyle()
+        style: (0, _commonUtil.pxToRem)(this.getCompositeStyle())
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "composite_mask",
         style: this.getMaskStyle()
       }, clickedFloor !== nodeData.id && /*#__PURE__*/_react["default"].createElement("span", {
         style: floorNameStyle
       }, (_a = _constants.compInfoMap[nodeData.type]) === null || _a === void 0 ? void 0 : _a.name)), /*#__PURE__*/_react["default"].createElement("div", {
-        style: this.getWrapStyle()
+        style: (0, _commonUtil.pxToRem)(this.getWrapStyle())
       }, /*#__PURE__*/_react["default"].createElement(WrappedComponent, this.props)));
     };
 

package/es/meta-comp/components/Button/index.js

@@ -17,6 +17,8 @@ var _coreUtil = require("../../../utils/coreUtil");
 
 var _decorator = require("../../../decorator");
 
+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); }
@@ -149,7 +151,7 @@ function (_super) {
           hover: false
         });
       },
-      style: __assign({}, style)
+      style: (0, _commonUtil.pxToRem)(__assign({}, style))
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('btnContent', {
         horizontal: iconLayout === 'left' || iconLayout === 'right'

package/es/meta-comp/components/Image/index.js

@@ -17,6 +17,8 @@ var _pcDefImg = _interopRequireDefault(require("./image/pcDefImg.png"));
 
 var _coreUtil = require("../../../utils/coreUtil");
 
+var _commonUtil = require("../../../utils/commonUtil");
+
 var _decorator = require("../../../decorator");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -201,7 +203,7 @@ function (_super) {
       onMouseEnter: this.mouseEnterImg,
       onMouseLeave: this.mouseLeaveImg,
       src: srcImg,
-      style: this.getStyle()
+      style: (0, _commonUtil.pxToRem)(this.getStyle())
     }), areas && areas.length > 0 && areas.map(function (v, i) {
       var aStyle = {
         position: 'absolute',
@@ -216,7 +218,7 @@ function (_super) {
           e.stopPropagation();
           (0, _coreUtil.clickUrl)(v.inputVal);
         },
-        style: aStyle
+        style: (0, _commonUtil.pxToRem)(aStyle)
       });
     })));
   };

package/es/meta-comp/components/Text/index.js

@@ -534,7 +534,7 @@ function (_super) {
       onKeyDown: function onKeyDown(e) {
         e.stopPropagation();
       },
-      style: __assign({}, style),
+      style: (0, _commonUtil.pxToRem)(__assign({}, style)),
       suppressContentEditableWarning: true
     });
   };

package/es/utils/commonUtil.js

@@ -16,6 +16,7 @@ exports.getColorRgba = void 0;
 exports.getPageDataMap = getPageDataMap;
 exports.nextTick = exports.navigateTo = exports.importAsync = exports.getUrlParams = void 0;
 exports.pushGA = pushGA;
+exports.pxToRem = void 0;
 exports.shareFacebook = shareFacebook;
 exports.shareLinkedin = shareLinkedin;
 exports.shareTwitter = shareTwitter;
@@ -172,6 +173,8 @@ var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
     };
   }
 };
+/* eslint-disable no-restricted-syntax */
+
 
 /**
  * 安全获取数据
@@ -708,5 +711,46 @@ var asyncNextTick = function asyncNextTick(asyncFunc, interval, count) {
     });
   });
 };
+/** px to rem */
+
+
+exports.asyncNextTick = asyncNextTick;
+
+var pxToRem = function pxToRem(styleObj) {
+  if (window.magicDesign.device === 'pc' || window.magicDesign.mode === 'designer') {
+    return styleObj;
+  }
+
+  var remObj = {};
+
+  var convertToRem = function convertToRem(value) {
+    var pxValue = parseFloat(value);
+    var remValue = pxValue / 50; // 假设1rem = 50px
+
+    return remValue + "rem";
+  };
+
+  for (var key in styleObj) {
+    if (styleObj.hasOwnProperty(key)) {
+      var value = styleObj[key];
+
+      if (typeof value === 'string' && value.endsWith('px')) {
+        remObj[key] = key === 'opacity' || key === 'lineHeight' ? value : convertToRem(value);
+      } else if (typeof value === 'number') {
+        remObj[key] = convertToRem(value);
+      } else if ((key === 'padding' || key === 'margin') && typeof value === 'string') {
+        var paddingValues = value.split(' ');
+        var remPaddingValues = paddingValues.map(function (paddingValue) {
+          return paddingValue.endsWith('px') ? convertToRem(paddingValue) : paddingValue;
+        });
+        remObj[key] = remPaddingValues.join(' ');
+      } else {
+        remObj[key] = value;
+      }
+    }
+  }
+
+  return remObj;
+};
 
-exports.asyncNextTick = asyncNextTick;
+exports.pxToRem = pxToRem;

package/lib/assets/less/input.less

@@ -16,4 +16,7 @@
       height: 30px;
     }
   }
+  &:focus {
+    box-shadow: none
+  }
 }

package/lib/common/ImageModal/utils.js

@@ -373,9 +373,7 @@ var fileUpload = function fileUpload(_a, cb) {
 
         case 4:
           error_1 = _b.sent();
-
-          _antd.message.warning(fileStatus[res.uploadState]);
-
+          console.log(error_1);
           return [3
           /*break*/
           , 5];
@@ -417,7 +415,8 @@ var uploadFileCheck = function uploadFileCheck(_a, chunks, fileName, cb) {
             return [2
             /*return*/
             ]; // 拦截停下
-          }
+          } // 曾经删除过，已恢复 不需要上传
+
 
           if (res.uploadState == 3) {
             _antd.message.warning(fileStatus[res.uploadState]);
@@ -460,8 +459,7 @@ var uploadFileCheck = function uploadFileCheck(_a, chunks, fileName, cb) {
                 formData: formData
               };
             });
-          } // 说明曾经上传过，需要过滤一下，曾经上传过的就不用再上传了
-          else {
+          } else {
             formDataList = chunks.filter(function (_, index) {
               return !doneFileList.includes(index);
             }).map(function (item, index) {

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

@@ -17,6 +17,8 @@ var _mobx = require("../../../../../mobx");
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
+var _commonUtil = require("../../../../../utils/commonUtil");
+
 var _AlignSelector = require("../../../../../common/AlignSelector");
 
 var _components = require("../../../../../meta-comp/components");
@@ -257,10 +259,10 @@ function (_super) {
 
           return (_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.goTo(i);
         },
-        style: {
+        style: (0, _commonUtil.pxToRem)({
           backgroundColor: i == carouseIndex ? data.setting.dots.hoverColor.mobile : data.setting.dots.color.mobile,
           fontSize: i == carouseIndex ? data.setting.dots.hoverSize.mobile : data.setting.dots.size.mobile
-        }
+        })
       });
     })));
   };

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

@@ -15,6 +15,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
+var _commonUtil = require("../../../../../utils/commonUtil");
+
 var _components = require("../../../../../meta-comp/components");
 
 require("slick-carousel/slick/slick.css");
@@ -230,9 +232,9 @@ function (_super) {
       className: "m-carousel-mobile"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "content",
-      style: {
+      style: (0, _commonUtil.pxToRem)({
         paddingBottom: data.setting.dots.open && data.groupSource.length / floorColNum > 1 ? dotsSpace : '0'
-      }
+      })
     }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {
         return _this.sliderRef = slider;
@@ -298,10 +300,10 @@ function (_super) {
         onClick: function onClick() {
           return _this.sliderRef.slickGoTo(i);
         },
-        style: {
+        style: (0, _commonUtil.pxToRem)({
           backgroundColor: i == sliderIndex ? data.setting.dots.hoverColor : data.setting.dots.color,
           fontSize: i == sliderIndex ? data.setting.dots.hoverSize : data.setting.dots.size
-        }
+        })
       });
     }))));
   };

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/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,

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

@@ -17,6 +17,8 @@ var _Text = require("../../../../meta-comp/components/Text");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
+var _commonUtil = require("../../../../utils/commonUtil");
+
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -117,7 +119,7 @@ function (_super) {
       className: "input-wrap"
     }, /*#__PURE__*/_react["default"].createElement("input", {
       placeholder: nodeData.content.inputField.placeholder,
-      style: style,
+      style: (0, _commonUtil.pxToRem)(style),
       type: "text"
     })), nodeData.content.inputField.open && /*#__PURE__*/_react["default"].createElement("div", {
       className: "btn-wrap"

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

@@ -109,10 +109,10 @@ function (_super) {
       className: (0, _classnames["default"])('video-share-btn', {
         pc: pc
       }),
-      style: {
+      style: (0, _commonUtil.pxToRem)({
         right: padding,
         bottom: padding
-      }
+      })
     }, /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
       className: "share-img",

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

@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _components = require("../../../../../../meta-comp/components");
 
+var _commonUtil = require("../../../../../../utils/commonUtil");
+
 var _playCircle = _interopRequireDefault(require("../../imgs/play-circle.png"));
 
 var _index = _interopRequireDefault(require("../ShareBtn/index"));
@@ -76,10 +78,10 @@ function (_super) {
     var showBtn = data.video.playButton == 'Bottom Left' && !['h5-layout3', 'pc-layout4', 'pc-layout5'].includes(layout);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-tag-container",
-      style: {
+      style: (0, _commonUtil.pxToRem)({
         position: position,
         padding: padding
-      }
+      })
     }, showBtn && /*#__PURE__*/_react["default"].createElement("div", {
       className: "left-wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -126,9 +126,9 @@ function (_super) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: group.id,
         className: "video-item-wrap",
-        style: {
+        style: pxToRem({
           height: data.mobileHeight
-        }
+        })
       }, /*#__PURE__*/_react["default"].createElement(_common.Video, {
         ref: function ref(el) {
           if (!_this.videoRefMap[group.id]) {

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

@@ -158,9 +158,9 @@ function (_super) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: group.id,
         className: "video-item-wrap",
-        style: {
+        style: (0, _commonUtil.pxToRem)({
           height: data.mobileHeight
-        }
+        })
       }, /*#__PURE__*/_react["default"].createElement(_common.Video, {
         ref: function ref(el) {
           if (!_this.videoRefMap[group.id]) {

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

@@ -128,9 +128,9 @@ function (_super) {
       }, /*#__PURE__*/_react["default"].createElement("div", {
         key: group.id,
         className: "video-item-wrap",
-        style: {
+        style: (0, _commonUtil.pxToRem)({
           height: data.mobileHeight
-        }
+        })
       }, /*#__PURE__*/_react["default"].createElement(_common.Video, {
         ref: function ref(el) {
           if (!_this.videoRefMap[group.id]) {

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

@@ -298,9 +298,9 @@ function (_super) {
       data: data.title.headline
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "content column_" + colNum,
-      style: {
+      style: (0, _commonUtil.pxToRem)({
         gap: MOBILE_IMG_SIZE[colNum].gap
-      }
+      })
     }, data.groupSource.map(function (item) {
       var _amount = _this.getAmount(item.sourceType);
 
@@ -317,9 +317,9 @@ function (_super) {
 
           return _this.setState((_a = {}, _a["hover_" + item.id] = false, _a));
         },
-        style: {
+        style: (0, _commonUtil.pxToRem)({
           width: "calc((100% - " + MOBILE_IMG_SIZE[colNum].gap * (colNum - 1) + "px) / " + colNum + ")"
-        }
+        })
       }, item.image.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         className: "image",
         data: item.hover.open && item.hover.image.open && _this.state["hover_" + item.id] ? item.hover.image : item.image,

package/lib/decorator/compositeDecorator.js

@@ -13,6 +13,8 @@ var _mobx = require("../mobx");
 
 var _constants = require("../constants");
 
+var _commonUtil = require("../utils/commonUtil");
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -254,14 +256,14 @@ function compositeDecorator(WrappedComponent) {
         onClick: this.onCompositeCompClick,
         onMouseEnter: this.onMouseEnter,
         onMouseLeave: this.onMouseLeave,
-        style: this.getCompositeStyle()
+        style: (0, _commonUtil.pxToRem)(this.getCompositeStyle())
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "composite_mask",
         style: this.getMaskStyle()
       }, clickedFloor !== nodeData.id && /*#__PURE__*/_react["default"].createElement("span", {
         style: floorNameStyle
       }, (_a = _constants.compInfoMap[nodeData.type]) === null || _a === void 0 ? void 0 : _a.name)), /*#__PURE__*/_react["default"].createElement("div", {
-        style: this.getWrapStyle()
+        style: (0, _commonUtil.pxToRem)(this.getWrapStyle())
       }, /*#__PURE__*/_react["default"].createElement(WrappedComponent, this.props)));
     };
 

package/lib/meta-comp/components/Button/index.js

@@ -17,6 +17,8 @@ var _coreUtil = require("../../../utils/coreUtil");
 
 var _decorator = require("../../../decorator");
 
+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); }
@@ -149,7 +151,7 @@ function (_super) {
           hover: false
         });
       },
-      style: __assign({}, style)
+      style: (0, _commonUtil.pxToRem)(__assign({}, style))
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('btnContent', {
         horizontal: iconLayout === 'left' || iconLayout === 'right'

package/lib/meta-comp/components/Image/index.js

@@ -17,6 +17,8 @@ var _pcDefImg = _interopRequireDefault(require("./image/pcDefImg.png"));
 
 var _coreUtil = require("../../../utils/coreUtil");
 
+var _commonUtil = require("../../../utils/commonUtil");
+
 var _decorator = require("../../../decorator");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -201,7 +203,7 @@ function (_super) {
       onMouseEnter: this.mouseEnterImg,
       onMouseLeave: this.mouseLeaveImg,
       src: srcImg,
-      style: this.getStyle()
+      style: (0, _commonUtil.pxToRem)(this.getStyle())
     }), areas && areas.length > 0 && areas.map(function (v, i) {
       var aStyle = {
         position: 'absolute',
@@ -216,7 +218,7 @@ function (_super) {
           e.stopPropagation();
           (0, _coreUtil.clickUrl)(v.inputVal);
         },
-        style: aStyle
+        style: (0, _commonUtil.pxToRem)(aStyle)
       });
     })));
   };

package/lib/meta-comp/components/Text/index.js

@@ -534,7 +534,7 @@ function (_super) {
       onKeyDown: function onKeyDown(e) {
         e.stopPropagation();
       },
-      style: __assign({}, style),
+      style: (0, _commonUtil.pxToRem)(__assign({}, style)),
       suppressContentEditableWarning: true
     });
   };

package/lib/utils/commonUtil.js

@@ -16,6 +16,7 @@ exports.getColorRgba = void 0;
 exports.getPageDataMap = getPageDataMap;
 exports.nextTick = exports.navigateTo = exports.importAsync = exports.getUrlParams = void 0;
 exports.pushGA = pushGA;
+exports.pxToRem = void 0;
 exports.shareFacebook = shareFacebook;
 exports.shareLinkedin = shareLinkedin;
 exports.shareTwitter = shareTwitter;
@@ -172,6 +173,8 @@ var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
     };
   }
 };
+/* eslint-disable no-restricted-syntax */
+
 
 /**
  * 安全获取数据
@@ -708,5 +711,46 @@ var asyncNextTick = function asyncNextTick(asyncFunc, interval, count) {
     });
   });
 };
+/** px to rem */
+
+
+exports.asyncNextTick = asyncNextTick;
+
+var pxToRem = function pxToRem(styleObj) {
+  if (window.magicDesign.device === 'pc' || window.magicDesign.mode === 'designer') {
+    return styleObj;
+  }
+
+  var remObj = {};
+
+  var convertToRem = function convertToRem(value) {
+    var pxValue = parseFloat(value);
+    var remValue = pxValue / 50; // 假设1rem = 50px
+
+    return remValue + "rem";
+  };
+
+  for (var key in styleObj) {
+    if (styleObj.hasOwnProperty(key)) {
+      var value = styleObj[key];
+
+      if (typeof value === 'string' && value.endsWith('px')) {
+        remObj[key] = key === 'opacity' || key === 'lineHeight' ? value : convertToRem(value);
+      } else if (typeof value === 'number') {
+        remObj[key] = convertToRem(value);
+      } else if ((key === 'padding' || key === 'margin') && typeof value === 'string') {
+        var paddingValues = value.split(' ');
+        var remPaddingValues = paddingValues.map(function (paddingValue) {
+          return paddingValue.endsWith('px') ? convertToRem(paddingValue) : paddingValue;
+        });
+        remObj[key] = remPaddingValues.join(' ');
+      } else {
+        remObj[key] = value;
+      }
+    }
+  }
+
+  return remObj;
+};
 
-exports.asyncNextTick = asyncNextTick;
+exports.pxToRem = pxToRem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",
@@ -29,6 +29,7 @@
     "mobx": "6.6.1",
     "mobx-react": "7.5.2",
     "moment": "2.29.3",
+    "postcss-pxtorem": "^6.0.0",
     "ramda": "^0.28.0",
     "react-color": "2.17.0",
     "react-router-dom": "5.3.0",