automated_uniapp/uni_modules/cool-ui/static/css/banner.scss

148 lines
2.1 KiB
SCSS
Raw Normal View History

2025-01-09 16:16:11 +08:00
.cl-banner {
position: relative;
uni-swiper,
swiper,
swiper-item {
height: 100%;
}
.cl-banner-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
& > view,
scoped-slots-default {
height: 100%;
width: 100%;
}
&__image {
height: 100%;
width: 100%;
border-radius: 12rpx;
}
&__video {
height: 100%;
width: 100%;
}
}
&--card {
.cl-banner-item {
width: 100%;
transform: scale(0.95, 0.9);
transition: all 0.2s ease-in 0s;
&.is-active {
transform: none;
transition: all 0.2s ease-in 0s;
}
}
}
&--chain {
.cl-banner-item {
width: calc(100% - 20rpx);
margin: 0 10rpx;
}
}
&--dot-round {
.wx-swiper-dot,
.a-swiper-dot,
.uni-swiper-dot {
background-color: #ddd;
opacity: 0.6;
width: 12rpx;
height: 12rpx;
border-radius: 12rpx;
margin: 0 6rpx;
border-width: 0;
}
.wx-swiper-dot-active,
.a-swiper-dot-active,
.uni-swiper-dot-active {
background-color: #fff;
opacity: 1;
width: 26rpx;
}
}
&--dot-circle {
.wx-swiper-dot,
.a-swiper-dot,
.uni-swiper-dot {
background-color: #ddd;
opacity: 0.5;
width: 10rpx;
height: 10rpx;
border-radius: 14rpx;
margin: 0 2rpx;
border-color: transparent;
border-width: 2px;
border-style: solid;
}
.wx-swiper-dot-active,
.a-swiper-dot-active,
.uni-swiper-dot-active {
opacity: 1;
border-color: $cl-color-primary;
}
}
&--dot-square {
.wx-swiper-dot,
.a-swiper-dot,
.uni-swiper-dot {
background-color: #ddd;
height: 12rpx;
width: 14rpx;
margin: 0 2rpx;
border-radius: 0;
}
.wx-swiper-dot-active,
.a-swiper-dot-active,
.uni-swiper-dot-active {
background-color: $cl-color-primary;
width: 30rpx;
}
}
&__btn {
button {
position: absolute;
top: calc(50% - 30rpx);
height: 60rpx;
width: 60rpx;
border-radius: 60rpx;
border: 0;
line-height: 60rpx;
padding: 0;
margin: 0;
background-color: rgba(0, 0, 0, 0.4);
color: #ddd;
font-size: 32rpx;
&::after {
border: 0;
}
}
&-prev {
left: 20rpx;
}
&-next {
right: 20rpx;
}
}
}