blockShow组件

页面中的blockShow组件展示，可进行相关的样式修改，一般月饼图搭配使用，具体根据实际来

 

组件代码：

<template><!-- 这是新版的相对应的颜色列表的UI --><div class="bllockListShow"><div class="pieList" v-for="(item,index) in dataArr" :key="index" @click="clickUptown(index,item)":style="{height:height,marginTop:listTop,background:listBackground}"><div class="pieSquare" :style="{background:colors[index],marginTop:squareTop}"></div><div class="pieName" :style="{lineHeight:height}">{{item.name}}</div><div class="pieValue" :style="{lineHeight:height,paddingRight:paddingRight}" style="font-size:16px;font-style: oblique;">{{item.value}}</div><div class="pieValue" :style="{lineHeight:height,paddingRight:paddingRight,color:colors[index]}" v-if="isRateShow">{{item.rate}}%</div><!-- <div class="pieLine" :style="{background:colors[index],height:height}"></div> --></div></div>
</template>
<script>
export default {props:{colors:{type:Array,default:()=>[]},//数组dataArr:{type:Array,default:()=>[]},height:{type:String,default:'28px'},squareTop:{type:String,default:"11px"},listTop:{type:String,default:'15px'},paddingRight:{type:String,default:'15px'},isRateShow:{type:Boolean,default:true},listBackground:{type:String,default:'rgba(255, 255, 255, 0.1)'}},data() {return {}},methods: {},mounted(){},
}
</script>
<style lang="scss">
.bllockListShow{.pieList:first-child{margin-top: 0px;}.pieList{width: 100%;// background: rgba(255, 255, 255, 0.1);position: relative;display: flex;// margin-top:10px;cursor: pointer;.pieSquare{width: 6px;height: 6px;background: #1D9FFF;// margin-top: 11px;margin-left: 10px;}.pieName{font-size: 12px;color: #ACC4E5;// line-height: 28px;padding-left: 10px;}.pieValue{font-size: 12px;color: #ffffff;// line-height: 28px;// padding-left: 20px;font-weight: bold;flex:1;text-align: right;// padding-right: 5px;}.pieLine{position: absolute;width: 2px;// height: 28px;top:0px;right:0px;background: #1D9FFF;}}
}
</style>