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