技術標籤：vue + ant 後臺專案

目錄

• • • 進度條元件
    • 引用進度條元件

進度條元件

<template>
  <div class="progress-bar">
    <div class="top-num" :style="{paddingLeft:doneWidth}">
      <div class="text-bar">{{ barText }}：￥{{ drugCost }} </div>
      <div class="text-icon"><a-icon type="caret-down" class="arrow_icon" /></div>
    </div>
    <div class="p-line"></div>
    <div class="p-done" :style="{width:doneWidth,background:barColor}"></div>
    <div class="bottom-num">
      <div style="float:left">0</div>
      <div style="float:right">{{ totalCost }}</div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      barText: {
        type: String,
      },
      drugCost: {
        type: Number,
      },
      totalCost: {
        type: Number,
      },
      barColor: {
        type: String,
      },
    },
    data () {
      return {
      };
    },
    computed: {
      ratio () {
        const r = this.drugCost / this.totalCost;
        return r;
      },
      doneWidth () {
        return this.drugCost / this.totalCost * 100 + '%';
      },
    },
    mounted () {
      console.log('doneStyle:', this.doneWidth);
    },
  };
</script>

 <style lang="less" scoped>
.progress-bar{
  width:100%;
  width: 500px;
  position: relative;
  .p-line{
    position: absolute;
    z-index: 1;
    width:100%;
    height: 10px;
    border-radius: 4px;
    background-color: #EEEEEE;
  }
  .p-done{
    position: absolute;
    z-index: 2;
    width:80%;
    height: 10px;
    border-radius: 4px;
    // background: linear-gradient(45deg, #40A9FF 25%, #1890FF 0, #1890FF 50%, #40A9FF 0, #40A9FF 75%, #1890FF 0);
    background-size: 30px 30px;
  }
  .top-num{
    margin-left:-30px;
    margin-right:-80px;
    text-align: left;
    .text-bar{
      position: relative;
      top: -14px;
      font-size: 13px;
    }
    .text-icon{
      color:#008CDB;
      padding-left:20px;
      margin-top:-12px;
      .arrow_icon{
        color: #008CDB;
        font-size:18px;
      }
    }
  }
.bottom-num{
    width:100%;
    padding-top:15px;
  }
}
</style>

 

引用進度條元件

• drugCost：進度條寬度 佔據
• totalCost：進度條總數
• barColor：這是進度條的顏色
• barText： 進度條的文字

<template>
  <div class="left-bottom-bar">
    <progress-bar :drugCost="drugCost" :totalCost="totalCost" :barColor="barColor" :barText="barText"  />
  </div>
</template>
<script>
  import progressBar from './progressBar';
  export default {
    components: {
      progressBar,
    },
    data () {
      return {
        barText: '藥費',
        drugCost: 80,
        totalCost: 160,
        barColor: 'linear-gradient(45deg, #40A9FF 25%, #1890FF 0, #1890FF 50%, #40A9FF 0, #40A9FF 75%, #1890FF 0)',
      };
    },

    methods: {
    },
  };
</script>
<style lang="less" scoped>
.left-bottom-bar{
  background: #fff;
  height: 50px;
  margin-top:20px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding:0 40px 0 40px;
}
</style>