<template>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
  <app-frame :data="frameParams">
    <div class="problem-content-box">
      <div class="content-box">
        <template v-for="(item, index) in problemList">
          <div class="problem-item-box" :key="index">
            <div class="title">{{ item.title }}</div>
            <ul>
              <template v-for="(cItem, cIndex) in item.problem">
                <li :key="cIndex + '='">
                  <div class="pro-tit">{{ cItem.tit }}</div>
                  <div class="answer" v-html="cItem.answer"></div>
                </li>
              </template>
            </ul>
          </div>
        </template>
      </div>
    </div>
  </app-frame>
</div>
</template>
<script>
import appFrame from '@/components/appFrame'
export default {
  layout: 'normal',
  components: {
    appFrame
  },
  data() {
    return {
      problemList: [
        {
          title: this.$t('problem.item1Tit'),
          problem: [
            {
              tit: this.$t('problem.item1problem1'),
              answer: this.$t('problem.item1answer1')
            },
            {
              tit: this.$t('problem.item1problem2'),
              answer: this.$t('problem.item1answer2')
            },
            {
              tit: this.$t('problem.item1problem3'),
              answer: this.$t('problem.item1answer3')
            }
          ]
        },
        {
          title: this.$t('problem.item2Tit'),
          problem: [
            {
              tit: this.$t('problem.item2problem1'),
              answer: this.$t('problem.item2answer1')
            }
          ]
        },
        {
          title: this.$t('problem.item3Tit'),
          problem: [
            {
              tit: this.$t('problem.item3problem1'),
              answer: this.$t('problem.item3answer1')
            }
          ]
        }
      ],
      frameParams: {
        banner: 'https://webapp-pub.ezijing.com/project/caas/apply-problem_banner.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{
  .problem-content-box {
    .content-box {
      padding: 54px 104px 90px 87px;
      .problem-item-box {
        margin-bottom: 80px;
        .title {
          font-size: 22px;
          font-weight: bold;
          line-height: 100%;
          color: #333333;
        }
        ul {
          padding-top: 30px;
          li {
            margin-bottom: 15px;
            .pro-tit {
              font-size: 16px;
              font-weight: bold;
              line-height: 32px;
              color: #666666;
              border-bottom: 1px solid #e6e6e6;
            }
            .answer {
              font-size: 16px;
              line-height: 32px;
              color: #424242;
            }
          }
        }
      }
    }
  }
}
.is-h5{
  .problem-content-box {
    .content-box {
      padding: .22rem;
      .problem-item-box {
        margin-bottom: .4rem;
        .title {
          font-size: 0.14rem;
          font-weight: bold;
          line-height: 100%;
          color: #333333;
        }
        ul {
          padding-top: .15rem;
          li {
            margin-bottom: .08rem;
            .pro-tit {
              font-size: .12rem;
              font-weight: bold;
              line-height: .17rem;
              color: #666666;
              border-bottom: 1px solid #e6e6e6;
            }
            .answer {
              font-size: .12rem;
              line-height: .17rem;
              color: #424242;
            }
          }
        }
      }
    }
  }
}
</style>
