<!-- 专业共建 -->
<template>
  <div>
    <div class="banner">
      <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/banner.jpg" />
    </div>
    <section class="section section-1">
      <div class="section-inner">
        <h2 class="section-title">{{ $t('degital.tit1') }}</h2>
        <p class="section-desc">
          {{ $t('degital.desc1') }}
        </p>
      </div>
    </section>
    <section class="section section-2">
      <div class="section-inner">
        <h2 class="section-title" v-html="$t('degital.tit2')"></h2>
        <img
          :src="
            $cookies.get('lang') == 'en-US'
              ? 'https://webapp-pub.ezijing.com/www/pc/services/professional/1_en.png'
              : 'https://webapp-pub.ezijing.com/www/pc/services/professional/1.png'
          "
        />
      </div>
    </section>
    <section class="section section-3">
      <div class="section-inner">
        <h2 class="section-title">
          {{ $t('degital.tit3') }}
        </h2>
        <p class="section-desc">
          {{ $t('degital.desc3') }}
        </p>
        <!-- <el-tab-pane> -->
        <!-- <template #label>
              <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_1.png" class="icon" />
              <img
                src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_1_hover.png"
                class="active-icon"
              />
              <p>核心类专业</p>
            </template> -->
        <div class="topic">
          <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_1_bg.jpg" class="topic-bg" />
          <div class="topic-cover">
            <h4>{{ $t('degital.tit4') }}</h4>
            <p>
              {{ $t('degital.desc4') }}
            </p>
          </div>
        </div>
        <div class="tab-section">
          <h3 class="tab-section-title">
            <span>{{ $t('degital.tit5') }}</span>
          </h3>
          <p class="tab-section-desc">
            {{ $t('degital.desc5') }}
          </p>
          <div class="tab-section-img">
            <img
              :src="
                $cookies.get('lang') == 'en-US'
                  ? 'https://webapp-pub.ezijing.com/www/pc/services/professional/tab_1_1_en.png'
                  : 'https://webapp-pub.ezijing.com/www/pc/services/professional/tab_1_1.png'
              "
            />
          </div>
        </div>
        <!-- </el-tab-pane> -->
        <el-tabs class="my-tabs">
          <el-tab-pane>
            <template #label>
              <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_2.png" class="icon" />
              <img
                src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_2_hover.png"
                class="active-icon"
              />
              <p>{{ $t('degital.base_profession.tit1') }}</p>
            </template>
            <div class="topic">
              <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_2_bg.jpg" class="topic-bg" />
              <div class="topic-cover">
                <h4>{{ $t('degital.base_profession.tit1_t1') }}</h4>
                <p>{{ $t('degital.base_profession.tit1_d1') }}</p>
              </div>
            </div>

            <div class="tab-section">
              <h3 class="tab-section-title">
                <span>{{ $t('degital.base_profession.tit1_t2') }}</span>
              </h3>

              <div class="tab-section-img">
                <img
                  :src="
                    $cookies.get('lang') == 'en-US'
                      ? 'https://webapp-pub.ezijing.com/www/pc/services/professional/base/tab_1_1_en.png'
                      : 'https://webapp-pub.ezijing.com/www/pc/services/professional/base/tab_1_1.png'
                  "
                />
              </div>
            </div>
            <div class="tab-section">
              <h3 class="tab-section-title">
                <span>{{ $t('degital.base_profession.tit1_t3') }}</span>
              </h3>

              <div class="tab-section-img">
                <img
                  :src="
                    $cookies.get('lang') == 'en-US'
                      ? 'https://webapp-pub.ezijing.com/www/pc/services/professional/base/tab_2_1_en.png'
                      : 'https://webapp-pub.ezijing.com/www/pc/services/professional/base/tab_2_1.png'
                  "
                />
              </div>
            </div>
            <div class="tab-section">
              <h3 class="tab-section-title">
                <span>{{ $t('degital.base_profession.tit1_t4') }}</span>
              </h3>

              <div class="topic">
                <img
                  src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/tab_3_1.png"
                  class="topic-bg"
                />
                <div class="topic-cover">
                  <div class="cover_tit">
                    {{ $t('degital.base_profession.tit1_d4_tit1') }}
                  </div>
                  <p>
                    {{ $t('degital.base_profession.tit1_d4_tit2') }}
                  </p>
                  <h4 class="cover_tips">
                    {{ $t('degital.base_profession.tit1_d4_tit3') }}
                  </h4>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane>
            <template #label>
              <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_3.png" class="icon" />
              <img
                src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_3_hover.png"
                class="active-icon"
              />
              <p>{{ $t('degital.apply.tit1') }}</p>
            </template>

            <div class="topic">
              <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_1.png" class="topic-bg" />
              <div class="topic-cover1">
                <img
                  :src="
                    $cookies.get('lang') == 'en-US'
                      ? 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/services/professional/img3_1_1_en.png'
                      : 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/services/professional/img3_1_1.png'
                  "
                  alt=""
                />
                <p>
                  {{ $t('degital.apply.tit1_d1') }}
                </p>
              </div>
            </div>
            <div class="tab-section row">
              <div class="tab-section-content">
                <h3 class="tab-section-title">
                  <span> {{ $t('degital.apply.tit1_t2') }} </span>
                </h3>
                <p class="tab-section-strong">
                  {{ $t('degital.apply.tit1_d2_tit1') }}
                </p>
                <p class="tab-section-desc">
                  {{ $t('degital.apply.tit1_d2_tit2') }}
                </p>
                <p class="tab-section-strong">
                  {{ $t('degital.apply.tit1_d2_tit3') }}
                </p>
              </div>
              <div class="tab-section-pic">
                <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_2.png" />
              </div>
            </div>
            <div class="tab-section row">
              <div class="tab-section-pic">
                <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_3.png" />
              </div>
              <div class="tab-section-content">
                <h3 class="tab-section-title">
                  <span> {{ $t('degital.apply.tit1_t3') }} </span>
                </h3>
                <p class="tab-section-strong">
                  {{ $t('degital.apply.tit1_d3_tit1') }}
                </p>
                <p class="tab-section-desc">
                  {{ $t('degital.apply.tit1_d3_tit2') }}
                </p>
                <p class="tab-section-strong">
                  {{ $t('degital.apply.tit1_d3_tit3') }}
                </p>
              </div>
            </div>
            <div class="tab-section row">
              <div class="tab-section-content">
                <h3 class="tab-section-title">
                  <span>
                    {{ $t('degital.apply.tit1_t4') }}
                  </span>
                </h3>
                <p class="tab-section-strong">
                  {{ $t('degital.apply.tit1_d4_tit1') }}
                </p>
                <p class="tab-section-desc">
                  {{ $t('degital.apply.tit1_d4_tit2') }}
                </p>
                <p class="tab-section-strong">
                  {{ $t('degital.apply.tit1_d4_tit3') }}
                </p>
              </div>
              <div class="tab-section-pic">
                <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_4.png" />
              </div>
            </div>
            <div class="tab-section row">
              <div class="tab-section-pic">
                <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_5.png" />
              </div>
              <div class="tab-section-content">
                <h3 class="tab-section-title">
                  <span>
                    {{ $t('degital.apply.tit1_t5') }}
                  </span>
                </h3>
                <p class="tab-section-strong">
                  {{ $t('degital.apply.tit1_d5_tit1') }}
                </p>
                <p class="tab-section-desc">
                  {{ $t('degital.apply.tit1_d5_tit2') }}
                </p>
                <p class="tab-section-strong">
                  {{ $t('degital.apply.tit1_d5_tit3') }}
                </p>
              </div>
            </div>
            <div class="tab-section row">
              <div class="tab-section-content">
                <h3 class="tab-section-title">
                  <span>
                    {{ $t('degital.apply.tit1_t6') }}
                  </span>
                </h3>
                <p class="tab-section-strong">
                  {{ $t('degital.apply.tit1_d6_tit1') }}
                </p>
                <p class="tab-section-desc">
                  {{ $t('degital.apply.tit1_d6_tit2') }}
                </p>
                <p class="tab-section-strong">
                  {{ $t('degital.apply.tit1_d6_tit3') }}
                </p>
              </div>
              <div class="tab-section-pic">
                <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_6.png" />
              </div>
            </div>
            <div class="tab-section row">
              <div class="tab-section-pic">
                <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_7.png" />
              </div>
              <div class="tab-section-content">
                <h3 class="tab-section-title">
                  <span>
                    {{ $t('degital.apply.tit1_t7') }}
                  </span>
                </h3>
                <p class="tab-section-strong">
                  {{ $t('degital.apply.tit1_d7_tit1') }}
                </p>
                <p class="tab-section-desc">
                  {{ $t('degital.apply.tit1_d7_tit2') }}
                </p>
                <p class="tab-section-strong">
                  {{ $t('degital.apply.tit1_d7_tit3') }}
                </p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </section>
  </div>
</template>

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

<style lang="scss" scoped>
.banner {
  img {
    width: 100%;
  }
}
.section:nth-child(odd) {
  background-color: #fff;
}
.section:nth-child(even) {
  background-color: #f9f8f8;
}

.section-inner {
  width: 1200px;
  margin: 0 auto;
}
.section-title {
  margin-bottom: 36px;
  font-size: 30px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 32px;
  color: #333333;
  text-align: center;
}
.section-desc {
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 34px;
  color: #666666;
  text-align: center;
}
.section-1 {
  padding: 90px 0 108px;
}
.section-2 {
  padding: 120px 0;
  text-align: center;
  .section-title {
    margin-bottom: 122px;
  }
  img {
    max-width: 100%;
  }
}
.section-3 {
  padding: 90px 0;
  .my-tabs {
    margin-top: 92px;
  }
}
::v-deep .my-tabs {
  .el-tabs__active-bar,
  .el-tabs__nav-wrap::after {
    display: none;
  }
  .el-tabs__nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-tabs__item {
    display: flex;
    // flex-direction: column;
    align-items: center;
    justify-content: center;
    // width: 220px;
    // height: 220px;
    width: 380px;
    height: 82px;
    margin: 0 30px;
    padding: 0;
    .active-icon {
      display: none;
    }
    &.is-active,
    &:hover {
      background-color: var(--main-color);
      color: #fff;
      .icon {
        display: none;
      }
      .active-icon {
        display: block;
      }
    }
    img {
      height: 55px;
    }
    p {
      font-size: 22px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 1;
      margin-left: 21px;
    }
  }
}
::v-deep .my-tabs2 {
  .el-tabs__active-bar,
  .el-tabs__nav-wrap::after {
    display: none;
  }
  .el-tabs__nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-tabs__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 286px;
    height: 84px;
    margin: 0 10px;
    padding: 0;
    background-color: #fff;
    color: #777;
    border-radius: 6px;
    .active-icon {
      display: none;
    }
    &.is-active,
    &:hover {
      background-color: var(--main-color);
      color: #fff;
      .icon {
        display: none;
      }
      .active-icon {
        display: block;
      }
    }
    img {
      margin-bottom: 12px;
      height: 24px;
    }
    p {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 1;
    }
  }

  .tab-section-img {
    margin: 40px 0;
  }
  .topic {
    margin: 40px 0;
  }
  .topic-cover {
    padding: 0 100px;
    align-items: flex-start;
    background: rgba(249, 248, 248, 0.1);
    p {
      margin: 20px 0;
    }
  }
}
.topic {
  position: relative;
  margin: 55px 0;
}
.topic-bg {
  width: 100%;
  height: auto;
}
.topic-cover {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0 270px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  h4 {
    margin-bottom: 30px;
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    line-height: 34px;
    color: #ffffff;
  }
  p {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 30px;
    color: #ffffff;
  }
}
.topic-cover1 {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0 92px 0 143px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  color: #fff;
  img {
    margin-right: 73px;
  }

  p {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 30px;
    color: #ffffff;
  }
}
.tab-section {
  margin-top: 41px;
  &.row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
    margin-top: 30px;
  }
  .topic-cover {
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 64px 82px 0 98px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    color: #fff;
    box-sizing: border-box;
    .cover_tit {
      font-size: 18px;
      font-weight: 500;
      line-height: 26px;
      color: #ffffff;
    }
    p {
      font-size: 14px;
      font-weight: 300;
      line-height: 26px;
      color: #ffffff;
      margin-top: 24px;
    }
    .cover_tips {
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
      margin-top: 20px;
    }
  }
}
.tab-section-title {
  position: relative;
  margin-bottom: 40px;
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  line-height: 42px;
  color: #424242;
  span {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--main-color);
  }
}
.tab-section-desc {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 32px;
  color: #666666;
}
.tab-section-strong {
  margin: 28px 0 10px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 42px;
  color: #424242;
}
.tab-section-img {
  text-align: center;
  img {
    max-width: 100%;
  }
}
</style>
