@fonixtree/magic-design 0.1.45 → 0.1.47

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

@@ -1,30 +1,26 @@
 .video-layout1-wrap {
   display: flex;
   flex-direction: column;
-
-  .video-item-wrap {
-    height: 212px;
-    position: relative;
-    margin-bottom: 10px;
-
-    &:last-child{
-      margin-bottom: 0;
-    }
-
-    .play-btn {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 60px;
-      height: 60px;
-      z-index: 1;
-      cursor: pointer;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-}
+}
+.video-layout1-wrap .video-item-wrap {
+  height: 4.24rem;
+  position: relative;
+  margin-bottom: 0.2rem;
+}
+.video-layout1-wrap .video-item-wrap:last-child {
+  margin-bottom: 0;
+}
+.video-layout1-wrap .video-item-wrap .play-btn {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1.2rem;
+  height: 1.2rem;
+  z-index: 1;
+  cursor: pointer;
+}
+.video-layout1-wrap .video-item-wrap .play-btn img {
+  width: 100%;
+  height: 100%;
+}

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

@@ -2,48 +2,41 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  padding-bottom: 36px;
-
-  .slider-wrap {
-    width: 100%;
-    overflow: hidden;
-
-    .slider-list-wrap {
-      display: flex;
-      transform: translateX(-100%);
-      transition: all .3s linear;
-      position: relative;
-
-      &.noAnimation {
-        animation: none;
-      }
-    }
-
-    .video-item-wrap {
-      height: 212px;
-      position: relative;
-      width: 100%;
-      flex-shrink: 0;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      .play-btn {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 60px;
-        height: 60px;
-        z-index: 1;
-        cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
-}
+  padding-bottom: 0.72rem;
+}
+.video-layout2-wrap .slider-wrap {
+  width: 100%;
+  overflow: hidden;
+}
+.video-layout2-wrap .slider-wrap .slider-list-wrap {
+  display: flex;
+  transform: translateX(-100%);
+  transition: all 0.3s linear;
+  position: relative;
+}
+.video-layout2-wrap .slider-wrap .slider-list-wrap.noAnimation {
+  animation: none;
+}
+.video-layout2-wrap .slider-wrap .video-item-wrap {
+  height: 4.24rem;
+  position: relative;
+  width: 100%;
+  flex-shrink: 0;
+}
+.video-layout2-wrap .slider-wrap .video-item-wrap:last-child {
+  margin-bottom: 0;
+}
+.video-layout2-wrap .slider-wrap .video-item-wrap .play-btn {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1.2rem;
+  height: 1.2rem;
+  z-index: 1;
+  cursor: pointer;
+}
+.video-layout2-wrap .slider-wrap .video-item-wrap .play-btn img {
+  width: 100%;
+  height: 100%;
+}