如何解决多个CSS进度栏HTML页面
我有一段CSS圆形进度条HTML
我对情节进行了样式设置,但一切正常,但
问题是我在同一页面中有很多图,并且使用for循环生成它
因此需要命名每种绘图样式crad(.card:nth-child(1)和2 ...)
{% for welTsts in WellTsTProDChart %}
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="card card-success">
<div class="card-header">
<h3 class="card-title">Production Tests: <var id="OIlVar">{{welTsts.TestOIL}}</var> Oil (m3/D)
<var id="WATVar">{{welTsts.TestWTR}}</var></h3>
</div>
<style>
.card:nth-child(1) svg circle:nth-child(2)
{
stroke-dashoffset: calc(440 - (440 * {{welTsts.get_OCUT}}) / 100);
stroke: #28a745;
}
</style>
<div class="container1 w3-light-grey solid">
<div class="card">
<div class="box">
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70"></circle>
</svg>
<div class="number">
<h2>{{welTsts.get_OCUT}}<span>%</span></h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
,它仅采用最后一个值并将其应用于所有图
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。