<template>
  <div class="p-5 flex flex-col">
    <div class="">驾驶舱</div>
    <div class="flex flex-1 space-x-4">
      <div class="w-6/10 space-y-4" v-if="true">
        <div class="h-150 box-shadow">
          <Map />
        </div>
        <div class="h-82 box-shadow">
          <LotteryTrends />
        </div>
      </div>
      <div class="flex-1 space-y-4">
        <div class="box-shadow">
          <Count />
        </div>
        <div class="grid grid-cols-2 gap-x-4">
          <div class="space-y-4">
            <div class="box-shadow h-56">
              <Sort />
            </div>
            <div class="box-shadow h-56">
              <SalesTrend />
            </div>
            <div class="box-shadow h-56">
              <AnnualTarget />
            </div>
          </div>
          <div class="box-shadow">
            <Rank />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import Map from './components/map.vue'
import LotteryTrends from './components/lottery-trends.vue'
import Count from './components/count.vue'
import Sort from "./components/sort.vue"
import AnnualTarget from './components/annual-target.vue'
import Rank from './components/rank.vue'
import SalesTrend from './components/sales-trend.vue'
</script>
