<script>
import AppMarketBoardFilter from "@/views/AppMarketBoardFilter.vue";
import AppNavbar from "@/views/AppNavbar.vue";
import AppMap from "@/views/AppMap.vue";
import AppSalesPerformance from "@/views/AppSalesPerformance.vue";
import AppKeyGoods from "@/views/AppKeyGoods.vue";
import AppGroupMonitorTable from "@/views/AppGroupMonitorTable.vue";
import AppStoreMonitor from "@/views/AppStoreMonitor.vue";
import AppHourSale from "@/views/AppHourSale.vue";
import AppHourCount from "@/views/AppHourCount.vue";

export default {
  name: "AppMarketBoard",
  label: "市场看板",
  components: {AppHourCount, AppHourSale, AppStoreMonitor, AppGroupMonitorTable, AppKeyGoods, AppSalesPerformance, AppMap, AppNavbar, AppMarketBoardFilter}
}
</script>

<template>
  <section class="AppMarketBoard">
    <app-navbar class="mb-10"/>
    <div class="flex" style="gap:20px">
      <div class="fill">
        <div class="flex gap">
          <div style="width: 430px;">
            <app-sub-title/>
            <app-sales-performance style="margin-bottom: 10px"/>
            <app-key-goods style="height: 208px"/>
          </div>
          <div class="fill">
            <app-market-board-filter/>
            <app-map style="height: calc(100% - 50px)"/>
          </div>
        </div>
        <div class="flex gap" style="height: 394px">
          <app-group-monitor-table class="fill"/>
          <app-store-monitor class="fill"/>
        </div>
      </div>
      <div style="width: 480px;">
        <app-sub-title text="全门店时段销售"/>
        <app-hour-sale style="height: 600px"/>
        <app-hour-count style="height: 260px"/>
      </div>
    </div>
  </section>
</template>

<style scoped>
.AppMarketBoard {
  width: 100%;
  height: 100%;
}

.gap {
  gap: 20px;
}
</style>
