<template>
  <div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
    <ThemeTitle class="theme">广东省渔业大数据专题</ThemeTitle>
    <div
      v-for="(item, index) in routes"
      :key="item"
      @click="handleSelect(item)"
      :class="`box box${index + 1}`"
      :style="`background-image: url(${require('@/assets/images/home-card-bg.png')})`"
    >
      <p><span/>{{titles[index]}}</p>
      <img :src="require(`@/assets/images/${item}.png`)"/>
    </div>
  </div>
</template>

<script>
import ThemeTitle from './components/title'
export default {
  name: 'GDHome',
  components: {
    ThemeTitle,
  },
  data() {
    return {
      routes: ['industry', 'special', 'production', 'trade', 'fish', 'disease', 'enterprise'],
      titles: ['广东省渔业产业布局分析专题', '广东省渔业特色种苗专题', '广东省渔业生产专题', '渔业种业综合交易平台交易分析专题', '广东省罗非鱼专题', '广东省水生动物病害数据分析专题', '广东省渔业企业介绍专题'],
    }
  },
  methods: {
    handleSelect(name) {
      this.$router.push({name})
    }
  }
}
</script>

<style lang="stylus" scoped>
#container
  $gd-layout()
  grid-template-areas \
    '. theme .'\
    'box1 box2 box5'\
    'box1 box2 box5'\
    'box1 box2 box6'\
    'box3 box4 box6'\
    'box3 box4 box7'\
    'box3 box4 box7'
  grid-template-rows 4rem 1fr 1fr 1fr 1fr 1fr 1fr
  grid-template-columns 1fr 1fr 1fr
  grid-gap 0
  padding 1rem 0 0
  .theme
    grid-area theme
    width 150%
    margin-left -25%
  .box
    width 100%
    height 100%
    background-size 100% 100%
    padding 2rem
    cursor pointer
    >p
      display flex
      align-items center
      color #b3ecff
      font-size 1.1rem
      font-weight bold
      margin 0.5rem 0
      >span
        display inline-block
        margin-right 0.8rem
        width 0.4rem
        height 1rem
        background #b3ecff
    >img
      width 100%
      height 90%
    &.box1
      grid-area box1
    &.box2
      grid-area box2
    &.box3
      grid-area box3
    &.box4
      grid-area box4
    &.box5
      grid-area box5
    &.box6
      grid-area box6
    &.box7
      grid-area box7
    &:hover
      background-color $color-map(0.3)
</style>
