如图
```javascript <!--进度条--> <template> <div class="speed-bar"> <div class="speed-bar-body"> <div v-for="(item,i) in speedData" :key="i" :style="{'background':item.color,'width':item.value*100+'%'}"> <span v-if="i==0" class="speed-bar-left" :style="{'background':item.color}"></span> <span v-if="i==speedData.length-1" class="speed-bar-right" :style="{'background':item.color}"></span> </div> </div> </div> </template> <script> export default { name: "SpeedBar", props:{ speedData:{ type:Array, default:function () { return [ { value:0.3, color:'#437EFF' }, { value:0.7, color:'#373742' }, ] } } } } </script> <style lang="less" scoped> .speed-bar-body{ div{ overflow: hidden; height: 2px; display: inline-block; position: relative; } div::after{ display: inline-block; height: 0px; width: 0px; content: ''; border: 1px solid #1E212B; border-left: 1px solid transparent; border-bottom: 1px solid transparent; position: absolute; right: 0px; } div::before{ display: inline-block; height: 0px; width: 0px; content: ''; border: 1px solid #1E212B; border-right: 1px solid transparent; border-top: 1px solid transparent; position: absolute; left: 0px; } .speed-bar-left{ display: inline-block; width: 2px; height: 2px; position: absolute; left: 0px; border-radius: 50%; z-index: 11; } .speed-bar-right{ display: inline-block; width: 2px; height: 2px; position: absolute; right: 0px; border-radius: 50%; z-index: 11; } div:last-child::after{ display: inline-block; background: #272733; height: 2px; width: 1px; content: ''; border: none; position: absolute; right: 0px; z-index: 10; } div:first-child::before{ display: inline-block; background: #272733; height: 2px; width: 1px; content: ''; border: none; position: absolute; left: 0px; z-index: 10; } } </style> 拿去不谢