uniapp risk level (level three)

1.  code

​
<template>
	<view>
		<view class="riskGrade">
			<label>风险等级: </label>
			<span v-if="flag == 0 || flag == 1 || 2" class="item"
				:style="[{background:flag==0?color:flag==1?color:flag==2?color:''}]"></span>
			<span v-else class="item"></span>
			<span v-if="flag == 1 || flag == 2" class="item"
				:style="[{background:flag==0?color:flag==1?color:flag==2?color:''}]"></span>
			<span v-else class="item"></span>
			<span v-if="flag == 2" class="item"
				:style="[{background:flag==0?color:flag==1?color:flag==2?color:''}]"></span>
			<span v-else class="item"></span>
			<span class="con" :style="{color:flag==0?color:flag==1?color:flag==2?color:''}">
				{
   
   {flag==0?'低风险':flag==1?'中风险':'高风险'}}</span>
		</view>
	</view>
</template>

<script>
	export default {
		name: "riskGrade",
		props: {
			flag: {
				default: 0, // 0低风险 1中风险 2高风险
				type: Number,
				require: true,
			},
			color: {
				default: 'green', // green低风险 orange中风险 red高风险
				type: String,
				require: true,
			}
		},
		data() {
			return {};
		}
	}
</script>

<style scoped>
	.riskGrade {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
	}

	label {
		width: 110rpx;
		height: 30rpx;
		font-weight: 600;
	}

	.con {
		display: inline-block;
		width: 80rpx;
		height: 30rpx;
	}

	.item {
		display: inline-block;
		width: calc(520rpx / 3);
		height: 30rpx;
		background-color: #ddd;
		margin-left: 10rpx;

		&:nth-of-type(3) {
			margin-right: 10rpx;
		}
	}
</style>

​

 2. Running results