【css】关于一个投票结果页面结合进度条的实现

想做一个最简单的展示投票结果页面，大致像下面这样

实现很简单，UI框架是VantUI

<template>
<div
      class="div_parent"
      v-for="(item) in voted_list"
      :key="item.id">
      <!--默认背景色是#fff-->
      <van-cell class="css_voted_result_list" v-if="isVoted === 'true'">
        <template #title>
          <van-row gutter="5">
            <van-col span="3"><span>{{ item.id }}</span></van-col>
            <van-col span="5"><span>{{ item.sale_name }}</span></van-col>
            <van-col span="5"><span>{{ item.city }}</span></van-col>
            <van-col span="10"><span>{{ item.branch_name }}</span></van-col>
          </van-row>
        </template>
        <template #right-icon>
          <span>{{ item.js }} 票</span>
        </template>
      </van-cell>
      <div class="div_child" :style="{width: ((parseFloat(item.js)/top_vote_num)*100).toFixed(2) + '%'}"></div>
    </div>
</template>

<style scoped>
  /*多个div叠加显示，实现进度条*/
  .div_parent {
    position: relative;
    /*width: 100%;*/
    margin: 5px;
  }

  .div_child {
    position: absolute;
    left: 0;
    top: 0;
    /*width: 50%;*/
    height: 100%;
    background-color: #FFD2C8;
    z-index: -1;
  }

  .css_voted_result_list {
    background-color: transparent;
    padding: 5px 8px
  }
</style>

div_child的width是按照最高得票数的占比计算出来的

<div class="div_child" :style="{width: ((parseFloat(item.js)/top_vote_num)*100).toFixed(2) + '%'}"></div>