1.  代码

​
<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.运行结果