// An highlighted block
<template>
	<view>
		<view class="gift-out-box">
			<!--
				除以时得到下标, 有余数/无余数,  
				if(index <= rIndex) 下标之前的orange,
				else-if( 余数>0 && rIndex+1 == index) 有余数的部分占比width,
				else 灰颜色
			-->
			<view class="gift-in-box">
				<view class="item" v-for="(item,index) in list" :key='index'>
					<view class="out-process" v-if='index <= rIndex'>
						<view class="in-process in-process-width"></view>
					</view>
					<view class="out-process" v-else-if='rIndex+1 == index && remainder>0'>
						<view class="in-process in-process-orange" :style="{width:`${remainderWidth}rpx`}"></view>
					</view>
					<view class="out-process in-process-grey" v-else>
						<view class="in-process"></view>
					</view>
					<image :src="index <= rIndex ? '/static/gift.png' : '/static/gift-grey.png'" mode="aspectFit" class="img"></image>
				</view>
			</view>
			<view class="person-box">
				<text>0人</text>
				<text v-for='(item,index) in list' :key='index'>{{getNum(item.num,index)}}</text>
			</view>
		</view>
		<!-- <view class="out-process">
			<view class="in-process" :style="{width:`${percent*200/100}rpx`}"></view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				percent:58,  
				personNum:18,   //人数
				
				list:[
					{num:5},
					{num:10},
					{num:15},
					{num:20}
				],
				rIndex:-1,
				remainder:0,
				remainderWidth:0,  //余数的宽
			}
		},
		computed: {  
			
		},
		mounted() {
			this.getIndex();
		},
		methods: {
			getIndex(){
				//整数
				this.rIndex = parseInt(this.personNum/5) - 1;
				//余数  
				if(this.personNum%5 > 0){
					this.remainder = this.personNum%5;
					this.remainderWidth = (this.personNum%5)/5*100;
				} 
				console.log(this.rIndex,"...",this.remainderWidth)
			},
			getNum(num,index){
				return num = index <= this.rIndex?`已邀${num}人`:`${num}人`;
			},
		}
	}
</script>
<style lang="scss" scoped>
	.out-process{
		width:200rpx;
		height:20rpx;
		background-color: #cccccc;
		border-radius: 8rpx;
		position: relative;
		.in-process{
			position: absolute;
			top:0;
			left:0;
			height:20rpx;
			border-radius: 8rpx;
			background-color: orangered;
		}
	}
	.gift-out-box{
		margin:40rpx 20rpx;
		padding: 20rpx;
		border: 1rpx solid #c0c0c0;
		.person-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin:0 30rpx;
			font-size: 24rpx;
		}
		.gift-in-box{
			display: flex;
			align-items: center;
			justify-content: center;
			
			.item{
				display: flex;
				align-items: center;
				.out-process{
					position: relative;
					width:100rpx;
					height:14rpx;
					background-color: #cccccc;
					border-radius: 4rpx;
					.in-process{
						position: absolute;
						top:0;
						left:0;
						height:14rpx;
						border-radius: 4rpx;
					}
					// orange + width
					.in-process-width{
						width:100rpx;
						background-color: orangered;
					}
					//orange
					.in-process-orange{
						background-color: orangered;
					}
					// grey + width
					.in-process-grey{
						width:100rpx;
						background-color: #c0c0c0;
					}
				}
				.img{
					width:50rpx;
					height: 56rpx;
					margin:0 4rpx;
				}
			}
		}
		
	}
</style>
```![在这里插入图片描述](https://img-blog.csdnimg.cn/90dc836364bb4f0ea5dd1636295130eb.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/5ed29f9edc0d4c71a4822a8c715c264a.png#pic_center)