flex布局 实现进度条

效果图

vue template模板

mounted 挂载

methods 后台接口

// An highlighted block
 [点击并拖拽以移动]



<template>
  <div class="pro">
    <div class="prok"><i class="pro1">看涨{{progress}}%</i><i class="pro2">看跌{{progress1}}%</i></div>
    <div id="probar">
      <div :style="{width:progress+'%'}"></div>
      <div :style="{width:progress1+'%'}"></div>
    </div>
  </div>
</template>
<script type="text/babel">
export default {
  data () {
    return {
      stockName: '',
      progress: 50,
      progress1: 50
    }
  },
  mounted: function () {
    this.get_progress()
  },
  methods: {
    get_progress () {
      this.axios.get(this.linkPrefix + '/message_api/public_opoinion', {
        params: {
          stockcode: this.$route.query.num
        }
      }
      ).then(response => {
        this.progress = response.data.data.progress
        this.progress1 = response.data.data.progress1
      })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .pro
    position relative
    margin-top .8rem
  .prok i
    position absolute
    top -.45rem
  .pro1
    position absolute
    left 0
    color #10907a
  .pro2
    position absolute
    right 0
    color #ed5a00
  #probar
    position relative
    width 100%
    height .4rem
    display flex
    border-radius .6rem
    overflow hidden
  #probar div:nth-child(1)
    background-color #10907a
  #probar div:nth-child(2)
    background-color #ed5a00

</style>