不同颜色的分段进度条

实现不同颜色的分段进度条可以按照以下步骤操作：

1. 定义每个分段的颜色和进度。

const segments = [
  { progress: 20, color: 'red' },
  { progress: 30, color: 'blue' },
  { progress: 50, color: 'green' }
];

2. 计算出进度条的总宽度和每个分段的宽度。

const totalProgress = segments.reduce((sum, segment) => sum + segment.progress, 0);
const segmentWidth = 100 / segments.length;

3. 渲染进度条组件，为每个分段设置不同的颜色和宽度。

<div class="progress-bar">
  <div v-for="(segment, index) in segments" :key="index"
       :style="{ width: segmentWidth + '%', backgroundColor: segment.color }"
       class="progress-segment">
    <div :style="{ width: segment.progress + '%' }"
         class="progress-bar-inner" />
  </div>
</div>

4. 使用 CSS 样式来美化进度条的外观，可以设置不同颜色的背景色、边框、阴影等。

.progress-bar {
  background-color: lightgray;
  height: 20px;
  display: flex;
}

.progress-segment {
  position: relative;
  flex-grow: 1;
  border: 1px solid white;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

.progress-bar-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: white;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

这样，就可以实现不同颜色的分段进度条了。您可以根据实际需求进行调整和优化。