<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 class="con-txt" v-html="$t('apply.con2Txt')"></div> -->
          </div>
          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/apply-img-x.png" alt="" />
        </div>
      </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.oss-cn-beijing.aliyuncs.com/project/marywood/apply_banner.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: 500px;
        margin-top: 30px;
        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;
        }
      }
    }
  }
}
.is-h5{
  .rele-content-box{
    background: #fff;
    padding: .3rem .2rem;
    .content-box {
      img {
        width: 2.5rem;
        display: block;
        margin-top: .15rem;
      }
      padding-bottom: .5rem;
      .text-content {
        // margin-bottom: .4rem;
        .title {
          font-size: 0.14rem;
          font-weight: bold;
          line-height: 100%;
          color: #333333;
          &.mar-t55 {
            margin-top: .25rem;
          }
        }
        .con-txt {
          font-size: 0.12rem;
          line-height: 0.24rem;
          color: #424242;
          padding-top: .14rem;
        }
      }
    }
  }
}
</style>
