@fonixtree/magic-design 1.0.4 → 1.0.6

package/es/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/es/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 () {
@@ -109,12 +111,24 @@ function (_super) {
     _this.getCardStyle = function (source, i) {
       var data = _this.props.data;
       var cardStyle = {
-        width: _this.calcWidth(data.customize.pcRowNum),
-        marginRight: (1 + i) % data.customize.pcRowNum !== 0 ? '2%' : 0,
         alignItems: _AlignSelector.alignItemMap[data.customize.align],
         textAlign: data.customize.align
       };
+
+      if (data.customize.layout.pcLayout === 'leftImage' || data.customize.layout.pcLayout === 'rightImage') {
+        if ((data === null || data === void 0 ? void 0 : data.groupSource.length) > 1 && i != (data === null || data === void 0 ? void 0 : data.groupSource.length) - 1) {
+          cardStyle.marginBottom = 48;
+        }
+
+        cardStyle.alignItems = 'center';
+      } else {
+        cardStyle.marginRight = (1 + i) % data.customize.pcRowNum !== 0 ? '2%' : 0;
+        cardStyle.width = _this.calcWidth(data.customize.pcRowNum);
+        cardStyle.alignItems = _AlignSelector.alignItemMap[data.customize.align];
+      }
+
       var wrapStyle = (0, _businessUtil.computeStyle)(source, window.magicDesign.device);
+      console.log('cc wrapStyle', source, wrapStyle);
       var hoverIndex = _this.state.hoverIndex;
       var hoverStyle = {};
 
@@ -125,6 +139,86 @@ function (_super) {
       return __assign(__assign(__assign({}, cardStyle), wrapStyle), hoverStyle);
     };
 
+    _this.getContentStyle = function () {
+      var data = _this.props.data;
+      return {
+        alignItems: _AlignSelector.alignItemMap[data.customize.align]
+      };
+    };
+
+    _this.getAnotherLayout = function () {
+      var data = _this.props.data;
+      var hoverIndex = _this.state.hoverIndex;
+      var GAData = (0, _commonUtil.getGAData)(data);
+      console.log('ff--image text', data);
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "group-wrap"
+      }, data.groupSource.map(function (source, i) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: source.id,
+          className: "one-card",
+          onMouseEnter: function onMouseEnter() {
+            if (source.hover.open) {
+              _this.setState({
+                hoverIndex: i
+              });
+            }
+          },
+          onMouseLeave: function onMouseLeave() {
+            _this.setState({
+              hoverIndex: -1
+            });
+          },
+          style: _this.getCardStyle(source, i)
+        }, (source.image.open && hoverIndex != i || hoverIndex == i && source.hover.image.open) && /*#__PURE__*/_react["default"].createElement("div", {
+          className: "card-image-wrap"
+        }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+          className: "card-image",
+          data: hoverIndex == i ? source.hover.image : source.image,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          }),
+          maxWidth: 654,
+          minWidth: 300,
+          scale: 0.5
+        })), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "content-wrap",
+          style: _this.getContentStyle()
+        }, (source.title.open && hoverIndex != i || hoverIndex == i && source.hover.title.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+          className: "card-title",
+          data: hoverIndex == i ? source.hover.title : source.title,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }), (source.text.open && hoverIndex != i || hoverIndex == i && source.hover.text.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+          className: "card-text",
+          data: hoverIndex == i ? source.hover.text : source.text,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "card-btn-wrap"
+        }, (source.button.open && hoverIndex != i || source.hover.button.open && hoverIndex == i) && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+          className: "card-first-btn",
+          data: hoverIndex == i ? source.hover.button : source.button,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }), (source.secondButton.open && hoverIndex != i || source.hover.secondButton.open && hoverIndex == i) && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+          className: "card-second-btn",
+          data: hoverIndex == i ? source.hover.secondButton : source.secondButton,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }))));
+      })));
+    };
+
     return _this;
   }
 
@@ -157,14 +251,11 @@ 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
-    }, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    }, data.customize.layout.pcLayout === 'leftImage' || data.customize.layout.pcLayout === 'rightImage' ? this.getAnotherLayout() : (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
       className: "group-wrap"
     }, data.groupSource.map(function (source, i) {
       return /*#__PURE__*/_react["default"].createElement("div", {