vue中写一个固定长度蓝色底，橙色加载值的进图条组件

你可以按照如下代码示例在 Vue 中写一个固定长度蓝色底、橙色加载值的进度条组件：

<template>
  <div class="progress-bar">
    <div class="progress-bar__inner" :style="{ width: `${percentage}%` }"></div>
  </div>
</template>

<script>
export default {
  props: {
    percentage: {
      type: Number,
      default: 0,
      required: true
    }
  }
}
</script>

<style scoped>
.progress-bar {
  width: 200px;
  height: 10px;
  background-color: #ddd;
  position: relative;
}
.progress-bar__inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: orange;
}
</style>

在组件的模板中，我们创建了一个 div 元素，并给它设置了一个固定的宽度和高度。这个 div 元素代表整个进度条的外框，我们在它的内部再创建了一个 div 元素，这个元素代表进度条的加载部分。

我们使用 CSS 将加载部分的颜色设置为橙色，并将它的宽度设置为 percentage 的值。在组件的 props 中，我们定义了一个 percentage 属性，它接收一个 Number 类型的值，这个值表示进度条的百分比。我们在进度条的加载部分的 style 中将它的宽度设置为 percentage 的值，并使用插值语法动态绑定 width 样式。

这样就完成了一个固定长度蓝色底、橙色加载值的进度条组件。你可以在使用时将 percentage 属性绑定到你的数据上，以控制进度条的进度。