first commit

components/slide-filter/index.vue

@@ -0,0 +1,83 @@
+<template>
+	<view class="slide-filter-container">
+		<view class="progress-bar-bg">
+			<view class="progress-bar-length" :style="{width: `${(scaleIndex / (option?.length - 1) * 100)}%`}"></view>
+			<view class="scale-area">
+				<view 
+					class="scale-area-item"
+					v-for="(item, index) in option"
+					:class="{'scale-area-item-active': index == scaleIndex}"
+					@click="clickScale(item, index)"
+				>
+					{{ item }}
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, reactive, defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+	option: { type: Array, default: () => [] },
+	modelValue: { type: Number, default: "" },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const scaleIndex = ref(0);
+const clickScale = (item, index) => {
+	scaleIndex.value = index;
+	emit("update:modelValue", item)
+	emit("change")
+}
+</script>
+
+<style lang="scss" scoped>
+.slide-filter-container {
+	width: 100%;
+	.progress-bar-bg {
+		height: 20rpx;
+		background: #EEEEEE;
+		position: relative;
+		border-radius: 4rpx;
+		.progress-bar-length {
+			width: 50%;
+			height: 100%;
+			background: #6FA256;
+			border-radius: 4rpx 0 0 4rpx;
+			position: relative;
+		}
+		.progress-bar-length::after {
+			content: '';
+			position: absolute;
+			width: 2rpx;
+			height: 26rpx;
+			right: -2rpx;
+			top: -3rpx;
+			background: #6FA256;
+		}
+		.scale-area {
+			position: absolute;
+			height: 46rpx;
+			top: 0;
+			left: 0;
+			font-weight: bold;
+			font-size: 20rpx;
+			color: #232323;
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+			&-item {
+				padding-top: 26rpx;
+				width: 20rpx;
+				text-align: center;
+			}
+			&-item-active {
+				color: #6FA256;
+			}
+		}
+	}
+}
+</style>