<template>
  <app-frame :tabs="tabs">
    <img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
    <template #article>
      <dl v-for="(item, index) in qaList" :key="index">
        <dt>Q:{{ item.question }}</dt>
        <dd v-html="item.answer"></dd>
      </dl>
    </template>
  </app-frame>
</template>

<script>
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/studyAbroadNavList.js'
import qaList from '@/assets/studyAbroadQA.js'

export default {
  components: { AppFrame },
  data() {
    return {
      tabs: navList,
      qaList
    }
  }
}
</script>

<style lang="scss" scoped>
.is-pc {
  dl {
    margin-bottom: 20px;
    dt {
      font-size: 16px;
      font-weight: bold;
      line-height: 32px;
      color: #666666;
      border-bottom: 1px solid #e6e6e6;
    }
    dd {
      font-size: 16px;
      line-height: 32px;
      color: #424242;
    }
  }
}
.is-h5 {
  dl {
    margin-bottom: 0.18rem;
    dt {
      font-size: 0.12rem;
      font-weight: bold;
      line-height: 0.16rem;
      color: #666666;
      border-bottom: 1px solid #e6e6e6;
    }
    dd {
      font-size: 0.12rem;
      line-height: 0.16rem;
      color: #424242;
    }
  }
}
</style>
