You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
1.6 KiB
90 lines
1.6 KiB
<template>
|
|
<view class="progress__view">
|
|
<view class="mark" :style="{ marginLeft: `${percentage}%` }">{{ current }}</view>
|
|
<view class="progress">
|
|
<view class="progress-active" :style="{ width: `${percentage}%` }">
|
|
<view class="progress-active-dot"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
current: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
total: {
|
|
type: Number,
|
|
default: 100,
|
|
}
|
|
},
|
|
computed: {
|
|
percentage() {
|
|
return Math.floor(this.current / this.total * 100)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$progress-height: 14rpx;
|
|
|
|
.progress__view {
|
|
width: 100%;
|
|
font-size: 0;
|
|
}
|
|
|
|
.mark {
|
|
background-color: $uni-color-light;
|
|
color: $uni-text-color-inverse;
|
|
font-size: 18rpx;
|
|
padding: 0 10rpx;
|
|
display: inline-block;
|
|
border-radius: 5rpx;
|
|
|
|
transform: translateX(calc(-50% - #{$progress-height} / 2 ));
|
|
position: relative;
|
|
margin-bottom: 8rpx;
|
|
|
|
&:after {
|
|
content: ' ';
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border: 4rpx solid transparent;
|
|
border-top-color: $uni-color-light;
|
|
}
|
|
}
|
|
|
|
.progress {
|
|
width: 100%;
|
|
height: $progress-height;
|
|
border-radius: 7rpx;
|
|
|
|
background-color: #CEE2AA;
|
|
|
|
&-active {
|
|
background-color: $uni-color-light;
|
|
height: 100%;
|
|
border-radius: 7rpx;
|
|
|
|
position: relative;
|
|
|
|
&-dot {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: $progress-height;
|
|
height: $progress-height;
|
|
background-color: $uni-fg-color;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|