<template>
  <!-- 单页面类型页面 -->
  <div class="content">
    <BannerTop :options="bannerTopOptions"/>
    <div 
      class="container rich-text" 
      v-html="$store.state.device === '移动端' ? pageInfo.contentApp : pageInfo.content"
    >
    </div>
  </div>
</template>

<script>

export default {
  name: 'separate',
  watchQuery: ['maxCatgId'],
  data() {
    return {
      
    }
  },
  async asyncData({$axios,query}) {
    const { data: pageInfo } = await $axios.get(`/web/categoryInfo?id=${query.maxCatgId}`)

    let bannerTopOptions = {
      title: pageInfo.catgName,
      subTitle: pageInfo.description,
      img:  require('../assets/image/banner/aboutus-banner.png')
    }
    
    return {
      pageInfo,
      bannerTopOptions
    }
  },
  head() {
    return {
      title: this.pageInfo.catgName,
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.pageInfo.keyword
        },
        {
          hid: 'description',
          name: 'description',
          content: this.pageInfo.description
        }
      ]
    }
  },
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
}

</style>