From 8e3fae331c8cd7c91c093f803b7d95df4899170d Mon Sep 17 00:00:00 2001
From: zhangjing1 <zhangjing@shopex.cn>
Date: Thu, 19 Mar 2026 20:42:06 +0800
Subject: [PATCH] =?UTF-8?q?style(home):=20=E9=A6=96=E9=A1=B5=E8=BD=AE?=
 =?UTF-8?q?=E6=92=AD=E6=8C=87=E7=A4=BA=E5=99=A8=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- .wgt-slider 增加 position: relative 便于分页绝对定位
- 新增 .slider-pagination：左右中对齐、明暗主题、矩形/圆点与页码样式

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 c69b64601..b9675525b 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;
+      }
+    }
+  }
 }