caimei-applets-caimei/components/uni-stars/uni-stars.vue

<template>
	<view class="stars" :style="{ width:widthInfo + 'rpx' }">
		<view class="stars-normal">
			<view class="box" :style="{ width:widthInfo + 'rpx' }">
				<block v-for="i_ in 5" :key="i_"><text class="iconfont" :class="iconClass" :style="{fontSize:fontSize+'rpx'}"></text></block>
			</view>
		</view>
		<view class="stars-selected" :style="{ width: (stars / 5) * 100 + '%',color:iconColor}">
			<view class="box" :style="{ width:widthInfo + 'rpx' }">
				<block v-for="j_ in 5" :key="j_"><text class="iconfont" :class="iconClass" :style="{fontSize:fontSize+'rpx'}"></text></block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Unistars",
		props: {
			stars: {
				// Unistars类型
				type: Number,
				default: 0
			},
			fontSize:{
				// fontSize类型
				type: Number,
				default: 30
			},
			widthInfo:{
				// fontSize类型
				type: Number,
				default: 146
			},
			iconClass:{
				// fontSize类型
				type: String,
				default:'icon-dkw_jine'
			},
			iconColor:{
				// fontSize类型
				type: String,
				default:'#FFBD13'
			}
		},
		methods: {
			
		}
	};
</script>

<style scoped>
	.stars {
		height: 30upx;
		position: relative;
		float: left;
	}
	.stars-normal {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		color: #EAEAEA;
	}
	.stars-selected {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		overflow: hidden;
	}
	
</style>