vue组件进度条

版权声明：yx全栈学习 https://blog.csdn.net/qq_43671996/article/details/84975826

效果图

<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>
<script type="text/babel">
export default {
  data () {
    return {
      progress: '40'
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
  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%
</style>