<template>
  <app-frame :tabs="tabs">
    <img src="https://zws-imgs-pub.ezijing.com/static/public/54e010d17c5cf9a36ef3addd9e893a4f.png" class="banner" />
    <template #article>
      <div class="party-con-mian">
        <div class="tit">{{ $t('alumni.contentTit') }}</div>
        <div class="text-con">
          <p>{{ $t('alumni.contentP1') }}</p>
          <p>{{ $t('alumni.contentP2') }}</p>
          <p>{{ $t('alumni.contentP3') }}</p>
        </div>
        <div class="tit">{{ $t('alumni.fbTit') }}</div>
        <div class="text-con2">
          {{ $t('alumni.fbDes') }}
        </div>
        <div class="img-content">
          <img src="https://zws-imgs-pub.ezijing.com/static/public/8d402595ac1eb1c5142b548fa84be60d.png" class="img1" />
          <img src="https://zws-imgs-pub.ezijing.com/static/public/560f659bcb9896f6dde674beeac1fd15.png" class="img2" />
        </div>
        <div class="end-time">{{ $t('alumni.time') }}</div>
        <div class="alumnus-code">
          <div class="t">{{ $t('alumni.followTit') }}</div>
          <img src="https://webapp-pub.ezijing.com/www/pc/alum-code.png" />
          <div class="dec">{{ $t('alumni.followDes') }}</div>
        </div>
      </div>
    </template>
  </app-frame>
</template>

<script setup>
import AppFrame from '@/components/AppFrame'
import { useAlumnusNavList } from '@/composables/useAlumnusNavList'

const tabs = useAlumnusNavList()
</script>

<style lang="scss" scoped>
.party-con-mian {
  .tit {
    font-size: 22px;
    line-height: 100%;
    color: #424242;
    margin-bottom: 20px;
  }
  .text-con {
    p {
      font-size: 16px;
      font-family: SourceHanSansCN-Light;
      line-height: 32px;
      color: #424242;
      margin-bottom: 35px;
    }
  }
  .text-con2 {
    font-size: 16px;
    font-family: SourceHanSansCN-Light;
    line-height: 100%;
    color: #424242;
    margin-bottom: 25px;
  }
  .img-content {
    display: flex;
    .img1 {
      width: 389px;
      height: 256px;
      display: block;
    }
    .img2 {
      width: 383px;
      height: 241px;
      display: block;
      margin-left: 105px;
    }
  }
  .end-time {
    text-align: right;
    margin-top: 62px;
    font-size: 16px;
    color: #424242;
  }
}
.alumnus-code {
  width: 202px;
  margin: 0 auto;
  padding-top: 28px;
  .t {
    font-size: 22px;
    line-height: 100%;
    margin-bottom: 24px;
    color: #424242;
    text-align: center;
  }
  img {
    width: 100%;
    display: block;
  }
  .dec {
    font-size: 16px;
    line-height: 100%;
    color: #424242;
    margin-top: 10px;
    text-align: center;
  }
}
</style>
