<!--
 * @Description: ul列表
 * @Author: 王晓颖
 * @Date: 2020-08-10
 -->
<template>
  <div class="container">
    <div class="sub-container">
      <ul class="ecologyBox" style="padding-left: .1rem;">
        <li class="ecologyBox_til">
          <p v-for="(option,key) in options" :key="key">{{option}}</p>
          <!--<p>数/量</p>-->
        </li>
        <li v-for="(value,index) in data" :key="index">
          <p v-for="(item,key) in value" :key="key">{{item}}</p>
          <!--<p>{{value.total}}</p>-->
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SimpleBoard',
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          name: '名称',
          total: '数量'
        }
      }
    },
    data: {
      type: Array,
      default: () => {
        return [
          {name: '第一项', total: 100},
          {name: '第二项', total: 50},
          {name: '第三项', total: 10}
        ]
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../assets/css/variable.scss';
.container{
  background: url("../../assets/images/ecology.png") no-repeat left top;
  margin: 0 0rem 0 0.1rem;
  background-size: 100% 100%;
  padding: 0.02rem 0;
  .ecologyBox {
    padding: 0 0.05rem;
    li {
      display: flex;
      justify-content: space-between;
      padding: 0.05rem 0;
      /*background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);*/
      /*-webkit-background-clip: text;*/
      p {
        color: $listTextColor;
        font-size: 0.06rem;
        line-height: 0.06rem;
        width: 22%;
        text-align: left;
      }
      p:first-child {
        width: 34%;
      }
    }
    li:hover:not(.ecologyBox_til) {
      background: $gradientListHover;
    }
    .ecologyBox_til p {
      color: #fff;
    }
  }
}
</style>