<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__zoomIn"
    leave-active-class="animate__zoomOut"
  >
    <div class="widget-IndexStatistic" v-if="show">
      <div class="boxpanel">
        <div class="statisticitem" :class="'statisticitem'+index" v-for="(item,index) in dataList" :key="item.name">
          <div class="itemName">{{item.name}}</div>
          <div class="itemCount" :class="'itemCount'+index">{{item.value+item.unit}}</div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'IndexStatistic', //指标统计
  props: {
    show: {}
  },
  data() {
    return {
      dataList: [
        { name: '项目总数', value: 22, unit: '个' },
        { name: '总投资', value: 38.99, unit: '亿' },
        { name: 'EPC项目', value: 7, unit: '个' },
        { name: 'EPC投资', value: 27.8, unit: '亿' }
      ]
    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style lang='scss' scoped>
.animate__zoomIn,
.animate__zoomOut {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-IndexStatistic {
  top: 0.505208rem /* 97/192 */;
  left: 50%;
  margin-left: -2.34375rem /* 450/192 */;
  height: .3125rem /* 60/192 */;
  width: 4.6875rem /* 900/192 */;
  overflow: hidden;
  position: absolute;
  font-family: Source Han Sans CN-HEAVY;
  .boxpanel {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .statisticitem {
      width: 22%;
      height: 100%;
      display: flex;
      border-top: 2px solid;
      justify-content: space-around;
      .itemName {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .083333rem /* 16/192 */;
        font-weight: bold;
        color: #FEFFFF;
        background: linear-gradient(0deg, #9BD2FA 0%, #FFFFFF 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .itemCount {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .125rem /* 24/192 */;
        font-weight: bold;
        color: #2BA7FF;
      }
      .itemCount0{background: linear-gradient(0deg, #028DF0 0%, #00D8FA 100%);background-clip: text;-webkit-text-fill-color: transparent;}
      .itemCount1{background: linear-gradient(0deg, #028DF0 0%, #EADF60 100%);background-clip: text;-webkit-text-fill-color: transparent;}
      .itemCount2{background: linear-gradient(0deg, #028DF0 0%, #0DE795 100%);background-clip: text;-webkit-text-fill-color: transparent;}
      .itemCount3{background: linear-gradient(0deg, #028DF0 0%, #E19AFF 100%);background-clip: text;-webkit-text-fill-color: transparent;}
    }
    .statisticitem0{
      background: linear-gradient(180deg, rgba(43, 167, 255, 0.26) 0%, rgba(43, 167, 255, 0) 100%);
      border-image: linear-gradient(90deg, #028DF0, #00D8FA) 1;
    }
    .statisticitem1{
      background: linear-gradient(180deg, rgba(43, 167, 255, 0.26) 0%, rgba(43, 167, 255, 0) 100%);
      border-image: linear-gradient(90deg, #028DF0, #E6D773) 1;
    }
    .statisticitem2{
      background: linear-gradient(180deg, rgba(43, 167, 255, 0.26) 0%, rgba(43, 167, 255, 0) 100%);
      border-image: linear-gradient(90deg, #028DF0, #0AD88B) 1;
    }
    .statisticitem3{
      background: linear-gradient(180deg, rgba(43, 167, 255, 0.26) 0%, rgba(43, 167, 255, 0) 100%);
      border-image: linear-gradient(90deg, #028DF0, #E19AFF) 1;
    }
  }
}
</style>