耗时*{{rangeTime}} 小时{{idx}}{{rangeMax}}
export default {
name: 'range',
data() {
return {
rangeMax: 8,
rangeMin: 0,
rangeTime: 4,
rangeSpeed: '50%',
}
},
mounted() {
this.changeSpeed();
},
methods: {
changeSpeed: function() {
var value = this.rangeTime;
var rangeMax = this.rangeMax;
var precent = (value / rangeMax) * 100;
this.rangeSpeed = precent + "%";
}
},
}
.ub {
display: -webkit-box !important;
display: box !important;
position: relative;
}
.ub-ac {
-webkit-box-align: center;
box-align: center;
}
.ub-pc {
-webkit-box-pack: center;
box-pack: center;
}
.ub-ver {
-webkit-box-orient: vertical;
box-orient: vertical;
}
.ub-f1 {
position: relative;
-webkit-box-flex: 1;
box-flex: 1;
}
.uabs-tr {
position: absolute;
right: 0;
top: 0;
z-index: 100;
}
.uabs-hide {
position: absolute !important;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
z-index: 100;
}
.range {
height: 20px;
padding: 5px 0;
}
.range-bar {
border: 1px solid #108EE9;
border-radius: 7px;
height: 7px;
background: -webkit-linear-gradient(#108EE9, #108EE9) no-repeat, #fff;
background-size: 30% 100%;
}
.range-thumb {
position: absolute;
top: 0;
bottom: 0;
margin-bottom: 10px;
margin-left: -10px;
height: 20px;
width: 20px;
background: #fff;
border-radius: 50%;
border: solid 1px #ff9000;
}
