@fonixtree/magic-design 1.0.5 → 2.0.2

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

@@ -1,293 +1,234 @@
 .image-text-mobile {
-  // display: flex;
-  // flex-direction: column;
-  padding: 17px 0;
-  .headline {
-    margin-bottom: 8px;
-  }
-  .subtitle {
-    margin-bottom: 36px;
-  }
-  .group-wrap .one-card .card-btn-wrap {
-    .card-first-btn, .card-second-btn {
-      width: fit-content;
-    }
-  }
-
-  .btn-wrap {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-
-    .first-btn {
-      margin-top: 36px;
-    }
-    .second-btn {
-      margin-top: 36px;
-      margin-left: 12px;
-    }
-  }
-}
-.normal1 {
-  .group-wrap {
-    padding: 0 15px;
-    width: 100%;
-    .one-card {
-      display: flex;
-      align-items: stretch;
-      padding: 18px;
-      margin-bottom: 8px;
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-      .card-image-wrap {
-        flex-shrink: 0;
-        margin-right: 12px;
-      }
-      .card-content-wrap {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        .card-title {
-          margin-bottom: 6px;
-          text-align: left !important;
-        }
-        .card-text {
-          margin-bottom: 12px;
-          text-align: left !important;
-        }
-        .card-btn-wrap {
-          display: flex;
-          .card-second-btn {
-            margin-left: 12px;
-          }
-        }
-      }
-    }
-  }
-}
-
-.normal2 {
-  .group-wrap {
-    width: 100%;
-    padding: 0 15px;
-    .one-card {
-      width: 100%;
-      padding: 20px 16px;
-      margin-bottom: 36px;
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-      .card-image-wrap {
-        .card-image {
-          width: fit-content;
-          margin: 0 auto;
-        }
-      }
-      .card-content-wrap {
-        .card-title {
-          margin-bottom: 8px;
-        }
-        .card-text {
-          margin-bottom: 16px;
-        }
-        .card-btn-wrap {
-          display: flex;
-          .card-second-btn {
-            margin-left: 12px;
-          }
-        }
-      }
-    }
-  }
-}
-.normal3 {
-  .group-wrap {
-    display: flex;
-    // margin-bottom: 36px;
-    // margin-top: 36px;
-    flex-wrap: wrap;
-    width: 100%;
-    padding: 0 15px;
-
-    .one-card {
-      display: flex;
-      flex-direction: column;
-      .card-image-wrap {
-        width: 100%;
-        padding: 8px;
-        .card-image {
-          // max-height: 107px;
-          width: fit-content;
-          margin: 0 auto;
-        }
-      }
-
-      .card-title {
-        margin-bottom: 4px;
-      }
-
-      .card-text {
-        margin-bottom: 7px;
-      }
-      .card-btn-wrap {
-        display: flex;
-        flex-direction: column;
-      }
-
-      .card-first-btn, .card-second-btn {
-        margin-bottom: 8px;
-      }
-    }
-    .card-margin-bottom {
-      margin-bottom: 10px;
-    }
-  }
-}
-
-.outsideM {
-  .group-wrap {
-    padding: 0 15px;
-    width: 100%;
-    .one-card {
-      margin-top: 35px;
-      position: relative;
-      padding: 30px 10px 20px 36px;
-      .card-image-wrap  {
-        position: absolute;
-        left: 18px;
-        top: 0;
-        transform: translateY(-50%);
-      }
-      .card-content-wrap {
-        .card-title {
-          margin-bottom: 4px;
-          text-align: left !important;
-        }
-        .card-text {
-          margin-bottom: 12px;
-          text-align: left !important;
-        }
-        .card-btn-wrap {
-          display: flex;
-          .card-second-btn {
-            margin-left: 12px;
-          }
-        }
-      }
-    }
-  }
-}
-
-.centerM {
-  .group-wrap {
-    position: relative;
-    width: 100%;
-    &::before {
-      content: '';
-      position: absolute;
-      width: 1px;
-      height: 100%;
-      border-right: 1px dashed #D2D9E5;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-    .one-card {
-      width: calc((100% - 1px)/2);
-      position: relative;
-      padding: 0 14px 16px;
-      &::before {
-        content: '';
-        position: absolute;
-        border-radius: 50%;
-        background: #2F54EB;
-        width: 10px;
-        height: 10px;
-        z-index: 10;
-        border: 2px solid #CCE3FF;
-      }
-      // &::before {
-      //   opacity: 0.2;
-      //   width: 10px;
-      //   height: 10px;
-      // }
-      &:nth-of-type(2n-1) {
-        left: 0;
-        &::before {
-          right: -5px;
-          top: 5px;
-        }
-        // &::after {
-        //   right: -3px;
-        //   top: 7px;
-        // }
-        .card-content-wrap {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-end;
-          .card-title, .card-text {
-            text-align: right !important;
-          }
-          .image-subtext-wrap {
-            flex-direction: row-reverse;
-            .card-image-wrap {
-              margin-left: 8px;
-            }
-            // .card-text {
-            //   .m-meta-text {
-            //     text-align: right !important;
-            //   }
-            // }
-          }
-          .card-btn-wrap {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-end;
-          }
-        }
-      }
-      &:nth-of-type(2n) {
-        left: 50%;
-        &::before {
-          left: -5px;
-          top: 5px;
-        }
-        // &::after {
-        //   left: -3px;
-        //   top: 7px;
-        // }
-        .card-content-wrap {
-          .card-title, .card-text {
-            text-align: left !important;
-          }
-          .image-subtext-wrap {
-            .card-image-wrap {
-              margin-right: 8px;
-            }
-            // .card-text {
-            //   .m-meta-text {
-            //     text-align: left !important;
-            //   }
-            // }
-          }
-        }
-      }
-      .card-content-wrap {
-        .card-title {
-          margin-bottom: 10px;
-        }
-        .image-subtext-wrap {
-          display: flex;
-          margin-bottom: 20px;
-          align-items: center;
-        }
-        .card-btn-wrap {
-          .card-second-btn {
-            margin-top: 12px;
-          }
-        }
-      }
-    }
-  }
-}
+  padding: 0.34rem 0;
+}
+.image-text-mobile .headline {
+  margin-bottom: 0.16rem;
+}
+.image-text-mobile .subtitle {
+  margin-bottom: 0.72rem;
+}
+.image-text-mobile .group-wrap .one-card .card-btn-wrap .card-first-btn,
+.image-text-mobile .group-wrap .one-card .card-btn-wrap .card-second-btn {
+  width: fit-content;
+}
+.image-text-mobile .btn-wrap {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+.image-text-mobile .btn-wrap .first-btn {
+  margin-top: 0.72rem;
+}
+.image-text-mobile .btn-wrap .second-btn {
+  margin-top: 0.72rem;
+  margin-left: 0.24rem;
+}
+.normal1 .group-wrap {
+  padding: 0 0.3rem;
+  width: 100%;
+}
+.normal1 .group-wrap .one-card {
+  display: flex;
+  align-items: stretch;
+  padding: 0.36rem;
+  margin-bottom: 0.16rem;
+}
+.normal1 .group-wrap .one-card:last-of-type {
+  margin-bottom: 0;
+}
+.normal1 .group-wrap .one-card .card-image-wrap {
+  flex-shrink: 0;
+  margin-right: 0.24rem;
+}
+.normal1 .group-wrap .one-card .card-content-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.normal1 .group-wrap .one-card .card-content-wrap .card-title {
+  margin-bottom: 0.12rem;
+  text-align: left !important;
+}
+.normal1 .group-wrap .one-card .card-content-wrap .card-text {
+  margin-bottom: 0.24rem;
+  text-align: left !important;
+}
+.normal1 .group-wrap .one-card .card-content-wrap .card-btn-wrap {
+  display: flex;
+}
+.normal1 .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-second-btn {
+  margin-left: 0.24rem;
+}
+.normal2 .group-wrap {
+  width: 100%;
+  padding: 0 0.3rem;
+}
+.normal2 .group-wrap .one-card {
+  width: 100%;
+  padding: 0.4rem 0.32rem;
+  margin-bottom: 0.72rem;
+}
+.normal2 .group-wrap .one-card:last-of-type {
+  margin-bottom: 0;
+}
+.normal2 .group-wrap .one-card .card-image-wrap .card-image {
+  width: fit-content;
+  margin: 0 auto;
+}
+.normal2 .group-wrap .one-card .card-content-wrap .card-title {
+  margin-bottom: 0.16rem;
+}
+.normal2 .group-wrap .one-card .card-content-wrap .card-text {
+  margin-bottom: 0.32rem;
+}
+.normal2 .group-wrap .one-card .card-content-wrap .card-btn-wrap {
+  display: flex;
+}
+.normal2 .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-second-btn {
+  margin-left: 0.24rem;
+}
+.normal3 .group-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  padding: 0 0.3rem;
+}
+.normal3 .group-wrap .one-card {
+  display: flex;
+  flex-direction: column;
+}
+.normal3 .group-wrap .one-card .card-image-wrap {
+  width: 100%;
+  padding: 0.16rem;
+}
+.normal3 .group-wrap .one-card .card-image-wrap .card-image {
+  width: fit-content;
+  margin: 0 auto;
+}
+.normal3 .group-wrap .one-card .card-title {
+  margin-bottom: 0.08rem;
+}
+.normal3 .group-wrap .one-card .card-text {
+  margin-bottom: 0.14rem;
+}
+.normal3 .group-wrap .one-card .card-btn-wrap {
+  display: flex;
+  flex-direction: column;
+}
+.normal3 .group-wrap .one-card .card-first-btn,
+.normal3 .group-wrap .one-card .card-second-btn {
+  margin-bottom: 0.16rem;
+}
+.normal3 .group-wrap .card-margin-bottom {
+  margin-bottom: 0.2rem;
+}
+.outsideM .group-wrap {
+  padding: 0 0.3rem;
+  width: 100%;
+}
+.outsideM .group-wrap .one-card {
+  margin-top: 0.7rem;
+  position: relative;
+  padding: 0.6rem 0.2rem 0.4rem 0.72rem;
+}
+.outsideM .group-wrap .one-card .card-image-wrap {
+  position: absolute;
+  left: 0.36rem;
+  top: 0;
+  transform: translateY(-50%);
+}
+.outsideM .group-wrap .one-card .card-content-wrap .card-title {
+  margin-bottom: 0.08rem;
+  text-align: left !important;
+}
+.outsideM .group-wrap .one-card .card-content-wrap .card-text {
+  margin-bottom: 0.24rem;
+  text-align: left !important;
+}
+.outsideM .group-wrap .one-card .card-content-wrap .card-btn-wrap {
+  display: flex;
+}
+.outsideM .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-second-btn {
+  margin-left: 0.24rem;
+}
+.centerM .group-wrap {
+  position: relative;
+  width: 100%;
+}
+.centerM .group-wrap::before {
+  content: '';
+  position: absolute;
+  width: 0.02rem;
+  height: 100%;
+  border-right: 0.02rem dashed #D2D9E5;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.centerM .group-wrap .one-card {
+  width: calc((100% - 0.02rem)/2);
+  position: relative;
+  padding: 0 0.28rem 0.32rem;
+}
+.centerM .group-wrap .one-card::before {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  background: #2F54EB;
+  width: 0.2rem;
+  height: 0.2rem;
+  z-index: 10;
+  border: 0.04rem solid #CCE3FF;
+}
+.centerM .group-wrap .one-card:nth-of-type(2n-1) {
+  left: 0;
+}
+.centerM .group-wrap .one-card:nth-of-type(2n-1)::before {
+  right: -0.1rem;
+  top: 0.1rem;
+}
+.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .card-title,
+.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .card-text {
+  text-align: right !important;
+}
+.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .image-subtext-wrap {
+  flex-direction: row-reverse;
+}
+.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .image-subtext-wrap .card-image-wrap {
+  margin-left: 0.16rem;
+}
+.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .card-btn-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.centerM .group-wrap .one-card:nth-of-type(2n) {
+  left: 50%;
+}
+.centerM .group-wrap .one-card:nth-of-type(2n)::before {
+  left: -0.1rem;
+  top: 0.1rem;
+}
+.centerM .group-wrap .one-card:nth-of-type(2n) .card-content-wrap .card-title,
+.centerM .group-wrap .one-card:nth-of-type(2n) .card-content-wrap .card-text {
+  text-align: left !important;
+}
+.centerM .group-wrap .one-card:nth-of-type(2n) .card-content-wrap .image-subtext-wrap .card-image-wrap {
+  margin-right: 0.16rem;
+}
+.centerM .group-wrap .one-card .card-content-wrap .card-title {
+  margin-bottom: 0.2rem;
+}
+.centerM .group-wrap .one-card .card-content-wrap .image-subtext-wrap {
+  display: flex;
+  margin-bottom: 0.4rem;
+  align-items: center;
+}
+.centerM .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-second-btn {
+  margin-top: 0.24rem;
+}

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

@@ -21,6 +21,8 @@ var _businessUtil = require("../../../../../utils/businessUtil");
 
 var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
 
+var _commonUtil = require("../../../../../utils/commonUtil");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -157,10 +159,7 @@ function (_super) {
         currentMaxWidth = _a.currentMaxWidth;
     var wrapStyle = {};
     wrapStyle.alignItems = _AlignSelector.alignItemMap[data.customize.align];
-    var GAData = {
-      moduleId: data.id,
-      moduleName: data.moduleIndex + '.' + data.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(data);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('image-text-pc', data.customize.layout.pcLayout),
       style: wrapStyle

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

@@ -102,10 +102,7 @@ function (_super) {
     //   wrapStyle.backgroundPosition = 'center';
     // }
 
-    var GAData = {
-      moduleId: nodeData.id,
-      moduleName: nodeData.moduleIndex + '.' + nodeData.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(nodeData);
 
     var style = __assign({}, (0, _Text.contentStyle)(nodeData.content.inputField.content));
 

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

@@ -17,6 +17,8 @@ var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/
 
 var _ConfigPanel = require("../../../../core/Designer/ConfigPanel");
 
+var _commonUtil = require("../../../../utils/commonUtil");
+
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -92,10 +94,7 @@ function (_super) {
     var _a;
 
     var nodeData = this.props.nodeData;
-    var GAData = {
-      moduleId: nodeData.id,
-      moduleName: nodeData.moduleIndex + '.' + nodeData.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(nodeData);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('tag-comp-wrap', (_a = {}, _a[nodeData.customize.layout] = true, _a[nodeData.customize.align] = true, _a)),
       onClick: this.onComponentClick

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

@@ -17,6 +17,8 @@ var _components = require("../../../../meta-comp/components");
 
 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); }
@@ -93,10 +95,7 @@ function (_super) {
         nodeData = _b.nodeData,
         mode = _b.mode,
         outputType = _b.outputType;
-    var GAData = {
-      moduleId: nodeData.id,
-      moduleName: nodeData.moduleIndex + '.' + nodeData.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(nodeData);
     var groupWrapContainerStyle = window.magicDesign.device === 'pc' ? 'padding: 16px 20px;' : 'padding: 12px 20px;';
     var style = ".m-text{word-break: break-word;}.m-text .title-wrap{font-weight:500;font-size:20px;}.m-text .sub-title-text{font-size:15px;color:#b7b7b7;margin-top:10px;}.m-text .group-content-wrap{width:100%;}.m-text .group-content-wrap .group-wrap-container{" + groupWrapContainerStyle + "}.m-text .group-content-wrap .group-wrap{display:flex;flex-direction:column;width:100%;}.m-text .group-content-wrap .group-wrap .group-title{font-size:14px;}.m-text .group-content-wrap.col-1 .group-wrap{width:100%;}.m-text .group-content-wrap.col-2{display:grid;grid-template-columns:50% 50%;}.m-text .group-content-wrap.col-3{display:grid;grid-template-columns:33.3% 33.3% 33.3%;}.m-text .group-content-wrap.mobile{display:block;}";
     return /*#__PURE__*/_react["default"].createElement("div", {