<template>
	<view class="progress-box">
		<view class="line" :style="{width:percent+'px'}">
		</view>
		<view class="block" @touchstart="progressTouchStart" @touchmove="progressTouchMove"
		:style="{transform:'translateX('+percent+'px)'}"
			@touchend="progressTouchEnd"></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const props=defineProps({
	})
	
	
	let percent=ref(50)
	//进度条
	let progressIsTouch = false
	let start = 0
	function progressTouchStart(e) {
		console.log(e);
		start = e.touches[0].clientX
		progressIsTouch = true
	}

	function progressTouchMove(e) {
		console.log(e);
		const step = 1;
		playPercent.value += step
	}

	function progressTouchEnd(e) {
		console.log(e);
		progressIsTouch = false
	}
</script>

<style lang="scss" scoped>
	.progress-box {
		border-radius: 20px;
		height: 5px;
		margin:  4px 0;
		background-color: rgba(255, 255, 255, .6);
		box-shadow: 0 0 1px #eee;
		flex-direction: row;
		overflow: visible;
		.line {
			background-color: #fff;
			border-radius: 20px;
			overflow: visible;
		}
		$block-size: 8px;
		.block {
			top: -1px;
			left: 0;
			position: absolute;
			z-index: 2;
			width: $block-size;
			height: $block-size;
			background-color: #fff;
			border-radius: 50%;
			box-shadow: 0 0 1px #eee;
		}
	}
</style>