<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <app-frame :data="frameParams">
      <div class="rele-content-box">
        <div class="content-box">
          <div class="text-content">
            <div class="title">{{ $t('apply.con1Tit') }}</div>
            <div class="con-txt" v-html="$t('apply.con1Txt')"></div>
            <div class="title mar-t55">{{ $t('apply.con2Tit') }}</div>
            <div style="padding-right:87px;">
              <img src="https://webapp-pub.ezijing.com/project/seg-shms/bmlc0402.png" style="width:100%;">
            </div>
            <!-- <div class="con-txt" v-html="$t('apply.con2Txt')"></div> -->
          </div>
        </div>
      </div>
      <!-- <div style="padding:0 87px;">
        <img src="https://webapp-pub.ezijing.com/project/seg-shms/bmlc0402.png" style="width:100%;">
      </div> -->
    </app-frame>
  </div>
</template>
<script>
import appFrame from '@/components/appFrame'
export default {
  layout: 'normal',
  components: {
    appFrame
  },
  data() {
    return {
      newsList: [],
      frameParams: {
        banner: 'https://webapp-pub.ezijing.com/project/seg-shms/project-js48-02.jpg',
        slider: [
          {
            name: this.$t('menu.recruitChild.apply'),
            path: '/apply/relevant'
          },
          {
            name: this.$t('menu.recruitChild.cost'),
            path: '/apply/support'
          },
          {
            name: this.$t('menu.recruitChild.problem'),
            path: '/apply/problem'
          }
        ]
      }
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.isMobile
    }
  }
}
</script>
<style lang="scss" scoped>
.is-pc {
  .rele-content-box {
    .content-box {
      img {
        width: 900px;
        margin: 58px auto 0;
        display: block;
      }
      padding-top: 46px;
      padding-bottom: 106px;
      .text-content {
        padding-left: 87px;
        .title {
          font-size: 22px;
          font-weight: bold;
          line-height: 100%;
          color: #333333;
          &.mar-t55 {
            margin-top: 55px;
          }
        }
        .con-txt {
          font-size: 16px;
          line-height: 34px;
          color: #424242;
          margin-top: 20px;
          ::v-deep{
            span{
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
.is-h5 {
  .rele-content-box {
    background: #fff;
    padding: 0.3rem 0.2rem;
    .content-box {
      img {
        width: 100%;
        display: block;
      }
      padding-bottom: 0.5rem;
      .text-content {
        margin-bottom: 0.4rem;
        .title {
          font-size: 0.14rem;
          font-weight: bold;
          line-height: 100%;
          color: #333333;
          &.mar-t55 {
            margin-top: 0.25rem;
          }
        }
        .con-txt {
          font-size: 0.12rem;
          line-height: 0.24rem;
          color: #424242;
          padding-top: 0.14rem;
          ::v-deep{
            span{
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>
