<template>
	<div class="comprehensive">
		<div class="comprehensive-num">
			{{data.average}}<text>星</text>
		</div>
		<div class="comprehensiveItem">
			<div class="comprehensiveItem-left">
				<u-rate :disabled="true" :gutter="0" count="5" active-color="#FEA41B" inactive-color="#ACACAC"
					value="5"></u-rate>
			</div>
			<div class="comprehensiveItem-right">
				<u-line-progress activeColor="#7D7D7D" inactiveColor="#EDEDED" :percentage="fiveStar" height="2"
					:showText="false"></u-line-progress>
			</div>
		</div>
		<div class="comprehensiveItem">
			<div class="comprehensiveItem-left">
				<u-rate :disabled="true" :gutter="0" count="4" active-color="#FEA41B" inactive-color="#ACACAC"
					value="4"></u-rate>
			</div>
			<div class="comprehensiveItem-right">
				<u-line-progress activeColor="#7D7D7D" inactiveColor="#EDEDED" :percentage="fourStar" height="2"
					:showText="false"></u-line-progress>
			</div>
		</div>
		<div class="comprehensiveItem">
			<div class="comprehensiveItem-left">
				<u-rate :disabled="true" :gutter="0" count="3" active-color="#FEA41B" inactive-color="#ACACAC"
					value="3"></u-rate>
			</div>
			<div class="comprehensiveItem-right">
				<u-line-progress activeColor="#7D7D7D" inactiveColor="#EDEDED" :percentage="threeStar" height="2"
					:showText="false"></u-line-progress>
			</div>
		</div>
		<div class="comprehensiveItem">
			<div class="comprehensiveItem-left">
				<u-rate :disabled="true" :gutter="0" count="2" active-color="#FEA41B" inactive-color="#ACACAC"
					value="2"></u-rate>
			</div>
			<div class="comprehensiveItem-right">
				<u-line-progress activeColor="#7D7D7D" inactiveColor="#EDEDED" :percentage="twoStar" height="2"
					:showText="false"></u-line-progress>
			</div>
		</div>
		<div class="comprehensiveItem">
			<div class="comprehensiveItem-left">
				<u-rate :disabled="true" :gutter="0" count="1" active-color="#FEA41B" inactive-color="#ACACAC"
					value="1"></u-rate>
			</div>
			<div class="comprehensiveItem-right">
				<u-line-progress activeColor="#7D7D7D" inactiveColor="#EDEDED" :percentage="oneStar" height="2"
					:showText="false"></u-line-progress>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		props: {
			data: {
				type: Object,
				default () {
					return {
						average: 0,
						one: 0,
						two: 0,
						three: 0,
						five: 0,
						four: 0
					};
				}
			}
		},

		computed: {
			totalStar: function() {
				var total = Number(this.data.one) + Number(this.data.two) + Number(this.data.three) + Number(this.data
					.five) + Number(this
					.data.four)
				return total
			},
			oneStar: function() {
				return (Number(this.data.one) / this.totalStar) * 100
			},
			twoStar: function() {
				return (Number(this.data.two) / this.totalStar) * 100
			},
			threeStar: function() {
				return (Number(this.data.three) / this.totalStar) * 100
			},
			fourStar: function() {
				return (Number(this.data.four) / this.totalStar) * 100
			},
			fiveStar: function() {
				return (Number(this.data.five) / this.totalStar) * 100
			},
		},
		methods: {
			chooseImage() {

			},
		}
	}
</script>

<style scoped lang="scss">
	.comprehensive {
		width: 690rpx;
		margin: 0 auto;
		position: relative;
		height: 260rpx;
		border-bottom: 1rpx solid #E5E5E5;

		.comprehensive-num {
			position: absolute;
			left: 32rpx;
			bottom: 64rpx;
			font-size: 68rpx;

			text {
				font-size: 34rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}

		}
	}

	.comprehensiveItem {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		height: 40rpx;

		.comprehensiveItem-left {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			width: 310rpx;
		}

		.comprehensiveItem-right {
			width: 310rpx;
			margin-right: 32rpx;
			margin-left: 30rpx;
		}
	}
</style>

使用

		<comprehensiveEvaluation :evaluationdata="data"></comprehensiveEvaluation>
	

	import comprehensiveEvaluation from './comprehensiveEvaluation.vue'
	

		components: {
			comprehensiveEvaluation
		},