提交 43583cfd 编写于 作者: richard_1015's avatar richard_1015

fix: swiper pagination style

上级 b1852570
.nut-swiper {
position: relative;
overflow: hidden;
height: 200px;
position: relative;
overflow: hidden;
height: 200px;
.nut-swiper-wrap {
display: flex;
display: -webkit-flex;
width: 100%;
height: 100%;
transition: all 0ms ease;
-webkit-transition: all 0ms ease;
}
.nut-swiper-wrap {
display: flex;
display: -webkit-flex;
width: 100%;
height: 100%;
transition: all 0ms ease;
-webkit-transition: all 0ms ease;
}
.nut-swiper-slide {
overflow: hidden;
flex-shrink: 0;
-webkit-flex-shrink: 0;
width: 100%;
height: 100%;
cursor: default;
position: relative;
.nut-swiper-slide {
overflow: hidden;
flex-shrink: 0;
-webkit-flex-shrink: 0;
width: 100%;
height: 100%;
cursor: default;
position: relative;
@keyframes nut-preloader-spin {
100% {
transform: rotate(360deg);
}
}
@keyframes nut-preloader-spin {
100% {
transform: rotate(360deg);
}
}
.nut-lazy {
&.img {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.nut-lazy {
&.img {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
&.preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
animation: nut-preloader-spin 1s infinite linear;
box-sizing: border-box;
border: 4px solid #fff;
border-radius: 50%;
border-top-color: transparent;
}
}
}
&.preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
animation: nut-preloader-spin 1s infinite linear;
box-sizing: border-box;
border: 4px solid #fff;
border-radius: 50%;
border-top-color: transparent;
}
}
}
&.horizontal .nut-swiper-wrap {
flex-direction: row;
-webkit-flex-direction: row;
}
&.horizontal .nut-swiper-wrap {
flex-direction: row;
-webkit-flex-direction: row;
}
&.vertical .nut-swiper-wrap {
flex-direction: column;
-webkit-flex-direction: column;
}
&.vertical .nut-swiper-wrap {
flex-direction: column;
-webkit-flex-direction: column;
}
.nut-swiper-pagination {
position: absolute;
.nut-swiper-pagination {
position: absolute;
z-index: 1;
.swiper-pagination-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #000;
opacity: 0.2;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #000;
opacity: 0.2;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.swiper-pagination-bullet.active {
background-color: #007aff;
opacity: 1;
}
}
.swiper-pagination-bullet.active {
background-color: #007aff;
opacity: 1;
}
}
&.vertical .nut-swiper-pagination {
right: 10px;
top: 50%;
transform: translate3d(0, -50%, 0);
-webkit-transform: translate3d(0, -50%, 0);
&.vertical .nut-swiper-pagination {
right: 10px;
top: 50%;
transform: translate3d(0, -50%, 0);
-webkit-transform: translate3d(0, -50%, 0);
.swiper-pagination-bullet {
display: block;
margin: 6px 0;
}
}
.swiper-pagination-bullet {
display: block;
margin: 6px 0;
}
}
&.horizontal .nut-swiper-pagination {
bottom: 10px;
width: 100%;
text-align: center;
&.horizontal .nut-swiper-pagination {
bottom: 10px;
width: 100%;
text-align: center;
.swiper-pagination-bullet {
display: inline-block;
margin: 0 3px;
}
}
.swiper-pagination-bullet {
display: inline-block;
margin: 0 3px;
}
}
img {
pointer-events: none;
}
img {
pointer-events: none;
}
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册