<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-13 16:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-27 11:13:08
 -->
<!--
<data-statistics></data-statistics>

import dataStatistics from '@/components/active/data-statistics.vue';
-->

<template>
  <div class="data-statistics">
    <div class="data-statistics-body flex">
      <div class="data-statistics-left">
        <ul class="flex flex-pack-center flex-align-center">
          <li class="flex-1 flex flex-pack-center flex-align-center">
            <div class="data-statistics-icon"><img
                src=""
                alt=""
              /></div>

            <div class="data-statistics-txt flex flex-column">
              <div class="font-14 color-606266">活动曝光量</div>
              <div class="font-22 color-303133 p-t-10"></div>
            </div>
          </li>
          <li class="flex-1 flex flex-pack-center flex-align-center">
            <div class="data-statistics-icon"><img
                src=""
                alt=""
              /></div>

            <div class="data-statistics-txt flex flex-column">
              <div class="font-14 color-606266">参与人数</div>
              <div class="font-22 color-303133 p-t-10">287,123</div>
            </div>
          </li>
          <li class="flex-1 flex flex-pack-center flex-align-center">
            <div class="data-statistics-icon"><img
                src=""
                alt=""
              /></div>

            <div class="data-statistics-txt flex flex-column">
              <div class="font-14 color-606266">受邀人数</div>
              <div class="font-22 color-303133 p-t-10"></div>
            </div>
          </li>
        </ul>
      </div>
      <div class="data-statistics-middle border-box m-l-20">
        <div class="font-14 color-606266">参与率</div>
        <div class="font-22 color-303133 p-t-5">70%</div>
        <div class="data-percentage">
          <div
            class="data-percentage-inner"
            :style="{ width: '70%' }"
          ></div>
        </div>
      </div>
      <div class="data-statistics-right border-box m-l-20">
        <div class="font-14 color-606266">传播系数</div>
        <div class="font-22 color-303133 p-t-5">4.0</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'data-statistics',
  props: {
    activeData: {
      type: [Array, Object],
      default() {
        return {};
      }
    },
    barChartData: {
      type: [Array, Object],
      default() {
        return {};
      }
    }
  },
  components: {},
  data() {
    this.chartSettings = {
      //showLine: ['传播系数']
    };
    this.colors = ['#1890ff', '#5AD8A6', '#FF6383'];
    return {};
  }
  /* methods() {

  } */
};
</script>
<style lang="less" scoped>
.data-statistics {
  width: 100%;
  height: 90px;
  .data-statistics-body {
    position: relative;
    width: 100%;
    height: 90px;
    &::after {
      overflow: hidden;
    }
    .data-statistics-left {
      min-width: 70%;
      height: 90px;
      background: #f5f7fa;
      ul {
        height: 90px;
        li {
          height: 90px;
        }
      }
      .data-statistics-icon {
        width: 34px;
        height: 34px;
      }
    }
    .data-statistics-middle {
      position: relative;
      min-width: 216px;
      height: 90px;
      background: #f3f6f9;
      padding: 10px 20px 0 20px;
      .data-percentage {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 17px;
        background: rgba(227, 242, 253, 1);
        .data-percentage-inner {
          height: 17px;
          background: linear-gradient(90deg, rgba(53, 195, 255, 1) 0%, rgba(47, 84, 235, 1) 100%);
        }
      }
    }
    .data-statistics-right {
      position: relative;
      min-width: 216px;
      height: 90px;
      padding: 10px 20px 0 20px;
      background: #f3f6f9;
    }
  }
}
</style>
