<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('cost.con1Tit') }}</div>
            <div class="con-txt" v-html="$t('cost.con1Txt')"></div>
            <div class="title mar-t55">{{ $t('cost.con2Tit') }}</div>
            <div class="con-txt" v-html="$t('cost.con2Txt')"></div>
          </div>
        </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.ezijing.com/project/seg-shms/banner-bg-fyzz.png',
        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 {
      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: 0.3rem 0.2rem;
    .content-box {
      .text-content {
        padding-left: 0.2rem;
        .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;
        }
      }
    }
  }
}
</style>
