@fonixtree/magic-design 1.0.11 → 1.0.13

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/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/ImageGallery/mobile/index.less

@@ -1,15 +1,22 @@
-.m-image-gallery-mobile .content .line {
-  margin-bottom: 0.24rem;
-}
-.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;
-}
+.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;
+      }
+    }
+  }
+}