feat: mobile-react同步swiper组件

Tencent · Dec 16, 2024 · 47eb83a · 47eb83a
1 parent ba96285
commit 47eb83a
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 0 deletions.
diff --git a/style/mobile/components/swiper/v2/_index.less b/style/mobile/components/swiper/v2/_index.less
@@ -20,6 +20,28 @@
     & > * {
       border-radius: @swiper-border-radius;
     }
+
+    &--image-host {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      overflow: hidden;
+      justify-content: center;
+      position: relative;
+
+      & > * {
+        border-radius: @swiper-border-radius;
+      }
+
+      img {
+        height: 100%;
+        width: 100%;
+        max-width: none;
+        object-fit: cover;
+      }
+    }
   }
 
   // 主要容器
@@ -41,4 +63,36 @@
   &--outside {
     padding-bottom: @swiper-placement-outside-padding;
   }
+
+  &__container--card {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+  }
+
+  &--card {
+    .@{prefix}-swiper-item {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      z-index: 0;
+      &--active{
+        z-index: 1;
+      }
+    }
+
+    .t-swiper-item--image-host {
+      transition: all 0.3s ease;
+    }
+
+    .t-swiper-item--image-host--prev{
+      right: @swiper-item-right-padding;
+    }
+
+    .t-swiper-item--image-host--next{
+      left: @swiper-item-left-padding;
+    }
+  }
 }
diff --git a/style/mobile/components/swiper/v2/_var.less b/style/mobile/components/swiper/v2/_var.less
@@ -4,3 +4,5 @@
   --td-swiper-placement-outside-padding,
   calc(@spacer-1 + @swiper-nav-dot-size)
 );
+@swiper-item-left-padding: var(--td-swiper-item-left-padding, 6px);
+@swiper-item-right-padding: var(--td-swiper-item-right-padding, 6px);