@fonixtree/magic-design 0.0.117 → 0.0.120

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

@@ -225,8 +225,8 @@ var getDefaultJSON = function getDefaultJSON() {
     id: (0, _uuid.v4)(),
     type: 'BANNER',
     setting: {
-      pcHeight: 360,
-      mobileHeight: 386,
+      // pcHeight: 360,
+      // mobileHeight: 386,
       // 自动轮播
       autoplay: {
         open: false,

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

@@ -116,10 +116,9 @@ function (_super) {
     };
 
     _this.getItemStyle = function (item) {
-      var data = _this.props.data;
+      // const { data } = this.props;
       return {
-        justifyContent: _AlignSelector.alignItemMap[item.customize.layout],
-        height: data.setting.mobileHeight
+        justifyContent: _AlignSelector.alignItemMap[item.customize.layout]
       };
     };
 
@@ -190,15 +189,15 @@ function (_super) {
         onMouseEnter: _this.mouseEnterWrap,
         onMouseLeave: _this.mouseLeaveWrap,
         style: _this.getItemStyle(item)
-      }, item.image.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+      }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         data: item.image,
         hoverState: hoverState && carouseIndex === index,
         isBackground: true,
         style: {
-          position: 'absolute',
-          ZIndex: 1,
-          inset: '0px',
-          height: '100%'
+          // position: 'absolute',
+          // ZIndex: 1,
+          // inset: '0px',
+          width: '100%'
         }
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "carouseContent",

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

@@ -1,73 +1,50 @@
 .m-banner-mobile {
   position: relative;
-  // .turnPage {
-  //   position: absolute;
-  //   top: 50%;
-  //   transform: translateY(-50%);
-  //   z-index: 3;
-  //   cursor: pointer;
-  // }
-  // .leftBtn {
-  //   left: 20px;
-  // }
-  // .rightBtn {
-  //   right: 20px;
-  // }
-
-  .carouselItem {
-    height: 386px;
-    position: relative;
-    display: flex;
-
-    .carouseContent {
-      padding: 80px 28px 0;
-      position: relative;
-      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;
-      }
-    }
-  }
-}
+}
+.m-banner-mobile .carouselItem {
+  position: relative;
+  display: flex;
+}
+.m-banner-mobile .carouselItem .carouseContent {
+  padding: 10.667vw 3.733vw 0;
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: auto;
+}
+.m-banner-mobile .carouselItem .title {
+  margin-bottom: 1.067vw;
+}
+.m-banner-mobile .carouselItem .sub-title {
+  margin-bottom: 2.667vw;
+}
+.m-banner-mobile .carouselItem .btn-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.m-banner-mobile .carouselItem .btn-wrap .btn {
+  margin-right: 1.6vw;
+}
+.m-banner-mobile .swiper-ban {
+  position: absolute;
+  width: 100%;
+  bottom: 1.333vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.m-banner-mobile .swiper-ban .ban {
+  font-size: 2.133vw;
+  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;
+}

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

@@ -160,10 +160,9 @@ function (_super) {
     };
 
     _this.getItemStyle = function (item) {
-      var data = _this.props.data;
+      // const { data } = this.props;
       return {
-        justifyContent: _AlignSelector.alignItemMap[item.customize.layout],
-        height: data.setting.pcHeight
+        justifyContent: _AlignSelector.alignItemMap[item.customize.layout]
       };
     };
 
@@ -235,15 +234,15 @@ function (_super) {
         onMouseEnter: _this.mouseEnterWrap,
         onMouseLeave: _this.mouseLeaveWrap,
         style: _this.getItemStyle(item)
-      }, item.image.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+      }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         data: item.image,
         hoverState: hoverState && carouseIndex === index,
         isBackground: true,
         style: {
-          position: 'absolute',
-          zIndex: 1,
-          inset: '0px',
-          height: '100%'
+          // position: 'absolute',
+          // zIndex: 1,
+          // inset: '0px',
+          width: '100%'
         }
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "carouseContent",

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

@@ -42,13 +42,13 @@
   }
 
   .carouselItem {
-    height: 360px;
+    // height: 360px;
     display: flex;
     position: relative;
 
     .carouseContent {
       padding: 100px 80px 0;
-      position: relative;
+      position: absolute;
       z-index: 2;
       display: flex;
       flex-direction: column;

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

@@ -1,95 +1,79 @@
 .m-carousel-mobile {
   position: relative;
   width: 100%;
-
-  .content {
-    display: flex;
-    margin: 0 auto;
-  }
-
-  .slider-wrap {
-    width: 100%;
-    margin: 0 auto;
-    line-height: 1;
-
-    .slick-list {
-      padding-top: 100px;
-      margin-top: -100px;
-      padding-bottom: 100px;
-      margin-bottom: -100px;
-
-      margin-left: -11px;
-      margin-right: -11px;
-
-      .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: 2px;
-      }
-
-      .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: 1em;
-      transition: all .5s;
-
-      &.active {
-        width: 2em;
-        border-radius: 100px;
-        opacity: 1;
-      }
-    }
-  }
-}
+}
+.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-top: 13.333vw;
+  margin-top: -13.333vw;
+  padding-bottom: 13.333vw;
+  margin-bottom: -13.333vw;
+  margin-left: -1.467vw;
+  margin-right: -1.467vw;
+}
+.m-carousel-mobile .slider-wrap .slick-list .slick-track {
+  display: flex;
+  align-items: center;
+  gap: 1.6vw;
+}
+.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: 1.6vw;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .text {
+  display: flex;
+  justify-content: center;
+  margin-top: 0.267vw;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .tags {
+  margin-top: 1.067vw;
+  margin-bottom: 1.6vw;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .tags > div {
+  margin-right: 1.067vw;
+}
+.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.8vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.m-carousel-mobile .swiper-ban .ban {
+  font-size: 1.067vw;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  background: #FFF;
+  cursor: inherit;
+  margin-right: 1em;
+  transition: all 0.5s;
+}
+.m-carousel-mobile .swiper-ban .ban.active {
+  width: 2em;
+  border-radius: 13.333vw;
+  opacity: 1;
+}

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

@@ -1,22 +1,15 @@
-.m-image-gallery-mobile {
-  .content {
-    .line {
-      margin-bottom: 12px;
-
-      &.isHorizontal {
-        display: flex;
-        justify-content: flex-start;
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      .img-wrap {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-  }
-}
+.m-image-gallery-mobile .content .line {
+  margin-bottom: 1.6vw;
+}
+.m-image-gallery-mobile .content .line.isHorizontal {
+  display: flex;
+  justify-content: flex-start;
+}
+.m-image-gallery-mobile .content .line:last-child {
+  margin-bottom: 0;
+}
+.m-image-gallery-mobile .content .line .img-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}