示例图
实现：
<!-- 总数量 totalNum 现有数量 nowNum --><div class="box"><div class="grid-content"><div v-for="(item, index) in 40" :class="{'grid-reset': item % 2 !== 0 && item > nowNum/totalNum*40, 'grid-two': item % 2 === 0, 'grid-item': true}" :key="index"></div></div></div>
totalNum: 500,nowNum: 100,
/* 大盒子背景色 */.box {background-color: #00103f;width: 300px;height: 300px;padding: 50px;/* 装所有item的盒子 设为渐变色 */.grid-content {display: flex;width: 200px;background-image: linear-gradient(to right, #0A89FA, #0aedff);/* 双数的item需要设置为与大盒子背景色一样，相当于没有双数item */.grid-two {background-color: #00103f;}/* 默认颜色为渐变色的背景色，永远不变，当比例数值没有到达40时，需要显示这个背景色 */.grid-reset {background-color: #0A285E;}.grid-item {width: 5px;height: 15px;}}}
