vue组件进度条

最新推荐文章于 2025-07-08 11:01:30 发布

原创最新推荐文章于 2025-07-08 11:01:30 发布 · 847 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#进度条

vue学习专栏收录该内容

19 篇文章

订阅专栏


效果图

<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>