<template>
  <!-- 新闻 -->
  <div class="content">
    <BannerTop :options="bannerTopOptions"/>

    <section class="container pt-4 pb-4">
      <div class="row">
        <AsideTree class="col-md-3 mb-4 mb-md-0" :headerTitle="$t('news.allNews')"/>
        <main class="col-md-9">
          <div class="header">
            <h2>Low Bed Trailer</h2>
          </div>
          <nuxt-child />
        </main>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'news',
  data() {
    return {
      bannerTopOptions: {
        title: this.$t('news.news'),
        subTitle: this.$t('news.newsCenter'),
        img: require('../assets/image/banner/news-banner.png')
      },
    }
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  main {
  .header {
    height: 59px;
    color: #ffffff;
    text-indent: 1.375rem;
    background: linear-gradient( 180deg, rgba(33,119,244,0.04) 0%, rgba(1,95,232,0.14) 100%);
    border-bottom: 2px solid #0663ea;
      h2 {
        max-width: 19.125rem;
        height: 100%;
        position: relative;
        line-height: 3.6875rem;
        background: linear-gradient( 180deg, #2177F4 0%, #015FE8 100%);
        font-size: 1rem;
        &::after {
          content: '';
          width: 5.875rem;
          height: 3.6875rem;
          position: absolute;
          top: 0;
          right: -5.8125rem;
          background: url('~assets/image/banner/header-top-line.png') no-repeat;
          background-size: 100% 100%;
          z-index: 999;
        }
      }
    }
  }
}

</style>