<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="two">
          <el-col :span="24">
            <el-col :span="5">
              <el-card class="box-card">
                <el-col :span="8">
                  <i class="icon_1 el-icon-box"></i>
                </el-col>
                <el-col :span="12" class="title">
                  <p><span>24</span>（单）</p>
                  <p>未付款数</p>
                </el-col>
              </el-card>
            </el-col>
            <el-col :span="5">
              <el-card class="box-card">
                <el-col :span="8">
                  <i class="icon_2 el-icon-truck"></i>
                </el-col>
                <el-col :span="12" class="title">
                  <p><span>24</span>（单）</p>
                  <p>未发货数</p>
                </el-col>
              </el-card>
            </el-col>
            <el-col :span="5">
              <el-card class="box-card">
                <el-col :span="8">
                  <i class="icon_3 el-icon-sell"></i>
                </el-col>
                <el-col :span="12" class="title">
                  <p><span>24</span>（单）</p>
                  <p>未处理售后数</p>
                </el-col>
              </el-card>
            </el-col>
            <el-col :span="5">
              <el-card class="box-card">
                <el-col :span="8">
                  <i class="icon_4 el-icon-price-tag"></i>
                </el-col>
                <el-col :span="12" class="title">
                  <p><span>24</span>（单）</p>
                  <p>库存警告</p>
                </el-col>
              </el-card>
            </el-col>
          </el-col>
          <el-col :span="11">
            <el-card class="box-card"><card-1></card-1></el-card>
          </el-col>
          <el-col :span="11">
            <el-card class="box-card"><card-2></card-2></el-card>
          </el-col>
          <el-col :span="11" style="display: none">
            <el-card class="box-card"><card-3></card-3> </el-card>
          </el-col>
          <el-col :span="11" style="display: none">
            <el-card class="box-card"><card-4></card-4></el-card>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: {
    card1: () => import('./parts/card-1.vue'),
    card2: () => import('./parts/card-2.vue'),
    card3: () => import('./parts/card-3.vue'),
    card4: () => import('./parts/card-4.vue'),
  },
  data: function () {
    return {};
  },
  computed: {
    ...mapState(['user']),
  },
  mounted() {},
  created() {},
  methods: {},
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.two {
  margin: 5px;
  .title {
    p {
      text-align: center;
      span:first-child {
        color: aquamarine;
        font-size: 24px;
      }
    }
  }
  .data-table {
    margin: 5px 0;
  }
  .el-col-5 {
    width: 22.5%;
  }
  .el-col {
    margin: 0 4px;
  }
  .box-card {
    margin: 5px;
    padding: 5px 0 20px 0;
  }
  .item {
    margin-bottom: 18px;
  }
  .icon {
    font-size: 36px;
    padding: 10px;
    color: #fff;
    border-radius: 50%;
  }
  .icon_1 {
    font-size: 36px;
    padding: 10px;
    color: #fff;
    border-radius: 50%;
    background-color: aquamarine;
  }
  .icon_2 {
    font-size: 36px;
    padding: 10px;
    color: #fff;
    border-radius: 50%;
    background-color: aqua;
  }
  .icon_3 {
    font-size: 36px;
    padding: 10px;
    color: #fff;
    border-radius: 50%;
    background-color: gold;
  }
  .icon_4 {
    font-size: 36px;
    padding: 10px;
    color: #fff;
    border-radius: 50%;
    background-color: coral;
  }
}
</style>
