<!--图例-->
<template>
  <ul class="lengend">
    <li v-for="(value,index) in list" :key="index" :style="`color: ${value[1]}`">
      <i :style="`background: ${value[1]}`"></i><span>{{value[0]}}</span>
    </li>
  </ul>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [
          ['项目数', '#bd273c'] // 第一个值是显示的文字，第二个值是颜色
        ]
      }
    }
  }
}
</script>

<style scoped>
.lengend{
  display: flex;
  margin-left: .1rem;
}
.lengend li{
  margin-right: .1rem;
}
.lengend li:last-child{
  margin-right: 0;
}
.lengend li i{
  display: inline-block;
  width: .05rem;
  height: .02rem;
  background: #fff;
  margin-right: .05rem;
  vertical-align: middle;
}
.lengend li span{
  font-size: .05rem;
}
</style>