<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <div class="problem-content-box">
      <app-frame :data="frameParams">
        <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>
      </app-frame>
    </div>
  </div>
</template>
<script>
import appFrame from '@/components/appFrame'
export default {
  layout: 'normal',
  components: {
    appFrame
  },
  data() {
    return {
      problemList: [
        {
          title: '',
          problem: [
            {
              tit: 'Q:本项目毕业生颁发的学位证书与在美国颁发的证书有何不同？',
              answer: '没有不同，完全一样，具有相同的形式和效力。'
            },
            {
              tit: 'Q:本项目上课形式是怎么样？',
              answer: '本项目采用在线学习和线下面授相结合的授课方式。在线学习时，学生可根据自己的时间灵活安排学习，线下面授采用周末或短期集中安排的方式。'
            },
            {
              tit: 'Q:本项目学制多久？',
              answer: '本项目学制为16个月。'
            },
            {
              tit: 'Q:能否顺利毕业拿到证书呢？',
              answer: '修满36个学分的学员可获得美国玛丽伍德大学颁发的MBA学位证书。'
            },
            {
              tit: 'Q:本项目是在职还是全职？',
              answer: '本项目为在职MBA项目，采用在线学习和线下面授相结合的学习方式。'
            },
            {
              tit: 'Q:如何申请紫荆-玛丽伍德工商管理硕士(MBA)学位项目？',
              answer: '请参考网站首页——招生信息——有关申请。'
            },
            {
              tit: 'Q:大概流程是什么？',
              answer: `
              该项目申请流程为：<br />
              1. 在线报名<br />
              2. 参加面试<br />
              3. 获得录取<br />
              4. 缴纳学费<br />
              5. 入学学习`
            },
            {
              tit: 'Q:需要提交哪些材料？',
              answer: `申请项目需提交：<br />
              1. 本科学历证书。<br />
              2. 身份证正、反面照片。<br />
              3. 一寸白底证件照。<br />
              <br />
              学籍注册需提交：<br />
              1. 本科阶段中、英文双语版成绩单。<br />
              2. 英文版《教育部学历证书电子注册备案表》。<br />
              3. 入学协议。<br />
              4. 英文简历。<br />
              5. 推荐信2封。<br />
              6. 缴费凭证。
              `
            },
            {
              tit: 'Q:玛丽伍德工商管理硕士(MBA)学位项目的学费是多少？',
              answer: '该项目学费为人民币6.9万元。'
            },
            {
              tit: 'Q:学费可以分期吗？',
              answer: '项目学费由学生在入学前向紫荆教育一次性缴清，不可分期。'
            }
          ]
        }
      ],
      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{
  .problem-content-box {
    width: 1200px;
    margin: 0 auto;
    .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 {
            width: 808px;
            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 {
    margin: 0 auto;
    .content-box {
      padding: .25rem .5rem .45rem .44rem;
      .problem-item-box {
        margin-bottom: .4rem;
        .title {
          font-size: .14rem;
          font-weight: bold;
          line-height: 100%;
          color: #333333;
        }
        ul {
          padding-top: .15rem;
          li {
            margin-bottom: .18rem;
            .pro-tit {
              font-size: .12rem;
              font-weight: bold;
              line-height: .16rem;
              color: #666666;
              border-bottom: 1px solid #e6e6e6;
            }
            .answer {
              font-size: .12rem;
              line-height: .16rem;
              color: #424242;
            }
          }
        }
      }
    }
  }
}
</style>
