自定义封装弹出框（带进度条）

    <div class="window" v-show="progressShow" @click="progressShow = false">
      <div class="modular-content">
        <div class="progress">
          <div class="progress-title">{
   { Progress.title }}</div>
          <div class="progress-content">
            <span>{
   { Progress.text }}</span>
            <span>{
   { Progress.company }}</span>
          </div>
          <div class="tab-list" v-for="(item, index) in Progress.list" :key="index" >
            <div class="left">{
   { item.title }}</div>
            <div class="center">
              <div class="center-top"></div>
              <div class="center-bottom" :style="{ width: Progress.id != 2 ? item.num : toPercent(item.num, 400), }" ></div>
            </div>
            <div class="right">{
   { item.num }}</div>
          </div>
        </div>
      </div>
    </div>

 methods: {
    
    toPercent(num, total) {
    
      return Math.round((num / total) * 10000) / 100.0 + "%";
    },
    }

.window {
    
  position: fixed;
  width: 100%;
  height: 100%;
  background: #0000005c;
  top: 0;
  z-index: 9999;
}
.modular-content {
    
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.progress-content {
    
  display: flex;
  justify-content: space-between;
  /* text-align: right; */
  font-size: 20px;
  margin-bottom: 10px;
}
.progress-title {
    
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
}
.progress {
    
  width: 500px;
  background: #142235;
  color: #fff;
  padding: 20px;
  border-radius: 6px;
}

.progress .tab-list {
    
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  margin-bottom: 10px;
}
.tab-list .center {
    
  flex: 1;
  margin: 0px 10px;
  position: relative;
  height: 15px;
}
.center-top {
    
  background: #193369;
  height: 100%;
  width: 100%;
  border-radius: 30px;
}
.center-bottom {
    
  background: linear-gradient(to right, #016ce7, #62dbff);
  border-radius: 30px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.tab-list .left {
    
  width: 50px;
}
.tab-list .right {
    
  width: 70px;
  text-align: right;
}