进度条

涨40%

跌60%

代码展示:

<template>
  <div class="progressContainer">
    <b class="b1">涨{{progress}}%</b>
    <div class="progress" :style="{width:progress+'%'}"></div>
    <b class="b2">跌{{100-progress}}%</b>
    <div class="progress probar" :style="{width:100-progress+'%'}"></div>
  </div>
</template>

逻辑部分：

export default {
  data () {
    return {
      progress: '40'
    }
  }
}

样式部分：

  div.progressContainer
    margin-top 1rem
    width: 95%
    border-radius: .2rem
    background-color: #fff
    margin-left: 2%
  div.progress
    float:left
    background-color: #ed5a00
    border-radius: .5rem 0rem 0rem .5rem
    height:.3rem
    line-height: .2rem
  b
    position:absolute
    margin-top -.6rem
    font-weight: 100
    font-size: 12px
  div .b1
    color:#ed5a00
    left:7%
  div.probar
    float:left
    background-color #30a794
    border-radius: 0rem .5rem .5rem 0rem
  div .b2
    color #30a794
    right:7%