实现对战进度条

<template>
  <div :class="$options.name">
    <div class="pk-detail-con">
    <span class="vote-nums vnums-l">5</span>

    <div class="progress" >
      <div class="progress-bar" style="width: 50%;">
        <i class="lightning"></i>
      </div>
    </div>
    <!-- <span class="team-name team-l">主队</span> -->
    <!-- <span class="team-name team-r">客队</span> -->
    <span class="vote-nums vnums-r">5</span>
</div>
  </div>
</template>

<script>
export default {
  name: "Progress",
  props: [],
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.Progress {
    .pk-detail-con {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 375px;
    }
    .progress {
        width: 100%;
        height: 10px;
        overflow: hidden;
        background-color: #db1d4e;
        border-radius: 19px;
    }
    .progress-bar{
        height: 10px;
        text-align: left;
        background-color: #4c3de0;
        -moz-transition: width .6s ease;
        -webkit-transition: width .6s ease;
        transition: width .6s ease
    }
    .progress, .progress-bar {
        background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);
        background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);
        background-image: linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);
    }
    .lightning {
        width: 5px;
        height: 10px;
        float: right;
        // margin-right: -12px;
        background: url("./pk-lightning.png") no-repeat center;
        background-size: cover;
    }
    .team-name {
        position: absolute;
        top: 0;
        line-height: 10px;
        color: #f3eee1;
        letter-spacing: 1px;
        font-size: 14px;
    }
    .team-l {
        left: 23px;
    }
    .team-r {
        right: 23px;
    }
    .vote-nums {
        line-height: 2;
        color: #000;
        font-size: 12px;
    }
    .vnums-l {
        float: left;
        margin-left: 0px;
    }
    .vnums-r {
        float: right;
        margin-right: 0px;
  }
}
</style>