<template>
  <div class="demo">
    <div style="padding: 0 2px">
      <xl-panel :background-color="signleColor" :list="list1" title="基本概况" icon="wap-home-o" />
    </div>
    <div class="tank">
      <xl-panel :background-color="signleColor2" direction="column" :list="list1" title="电量概况" icon="info-o" />
      <xl-panel :background-color="signleColor3" direction="column" :list="list1" title="负荷概况" icon="bullhorn-o" />
    </div>

    <div style="padding: 0 2px">
      <xl-panel :background-color="signleColor4" title="基本概况" :list="list1" icon="wap-home-o" />
    </div>
  </div>
</template>
<script>
import { XlmPanel } from '../../lib'
export default {
  components: {
    XlPanel: XlmPanel
  },
  data() {
    return {
      list1: [
        { value: 51, unit: '台', label: '主变台数' },
        { value: 25, unit: '个', label: '监测点数量' },
        { value: 558, unit: 'kva', label: '合同容量' },
        { value: 5562, unit: 'kva', label: '主变容量' }
      ],
      signleColor: 'rgba(79, 153, 178, 1)',
      signleColor2: 'rgba(205, 84, 65, 1)',
      signleColor3: 'orange',
      signleColor4: 'rgba(18, 147, 69, 1)'
    }
  }
}
</script>

<style>
.panel-content {
  margin: 5px 0 15px 0;
}
.wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper2 p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 38px;
  color:#fff;
  font-size: 12px;
  border-bottom: 1px solid #f0f0f0;
}
.wrapper > div {
  position: relative;
  flex: 1;
}
.wrapper > div:after{
  content: '';
  position: absolute;
  width: 1px;
  transform: scale(0.5);
  right: 0;
  background: #fff;;
  height: 200%;
}
.wrapper > div:last-child::after {
  display: none;
}
.tank {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}
.tank > div {
  margin: 2px;
}
.number-unit-wrap .number-and-unit .count {
  font-size: 22px!important;
}
</style>
