<script>
import AppMarketBoardFilter from "@/views/AppMarketBoardFilter.vue";
import AppNavbar from "@/views/AppNavbar.vue";
import AppMap from "@/views/AppMap.vue";
import AppSubTitle from "@/views/AppSubTitle.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, AppSubTitle, AppMap, AppNavbar, AppMarketBoardFilter}
}
</script>

<template>
  <section class="AppMarketBoard">
    <app-navbar/>
    <app-market-board-filter/>
    <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: 20px"/>
            <app-sub-title/>
            <app-key-goods/>
          </div>
          <app-map class="fill"/>
        </div>
        <div class="flex gap">
          <app-group-monitor-table class="fill"/>
          <app-store-monitor class="fill"/>
        </div>
      </div>
      <div style="width: 480px;">
        <app-hour-sale/>
        <app-hour-count/>
      </div>
    </div>
  </section>
</template>

<style scoped>
.AppMarketBoard {
  width: 100%;
  height: 100%;
}
.gap{
  gap: 20px;
}
</style>
