foster-pc-vue/src/views/znxy/charts/r/components/ProgressBar.vue

<template>
  <div class="progress">
    <div class="progress-name">
      <span>{{ name }}</span>
    </div>
    <!-- <div class="progress-cont"> -->
      <div class="progress-bar">
        <div
          class="progress-bar-fill"
          :style="{ width: number + '%' }"
          :class="{ max: number === 100 }"
        ></div>
      </div>
      <div class="num">{{ number + "%" }}</div>
    <!-- </div> -->
  </div>
</template>

<script setup>
const props = defineProps({
  number: {
    type: Number,
    required: true,
  },
  name: {
    type: String,
    required: true,
  },
});
</script>

<style scoped lang="scss">
.progress {
  display: flex;
  align-items: center;
  width: 100%;
  background: #053441;
  // border: 1px solid #146A7D;
  padding: 5px 0 5px 5px;
  box-sizing: border-box;
  color: #00fff0;
  font-size: 12px;
}
.progress-name {
  width: 40%;
}
.num{
  margin-left: 4px;
  font-size: 11px;
}
.progress-cont{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.progress-bar {
  width: 100%;
  background: url("@/assets/img/progress_bg.png") no-repeat center center / 100% 100%;
  box-sizing: border-box;
  padding: 3px 4px 3px 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 10px;
  background: linear-gradient(
    95deg,
    rgba(7, 161, 163, 0.98),
    rgba(255, 255, 255, 0.98)
  );
  border-radius: 10px 0 0 10px; /* 左侧圆角 */
}
.max {
  border-radius: 10px;
}
</style>