<template>
  <m-grid
    :template="[
      'map box1 box1',
      'map box2 box3',
      'map box2 box4',
    ]"
    columns="1fr 0.6fr 0.6fr"
    rows="1fr 1fr 1fr"
    gap="0.5rem"
  >
    <FishingPriceMap area="map"/>
    <m-card area="box1" title="价格指数走势图">
      <PriceTrend />
    </m-card>
    <m-card area="box2" title="水产交易情况">
      <TradeSituation />
    </m-card>
    <m-card area="box3" title="价格趋势分析">
      <PriceAnalysis />
    </m-card>
    <m-card area="box4" title="最新行情">
      <NewQuotation />
    </m-card>
  </m-grid>
</template>

<script>
import FishingPriceMap from './components/fishing-price-map'
import PriceTrend from './components/price-trend'
import TradeSituation from './components/trade-situation'
import PriceAnalysis from './components/price-analysis'
import NewQuotation from './components/new-quotation'
export default {
  name: 'FishingPrice',
  components: {
    FishingPriceMap,
    PriceTrend,
    TradeSituation,
    PriceAnalysis,
    NewQuotation,
  },
  data() {
    return {}
  },
}
</script>

<style lang="stylus" scoped>

</style>
