<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <app-frame :data="frameParams">
      <div class="certificate">
        <div class="checkbox">
          <p><i></i>{{ $t('cert.txt1') }}</p>
          <!-- <p><i></i>{{ $t('cert.txt2') }}</p> -->
        </div>
        <p class="text">{{ $t('cert.txt3') }}</p>
        <img src="https://webapp-pub.ezijing.com/project/seg-shms/SHMS_MBA_Diploma.jpg" />
        <p class="certificate-title">{{ $t('cert.txt4') }}</p>
        <p class="certificate-des">{{ $t('cert.txt5') }}</p>
      </div>
    </app-frame>
  </div>
</template>
<script>
export default {
  layout: 'normal',
  data() {
    return {
      frameParams: {
        banner: 'https://webapp-pub.ezijing.com/project/seg-shms/project-js48-01.jpg',
        slider: [
          {
            name: this.$t('menu.projectChild.bg'),
            path: '/project-intro/bg'
          },
          {
            name: this.$t('menu.projectChild.feature'),
            path: '/project-intro/charac'
          },
          {
            name: this.$t('menu.projectChild.cert'),
            path: '/project-intro/certificate'
          }
        ]
      }
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.isMobile
    }
  }
}
</script>
<style lang="scss" scoped>
.is-pc {
  .certificate {
    padding: 40px;
    text-align: center;
    .checkbox {
      display: flex;
      width: 450px;
      margin: 0 auto;
      justify-content: center;
      p {
        width: 50%;
        text-align: center;
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 34px;
        color: #424242;
        i {
          display: inline-block;
          width: 22px;
          height: 22px;
          background: url('https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-icon.png');
          background-size: 22px 22px;
          margin-right: 10px;
          vertical-align: middle;
        }
      }
    }
    .text {
      text-align: center;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 34px;
      color: #424242;
      margin-top: 40px;
    }
    img {
      display: block;
      width: 376px;
      height: 291px;
      margin: 40px auto;
    }
    .certificate-title {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 34px;
      color: #424242;
      margin-top: 26px;
    }
    .certificate-des {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 34px;
      color: #aa1941;
    }
  }
}
.is-h5 {
  .certificate {
    padding: 0.3rem 0.52rem;
    text-align: center;
    .checkbox {
      display: flex;
      // width: 450px;
      margin: 0 auto;
      p {
        width: 50%;
        text-align: center;
        // font-size: .12rem;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 0.17rem;
        color: #424242;
        i {
          display: inline-block;
          width: 0.18rem;
          height: 0.18rem;
          background: url('https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-icon.png');
          background-size: 0.18rem 0.18rem;
          margin-right: 0.05rem;
          vertical-align: middle;
        }
      }
    }
    .text {
      text-align: center;
      font-size: 0.12rem;
      color: #424242;
      margin-top: 0.2rem;
    }
    img {
      display: block;
      width: 100%;
      display: block;
      // height: 291px;
      margin: 0.2rem auto;
    }
    .certificate-title {
      font-size: 0.12rem;
      color: #424242;
      margin-top: 0.13rem;
    }
    .certificate-des {
      color: #aa1941;
    }
  }
}
</style>