/**
|
* number-valve
|
* @author Tevin
|
*/
|
|
@import "../../common/sassMixin";
|
|
|
.c-number-valve {
|
.at-input__input {
|
.weui-input {
|
pointer-events: none;
|
}
|
}
|
.at-input__children {
|
&::after {
|
display: none;
|
}
|
.at-icon-chevron-right {
|
font-size: 48px;
|
color: #ccc;
|
}
|
}
|
.at-input__icon {
|
display: none;
|
}
|
.at-input__container {
|
input {
|
pointer-events: none;
|
}
|
}
|
.at-float-layout {
|
padding: 0;
|
.at-float-layout__container {
|
height: 450px;
|
max-height: 100%;
|
min-height: auto;
|
}
|
&.on-title {
|
.at-float-layout__container {
|
height: 530px;
|
}
|
}
|
.layout-body {
|
height: 100%;
|
min-height: auto;
|
}
|
.layout-body__content {
|
height: 100%;
|
min-height: auto;
|
}
|
}
|
.c-number-valve-slider {
|
height: 100%;
|
padding: 40px 25PX;
|
box-sizing: border-box;
|
.container {
|
position: relative;
|
display: flex;
|
align-items: center;
|
width: 100%;
|
height: 28PX;
|
padding: 35PX 0 50PX;
|
.min {
|
@include position(absolute, 20PX 0 n n);
|
height: 60PX;
|
border-left: #eee 1PX dashed;
|
.text {
|
@include position(absolute, 64PX 0 n n);
|
transform: translateX(-50%);
|
}
|
}
|
.max {
|
@include position(absolute, 20PX n n 0);
|
height: 60PX;
|
border-right: #eee 1PX dashed;
|
.text {
|
@include position(absolute, 64PX n n 0);
|
transform: translateX(50%);
|
}
|
|
}
|
.rail {
|
width: 100%;
|
height: 2PX;
|
background-color: #e2e2e2;
|
box-sizing: border-box;
|
overflow: hidden;
|
}
|
.track {
|
position: absolute;
|
height: 2PX;
|
background-color: #2093df;
|
}
|
.slider {
|
position: absolute;
|
top: 35PX;
|
left: 0;
|
box-sizing: border-box;
|
.circle {
|
position: relative;
|
z-index: 2;
|
width: 28PX;
|
height: 28PX;
|
margin-left: -14PX;
|
border-radius: 50%;
|
background-color: #2093df;
|
box-shadow: 0 0 4PX 0 rgba(0, 0, 0, 0.2);
|
&::after {
|
display: block;
|
@include position(absolute, -50% -50%);
|
width: 200%;
|
height: 200%;
|
background-color: rgba(#000, 0);
|
content: " ";
|
}
|
}
|
.current {
|
@include position(absolute, n 0 0 n, 1);
|
height: 46PX;
|
border-left: #e2e2e2 1PX solid;
|
.text {
|
@include position(absolute, -24PX 0 n n);
|
transform: translateX(-50%);
|
}
|
}
|
}
|
}
|
.btn {
|
@include flexbox(flex, space-between center);
|
width: calc(100% + 40PX);
|
margin-left: -20PX;
|
.at-button {
|
margin: 0;
|
}
|
}
|
.tips {
|
@include position(absolute, n 0 10px n);
|
width: 100%;
|
text-align: center;
|
color: #999;
|
.bold {
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
