<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>