@fonixtree/magic-design 0.0.38 → 0.0.40

package/es/composite-comp/common/components/ProductItem/index.less

@@ -68,11 +68,9 @@
         font-family: 'Montserrat';
         font-style: normal;
         font-weight: 700;
-        font-size: 8px;
+        font-size: 12px;
         line-height: 15px;
-        color: #fff;
-        padding: 0 4px;
-        background-color: #CE1126;
+        color: #2F3043;
       }
 
       .old-price {

package/es/composite-comp/dito/components/MobileNavigation/defaultJSON.js

@@ -7,8 +7,6 @@ exports.getDefaultJSON = exports.MobileNavGroupSourceJSON = void 0;
 
 var _uuid = require("uuid");
 
-var _locale = require("../../../../locale");
-
 var MobileNavGroupSourceJSON = function MobileNavGroupSourceJSON() {
   var groupId = (0, _uuid.v4)();
   return {
@@ -39,7 +37,7 @@ var MobileNavGroupSourceJSON = function MobileNavGroupSourceJSON() {
       open: true,
       type: 'TEXT',
       specialContent: [],
-      text: (0, _locale.i18n)('NAVIGATION_NAME'),
+      text: 'name',
       content: {
         sizeType: 'Headline 1',
         fontFamily: 'Open Sans',

package/es/composite-comp/dito/components/MobileNavigation/mobile/index.js

@@ -11,9 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
-var _AlignSelector = require("../../../../../common/AlignSelector");
-
-var _businessUtil = require("../../../../../utils/businessUtil");
+var _components = require("../../../../../meta-comp/components");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -57,25 +55,12 @@ function (_super) {
 
     _this.getCardStyle = function (source, i) {
       var data = _this.props.data;
-      var cardStyle = {
-        textAlign: data.customize.align
-      };
-
-      if (data.customize.layout.h5Layout !== 'centerM' && data.customize.layout.h5Layout !== 'normal1') {
-        cardStyle.alignItems = _AlignSelector.alignItemMap[data.customize.align];
-      }
+      var cardStyle = {};
+      cardStyle.marginRight = (1 + i) % data.customize.rowNum !== 0 ? '2%' : 0;
 
-      if (data.customize.layout.h5Layout === 'normal3') {
+      if (data.customize.layout === 'newline') {
+        cardStyle.marginBottom = 12;
         cardStyle.width = _this.calcWidth(data.customize.rowNum);
-        cardStyle.marginRight = (1 + i) % data.customize.rowNum !== 0 ? '2%' : 0;
-      }
-
-      if (source.background.bgType == 'color') {
-        cardStyle.backgroundColor = source.background.color;
-        cardStyle.opacity = source.background.opacity ? source.background.opacity : 1;
-      } else {
-        cardStyle.backgroundImage = "url(" + source.background.image + ")";
-        cardStyle.backgroundPosition = 'center';
       }
 
       return cardStyle;
@@ -85,11 +70,11 @@ function (_super) {
   }
 
   NavigationMobile.prototype.render = function () {
+    var _this = this;
+
     var data = this.props.data; // const { ready } = this.state;
-    // console.log('----imagetext mobile', data);
 
-    var wrapStyle = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
-    wrapStyle.textAlign = data.customize.align; // if (data.background.bgType === 'color') {
+    console.log('----nav mobile', data); // if (data.background.bgType === 'color') {
     //   wrapStyle.backgroundColor = data.background.color;
     //   wrapStyle.opacity = data.background.opacity ? data.background.opacity : 1;
     // } else {
@@ -97,25 +82,28 @@ function (_super) {
     //   wrapStyle.backgroundPosition = 'center';
     // }
 
-    var cardBtnStyle = {};
-
-    if (data.customize.layout.h5Layout === 'normal3') {
-      cardBtnStyle.alignItems = _AlignSelector.alignItemMap[data.customize.align];
-    }
-
-    if (data.customize.layout.h5Layout === 'normal2' || data.customize.layout.h5Layout === 'normal1' || data.customize.layout.h5Layout === 'outsideM') {
-      cardBtnStyle.justifyContent = _AlignSelector.alignItemMap[data.customize.align];
-    }
-
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])('mobile-navigation-mobile', data.customize.layout.h5Layout)
+      className: (0, _classnames["default"])('mobile-navigation-mobile', data.customize.layout)
     }, (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: data.groupSource.length > data.customize.rowNum ? 'one-card card-margin-bottom' : 'one-card'
-      }, "11");
+        className: "one-card" // className={data.groupSource.length > data.customize.rowNum ? 'one-card card-margin-bottom' : 'one-card'}
+        ,
+        style: _this.getCardStyle(source, i)
+      }, source.image.open && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "card-image-wrap"
+      }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+        className: "card-image",
+        data: source.image,
+        limitWidthHeight: true,
+        maxHeight: 82,
+        scale: 0.5
+      })), source.title.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "card-text",
+        data: source.title
+      }));
     })));
   };
 

package/es/composite-comp/dito/components/MobileNavigation/mobile/index.less

@@ -1,292 +1,37 @@
-.image-text-mobile {
+.mobile-navigation-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-first-btn {
-            margin-right: 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-first-btn {
-            margin-right: 12px;
-          }
-        }
-      }
-    }
-  }
-}
-.normal3 {
+  padding: 18px 0;
   .group-wrap {
+    padding: 0 20px;
     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%;
-        .card-image {
-          // max-height: 107px;
-          width: fit-content;
-          margin: 0 auto 7px;
-        }
-      }
+      // display: flex;
 
-      .card-title {
+      .card-image-wrap {
         margin-bottom: 4px;
-      }
-
-      .card-text {
-        margin-bottom: 7px;
-      }
-      .card-btn-wrap {
-        display: flex;
-        flex-direction: column;
-      }
-
-      .card-second-btn {
-        margin-top: 8px;
+        width: 100%;
       }
     }
-    .card-margin-bottom {
-      margin-bottom: 10px;
-    }
-  }
+  } 
+
 }
 
-.outsideM {
+.newline {
   .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-first-btn {
-            margin-right: 12px;
-          }
-        }
-      }
-    }
+    flex-wrap: wrap;
   }
 }
 
-.centerM {
+.tile {
   .group-wrap {
-    position: relative;
-    width: 100%;
-    &::before {
-      content: '';
-      position: absolute;
-      width: 1px;
-      height: 100%;
-      border-right: 1px dashed #D2D9E5;
-      left: 50%;
-      transform: translateX(-50%);
-    }
+    // overflow-x: scroll;
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    scroll-snap-type: x;
     .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;
-          }
-        }
-      }
+      scroll-snap-align: end;
+      min-width: 30%;
     }
   }
-}
+}

package/es/composite-comp/dito/components/Recommend/defaultJSON.js

@@ -279,14 +279,8 @@ var getDefaultJSON = function getDefaultJSON() {
       }
     },
     customize: {
-      layout: {
-        pcLayout: 'layout3',
-        h5Layout: 'layout1'
-      },
-      align: 'left',
-      pcRowNum: 6,
-      pcMaxRowNum: 6,
-      pcMinRowNum: 5
+      layout: 'left',
+      align: 'left'
     },
     background: {
       opacity: 100,

package/es/composite-comp/dito/components/Recommend/mobile/index.js

@@ -227,6 +227,10 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
 };
 
 var LAYOUT_IMAGE_SIZE = {
+  left: {
+    w: '100%',
+    h: 165
+  },
   layout1: {
     w: '100%',
     h: 164
@@ -412,8 +416,10 @@ function (_super) {
     };
 
     _this.resetLayout = function () {
-      var layout = _this.props.panelProps.customize.layout.h5Layout;
+      var layout = _this.props.panelProps.customize.layout.h5Layout || _this.props.panelProps.customize.layout; // 后面删除
+
       var LAYOUT_COLUMN = {
+        left: 2,
         layout1: 2,
         layout2: 1,
         layout3: 3
@@ -537,7 +543,7 @@ function (_super) {
         hideTabs: hideTabs
       });
     });
-    var curLayout = panelProps.customize.layout.h5Layout;
+    var curLayout = panelProps.customize.layout.h5Layout || panelProps.customize.layout; // 后面删除
 
     if (curLayout !== this.preLayout) {
       this.resetLayout();
@@ -559,12 +565,18 @@ function (_super) {
     var bgStyle = this.getBackgroundStyle();
     var products = this.state["products" + tabIndex] || [];
     var isDivide = groupSource.length <= 3;
-    var layout = panelProps.customize.layout.h5Layout;
+    var layout = panelProps.customize.layout.h5Layout || panelProps.customize.layout; // 后面删除
 
     var _seeAll = (0, _commonUtil.ensure)(function () {
       return groupSource[tabIndex].seeAll;
     }, '');
 
+    var imgHeight = (0, _commonUtil.ensure)(function () {
+      return LAYOUT_IMAGE_SIZE[layout].h;
+    }, 140);
+    var imgWidth = (0, _commonUtil.ensure)(function () {
+      return LAYOUT_IMAGE_SIZE[layout].w;
+    }, 140);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-recommend-mobile",
       style: bgStyle
@@ -605,27 +617,7 @@ function (_super) {
         transform: "translateX(" + tabLeft + "px)",
         background: this.getTabBarActiveColor(panelProps)
       }
-    })), ['layout1', 'layout2', 'layout3'].includes(layout) ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-      key: "macyContainer",
-      className: "macyContainer"
-    }, products.map(function (item) {
-      return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
-        key: item.productId,
-        data: item,
-        fixHeight: layout === 'layout3',
-        imgHeight: LAYOUT_IMAGE_SIZE[layout].h,
-        imgWidth: LAYOUT_IMAGE_SIZE[layout].w,
-        layout: layout === 'layout2' ? 'horizontal' : 'vertical',
-        onItemClick: function onItemClick() {
-          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
-        },
-        panelProps: panelProps.content,
-        showProgress: false
-      });
-    })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
-      className: "btnSeeAll",
-      data: _seeAll
-    })) : /*#__PURE__*/_react["default"].createElement("div", {
+    })), ['layout4', 'layout5'].includes(layout) ? /*#__PURE__*/_react["default"].createElement("div", {
       key: "scrollContainer",
       className: (0, _classnames["default"])('scrollContainer', {
         pl_100: layout === 'layout5'
@@ -637,8 +629,8 @@ function (_super) {
         key: "scroll_" + item.productId,
         data: item,
         fixHeight: true,
-        imgHeight: LAYOUT_IMAGE_SIZE[layout].h,
-        imgWidth: LAYOUT_IMAGE_SIZE[layout].w,
+        imgHeight: imgHeight,
+        imgWidth: imgWidth,
         onItemClick: function onItemClick() {
           return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
         },
@@ -648,6 +640,26 @@ function (_super) {
     }), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
       className: "btnSeeAll",
       data: _seeAll
+    })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      key: "macyContainer",
+      className: "macyContainer"
+    }, products.map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
+        key: item.productId,
+        data: item,
+        fixHeight: layout === 'layout3',
+        imgHeight: imgHeight,
+        imgWidth: imgWidth,
+        layout: layout === 'layout2' ? 'horizontal' : 'vertical',
+        onItemClick: function onItemClick() {
+          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
+        },
+        panelProps: panelProps.content,
+        showProgress: false
+      });
+    })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+      className: "btnSeeAll",
+      data: _seeAll
     })));
   };
 

package/es/composite-comp/dito/components/Recommend/pc/index.js

@@ -228,24 +228,16 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
 
 var LAYOUT_IMAGE_SIZE = {
   layout1: {
-    w: '100%',
-    h: 164
+    w: 180,
+    h: 180
   },
   layout2: {
-    w: 100,
-    h: '100%'
+    w: 160,
+    h: 160
   },
   layout3: {
-    w: '100%',
-    h: 104
-  },
-  layout4: {
-    w: 96,
-    h: 96
-  },
-  layout5: {
-    w: 110,
-    h: 110
+    w: 180,
+    h: 180
   }
 };
 
@@ -412,16 +404,11 @@ function (_super) {
     };
 
     _this.resetLayout = function () {
-      var layout = _this.props.panelProps.customize.layout.pcLayout;
-      var LAYOUT_COLUMN = {
-        layout1: 2,
-        layout2: 1,
-        layout3: 3
-      };
-      if (!LAYOUT_COLUMN[layout]) return;
+      var customize = _this.props.panelProps.customize;
+      if (customize.layout.pcLayout !== 'layout1') return;
       setTimeout(function () {
         if (document.querySelector('.macyContainer')) {
-          _this.getMacy('.macyContainer', LAYOUT_COLUMN[layout]);
+          _this.getMacy('.macyContainer', customize.pcRowNum);
         }
       });
     };
@@ -565,6 +552,12 @@ function (_super) {
       return groupSource[tabIndex].seeAll;
     }, '');
 
+    var imgHeight = (0, _commonUtil.ensure)(function () {
+      return LAYOUT_IMAGE_SIZE[layout].h;
+    }, 140);
+    var imgWidth = (0, _commonUtil.ensure)(function () {
+      return LAYOUT_IMAGE_SIZE[layout].w;
+    }, 140);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-recommend-pc",
       style: bgStyle
@@ -605,17 +598,16 @@ function (_super) {
         transform: "translateX(" + tabLeft + "px)",
         background: this.getTabBarActiveColor(panelProps)
       }
-    })), ['layout1', 'layout2', 'layout3'].includes(layout) ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    })), layout === 'layout1' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
       key: "macyContainer",
       className: "macyContainer"
     }, products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
         key: item.productId,
         data: item,
-        fixHeight: layout === 'layout3',
-        imgHeight: LAYOUT_IMAGE_SIZE[layout].h,
-        imgWidth: LAYOUT_IMAGE_SIZE[layout].w,
-        layout: layout === 'layout2' ? 'horizontal' : 'vertical',
+        fixHeight: true,
+        imgHeight: imgHeight,
+        imgWidth: imgWidth,
         onItemClick: function onItemClick() {
           return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
         },
@@ -628,7 +620,7 @@ function (_super) {
     })) : /*#__PURE__*/_react["default"].createElement("div", {
       key: "scrollContainer",
       className: (0, _classnames["default"])('scrollContainer', {
-        pl_100: layout === 'layout5'
+        pl_100: layout === 'layout3'
       })
     }, products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -637,8 +629,8 @@ function (_super) {
         key: "scroll_" + item.productId,
         data: item,
         fixHeight: true,
-        imgHeight: LAYOUT_IMAGE_SIZE[layout].h,
-        imgWidth: LAYOUT_IMAGE_SIZE[layout].w,
+        imgHeight: imgHeight,
+        imgWidth: imgWidth,
         onItemClick: function onItemClick() {
           return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
         },