@fonixtree/magic-design 0.1.77 → 1.0.2-0.1

package/es/common/Video/index.js

@@ -203,6 +203,8 @@ var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
     };
   }
 };
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+
 
 /** 检查youtube依赖包 */
 var checkYoutuVIdeo = function checkYoutuVIdeo() {
@@ -587,6 +589,7 @@ function (_super) {
     /** YouTube播放器 */
 
     _this.ytPlayer = null;
+    _this.timer = null;
     /** 创建视频弹框显示 */
 
     _this.createVideoModal = function (videoId) {
@@ -714,7 +717,11 @@ function (_super) {
   }
 
   Video.prototype.componentDidMount = function () {
-    this.getInit();
+    this.timer = setTimeout(this.getInit, 1000);
+  };
+
+  Video.prototype.componentWillUnmount = function () {
+    this.timer && clearTimeout(this.timer);
   };
 
   Video.prototype.render = function () {
@@ -727,8 +734,9 @@ function (_super) {
     }, opts.source ? /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-wrap",
       id: 'video' + videoId
-    }) : null, !play && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "cover-video"
+    }) : null, !play && opts.cover && /*#__PURE__*/_react["default"].createElement("img", {
+      className: "video-cover-img",
+      src: opts.cover
     }));
   };
 

package/es/common/Video/index.less

@@ -3,17 +3,21 @@
   height: 100%;
   background-image: linear-gradient(0, rgba(0, 0, 0, .2), rgba(0, 0, 0, .1), rgba(0, 0, 0, .2));
 
-  .prism-player .prism-cover {
-    z-index: 0;
-  }
 
-  .cover-video {
+  .video-cover-img {
     position: absolute;
-    left: 0;
+    top: 0;
     right: 0;
+    left: 0;
     bottom: 0;
-    top: 0;
-    background-color: rgba(0, 0, 0, 0);
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+  }
+
+  .prism-player .prism-cover {
+    z-index: 0;
   }
 
   .video-wrap {

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

@@ -208,6 +208,12 @@ function (_super) {
         style: _this.getBackgroundStyle(item)
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "carouselItem",
+        onClick: function onClick() {
+          /** PTO 定制GA */
+          if (window.magicDesign.pushGA) {
+            window.magicDesign.pushGA({}, 'select_promotion');
+          }
+        },
         onMouseEnter: _this.mouseEnterWrap,
         onMouseLeave: _this.mouseLeaveWrap,
         style: _this.getItemStyle(item)

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

@@ -1,54 +1,80 @@
 .m-banner-mobile {
   position: relative;
-}
-.m-banner-mobile .cylon-carousel .slick-track {
-  display: flex;
-  align-items: center;
-}
-.m-banner-mobile .carouselItem {
-  position: relative;
-  display: flex;
-}
-.m-banner-mobile .carouselItem .carouseContent {
-  padding: 0 0.56rem;
-  position: absolute;
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: auto;
-}
-.m-banner-mobile .carouselItem .title {
-  margin-bottom: 0.16rem;
-}
-.m-banner-mobile .carouselItem .sub-title {
-  margin-bottom: 0.4rem;
-}
-.m-banner-mobile .carouselItem .btn-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-.m-banner-mobile .carouselItem .btn-wrap .btn {
-  margin-right: 0.24rem;
-}
-.m-banner-mobile .swiper-ban {
-  position: absolute;
-  width: 100%;
-  bottom: 0.2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.m-banner-mobile .swiper-ban .ban {
-  font-size: 0.32rem;
-  width: 1.5em;
-  height: 0.3em;
-  background: #FFF;
-  cursor: inherit;
-  margin-right: 0.3em;
-  transition: all 0.5s;
-}
-.m-banner-mobile .swiper-ban .ban.active {
-  width: 1.5em;
-  opacity: 1;
-}
+  // .turnPage {
+  //   position: absolute;
+  //   top: 50%;
+  //   transform: translateY(-50%);
+  //   z-index: 3;
+  //   cursor: pointer;
+  // }
+  // .leftBtn {
+  //   left: 20px;
+  // }
+  // .rightBtn {
+  //   right: 20px;
+  // }
+
+  .cylon-carousel {
+    .slick-track {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .carouselItem {
+    // height: 386px;
+    position: relative;
+    display: flex;
+
+    .carouseContent {
+      padding: 0 28px;
+      position: absolute;
+      z-index: 2;
+      display: flex;
+      flex-direction: column;
+      margin-bottom: auto;
+    }
+
+    .title {
+      margin-bottom: 8px;
+    }
+
+    .sub-title {
+      margin-bottom: 20px;
+    }
+
+    .btn-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      .btn {
+        margin-right: 12px;
+      }
+    }
+  }
+
+  .swiper-ban {
+    position: absolute;
+    width: 100%;
+    bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .ban {
+      font-size: 16px;
+      width: 1.5em;
+      height: 0.3em;
+      background: #FFF;
+      cursor: inherit;
+      margin-right: 0.3em;
+      transition: all .5s;
+
+      &.active {
+        width: 1.5em;
+        opacity: 1;
+      }
+    }
+  }
+}

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

@@ -15,6 +15,8 @@ var _defaultJSON = require("./defaultJSON");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
+var _decorator = require("../../../../decorator");
+
 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); }
@@ -65,21 +67,43 @@ function (_super) {
   __extends(Carousel, _super);
 
   function Carousel() {
-    return _super !== null && _super.apply(this, arguments) || this;
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      lazyShow: false
+    };
+    _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
+    _this.intersectionObserver = null;
+    return _this;
   }
 
+  Carousel.prototype.componentDidMount = function () {};
+
+  Carousel.prototype.componentWillUnmount = function () {};
+
   Carousel.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    return /*#__PURE__*/_react["default"].createElement("div", null, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+    var lazyShow = this.state.lazyShow;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      ref: this.carouselRef,
+      style: {
+        height: lazyShow ? 'auto' : 300
+      }
+    }, lazyShow && (window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
       data: nodeData
     }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       data: nodeData
-    }));
+    })));
   };
 
   Carousel.defaultProps = {};
   Carousel.type = 'CAROUSEL';
   Carousel.getDefaultJSON = _defaultJSON.getDefaultJSON;
+
+  __decorate([(0, _decorator.lazy)('carouselRef')], Carousel.prototype, "componentDidMount", null);
+
+  __decorate([_decorator.lazyDestroy], Carousel.prototype, "componentWillUnmount", null);
+
   Carousel = __decorate([_compositeDecorator["default"]], Carousel);
   return Carousel;
 }(_react.Component);

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

@@ -73,24 +73,13 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var MOBILE_IMG_SIZE = {
-  1: {
-    maxH: 282
-  },
-  2: {
-    maxH: 137
-  },
-  3: {
-    maxH: 87
-  },
-  4: {
-    maxH: 66
-  },
-  5: {
-    maxH: 50
-  }
-};
-
+// const MOBILE_IMG_SIZE = {
+//   1: { maxH: 282 },
+//   2: { maxH: 137 },
+//   3: { maxH: 87 },
+//   4: { maxH: 66 },
+//   5: { maxH: 50 },
+// };
 var CarouselMobile =
 /** @class */
 function (_super) {
@@ -247,7 +236,8 @@ function (_super) {
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
-        })
+        }),
+        notNeedLazy: true
       })), layout === 'layout2' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
@@ -272,7 +262,8 @@ function (_super) {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
-        maxHeight: 20
+        maxHeight: 20,
+        notNeedLazy: true
       }), item.buttonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.buttonTag,
         GAData: __assign(__assign({}, GAData), {

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

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

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

@@ -280,7 +280,8 @@ function (_super) {
         }),
         maxHeight: item.image.content.pcImgSrc ? 'unset' : PC_IMG_SIZE[floorColNum].defH,
         minHeight: PC_IMG_SIZE[floorColNum].minH,
-        minWidth: PC_IMG_SIZE[floorColNum].minW
+        minWidth: PC_IMG_SIZE[floorColNum].minW,
+        notNeedLazy: true
       })), layout === 'layout2' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && !((0, _coreUtil.isPc)() && item.title.pcText === '') && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
@@ -305,7 +306,8 @@ function (_super) {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
-        maxHeight: 30
+        maxHeight: 30,
+        notNeedLazy: true
       }), item.buttonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.buttonTag,
         GAData: __assign(__assign({}, GAData), {

package/es/composite-comp/bol/components/CustomCode/defaultJSON.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultJSON = void 0;
+
+var _uuid = require("uuid");
+
+var getDefaultJSON = function getDefaultJSON() {
+  return {
+    id: (0, _uuid.v4)(),
+    type: 'CUSTOM_CODE',
+    content: {
+      pcHtml: '',
+      h5Html: ''
+    },
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    background: {
+      opacity: 100,
+      color: '#fff',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+exports.getDefaultJSON = getDefaultJSON;