<template>
|
<div class="markProgress">
|
<el-slider class="self_slider" v-model="guideRail" :min="0" :max="max" :marks="guideMarks" disabled>
|
</el-slider>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
guideRail: {
|
type: Number,
|
},
|
max: {
|
type: Number,
|
}
|
},
|
data() {
|
return {
|
|
}
|
},
|
computed: {
|
guideMarks() {
|
let marks = {};
|
let num = this.max;
|
for (let i = 0; i <= num; i++) {
|
if (i % Math.round(num / 6) == 0) {
|
marks[i] = i + "";
|
} else if (i % Math.round(num / 30) == 0) {
|
marks[i] = {
|
style: {
|
color: "#ccc",
|
},
|
label: this.$createElement("span", "|"),
|
};
|
}
|
}
|
return marks;
|
},
|
},
|
}
|
</script>
|
|
<style>
|
.markProgress {
|
width: 96%;
|
}
|
|
.markProgress .self_slider {
|
width: 100%;
|
}
|
|
.markProgress .el-slider__runway {
|
height: 12px;
|
margin: 0;
|
margin-bottom: 20px;
|
background: none;
|
border: 1px solid #ffffff;
|
}
|
|
.markProgress .el-slider__runway .el-slider__bar {
|
height: 10px;
|
}
|
|
.markProgress .el-slider__runway .el-slider__button-wrapper {
|
display: none;
|
}
|
|
.markProgress .el-slider__stop {
|
display: none;
|
}
|
|
.markProgress .el-slider__marks-text {
|
top: 0;
|
color: #ffffff;
|
margin-top: 15px;
|
}
|
|
.markProgress .el-slider__marks-text span {
|
display: inline-block;
|
height: 8px !important;
|
overflow: hidden;
|
transform: translateY(-15px);
|
}
|
|
.markProgress .el-slider__runway.disabled .el-slider__bar {
|
background-color: #00f7f9;
|
}
|
</style>
|
