<!--
  @description: 统计报表-总汇组件
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/27
-->
<template>
  <ul class="statistics-crud">
    <!-- :style="{ width: 'calc( 100% / ' + list.length + ' )' }" -->
    <li
      v-for="(item, index) in list"
      :key="index"
      :style="{ width: item.width }"
    >
      <dl>
        <dt>
          <!-- 值 -->
          <span class="statistics-crud_value">
            {{ item.value }}
          </span>
          {{ item.suffix }}
        </dt>
        <!-- 标题 -->
        <dd>
          {{ item.name }}
        </dd>
      </dl>
    </li>
  </ul>
</template>
<script>
/**
 * {
 *  name:"", 标题
 *  suffix:"",单位/后缀
 *  width:""//宽度
 *  value:"",值
 *  code:"",编码（可有可无）
 *  icon:"",// icon-font
 * }
 */
export default {
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      }
    }
  }
}
</script>
<style lang="less" scoped>
// 引入变量
@import "./../../reportChart.public.less";
@crud-ighlight: @text-ighlight; //统计文字高亮;
@crud-fontSize_value: 1.5rem; //统计文字大小
@crud-fontSize_title: .875rem; //标题文字大小
@crud-H: 50%; //crud高度
/*样式颜色边距修改-在上面的变量修改即可*/

.statistics-crud {
  background: @highlight-bg;
  height: @crud-H;
  li {
    position: relative;
    box-sizing: border-box;
    float: left;
    height: 100%;
    text-align: center;
    background: url(~@/assets/img/statisticalAnalysis/reportChart/u170.png) center
      right no-repeat;
    &:last-of-type {
      background: none;
    }
    dl {
      position:absolute;
      top:50%;
      margin-top: -(@crud-fontSize_title + @crud-fontSize_value);
      left: 0;
      right:0;
      font-size:@crud-fontSize_title;
      dt {
        .statistics-crud_value {
          font-size:@crud-fontSize_value;
          color: @crud-ighlight;
        }
      }
    }
  }
}
</style>
