对接数据

components/Rate.vue

@@ -0,0 +1,62 @@
+<script>
+export default {
+	model: {
+		prop: 'value',
+		event: 'change'
+	},
+	props: {
+		value: {
+			type: Number,
+			default: 0,
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		}
+	},
+	methods: {
+		handleChange(val) {
+			if (!this.readonly) {
+				this.$emit('change', val);
+			}
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="rate flex items-center">
+		<el-rate
+			:value="value"
+			@input="handleChange"
+			:colors="['#7B61FF', '#7B61FF', '#7B61FF']"
+			void-color="#E2E8F0"
+			:size="24"
+			:disabled="readonly">
+		</el-rate>
+		<div class="rate-num" :class="value ? 'gradient-box' : ''">{{ value }}</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+::v-deep .el-rate {
+	height: 24px;
+	.el-rate__icon {
+		font-size: 24px;
+	}
+}
+.rate-num {
+	width: 28px;
+	height: 28px;
+	line-height: 28px;
+	text-align: center;
+	background: #E2E8F0;
+	color: #fff;
+	border-radius: 12px;
+	margin-left: 8px;
+	font-family: 'Poppins-Regular', serif;
+}
+.gradient-box {
+	background: $header-backgroungd;
+}
+</style>