BiKing/components/step/step - 副本 (2).vue

<template>
	<view class="step-box">
		<movable-area>
			<movable-view direction="horizontal" @change="setRate"></movable-view>

		</movable-area>
	</view>
</template>

<script>
	export default {
		props:{
			width:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				stepRatio: 0,

				movePlace: null,
			};
		},
		methods: {
			setRate(e){
				console.log('setRate = ' , e.detail)
			}
			// touchStart(e) {
			// 	this.movePlace = e.changedTouches[0].clientX

			// },
			// touchEnd(e) {

			// 	// console.log('touchEnd = ' , e.changedTouches[0])


			// },
			// move(e) {
			// 	const PlaceX = e.changedTouches[0].clientX
			// 	console.log('move = ', PlaceX, this.movePlace)
			// 	if (PlaceX < this.movePlace) {
			// 		if (this.stepRatio > 0) {
			// 			this.stepRatio -= 1;
			// 		}
			// 	} else {
			// 		if (this.stepRatio < 100) {
			// 			this.stepRatio += 1;
			// 		}
			// 	}



			// 	this.movePlace = e.changedTouches[0].clientX;
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.step-box {
		width: 100%;
		height: 54rpx;
		border-radius: 2rpx;

		movable-area {
			width: 100%;
			height: 100%;

			movable-view {
				width: 70%;
				height: 6rpx;
				background: #e6e6e6;
			}
		}

		// .step-link {
		// 	height: 6rpx;
		// 	background: #e6e6e6;
		// 	border-radius: 3rpx;
		// 	position: relative;

		// 	.step-bg {
		// 		position: absolute;
		// 		z-index: 1;
		// 		left: 0;
		// 		top: 0;
		// 		background-color: #05C175;
		// 		border-radius: 3rpx;

		// 		height: 100%;
		// 	}

		// 	.step-node {
		// 		position: absolute;
		// 		z-index: 1;
		// 		width: 100%;
		// 		height: 100%;
		// 		display: flex;
		// 		justify-content: space-between;
		// 		align-items: center;
		// 		.node-item{
		// 			width: 16rpx;
		// 			height: 16rpx;
		// 			background: #ffffff;
		// 			border: 4rpx solid  #e6e6e6;
		// 			border-radius: 50%;
		// 		}
		// 		.active-node-item{
		// 			border-color:  #05c175;
		// 		}
		// 		.now-node-item{
		// 				width: 22rpx;
		// 				height: 22rpx;
		// 				border: 6rpx solid #05c175;
		// 		}
		// 	}
		// }

		// .step-node-nums{
		// 	width: 100%;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	padding-top: 10rpx;
		// 	.num-ratio{
		// 		flex: 1;
		// 		font-size: 20rpx;
		// 		font-family: PingFang SC, PingFang SC-Regular;
		// 		font-weight: 400;
		// 		text-align: center;
		// 		color: #808080;
		// 		line-height: 28rpx;
		// 		&:first-child{
		// 			text-align: left;
		// 		}
		// 		&:last-child{
		// 			text-align: right;
		// 		}
		// 	}
		// }
	}
</style>