<template>
  <div class="main">
    <div class="middle">
      <display-board class="trade_left" title="营业情况">
        <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
          <contrast-card style="height: 28%;">content</contrast-card>
          <contrast-card style="height: 28%;">content</contrast-card>
          <contrast-card style="height: 28%;">content</contrast-card>
        </div>
      </display-board>
      <display-board class="trade_middle" corner_size="large">
        <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
          <simple-card style="width: 30%;height: 100%">content</simple-card>
          <simple-card style="width: 30%;height: 100%">content</simple-card>
          <simple-card style="width: 30%;height: 100%">content</simple-card>
        </div>
        <main-bar-chart style="width: 100%; height: 64%;"></main-bar-chart>
      </display-board>
      <display-board class="trade_right" title="账款情况">
        <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
          <contrast-card style="height: 28%;">content</contrast-card>
          <contrast-card style="height: 28%;">content</contrast-card>
          <contrast-card style="height: 28%;">content</contrast-card>
        </div>
      </display-board>
    </div>
    <div class="middle">
      <display-board class="trade_left" title="已开票未收款">
        <winners-list style="height: 96%"/>
      </display-board>
      <div class="trade_middle" style="border: none;box-shadow: none;">
        <div style="display: flex; justify-content: space-between; height: 50%;">
          <display-board style="width: 32%;" title="每日目标情况">content</display-board>
          <display-board style="width: 32%;" title="月度目标情况">content</display-board>
          <display-board style="width: 32%;" title="年度目标情况">content</display-board>
        </div>
        <div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;">
          <showcase style="width: 18%;" title="当日订单量">content</showcase>
          <showcase style="width: 18%;" title="当日完成量">content</showcase>
          <showcase style="width: 18%;" title="余量">content</showcase>
          <showcase style="width: 18%;" title="流失客户">content</showcase>
          <showcase style="width: 18%;" title="新增客户">content</showcase>
        </div>
      </div>
      <display-board class="trade_right" title="当日订单量占比">content</display-board>
    </div>
  </div>
</template>
<script>
import DisplayBoard from "./components/container/display-board.vue";
import Showcase from "./components/container/showcase.vue";
import ContrastCard from "./components/card/contrast-card.vue";
import SimpleCard from "./components/card/simple-card.vue";
import MainBarChart from "./components/chart/main-bar-chart.vue";
import WinnersList from "./components/card/winners-list.vue";

export default {
  components: {
    Showcase,
    DisplayBoard,
    ContrastCard,
    SimpleCard,
    MainBarChart,
    WinnersList
  },
  data() {
    return {

    }
  },
  methods: {
  },
};
</script>
