47 lines
824 B
Vue
47 lines
824 B
Vue
|
<template>
|
||
|
|
<view style="display: flex;flex-direction: row;align-items: center;">
|
||
|
|
<view style="margin-right: 5px;font-size: 12px;">{{currentTime}}</view>
|
||
|
|
<view class="progress-bar">
|
||
|
|
<view class="progress" :style="{ width: progress + '%' }"></view>
|
||
|
|
</view>
|
||
|
|
<view style="margin-left: 5px;font-size: 12px;">{{allTime}}</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
progress: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
currentTime: {
|
||
|
|
type: String,
|
||
|
|
default: '0'
|
||
|
|
},
|
||
|
|
allTime: {
|
||
|
|
type: String,
|
||
|
|
default:'0'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.progress-bar {
|
||
|
|
width: 100%;
|
||
|
|
height: 4px;
|
||
|
|
background-color: #ccc;
|
||
|
|
position: relative;
|
||
|
|
/* flex: 1; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress {
|
||
|
|
height: 4px;
|
||
|
|
background-color: #ffcc00;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
</style>
|