Vue根据状态改变背景色,当状态为正常时背景色为青色,状态为库存不足时背景色为红色,当油品为柴油时背景色为蓝色
<ul class="conert-list">
<li v-for="item in initData2" :key="item.code">
<h3 class="shang">{{ item.name }}</h3>
<ul class="conert-list-child">
<li v-for="c in item.child" :key="c.tank_no">
<div :class="{ 'waterCircle-circle':1, 'waterCircle-circle-lower': c.is_waring*1}">
<div :style="{ height: c.vol / c.tankvol * 100 + '%'}">
</div>
</div>
<article>
<div v-if="c.is_warning == 1">
状态:正常
</div>
<div v-if="c.is_warning == 0">
<a>状态:<span style="color:#cb4757">库存不足</span></a>
</div>
编号:{{ c.code }}#<br />
油品:{{ c.oil_name }}<br />
罐容:{{ c.tankvol }}L<br />
库存:{{ c.vol }}L<br />
</article>
</li>
</ul>
</li>
</ul>