<template>
    <div>
        <div v-for="(item,index) in list"
             :key="index" class="flow-start margin-bottom-10">
            <div :class="item.class"></div>
            <div class="legend-cont">{{item.name}}</div>
        </div>
    </div>
</template>

<script>
/**
 * 图例
 *
 */
export default {
  name: 'Legend',
  data() {
    return {
      list: [
        { name: '已流转', class: 'legend-blue' },
        { name: '待流转', class: 'legend-red' },
        { name: '无', class: 'legend-gray' }
      ]
    }
  }
}
</script>

<style scoped>
.legend-blue {
  width: 15px;
  height: 15px;
  background: #00a0e9;
}

.legend-red {
  width: 15px;
  height: 15px;
  background: #eb6877;
}

.legend-gray {
  width: 15px;
  height: 15px;
  background: #999;
}

.legend-cont {
  font-size: 12px;
  margin-left: 5px;
  margin-top: -3px;
}

.margin-bottom-10 {
  margin-bottom: 10px;
}
</style>
