ecshop/ECShopX_mobile-frontend
1
0
Fork 0
mirror of https://gitee.com/ShopeX/ECShopX_mobile-frontend synced 2026-08-05 12:25:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(home): slider pagination dots and layout for wgt-slider

Browse Source 
- 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
This commit is contained in:
zhangjing1
2026-03-19 18:26:47 +08:00
parent 9f18d5364d
commit 10dee2fe4d
1 changed files with 82 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/pages/home/wgts/slider/index.scss
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;
}
}
}
}