<!-- 教学研发 -->
<template>
  <div>
    <div class="banner">
      <img
        src="https://webapp-pub.ezijing.com/www/pc/services/teach/banner.jpg"
      />
    </div>
    <section class="section">
      <div class="section-inner">
        <div class="section-1">
          <div class="section-pic">
            <img
              src="https://webapp-pub.ezijing.com/www/pc/services/teach/1.jpg"
            />
          </div>
          <div class="section-content">
            <h2 class="section-title">{{ $t('teach.tit1') }}</h2>
            <p class="section-desc">
              {{ $t('teach.desc1') }}
            </p>
            <ol>
              <li>
                {{ $t('teach.tip1_1') }}
              </li>
              <li>
                {{ $t('teach.tip1_2') }}
              </li>
              <li>
                {{ $t('teach.tip1_3') }}
              </li>
            </ol>
          </div>
        </div>
        <img
          :src="
            $cookies.get('lang') == 'en-US'
              ? 'https://webapp-pub.ezijing.com/www/pc/services/teach/12_en.jpg'
              : 'https://webapp-pub.ezijing.com/www/pc/services/teach/12.jpg'
          "
          class="section-img"
        />
      </div>
    </section>
    <section class="section">
      <div class="section-inner">
        <div class="section-2">
          <div class="section-pic">
            <img
              src="https://webapp-pub.ezijing.com/www/pc/services/teach/2.jpg"
            />
          </div>
          <div class="section-content">
            <h2 class="section-title">{{ $t('teach.tit2') }}</h2>
            <p class="section-desc" v-html="$t('teach.desc2')"></p>
            <ol>
              <li>{{ $t('teach.tip2_1') }}</li>
              <li>
                {{ $t('teach.tip2_2') }}
              </li>
              <li>
                {{ $t('teach.tip2_3') }}
              </li>
              <li>
                {{ $t('teach.tip2_4') }}
              </li>
            </ol>
          </div>
        </div>
        <img
          :src="
            $cookies.get('lang') == 'en-US'
              ? 'https://webapp-pub.ezijing.com/www/pc/services/teach/22_en.jpg'
              : 'https://webapp-pub.ezijing.com/www/pc/services/teach/22.jpg'
          "
          class="section-img"
        />
      </div>
    </section>
    <section class="section">
      <div class="section-inner">
        <div class="section-3">
          <div class="section-pic">
            <img
              src="https://webapp-pub.ezijing.com/www/pc/services/teach/3.jpg"
            />
          </div>
          <div class="section-content">
            <h2 class="section-title">{{ $t('teach.tit3') }}</h2>
            <p class="section-desc" v-html="$t('teach.desc3')"></p>
            <ol>
              <li>{{ $t('teach.tip3_1') }}</li>
              <li>{{ $t('teach.tip3_2') }}</li>
              <li>{{ $t('teach.tip3_3') }}</li>
            </ol>
          </div>
        </div>
        <div class="section-con">
          <div class="con-tit">{{ $t('teach.tit4') }}</div>
          <img
            :src="
              $cookies.get('lang') == 'en-US'
                ? 'https://webapp-pub.ezijing.com/www/pc/services/teach/33_en.jpg'
                : 'https://webapp-pub.ezijing.com/www/pc/services/teach/33.jpg'
            "
            class="con-img"
          />
          <div class="con-desc">
            {{ $t('teach.desc4') }}
          </div>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="section-inner">
        <div class="section-4">
          <div class="section-pic">
            <img
              src="https://webapp-pub.ezijing.com/www/pc/services/teach/4.jpg"
            />
          </div>
          <div class="section-content">
            <h2 class="section-title">{{ $t('teach.tit5') }}</h2>
            <p class="section-desc">
              {{ $t('teach.desc5') }}
            </p>
            <ol>
              <li>
                {{ $t('teach.tip5_1') }}
              </li>
              <li>
                {{ $t('teach.tip5_2') }}
              </li>
              <li>
                {{ $t('teach.tip5_3') }}
              </li>
              <li>
                {{ $t('teach.tip5_4') }}
              </li>
            </ol>
          </div>
        </div>
        <img
          :src="
            $cookies.get('lang') == 'en-US'
              ? 'https://webapp-pub.ezijing.com/www/pc/services/teach/44_en.jpg'
              : 'https://webapp-pub.ezijing.com/www/pc/services/teach/44.jpg'
          "
          class="section-img"
        />
      </div>
    </section>
    <section class="section">
      <div class="section-inner">
        <div class="section-5">
          <div class="section-pic">
            <img
              src="https://webapp-pub.ezijing.com/www/pc/services/teach/5.jpg"
            />
          </div>

          <div class="section-content">
            <h2 class="section-title">{{ $t('teach.tit6') }}</h2>
            <p class="section-desc">
              {{ $t('teach.desc6') }}
            </p>
            <ol>
              <li>
                {{ $t('teach.tip6_1') }}
              </li>
              <li>
                {{ $t('teach.tip6_2') }}
              </li>
              <li>
                {{ $t('teach.tip6_3') }}
              </li>
              <li>
                {{ $t('teach.tip6_4') }}
              </li>
            </ol>
          </div>
        </div>
        <img
          :src="
            $cookies.get('lang') == 'en-US'
              ? 'https://webapp-pub.ezijing.com/www/pc/services/teach/55_en.jpg'
              : 'https://webapp-pub.ezijing.com/www/pc/services/teach/55.jpg'
          "
          class="section-img"
        />
      </div>
    </section>
    <section class="section">
      <div class="section-inner">
        <div class="section-6">
          <div class="section-pic">
            <img
              src="https://webapp-pub.ezijing.com/www/pc/services/teach/6.jpg"
            />
          </div>
          <div class="section-content">
            <h2 class="section-title">
              {{ $t('teach.tit7') }}
            </h2>
            <p class="section-desc">
              {{ $t('teach.desc7') }}
            </p>
            <ol>
              <li>
                {{ $t('teach.tip7_1') }}
              </li>
              <li>
                {{ $t('teach.tip7_2') }}
              </li>
              <li>
                {{ $t('teach.tip7_3') }}
              </li>
              <li>
                {{ $t('teach.tip7_4') }}
              </li>
            </ol>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {}
}
</script>

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

.section:nth-child(even) {
  background-color: #fff;
}
.section:nth-child(odd) {
  background-color: #f9f8f8;
}

.section-inner {
  width: 1200px;
  margin: 0 auto;
  padding: 120px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-img {
  margin-top: 120px;
}
.section-title {
  display: inline-block;
  position: relative;
  margin-bottom: 40px;
  font-size: 23px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  line-height: 34px;
  color: #fff;
  background-color: var(--main-color);
  padding: 0 10px;
  // &::after {
  //   content: '';
  //   position: absolute;
  //   left: 0;
  //   bottom: -10px;
  //   width: 4em;
  //   height: 1px;
  //   background-color: var(--main-color);
  // }
}
.section-desc {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 32px;
  color: #666666;
}
.section-content {
  ol {
    margin-top: 25px;
  }
  li {
    position: relative;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 32px;
    color: #424242;
    padding-left: 30px;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 7px;
      height: 7px;
      background-color: var(--main-color);
      border-radius: 50%;
    }
  }
}
.section-1,
.section-2,
.section-3,
.section-4,
.section-5,
.section-6 {
  display: flex;
  align-items: center;
  .section-pic {
    margin-right: 72px;
  }
}

.section-con {
  width: 1200px;
  margin: 88px auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .con-tit {
    font-size: 24px;
    font-weight: 500;
    color: #333333;
    opacity: 1;
  }
  .con-img {
    margin-top: 30px;
  }
  .con-desc {
    width: 921px;
    height: 44px;
    background: #aa1941;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 400;
    line-height: 44px;
    color: #ffffff;
    margin-top: 33px;
  }
}
// .section-4 {
//   display: flex;
//   justify-content: flex-end;
//   padding: 80px 0;
//   background: url(https://webapp-pub.ezijing.com/www/pc/services/teach/4.jpg) no-repeat center center;
//   .section-content {
//     width: 700px;
//     padding: 70px;
//     background: rgba(0, 0, 0, 0.5);
//   }
//   .section-title,
//   .section-desc,
//   li {
//     color: #fff;
//   }
// }
</style>
