首页进度条子组件

<template>
      <div class="m-progress">
            <div class="m-progress-outer">
                  <div class="m-progress-inner">
                        <div :class="['u-progress-bg', {'u-success-bg': progress >= 100}]"
                              :style="`width: ${progress >= 100 ? 100:progress}%;`"></div>
                  </div>
            </div>
            <template v-if="showInfo"></template>
            <svg class="u-success" v-if="progress>=100" viewBox="64 64 896 896" data-icon="check-circle"
                  aria-hidden="true" focusable="false">
                  <path
                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z">
                  </path>
            </svg>
            <!-- 下面是显示进度百分比 -->
            <p class="u-progress-text" v-else>{{ progress>=100 ? 100:progress }}%</p>
      </div>
</template>
<script>
      export default {
            name: 'Progress',
            props: {},
            data() {
                  return {
                        showInfo: true, //是否显示后面的百分比
                        progress: '90', //总长为100
                        // 总长为500的话.进度条的展示....就用当前值/5的值,就是500的进度了,
                  };
            },
      }
</script>
<style scoped>
      /* 设置进度条的宽 */
      .m-progress {
            height: 24px;
            margin: 0 auto;
            display: flex;
            width: 300px;
      }

      .m-progress .m-progress-outer {
            width: 100%;
      }

      .m-progress .m-progress-outer .m-progress-inner {
            display: inline-block;
            width: 100%;
            background: #fff;
            border-radius: 100px;
      }

      /* 下面是进度条的高度 */
      .m-progress .m-progress-outer .m-progress-inner .u-progress-bg {
            background: black;
            border-radius: 100px;
            transition: all .3s cubic-bezier(.08, .82, .17, 1);
            height: 15px;
      }

      .m-progress .m-progress-outer .m-progress-inner .u-success-bg {
            background: #52C41A;
      }

      .m-progress .u-success {
            width: 16px;
            height: 16px;
            fill: #52C41A;
            margin-left: 8px;
            margin-top: 4px;
      }

      .m-progress .u-progress-text {
            font-size: 16px;
            line-height: 24px;
            margin-left: 8px;
            color: rgba(0, 0, 0, 0.45);
      }
</style>