项目初始化

gaoluyang

3 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/pages_qiun/components/data-progress/data-progress.vue

对比新文件
@@ -0,0 +1,93 @@
<template>
   <view class="column">
      <view v-for="(item,index) in progressList" :key="index" :class="['row','font-small','progress',padMiddle?'paddingMiddle':'']">
         <text class="title">{{item.name}}</text>
         <view class="body">
            <view class="number">{{item.now?item.now+"/":""}}{{item.expect}} [{{item.value}}%]</view>
            <progress :percent="item.value" backgroundColor="#C9C9C9"
            :border-radius="borderRadius?borderRadius+'rpx':'0px'"
            :color="time" 
            stroke-width="16" />
         </view>
      </view>
   </view>
</template>

<script>
   export default {
      name:'data-progress',
      props: {
         progressList: {
            type: Array,
            default: ()=> {
               return []
            }
         },
         borderRadius:{
            type:Number,
            default:0
         },
         padMiddle:{
            type:String,
            default:"false"
         }
      },
      data() {
         return {
            time:0
         }
      },
      watch:{
         "progressList":{
            deep: true,
            handler: function(newVal, oldVal) {
               this.time = newVal.filter(x=>x.name=="鏃堕棿杩涘害")[0].value;
            }
         }
      },
      created() {
         this.time = this.progressList.filter(x=>x.name=="鏃堕棿杩涘害")[0].value;
      }
   }
</script>

<style lang="scss">
   .paddingMiddle{
      padding: 18rpx 10rpx;
   }
   .progress{
		
      .title{
         font-size: 28rpx;
         width: 170rpx;
         display: flex;
         align-items: center;
			
      }
      .body{
         position: relative;
         flex: 1;
			
         .number{
            color: #fff;
            position: absolute;
            z-index: 2;
            left: 26rpx;
            height: 100%;
            display: flex;
            align-items: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            height: 44rpx;
         }
         progress{
            padding: 6rpx 0;
         }
		
      }
   }
	
	
	
</style>