<div class="item">
<div class="info">
<div>检擦站1111</div>
<div class="info-num">
<div>25</div>
<div>/50</div>
</div>
</div>
<div class="rank">
<div class="warp">
<div class="num1" :style="{ width: (25 / 50) * 100 + '%' }"></div>
<img :style="{ left: (25 / 50) * 100 - 5 + '%' }" src="../assets/logo.png" alt="" srcset="" />
</div>
</div>
</div>
<div class="item">
<div class="info">
<div>检擦站1111</div>
<div>45454</div>
</div>
<div class="rank">
<div class="warp">
<div class="num1" :style="{ width: (20 / 50) * 100 + '%' }"></div>
<img :style="{ left: (20 / 50) * 100 - 5 + '%' }" src="../assets/logo.png" alt="" srcset="" />
</div>
</div>
</div>
.middlex {
width: 50%;
height: 300px;
border: 1px solid red;
background-color: #ccc;
// margin: 0 auto;
.item {
width: 200px;
height: 40px;
margin-bottom: 10px;
background-color: #fff;
.info {
width: 100%;
height: 20px;
line-height: 20px;
padding: 0 10px;
display: flex;
justify-content: space-between;
.info-num{
display: flex;
}
}
.rank {
width: 100%;
height: 20px;
// border: 1px solid black;
.warp {
width: 180px;
height: 10px;
background-color: #ccc;
margin: 5px 10px;
position: relative;
border-radius: 10px;
.num1 {
position: absolute;
left: 0;
top: 0;
height: 100%;
// width: 50%;
background-color: blue;
border-radius: 10px;
}
img {
width: 10px;
height: 10px;
position: absolute;
left: 20%;
top: 0;
}
}
}
}
}