<template>
  <div class="integral-statistics__wrapper">
    <div class="integral-statistics__item" v-for="(item, index) in data" :key="index">
      <div class="integral-statistics__value">{{ item.value }}</div>
      <div class="integral-statistics__label">{{ item.label }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: { 
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>
<style lang="less" scoped>
.integral-statistics__wrapper {
  position: relative;
  margin: 0 auto;
  display: flex;
  width: 346px;
  height: 78px;
  border-radius: 8px;
  z-index: 10;
  background: #fff;
  box-shadow:0px 2px 6px 0px rgba(0,0,0,0.05);
  flex-direction: row;
}

.integral-statistics__item {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  & .integral-statistics__value {
    padding-bottom: 5px;
    color: #26a2ff;
    font-size: 0.44rem;
    font-weight: 600;
  }

  & .integral-statistics__label {
    font-size: 14px;
    color: #999;
  }
}

.current-event__item {
  position: relative;
  display: flex;
  box-sizing: border-box;
  font-size: 0.32rem;
  color: #333;

  &:not(:last-child)::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0;
    bottom: 0;
    left: 16px;
    border-bottom: 1px solid #ebedf0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  & .current-event_content {
    display: flex;
    flex: 1;
    padding: 0.24rem 0 0.24rem 0.32rem;
  }

  & .current-event_value {
    display: flex;
    padding-right: 0.32rem;
    width: 1.1rem;
    color: #ff0000;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
