<template>
  <div>
    <tab-nav active="2"></tab-nav>
    <img src="https://webapp-pub.ezijing.com/www/h5/images/about_banner_02.png" class="main-banner" />
    <div class="video">
      <video
        src="https://webapp-pub.ezijing.com/www/pc/%E7%B4%AB%E8%8D%86%E5%AE%A3%E4%BC%A0%E7%89%8720201224.mp4"
        preload="auto"
        controls
      ></video>
    </div>
    <div class="main-container">
      <div class="main-content">
        <h1 class="title">{{ $t('about.culture.title') }}</h1>
        <div class="item">
          <h2>{{ $t('about.culture.item1H1') }}</h2>
          <h3>{{ $t('about.culture.item1H2') }}</h3>
          <p v-html="$t('about.culture.item1Txt')"></p>
        </div>
        <div class="item">
          <h2>{{ $t('about.culture.item2H1') }}</h2>
          <h3>{{ $t('about.culture.item2H2') }}</h3>
          <p v-html="$t('about.culture.item2Txt')"></p>
        </div>
        <div class="item">
          <h2>{{ $t('about.culture.item3H1') }}</h2>
          <h3>{{ $t('about.culture.item3H2') }}</h3>
          <p v-html="$t('about.culture.item3Txt')"></p>
        </div>
        <div class="item">
          <h2>{{ $t('about.culture.item4H1') }}</h2>
          <h3>{{ $t('about.culture.item4H2') }}</h3>
          <p v-html="$t('about.culture.item4Txt')"></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TabNav from '@/components/about/TabNav'
export default {
  props: { acitve: String },
  components: { TabNav }
}
</script>

<style lang="scss" scoped>
.video {
  background: #aa1941;
  padding: 0.2rem 0.15rem;
  video {
    width: 100%;
    height: 1.94rem;
  }
}
.honor {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.2rem;
  li {
    margin-bottom: 0.3rem;
    padding: 0 0.12rem;
    width: 50%;
    box-sizing: border-box;
    img {
      width: 100%;
    }
    p {
      font-size: 0.1rem;
      line-height: 0.2rem;
    }
  }
}
.item {
  margin-top: 0.2rem;
  margin-bottom: 0.4rem;
  h2 {
    font-size: 0.2rem;
    font-weight: 700;
    line-height: 100%;
    color: #424242;
  }
  h3 {
    margin-bottom: 0.1rem;
    // height: 0.46rem;
    border-bottom: 1px solid #98002e;
    font-size: 0.18rem;
    font-weight: normal;
    // line-height: 0.46rem;
    padding: .1rem 0;
    color: #424242;
  }
  p {
    font-size: 0.14rem;
    line-height: 0.34rem;
    color: #424242;
  }
}
</style>
