diff --git a/src/pages/home/wgts/slider/index.scss b/src/pages/home/wgts/slider/index.scss index 2c762fa5b..673fd95ed 100644 --- a/src/pages/home/wgts/slider/index.scss +++ b/src/pages/home/wgts/slider/index.scss @@ -7,10 +7,12 @@ box-sizing: border-box; position: relative; width: 100%; + .slider-img { width: 100%; height: 100%; } + .slider-item { position: relative; @@ -30,6 +32,7 @@ height: 100%; display: block; background-color: transparent; + video { background-color: transparent; } @@ -71,14 +74,17 @@ } } } + .slider-pagination { position: absolute; + left: 50%; + transform: translateX(-50%); bottom: 20px; z-index: 200; - width: 100%; box-sizing: border-box; padding: 20px; display: flex; + &.cover { position: initial; } @@ -86,9 +92,11 @@ &.left { justify-content: flex-start; } + &.center { justify-content: center; } + &.right { justify-content: flex-end; } @@ -97,15 +105,18 @@ .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; @@ -118,10 +129,12 @@ height: 4px; margin: 0 4px; border-radius: 2px; + &.active { - background: #d42f29; + background: var(--color-primary); } } + .pagination-count { height: 40px; font-size: 24px; @@ -137,10 +150,12 @@ border-radius: 8px; background: rgba(0, 0, 0, 0.4); margin: 0 6px; + &.active { - background: #d42f29; + background: var(--color-primary); } } + .pagination-count { width: 50px; height: 50px;