From 10dee2fe4d96da55d9102e95d4aae18b45b413e4 Mon Sep 17 00:00:00 2001
From: zhangjing1 <zhangjing@shopex.cn>
Date: Thu, 19 Mar 2026 18:26:47 +0800
Subject: [PATCH] style(home): slider pagination dots and layout for wgt-slider

- Add position: relative on .wgt-slider for absolute pagination
- Style .slider-pagination with flex alignment (left/center/right)
- Dark/light themes and rectangle vs circle dot variants
- Counter badge sizing for pagination-count

Made-with: Cursor
---
 src/pages/home/wgts/slider/index.scss | 82 +++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)

diff --git a/src/pages/home/wgts/slider/index.scss b/src/pages/home/wgts/slider/index.scss
index 36768215a..2c762fa5b 100644
--- a/src/pages/home/wgts/slider/index.scss
+++ b/src/pages/home/wgts/slider/index.scss
@@ -5,6 +5,7 @@
 
 .wgt-slider {
   box-sizing: border-box;
+  position: relative;
   width: 100%;
   .slider-img {
     width: 100%;
@@ -70,4 +71,85 @@
       }
     }
   }
+  .slider-pagination {
+    position: absolute;
+    bottom: 20px;
+    z-index: 200;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 20px;
+    display: flex;
+    &.cover {
+      position: initial;
+    }
+
+    &.left {
+      justify-content: flex-start;
+    }
+    &.center {
+      justify-content: center;
+    }
+    &.right {
+      justify-content: flex-end;
+    }
+
+    &.dark {
+      .dot-item {
+        background: rgba(0, 0, 0, 0.4);
+      }
+      .pagination-count {
+        background: rgba(0, 0, 0, 0.4);
+        color: #fff;
+      }
+    }
+    &.light {
+      .dot-item {
+        background: rgba(255, 255, 255, 0.7);
+      }
+      .pagination-count {
+        background: rgba(255, 255, 255, 0.7);
+        color: #555;
+      }
+    }
+
+    &.rectangle {
+      .dot-item {
+        width: 32px;
+        height: 4px;
+        margin: 0 4px;
+        border-radius: 2px;
+        &.active {
+          background: #d42f29;
+        }
+      }
+      .pagination-count {
+        height: 40px;
+        font-size: 24px;
+        line-height: 40px;
+        padding: 0 6px;
+      }
+    }
+
+    &.circle {
+      .dot-item {
+        width: 16px;
+        height: 16px;
+        border-radius: 8px;
+        background: rgba(0, 0, 0, 0.4);
+        margin: 0 6px;
+        &.active {
+          background: #d42f29;
+        }
+      }
+      .pagination-count {
+        width: 50px;
+        height: 50px;
+        font-size: 24px;
+        border-radius: 25px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
 }