fix(home slider): wrap swiper and pagination; single-slide dots; rounded img

- Add wgt-slider-wrap for relative positioning and full height
- Show pagination when data.length >= 1; pin dots to bottom: 0
- Round SpImage content when .rounded; normalize scss EOF newline

Made-with: Cursor

src/pages/home/wgts/slider/index.jsx

@@ -250,6 +250,7 @@ const Slider = (props) => {
 
   return (
     <View className={classNames('wgt wgt-slider', {})} style={styleNames(outerStyle)}>
+      <View className='wgt-slider-wrap'>
       {config && (
         <Swiper
           className='slider-img'
@@ -264,7 +265,7 @@ const Slider = (props) => {
         </Swiper>
       )}
 
-      {data.length > 1 && (
+      {data.length >= 1 && (
         <View
           className={classNames(
             'slider-pagination',
@@ -291,6 +292,7 @@ const Slider = (props) => {
           )}
         </View>
       )}
+      </View>
     </View>
   )
 }

src/pages/home/wgts/slider/index.scss

@@ -5,28 +5,40 @@
 
 .wgt-slider {
   box-sizing: border-box;
-  position: relative;
   width: 100%;
 
+  &-wrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
   .slider-img {
     width: 100%;
     height: 100%;
   }
 
+  .rounded {
+    .sp-image-content {
+      border-radius: 16px!important;
+      overflow: hidden;
+    }
+  }
+
   .slider-item {
     position: relative;
-    
+
     .wrapper-img {
       position: relative;
       width: 100%;
       height: 100%;
-      
+
       .slider-item__img {
         width: 100%;
         height: 100%;
         display: block;
       }
-      
+
       .slider-video {
         width: 100%;
         height: 100%;
@@ -36,37 +48,37 @@
         video {
           background-color: transparent;
         }
-        
+
         .poster {
           width: 100%;
           height: 100%;
           object-fit: cover;
         }
       }
-      
+
       // 热区样式
       .img-hotzone_zone {
         position: absolute;
         z-index: 9;
         cursor: pointer;
       }
-      
+
       // 覆盖层样式
       .overlay-content {
         position: absolute;
         z-index: 10;
         pointer-events: auto;
         transition: opacity 0.3s ease-in-out;
-        
+
         &.overlay-visible {
           opacity: 1;
         }
-        
+
         &.overlay-hidden {
           opacity: 0;
           pointer-events: none;
         }
-        
+
         .over-lay {
           width: 100%;
           display: block;
@@ -77,7 +89,7 @@
 
   .slider-pagination {
     position: absolute;
-    bottom: 20px;
+    bottom: 0px;
     z-index: 200;
     box-sizing: border-box;
     padding: 20px;