153 lines
3.7 KiB
Plaintext
153 lines
3.7 KiB
Plaintext
.t-float-left {
|
|
float: left;
|
|
}
|
|
.t-float-right {
|
|
float: right;
|
|
}
|
|
@keyframes tdesign-fade-out {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.hotspot-expanded.relative {
|
|
position: relative;
|
|
}
|
|
.hotspot-expanded::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
transform: scale(1.5);
|
|
}
|
|
.t-swiper-nav__dots,
|
|
.t-swiper-nav__dots-bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.t-swiper-nav__dots-item,
|
|
.t-swiper-nav__dots-bar-item {
|
|
width: var(--td-swiper-nav-dot-size, 12rpx);
|
|
height: var(--td-swiper-nav-dot-size, 12rpx);
|
|
background: var(--td-swiper-nav-dot-color, var(--td-font-white-2, rgba(255, 255, 255, 0.55)));
|
|
border-radius: 50%;
|
|
margin: 0 10rpx;
|
|
transition: all 0.4s ease-in;
|
|
}
|
|
.t-swiper-nav__dots-item--vertical,
|
|
.t-swiper-nav__dots-bar-item--vertical {
|
|
margin: 10rpx 0;
|
|
}
|
|
.t-swiper-nav__dots-item--active,
|
|
.t-swiper-nav__dots-bar-item--active {
|
|
background-color: var(--td-swiper-nav-dot-active-color, var(--td-font-white-1, #ffffff));
|
|
}
|
|
.t-swiper-nav__dots-bar-item--vertical.t-swiper-nav__dots-bar-item--active {
|
|
width: var(--td-swiper-nav-dot-size, 12rpx);
|
|
height: var(--td-swiper-nav-dots-bar-active-width, 40rpx);
|
|
}
|
|
.t-swiper-nav__dots-bar-item--active {
|
|
width: var(--td-swiper-nav-dots-bar-active-width, 40rpx);
|
|
border-radius: calc(var(--td-swiper-nav-dot-size, 12rpx) / 2);
|
|
background-color: var(--td-swiper-nav-dot-active-color, var(--td-font-white-1, #ffffff));
|
|
}
|
|
.t-swiper-nav--left {
|
|
position: absolute;
|
|
left: 24rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.t-swiper-nav--right {
|
|
position: absolute;
|
|
right: 24rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.t-swiper-nav--top-left {
|
|
position: absolute;
|
|
top: 24rpx;
|
|
left: 24rpx;
|
|
}
|
|
.t-swiper-nav--top {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 24rpx;
|
|
transform: translateX(-50%);
|
|
}
|
|
.t-swiper-nav--top-right {
|
|
position: absolute;
|
|
top: 24rpx;
|
|
right: 24rpx;
|
|
}
|
|
.t-swiper-nav--bottom-left {
|
|
position: absolute;
|
|
left: 24rpx;
|
|
bottom: 24rpx;
|
|
}
|
|
.t-swiper-nav--bottom {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 24rpx;
|
|
transform: translateX(-50%);
|
|
}
|
|
.t-swiper-nav--bottom-right {
|
|
position: absolute;
|
|
right: 24rpx;
|
|
bottom: 24rpx;
|
|
}
|
|
.t-swiper-nav--vertical {
|
|
flex-direction: column;
|
|
}
|
|
.t-swiper-nav__fraction {
|
|
padding: 0 16rpx;
|
|
height: var(--td-swiper-nav-fraction-height, 48rpx);
|
|
line-height: var(--td-swiper-nav-fraction-height, 48rpx);
|
|
border-radius: calc(var(--td-swiper-nav-fraction-height, 48rpx) / 2);
|
|
background: var(--td-swiper-nav-fraction-bg-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
|
|
color: var(--td-swiper-nav-fraction-color, var(--td-font-white-1, #ffffff));
|
|
font-size: var(--td-swiper-nav-fraction-font-size, 24rpx);
|
|
}
|
|
.t-swiper-nav__btn--prev,
|
|
.t-swiper-nav__btn--next {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: var(--td-swiper-nav-btn-size, 48rpx);
|
|
height: var(--td-swiper-nav-btn-size, 48rpx);
|
|
border-radius: 50%;
|
|
background: var(--td-swiper-nav-btn-bg-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
|
|
}
|
|
.t-swiper-nav__btn--prev::after,
|
|
.t-swiper-nav__btn--next::after {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
display: block;
|
|
content: '';
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
border-color: var(--td-swiper-nav-btn-color, var(--td-font-white-1, #ffffff));
|
|
border-style: solid;
|
|
}
|
|
.t-swiper-nav__btn--prev {
|
|
left: 30rpx;
|
|
}
|
|
.t-swiper-nav__btn--prev::after {
|
|
margin-left: 4rpx;
|
|
border-width: 2rpx 0 0 2rpx;
|
|
transform: translate(-50%, -50%) rotateZ(-45deg);
|
|
}
|
|
.t-swiper-nav__btn--next {
|
|
right: 30rpx;
|
|
}
|
|
.t-swiper-nav__btn--next::after {
|
|
margin-left: -4rpx;
|
|
border-width: 2rpx 2rpx 0 0;
|
|
transform: translate(-50%, -50%) rotateZ(45deg);
|
|
}
|