style(home): 首页轮播指示器样式

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

Made-with: Cursor
This commit is contained in:
zhangjing1
2026-03-19 20:42:06 +08:00
parent 0cb096005b
commit 8e3fae331c

View File

@@ -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;
}
}
}
}