<template>
  <section class="header" :style="{background: `url(${options.img}) no-repeat`}">
    <h2 class="mb-0 mb-md-3">{{ options.title }}</h2>
    <h4>{{ options.subTitle }}</h4>
    <div class="crumbs d-none d-md-block">
      <ul class="container d-flex align-items-center">
        <li>
          <nuxt-link to="/">{{ $t('menu.Home') }}</nuxt-link>
          >
        </li>
        <li>
          {{ options.title }}
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
export default {
  name: 'BannerTop',
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          title: '',
          subTitle: '',
          img: undefined
        }
      }
    }
  },
  data () {
    return {
      
    }
  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 15rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background-size: 100% 100% !important;
  overflow: hidden;
  h2 {
    font-size: 1.5rem;
    font-family: 'SourceHanSansCN-Heavy';
  }
  h4 {
    font-size: .875rem;
  }
  .crumbs {
    width: 100%;
    height: 2.125rem;
    position: absolute;
    bottom: 0;
    background: rgba(255,255,255,0.52);
    ul {
      line-height: 2.125rem;
      a, li {
        color: #3a3a3a;
        font-size: .875rem;
      }
      li {
        margin-right: .3125rem;
      }
    }
  }
}

// 特殊样式小屏幕处理
@media screen and (max-width:400px) {
  .header {
    height: 5.5rem;
  }
}

</style>