You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
1.7 KiB
Plaintext
100 lines
1.7 KiB
Plaintext
/* components/slider-component/index.wxss */
|
|
.component-slider {
|
|
width: 100%;
|
|
position: relative;
|
|
margin: 0rpx auto 0rpx;
|
|
}
|
|
|
|
/* 盒子 */
|
|
.slider-box {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
/* 未选中区线 */
|
|
.slider-line {
|
|
width: 100%;
|
|
height: 4px;
|
|
background: rgba(91, 150, 246, 0.1);
|
|
margin: 0 auto;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 12rpx;
|
|
border-bottom-right-radius: 8rpx;
|
|
border-top-right-radius: 8rpx;
|
|
}
|
|
|
|
/* 选中区线 */
|
|
.slider-line-active {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
height: 4px;
|
|
background: #f40;
|
|
border-bottom-left-radius: 8rpx;
|
|
border-top-left-radius: 8rpx;
|
|
}
|
|
|
|
/* slider按钮 */
|
|
.slider-btn {
|
|
width: 30px;
|
|
height: 30px;
|
|
position: relative;
|
|
/* background: url("/assets/images/slider_img.png"); */
|
|
border-radius: 50%;
|
|
background-size: 100% 100%;
|
|
background-color: #fff;
|
|
|
|
}
|
|
.slider-btn image{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.slider_value {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 15px;
|
|
color: var(--color-ysd);
|
|
transform: translateX(-50%);
|
|
}
|
|
/* 显示的数字 */
|
|
.slider-number {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: -10rpx;
|
|
}
|
|
|
|
.slider-number text {
|
|
position: absolute;
|
|
top: 0;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
/* 当前选中的数字 */
|
|
.slider-number text.active {
|
|
font-size: 32rpx;
|
|
color: #5b96f6;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
/* slider组件设置透明 */
|
|
slider {
|
|
width: 92%;
|
|
/* opacity: 0; */
|
|
/* height: 20px ; */
|
|
padding: 14px 0;
|
|
margin: 12px 16px;
|
|
box-sizing: border-box;
|
|
} |