v3

api/index.js

@@ -30,3 +30,17 @@ export function checkCode(params) {
 export function submit(data) {
   return httpRequest.post('/api/enrollment/v1.0/applications', data)
 }
+
+/**
+ * 获取文章列表
+ */
+export function getArticleList(params) {
+  return httpRequest.get('/api/cms/api/v1/articles', { params })
+}
+
+/**
+ * 获取图文列表
+ */
+export function getImgTextList(params) {
+  return httpRequest.get('/api/cms/api/v1/img-text', { params })
+}

assets/css/studyAbroad.scss

+.w1200 {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.banner {
+  height: 1.56rem !important;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.why {
+  margin: 0 0.15rem;
+}
+.why-title {
+  padding: 0.2rem 0 0.25rem;
+  font-size: 0.17rem;
+  font-weight: bold;
+  line-height: 1;
+  color: #424242;
+  text-align: center;
+}
+.why-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 0.1rem;
+  column-gap: 0.1rem;
+}
+.why-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 1.25rem;
+  color: #262626;
+  background: #fff;
+
+  img {
+    height: 0.42rem;
+  }
+  .why-item__icon_hover {
+    display: none;
+  }
+  .why-content {
+    margin-top: 0.16rem;
+    padding: 0 0.18rem;
+    font-size: 0.12rem;
+    font-weight: 400;
+    line-height: 0.17rem;
+    text-align: center;
+  }
+  &:hover {
+    color: #fff;
+    background: #a81840;
+    box-shadow: 0px 2px 20px rgba(168, 24, 64, 0.2);
+    .why-item__icon {
+      display: none;
+    }
+    .why-item__icon_hover {
+      display: block;
+    }
+  }
+}
+.project-item {
+  margin-top: 0.1rem;
+  img {
+    width: 100%;
+  }
+}
+
+.qa-list {
+  li {
+    padding: 0 0.05rem;
+    margin-left: 0.08rem;
+    position: relative;
+    font-size: 0.11rem;
+    line-height: 0.21rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    &::before {
+      content: '';
+      position: absolute;
+      left: -0.08rem;
+      top: 50%;
+      width: 0.04rem;
+      height: 0.04rem;
+      background: #aa1941;
+      border-radius: 50%;
+      transform: translate(-50%);
+    }
+  }
+  li:nth-child(odd) {
+    background: rgba(153, 153, 153, 0.39);
+  }
+}
+
+.process {
+  img {
+    width: 100%;
+  }
+}

assets/internationalDegreeNavList.js

+export default [
+  {
+    name: '最新动态',
+    path: '/internationalDegree/news'
+  },
+  {
+    name: '常见问题',
+    path: '/internationalDegree/qa'
+  }
+]

assets/internationalDegreeQA.js

+export default [
+  {
+    question: '紫荆教育在线国际学位项目毕业生颁发的学位证书与在美国/欧洲颁发的证书有何不同？',
+    answer: '没有不同，完全一样，具有相同的形式和效力。'
+  },
+  {
+    question: '紫荆教育在线国际学位项目上课形式是怎么样？',
+    answer:
+      '项目采用在线学习和线下面授相结合的授课方式。在线学习时，学生可根据自己的时间灵活安排学习，线下面授采用周末或短期集中安排的方式。'
+  },
+  {
+    question: '紫荆教育在线国际学位项目学制多久？',
+    answer: '学制为16—24个月不等，具体因项目而异。'
+  },
+  {
+    question: '紫荆教育在线国际学位项目能否顺利毕业拿到证书呢？',
+    answer: '修满规定学分的学员可获得相应项目的学位证书。'
+  },
+  {
+    question: '紫荆教育在线国际学位项目是在职还是全职？',
+    answer: '项目为在职硕士项目，采用在线学习和线下面授相结合的学习方式。'
+  },
+  {
+    question: '如何申请紫荆教育在线国际学位项目？大概流程是什么？',
+    answer: '申请流程为：在线填写申请资料—初审通过—面试安排—综合评审—录取offer—学费缴纳及入学手续办理。'
+  },
+  {
+    question: '紫荆教育在线国际学位项目面试多少人？录取多少人？',
+    answer: '采取现场/视频面试的方式，面试人数和录取人数视申请人数和申请资质而定。'
+  },
+  {
+    question: '申请紫荆教育在线国际学位项目需要提交哪些材料？',
+    answer:
+      '申请项目需提交：<br />1. 本科学历证书；<br />2. 身份证正、反面照片；<br />3. 一寸白底证件照。<br /><br />学籍注册需提交：<br />1. 本科阶段中、英文双语版成绩单；<br />2. 英文版《教育部学历证书电子注册备案表》；<br />3. 入学协议；<br />4. 英文简历；<br />5. 推荐信2封；<br />6. 缴费凭证。'
+  },
+  {
+    question: '大专毕业后，又通过自考获得本科毕业证和学士学位，能否报考？',
+    answer: '可以报考，只要获得专科及以上学位证书，即可报考，特别优秀者可放宽条件。'
+  },
+  {
+    question: '紫荆教育在线国际学位项目学费是多少？ 可以分期吗？',
+    answer: '目前在线国际学位项目的学费在6.9万元—12.6万元人民币，由学生在入学前向紫荆教育缴清（不可选择分期）。'
+  }
+]

assets/studyAbroadNavList.js

+export default [
+  {
+    name: '最新动态',
+    path: '/studyAbroad/news'
+  },
+  {
+    name: '常见问题',
+    path: '/studyAbroad/qa'
+  }
+]

assets/studyAbroadQA.js

+export default [
+  {
+    question: '紫荆教育在线国际学位项目毕业生颁发的学位证书与在美国/欧洲颁发的证书有何不同？',
+    answer: '没有不同，完全一样，具有相同的形式和效力。'
+  },
+  {
+    question: '紫荆教育在线国际学位项目上课形式是怎么样？',
+    answer:
+      '项目采用在线学习和线下面授相结合的授课方式。在线学习时，学生可根据自己的时间灵活安排学习，线下面授采用周末或短期集中安排的方式。'
+  },
+  {
+    question: '紫荆教育在线国际学位项目学制多久？',
+    answer: '学制为16—24个月不等，具体因项目而异。'
+  },
+  {
+    question: '紫荆教育在线国际学位项目能否顺利毕业拿到证书呢？',
+    answer: '修满规定学分的学员可获得相应项目的学位证书。'
+  },
+  {
+    question: '紫荆教育在线国际学位项目是在职还是全职？',
+    answer: '项目为在职硕士项目，采用在线学习和线下面授相结合的学习方式。'
+  },
+  {
+    question: '如何申请紫荆教育在线国际学位项目？大概流程是什么？',
+    answer: '申请流程为：在线填写申请资料—初审通过—面试安排—综合评审—录取offer—学费缴纳及入学手续办理。'
+  },
+  {
+    question: '紫荆教育在线国际学位项目面试多少人？录取多少人？',
+    answer: '采取现场/视频面试的方式，面试人数和录取人数视申请人数和申请资质而定。'
+  },
+  {
+    question: '申请紫荆教育在线国际学位项目需要提交哪些材料？',
+    answer:
+      '申请项目需提交：<br />1. 本科学历证书；2. 身份证正、反面照片；3. 一寸白底证件照。<br />学籍注册需提交：<br />1. 本科阶段中、英文双语版成绩单；2. 英文版《教育部学历证书电子注册备案表》；3. 入学协议；4. 英文简历；5. 推荐信2封；6. 缴费凭证。'
+  },
+  {
+    question: '大专毕业后，又通过自考获得本科毕业证和学士学位，能否报考？',
+    answer: '可以报考，只要获得专科及以上学位证书，即可报考，特别优秀者可放宽条件。'
+  },
+  {
+    question: '紫荆教育在线国际学位项目学费是多少？ 可以分期吗？',
+    answer: '目前在线国际学位项目的学费在6.9万元—12.6万元人民币，由学生在入学前向紫荆教育缴清（不可选择分期）。'
+  }
+]

components/AppFrame.vue

+<template>
+  <main class="app-main">
+    <h1 class="app-main__title" v-if="title">{{ title }}</h1>
+    <div class="app-main-inner">
+      <ul class="app-main-tabs">
+        <li v-for="(item, index) in tabs" :class="genClassName(item)" :key="index" @click="handleClick(item.path)">
+          {{ item.name }}
+        </li>
+      </ul>
+      <section class="app-main-container">
+        <slot></slot>
+        <article class="app-main-article">
+          <div>
+            <slot name="article"></slot>
+          </div>
+        </article>
+        <slot name="footer"></slot>
+      </section>
+    </div>
+  </main>
+</template>
+<script>
+export default {
+  name: 'AppFrame',
+  props: {
+    title: { type: String },
+    tabs: { type: Array, default: () => [] }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    activeTab() {
+      const tabs = [...this.tabs].reverse()
+      const found = tabs.find(item => item.path === this.$route.path)
+      return found || tabs.find(item => this.$route.fullPath.includes(item.path))
+    }
+  },
+  methods: {
+    handleClick(path) {
+      this.$router.push({ path })
+    },
+    genClassName(data) {
+      if (!this.activeTab) return ''
+      return this.activeTab.path === data.path ? 'is-active' : ''
+    }
+  }
+}
+</script>
+<style lang="scss">
+.is-pc {
+  .app-main {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 60px 0;
+  }
+  .app-main__title {
+    font-size: 28px;
+    font-weight: 500;
+    line-height: 1;
+    color: #aa1941;
+    padding-bottom: 30px;
+  }
+  .app-main-inner {
+    display: flex;
+    align-items: flex-start;
+  }
+  .app-main-tabs {
+    min-width: 160px;
+    background: #fff;
+    padding: 40px 0;
+    margin-right: 50px;
+    li {
+      position: relative;
+      padding: 0 20px;
+      height: 40px;
+      font-size: 22px;
+      line-height: 40px;
+      text-align: center;
+      color: #777777;
+      cursor: pointer;
+      &.is-active {
+        color: rgba(170, 25, 65, 1);
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 8px;
+          height: 40px;
+          background: rgba(170, 25, 65, 1);
+        }
+      }
+    }
+    li + li {
+      margin-top: 60px;
+    }
+  }
+  .app-main-container {
+    flex: 1;
+    overflow: hidden;
+    .banner {
+      width: 100%;
+      display: block;
+      height: 320px;
+    }
+  }
+  .app-main-article {
+    padding: 50px;
+    background: #fff;
+  }
+}
+.is-h5 {
+  .app-main-tabs {
+    display: flex;
+    overflow-x: auto;
+    li {
+      margin-left: 0.3rem;
+      font-size: 0.14rem;
+      line-height: 0.38rem;
+      color: #333;
+      white-space: nowrap;
+      &.is-active {
+        border-bottom: 0.02rem solid #aa1941;
+      }
+    }
+  }
+  .banner {
+    display: block;
+    width: 100%;
+    height: 1.2rem;
+    object-fit: cover;
+  }
+  .app-main-article {
+    padding: 0.2rem 0.15rem;
+    background: #fff;
+  }
+}
+
+.app-main-article img {
+  max-width: 100%;
+}
+</style>

components/ArticleDetail.vue

+<template>
+  <app-frame v-bind="$attrs" v-on="$listeners" class="article-detail">
+    <template #article>
+      <div class="article-back" @click="$emit('back')">
+        <div class="el-icon-arrow-left"></div>
+        <div class="text">返回</div>
+      </div>
+      <div class="article-time">{{ formatDate(data.start_time) }}</div>
+      <h1 class="article-title">{{ data.title }}</h1>
+      <div class="article-content" v-html="data.content"></div>
+      <ArticleRecommend />
+    </template>
+  </app-frame>
+</template>
+<script>
+import AppFrame from '@/components/AppFrame'
+import ArticleRecommend from '@/components/ArticleRecommend'
+export default {
+  components: { AppFrame, ArticleRecommend },
+  data() {
+    return {
+      data: {}
+    }
+  },
+  async fetch() {
+    this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
+      return res.data
+    })
+    this.$emit('loaded', this.data)
+  },
+  methods: {
+    formatDate(value) {
+      const date = new Date(value * 1000)
+      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.is-pc {
+  .article-back {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    color: #999;
+    cursor: pointer;
+  }
+  .article-time {
+    font-size: 16px;
+    line-height: 100%;
+    margin: 35px 0 16px;
+    color: #999999;
+  }
+  .article-title {
+    font-size: 32px;
+    font-weight: bold;
+    color: #141414;
+    border-bottom: 1px solid #e6e6e6;
+    padding-bottom: 10px;
+  }
+  .article-content {
+    padding-top: 25px;
+    font-size: 14px;
+    line-height: 28px;
+    color: #333;
+  }
+}
+.is-h5 {
+  .article-back {
+    display: flex;
+    align-items: center;
+    font-size: 0.1rem;
+    cursor: pointer;
+  }
+  .article-time {
+    margin-top: 0.15rem;
+    font-size: 0.1rem;
+    color: #9b9b9b;
+  }
+  .article-title {
+    margin: 0.1rem 0;
+    padding: 0 0 0.1rem;
+    font-size: 0.14rem;
+    font-weight: 700;
+    color: #333;
+    border-bottom: 1px solid #e6e6e6;
+  }
+  .article-content {
+    font-size: 0.12rem;
+    line-height: 0.24rem;
+  }
+}
+</style>

components/ArticleList.vue

+<template>
+  <div class="article-list">
+    <article-list-item v-for="(item, index) in dataList" :data="item" v-bind="$attrs" :key="index"></article-list-item>
+    <el-pagination
+      class="article-list-pagination"
+      layout="prev, pager, next"
+      :page-size="page.size"
+      :total="page.total"
+      :current-page.sync="page.currentPage"
+      @current-change="fetchList"
+      :hide-on-single-page="true"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import ArticleListItem from './ArticleListItem.vue'
+export default {
+  name: 'ArticleList',
+  components: { ArticleListItem },
+  inheritAttrs: false,
+  props: {
+    remote: { type: Object, default: () => ({}) },
+    // 是否含有翻页
+    hasPagination: { type: Boolean, default: true },
+    // 每页多少条数据
+    limit: { type: Number, default: 20 }
+  },
+  data() {
+    return {
+      loading: false,
+      params: this.remote.params || {},
+      dataList: this.data,
+      page: { total: 0, size: this.limit, currentPage: 1 }
+    }
+  },
+  watch: {
+    'remote.params': {
+      immediate: true,
+      handler(data) {
+        this.params = data || {}
+      }
+    }
+  },
+  async fetch() {
+    await this.fetchList()
+  },
+  methods: {
+    fetchList() {
+      /**
+       * @param function httpRequest api接口
+       * @param function beforeRequest 接口请求之前
+       * @param function callback 接口请求成功回调
+       */
+      const { httpRequest, beforeRequest, callback } = this.remote
+      if (!httpRequest) {
+        return
+      }
+      // 参数设置
+      let params = this.params
+      // 翻页参数设置
+      if (this.hasPagination) {
+        params.page = this.page.currentPage
+        params.limit = this.page.size
+      }
+      // 接口请求之前
+      if (beforeRequest) {
+        params = beforeRequest(params)
+      }
+      for (const key in params) {
+        if (params[key] === '' || params[key] === undefined || params[key] === undefined) {
+          delete params[key]
+        }
+      }
+      this.loading = true
+      return httpRequest(params)
+        .then(res => {
+          const { data = [], total = 0 } = res.data || {}
+          this.page.total = total
+          this.dataList = callback ? callback(data) : data
+        })
+        .catch(() => {
+          this.page.total = 0
+          this.dataList = []
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.article-list {
+  overflow: hidden;
+}
+.article-list-pagination {
+  padding: 20px;
+  text-align: center;
+}
+.is-h5 {
+  .article-list {
+    background: #eee;
+    margin: -0.2rem -0.15rem;
+  }
+}
+</style>

components/ArticleListItem.vue

+<template>
+  <div class="article-item">
+    <app-link :data="data" v-bind="$attrs">
+      <div class="article-item-inner">
+        <img :src="data.web_img_uri" class="article-item-pic" loading="lazy" />
+        <div class="article-item-content">
+          <div class="article-item-content__date">{{ formatDate(data.start_time) }}</div>
+          <div class="article-item-content__title">{{ data.title }}</div>
+          <div class="article-item-content__text">{{ data.abstract }}</div>
+        </div>
+      </div>
+    </app-link>
+  </div>
+</template>
+
+<script>
+import AppLink from '@/components/Link'
+export default {
+  name: 'ArticleItem',
+  components: { AppLink },
+  inheritAttrs: false,
+  props: { data: { type: Object, required: true } },
+  methods: {
+    formatDate(value) {
+      const date = new Date(value * 1000)
+      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.is-pc {
+  .article-item {
+    border-bottom: 1px solid #e6e6e6;
+    padding: 36px 0;
+    cursor: pointer;
+  }
+  .article-item-inner {
+    display: flex;
+    &.set-list {
+      .article-item-pic {
+        width: 335px;
+        object-fit: cover;
+        height: 130px;
+      }
+      .article-item-content__text {
+        -webkit-line-clamp: 2;
+      }
+    }
+  }
+  .article-item-pic {
+    width: 320px;
+    height: 100%;
+    // height: fit-content;
+    // height: 210px;
+    // object-fit: cover;
+  }
+  .article-item-content {
+    flex: 1;
+    overflow: hidden;
+    margin-left: 30px;
+  }
+  .article-item-content__date {
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 100%;
+    color: #aa1941;
+    // padding-top: 13px;
+  }
+  .article-item-content__title {
+    font-size: 22px;
+    font-weight: bold;
+    line-height: 32px;
+    color: #141414;
+    margin-top: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+  .article-item-content__text {
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 24px;
+    color: #666666;
+    margin-top: 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+  }
+}
+.is-h5 {
+  .article-list-inner {
+    display: flex;
+  }
+  .article-item {
+    margin: 0.2rem;
+    background-color: #fff;
+  }
+  .article-item-pic {
+    display: block;
+    width: 100%;
+    // height: fit-content;
+    // height: 2.99rem;
+    // object-fit: cover;
+  }
+  .article-item-content {
+    padding: 0.18rem;
+  }
+  .article-item-content__date {
+    font-size: 0.1rem;
+    color: #aa1941;
+    line-height: 0.16rem;
+  }
+  .article-item-content__title {
+    margin-top: 0.1rem;
+    font-size: 0.14rem;
+    font-weight: 500;
+    color: #333;
+    line-height: 0.24rem;
+  }
+  .article-item-content__text {
+    margin-top: 0.2rem;
+    font-size: 0.1rem;
+    line-height: 0.2rem;
+  }
+}
+</style>

components/ArticleRecommend.vue

+<template>
+  <div v-if="listData.length">
+    <div class="recommend-content">
+      <div class="titles">
+        <div class="line"></div>
+        <div class="text">相关推荐</div>
+      </div>
+      <ul class="list-box">
+        <li v-for="(item, index) in listData" :key="index">
+          <app-link :data="item" :to="`/news/hot/${item.id}`">
+            <img :src="item.web_img_uri" />
+            <div class="dec">{{ item.title }}</div>
+          </app-link>
+        </li>
+      </ul>
+    </div>
+    <div class="more-btn" @click="$router.push({ path: '/news/hot' })">查看更多</div>
+  </div>
+</template>
+<script>
+import AppLink from '@/components/Link'
+export default {
+  components: { AppLink },
+  data() {
+    return {
+      data: {},
+      listData: []
+    }
+  },
+  async fetch() {
+    const params = {
+      project_id: process.env.projectId,
+      type_tag: 'article_news_hot',
+      is_recommend: 1,
+      page: 1,
+      limit: 3
+    }
+    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
+      return res.data.data
+    })
+  },
+  methods: {
+    goPage(item) {
+      if (item.source) {
+        window.open(item.source)
+      } else {
+        this.$router.push({ name: 'news-hot-id', params: { id: item.id } })
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.recommend-content {
+  border-top: 1px solid #e6e6e6;
+  padding-top: 37px;
+  .titles {
+    display: flex;
+    align-items: center;
+    .line {
+      width: 6px;
+      height: 22px;
+      background: #aa1941;
+    }
+    .text {
+      font-size: 22px;
+      color: #333333;
+      margin-left: 10px;
+    }
+  }
+  .list-box {
+    margin-top: 50px;
+    display: flex;
+    justify-content: space-between;
+    li {
+      width: 280px;
+      img {
+        width: 280px;
+        height: 184px;
+        display: block;
+      }
+      .dec {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        font-size: 16px;
+        line-height: 26px;
+        color: #333333;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+.more-btn {
+  position: relative;
+  z-index: 999;
+  width: 164px;
+  height: 40px;
+  border: 1px solid #d3d3d3;
+  border-radius: 8px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  color: #999999;
+  margin: 50px auto 0;
+  cursor: pointer;
+}
+</style>

components/Card.vue

@@ -36,6 +36,4 @@ export default {
   font-size: 0.1rem;
   color: #9b9b9b;
 }
-.card-bd {
-}
 </style>

components/Link.vue

 <template>
-  <div>
+  <span class="app-link">
     <!-- 外部链接跳转 -->
-    <a :href="item.href" target="_blank" v-if="item.href"><slot /></a>
+    <a :href="href" :target="target" v-if="href"><slot /></a>
     <!-- 站内跳转 -->
-    <nuxt-link :to="item.path" v-else-if="item.path"><slot /></nuxt-link>
+    <nuxt-link :to="path" v-else-if="path"><slot /></nuxt-link>
     <!-- 事件 -->
-    <div v-else-if="item.onClick" @click="item.onClick"><slot /></div>
+    <div v-else-if="data.onClick" @click="data.onClick"><slot /></div>
     <template v-else><slot /></template>
-  </div>
+  </span>
 </template>
 
 <script>
 export default {
-  props: { item: { type: Object } }
+  name: 'Link',
+  props: {
+    data: { type: Object, default: () => ({}) },
+    to: [String, Object, Function],
+    target: { type: String, default: '_blank' }
+  },
+  computed: {
+    href() {
+      return this.data.href || this.data.uri
+    },
+    path() {
+      if (typeof this.to === 'function') {
+        return this.to(this.data)
+      }
+      return this.data.path || this.to
+    }
+  }
 }
 </script>

components/Menu.vue

@@ -75,24 +75,21 @@ export default {
             },
             {
               name: this.$t('menu.industrialCollegeChild.saas'),
-              href: 'https://x-learning.ezijing.com'
+              href: 'https://e-saas.ezijing.com'
             },
             {
               name: this.$t('menu.industrialCollegeChild.internship'),
               path: '/services/employment'
             },
             {
-              name: this.$t('menu.industrialCollegeChild.x'),
-              href: 'https://x.ezijing.com'
-            },
-            {
-              name: this.$t('menu.industrialCollegeChild.cert'),
-              path: '/services/job'
+              name: '商业数据分析实验室',
+              path: '/services/dataAnalysis'
             }
           ]
         },
         {
           name: this.$t('menu.degree'),
+          path: '/internationalDegree',
           children: [
             // {
             //   name: this.$t('menu.degreeChild.bachelor'),
@@ -103,9 +100,12 @@ export default {
               children: [
                 { name: this.$t('menu.degreeChild.masterChild.msf'), href: 'https://kelley.ezijing.com' },
                 { name: this.$t('menu.degreeChild.masterChild.med'), href: 'https://cu.ezijing.com' },
-                { name: this.$t('menu.degreeChild.masterChild.map'), href: 'https://ciis.ezijing.com' },
-                { name: this.$t('menu.degreeChild.masterChild.studyAbroadMaster'), href: 'https://marywood-plus.ezijing.com' },
-                { name: '金融学硕士1+1', href: 'https://sbu-plus.ezijing.com' },
+                { name: this.$t('menu.degreeChild.masterChild.map'), href: 'https://ciis.ezijing.com' }
+                // {
+                //   name: this.$t('menu.degreeChild.masterChild.studyAbroadMaster'),
+                //   href: 'https://marywood-plus.ezijing.com'
+                // },
+                // { name: '金融学硕士1+1', href: 'https://sbu-plus.ezijing.com' }
               ]
             },
             {
@@ -116,27 +116,71 @@ export default {
                 { name: this.$t('menu.degreeChild.mbaChild.internatidnal'), href: 'https://shms.ezijing.com' },
                 { name: this.$t('menu.degreeChild.mbaChild.caas'), href: 'https://caas.ezijing.com' }
               ]
+            }
+            // {
+            //   name: this.$t('menu.degreeChild.doctor'),
+            //   children: [
+            //     // { name: this.$t('menu.degreeChild.doctorChild.dba'), onClick: this.showTips },
+            //     { name: this.$t('menu.degreeChild.doctorChild.edd'), href: 'https://cbu-plus.ezijing.com' },
+            //     { name: this.$t('menu.degreeChild.doctorChild.studyAbroad'), onClick: this.showTips }
+            //   ]
+            // }
+          ]
+        },
+        // {
+        //   name: this.$t('menu.onlineEdu'),
+        //   children: [
+        //     {
+        //       name: this.$t('menu.onlineEduChild.service'),
+        //       path: '/services/solution'
+        //     },
+        //     {
+        //       name: this.$t('menu.onlineEduChild.prp'),
+        //       href: 'https://prp.ezijing.com/'
+        //     }
+        //   ]
+        // },
+        {
+          name: '留学中心',
+          path: '/studyAbroad',
+          children: [
+            {
+              name: '国际大一1+3（即将推出）',
+              onClick: this.showTips
             },
             {
-              name: this.$t('menu.degreeChild.doctor'),
-              children: [
-                // { name: this.$t('menu.degreeChild.doctorChild.dba'), onClick: this.showTips },
-                { name: this.$t('menu.degreeChild.doctorChild.edd'), href: 'https://cbu-plus.ezijing.com' },
-                { name: this.$t('menu.degreeChild.doctorChild.studyAbroad'), onClick: this.showTips }
-              ]
+              name: '工商管理硕士1+1',
+              href: 'https://marywood-plus.ezijing.com/'
+            },
+            {
+              name: '管理信息系统硕士1+1',
+              href: 'https://marywood-plus.ezijing.com/'
+            },
+            {
+              name: '金融学硕士1+1',
+              href: 'https://sbu-plus.ezijing.com/'
+            },
+            {
+              name: this.$t('menu.degreeChild.doctorChild.edd'),
+              href: 'https://cbu-plus.ezijing.com'
             }
           ]
         },
         {
-          name: this.$t('menu.onlineEdu'),
+          name: this.$t('menu.industrialCollegeChild.cert'),
+          path: '/services/job',
           children: [
             {
-              name: this.$t('menu.onlineEduChild.service'),
-              path: '/services/solution'
+              name: this.$t('menu.industrialCollegeChild.x'),
+              href: 'https://x.ezijing.com'
             },
             {
               name: this.$t('menu.onlineEduChild.prp'),
               href: 'https://prp.ezijing.com/'
+            },
+            {
+              name: '高管培训（数字创新管理）',
+              onClick: this.showTips
             }
           ]
         },
@@ -148,13 +192,13 @@ export default {
             { name: this.$t('menu.alumniChild.alumniStory'), path: '/alumnus/story' }
             // { name: '校友风采', path: '/alumnus/style' }
           ]
-        },
-        {
-          name: this.$t('menu.apply'),
-          onClick: () => {
-            this.$emit('showApplyForm')
-          }
         }
+        // {
+        //   name: this.$t('menu.apply'),
+        //   onClick: () => {
+        //     this.$emit('showApplyForm')
+        //   }
+        // }
       ]
     }
   },

components/NewsCard.vue

+<template>
+  <AppCard title="最新动态" class="news-card">
+    <template #header-aside><nuxt-link :to="baseUrl">查看更多+</nuxt-link></template>
+    <div class="content-box" v-if="Object.keys(listData.first).length">
+      <div class="news-left">
+        <app-link :data="listData.first" :to="`${baseUrl}/${listData.first.id}`">
+          <img :src="listData.first.web_img_uri" />
+          <div class="mantle-box">
+            <div class="tit" v-if="!isMobile">{{ listData.first.title }}</div>
+            <div class="con-txt">{{ listData.first.abstract }}</div>
+          </div>
+        </app-link>
+      </div>
+      <ul class="news-right">
+        <li v-for="(item, index) in listData.list" :key="index">
+          <app-link :data="item" :to="`${baseUrl}/${item.id}`">
+            <div class="time">{{ formatDate(item.start_time) }}</div>
+            <div class="news-r-title">{{ item.title }}</div>
+            <div class="del">{{ item.abstract }}</div>
+          </app-link>
+        </li>
+      </ul>
+    </div>
+  </AppCard>
+</template>
+<script>
+import AppCard from '@/components/Card.vue'
+import AppLink from '@/components/Link'
+export default {
+  name: 'NewsCard',
+  props: { baseUrl: String, default: '/about/news', params: Object },
+  components: { AppCard, AppLink },
+  async fetch() {
+    const params = this.params || { project_id: process.env.projectId, type_tag: 'article_news_hot', page: 1, limit: 4 }
+    await this.$axios
+      .get('/api/cms/api/v1/articles', { params, headers: { 'Content-Type': 'application/json' } })
+      .then(res => {
+        this.data = res.data.data || []
+      })
+  },
+  data() {
+    return {
+      data: []
+    }
+  },
+  computed: {
+    listData() {
+      const [first = {}, ...list] = this.data
+      return { first, list: list || [] }
+    },
+    isMobile() {
+      return this.$store.state.isMobile
+    }
+  },
+  methods: {
+    formatDate(value) {
+      const date = new Date(value * 1000)
+      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.is-pc {
+  .news-card {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 60px 0;
+    .content-box {
+      display: flex;
+      justify-content: space-between;
+      .news-left {
+        width: 780px;
+        height: 500px;
+        position: relative;
+        img {
+          width: 100%;
+          height: 100%;
+          display: block;
+        }
+        .mantle-box {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background: rgba(0, 0, 0, 0.2);
+          padding: 30px 37px;
+          .tit {
+            font-size: 24px;
+            font-weight: bold;
+            line-height: 100%;
+            color: #ffffff;
+            width: 696px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .con-txt {
+            width: 461px;
+            font-size: 14px;
+            line-height: 24px;
+            color: #ffffff;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+            margin-top: 10px;
+          }
+        }
+      }
+      .news-right {
+        li {
+          width: 366px;
+          border-bottom: 1px solid #e3e3e3;
+          padding-bottom: 19px;
+          margin-bottom: 30px;
+          cursor: pointer;
+          .time {
+            font-size: 16px;
+            font-weight: normal;
+            line-height: 100%;
+            color: #8e1e22;
+          }
+          .news-r-title {
+            font-size: 22px;
+            font-weight: bold;
+            line-height: 30px;
+            color: #333333;
+            margin-top: 15px;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+          }
+          .del {
+            width: 350px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 14px;
+            line-height: 100%;
+            color: #999999;
+            margin-top: 15px;
+          }
+        }
+      }
+    }
+  }
+}
+.is-h5 {
+  .news-card {
+    .content-box {
+      // height: 2.18rem;
+      position: relative;
+      img {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+      .news-left {
+        position: relative;
+      }
+      .mantle-box {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background: rgba(8, 8, 8, 0.45);
+        padding-bottom: 0.14rem;
+        .con-txt {
+          font-size: 0.12rem;
+          font-weight: bold;
+          line-height: 0.17rem;
+          color: #ffffff;
+          padding: 0.14rem 0.32rem 0 0.19rem;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+        }
+      }
+    }
+    .news-right {
+      li {
+        margin-top: 0.1rem;
+        padding: 0.13rem 0.14rem 0.11rem 0.12rem;
+        background: #fff;
+        .time {
+          font-size: 0.1rem;
+          line-height: 100%;
+          color: #ab0a3d;
+        }
+        .news-r-title {
+          font-size: 0.14rem;
+          color: #333333;
+          margin-top: 0.1rem;
+          line-height: 0.21rem;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+        }
+        .del {
+          font-size: 0.11rem;
+          line-height: 0.2rem;
+          color: #666666;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+        }
+      }
+    }
+  }
+}
+</style>

components/Search.vue

@@ -4,7 +4,7 @@
       <h2 class="hot-search__title">热门搜索</h2>
       <ul class="hot-search__list">
         <li v-for="(item, index) in hotList" :key="index">
-          <app-link :item="item">{{ item.name }}</app-link>
+          <app-link :data="item">{{ item.name }}</app-link>
         </li>
       </ul>
     </div>
@@ -35,8 +35,6 @@ export default {
   min-height: 100vh;
   background-color: #fff;
 }
-.hot-search {
-}
 .hot-search__title {
   padding: 0.2rem 0;
   font-size: 0.12rem;

components/TeacherCard.vue

+<template>
+  <AppCard title="优秀师资">
+    <swiper ref="mySwiper" :options="swiperOptions" class="teacher-list">
+      <swiper-slide v-for="(item, index) in list" :key="index" class="teacher-item">
+        <div class="teacher-item-hd">
+          <div class="teacher-item-hd-text">
+            <h3>{{ item.name }}</h3>
+            <h4>{{ item.project }}</h4>
+            <p>{{ item.title }}</p>
+          </div>
+          <img :src="item.imgUrl" />
+        </div>
+        <div class="teacher-item-bd" v-html="item.desc"></div>
+      </swiper-slide>
+    </swiper>
+  </AppCard>
+</template>
+<script>
+import AppCard from '@/components/Card.vue'
+export default {
+  name: 'TeacherCard',
+  props: { list: { type: Array, default: () => [] } },
+  components: { AppCard },
+  data() {
+    return {
+      swiperOptions: {
+        autoplay: true,
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 20
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.teacher-list {
+  margin-bottom: 60px;
+}
+.teacher-item {
+  position: relative;
+  padding: 0.12rem;
+  width: 2.4rem;
+  height: 3.02rem;
+  background: #a81840;
+  color: #fff;
+  box-sizing: border-box;
+}
+.teacher-item-hd {
+  display: flex;
+  img {
+    width: 1.28rem;
+    height: 1.28rem;
+    object-fit: cover;
+  }
+}
+.teacher-item-hd-text {
+  flex: 1;
+  overflow: hidden;
+  h3 {
+    font-size: 0.16rem;
+    font-weight: 500;
+    line-height: 0.16rem;
+  }
+  h4 {
+    position: relative;
+    margin-top: 0.1rem;
+    font-size: 0.12rem;
+    font-weight: 400;
+    line-height: 0.12rem;
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -0.05rem;
+      width: 0.21rem;
+      height: 0.01rem;
+      background: rgba(255, 255, 255, 0.39);
+    }
+  }
+  p {
+    margin-top: 0.1rem;
+    font-size: 0.12rem;
+    font-weight: 400;
+    line-height: 0.12rem;
+  }
+}
+.teacher-item-bd {
+  margin-top: 0.15rem;
+  font-size: 0.12rem;
+  font-weight: 300;
+  line-height: 0.17rem;
+  color: #fff;
+}
+</style>

components/TreeItem.vue

@@ -2,7 +2,7 @@
   <li class="tree-item">
     <div class="cell" :class="{ bold: isFolder }" @click="toggle">
       <div class="cell-title">
-        <app-link :item="item">{{ item.name }}</app-link>
+        <app-link :data="item">{{ item.name }}</app-link>
       </div>
       <div class="cell-icon" v-if="isFolder">
         <van-icon name="arrow-up" v-if="isOpen" />
@@ -15,24 +15,23 @@
   </li>
 </template>
 
-
 <script>
 import AppLink from '@/components/Link'
 export default {
   props: { item: Object },
   components: { AppLink },
-  data: function () {
+  data: function() {
     return {
       isOpen: false
     }
   },
   computed: {
-    isFolder: function () {
+    isFolder: function() {
       return this.item.children && this.item.children.length
     }
   },
   methods: {
-    toggle: function () {
+    toggle: function() {
       if (this.isFolder) {
         this.isOpen = !this.isOpen
       }

components/home/Degree.vue

@@ -15,7 +15,7 @@
       <template v-for="(item, index) in data">
         <ul class="tab-right" :key="index" v-if="indexActive === index">
           <li :key="cIndex + 'c'" v-for="(cItem, cIndex) in item.content">
-            <app-link :item="cItem">
+            <app-link :data="cItem">
               <img :src="cItem.icon" class="icon" />
               <div class="text" v-html="cItem.text"></div>
             </app-link>

components/home/IndustrialCollege.vue

@@ -3,7 +3,7 @@
     <div class="service-hd">{{ $t('home.college.title') }}</div>
     <ul class="service-bd">
       <li v-for="(item, index) in data" :key="index">
-        <app-link :item="item">
+        <app-link :data="item">
           <img :src="item.icon" class="icon" />
           <div class="text" v-html="item.text"></div>
         </app-link>
@@ -20,7 +20,7 @@ export default {
       data: [
         {
           icon: 'https://webapp-pub.ezijing.com/www/pc/home/01.png',
-          text: this.$t('home.college.corePower'), 
+          text: this.$t('home.college.corePower'),
           path: '/services/college'
         },
         {
@@ -31,7 +31,7 @@ export default {
         {
           icon: 'https://webapp-pub.ezijing.com/www/pc/home/03.png',
           text: this.$t('home.college.saas'),
-          href: 'https://x-learning.ezijing.com'
+          href: 'https://e-saas.ezijing.com'
         },
         {
           icon: 'https://webapp-pub.ezijing.com/www/pc/home/04.png',
@@ -39,14 +39,14 @@ export default {
           path: '/services/employment'
         },
         {
-          icon: 'https://webapp-pub.ezijing.com/www/pc/home/05.png',
-          text: this.$t('home.college.x'),
-          href: 'https://x.ezijing.com'
+          icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_5.png',
+          text: '商业数据分析<br/>实验室',
+          path: '/services/dataAnalysis'
         },
         {
-          icon: 'https://webapp-pub.ezijing.com/www/pc/home/06.png',
-          text: this.$t('home.college.cert'),
-          path: '/services/job'
+          icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_6.png',
+          text: '服务案例',
+          path: '/services/college'
         }
       ]
     }
@@ -70,12 +70,11 @@ export default {
   line-height: 1;
 }
 .service-bd {
-  display: flex;
-  overflow-x: auto;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 0.1rem;
+  row-gap: 0.1rem;
   li {
-    min-width: 0.78rem;
     height: 1.1rem;
     background: #fff;
     cursor: pointer;
@@ -92,8 +91,5 @@ export default {
       text-align: center;
     }
   }
-  li + li {
-    margin-left: 0.1rem;
-  }
 }
 </style>

components/home/InternationalDegree.vue

+<template>
+  <div class="service">
+    <div class="service-hd">在线国际学位</div>
+    <div class="service-bd">
+      <AppLink to="/InternationalDegree">
+        <img src="https://webapp-pub.ezijing.com/www/h5/internationalDegree.png" width="100%" />
+      </AppLink>
+    </div>
+  </div>
+</template>
+<script>
+import AppLink from '@/components/Link'
+export default {
+  components: { AppLink },
+  data() {
+    return {
+      data: [
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/home/05.png',
+          text: this.$t('home.college.x'),
+          href: 'https://x.ezijing.com'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/home/onlineEdu_02.png',
+          text: this.$t('home.onlineEdu.prp'),
+          href: 'https://prp.ezijing.com/'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_szcx.png',
+          text: '高管培训<br/>数字创新管理',
+          onClick: this.showTips
+        }
+      ]
+    }
+  },
+  methods: {
+    showTips() {
+      this.$notify({ type: 'primary', message: '暂未开通，尽请期待' })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.service {
+  margin: 0.2rem 0.16rem;
+}
+.service-hd {
+  padding-bottom: 0.1rem;
+  font-size: 0.12rem;
+  font-weight: bold;
+  line-height: 1;
+}
+</style>

components/home/OnlineEdu.vue

 <template>
   <div class="service">
-    <div class="service-hd">{{ $t('home.onlineEdu.title') }}</div>
+    <div class="service-hd">职业证书</div>
     <ul class="service-bd">
       <li v-for="(item, index) in data" :key="index">
-        <app-link :item="item">
+        <app-link :data="item">
           <img :src="item.icon" class="icon" />
           <div class="text" v-html="item.text"></div>
         </app-link>
@@ -18,15 +18,25 @@ export default {
   data() {
     return {
       data: [
+        // {
+        //   icon: 'https://webapp-pub.ezijing.com/www/pc/home/onlineEdu_01.png',
+        //   text: this.$t('home.onlineEdu.service'),
+        //   path: '/services/solution'
+        // },
         {
-          icon: 'https://webapp-pub.ezijing.com/www/pc/home/onlineEdu_01.png',
-          text: this.$t('home.onlineEdu.service'), 
-          path: '/services/solution'
+          icon: 'https://webapp-pub.ezijing.com/www/pc/home/05.png',
+          text: this.$t('home.college.x'),
+          href: 'https://x.ezijing.com'
         },
         {
           icon: 'https://webapp-pub.ezijing.com/www/pc/home/onlineEdu_02.png',
           text: this.$t('home.onlineEdu.prp'),
           href: 'https://prp.ezijing.com/'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_szcx.png',
+          text: '高管培训<br/>数字创新管理',
+          onClick: this.showTips
         }
       ]
     }

components/home/Service.vue

@@ -3,7 +3,7 @@
     <div class="service-hd">{{ $t('menu.services') }}</div>
     <ul class="service-bd">
       <li v-for="(item, index) in data" :key="index">
-        <app-link :item="item">
+        <app-link :data="item">
           <img :src="item.icon" class="icon" />
           <div class="text" v-html="item.text"></div>
         </app-link>

components/home/StudyAbroad.vue

+<template>
+  <div class="service">
+    <div class="service-hd">留学中心</div>
+    <div class="service-bd">
+      <AppLink to="/studyAbroad">
+        <img src="https://webapp-pub.ezijing.com/www/h5/studyAbroad.png" width="100%" />
+      </AppLink>
+    </div>
+  </div>
+</template>
+<script>
+import AppLink from '@/components/Link'
+export default {
+  components: { AppLink },
+  data() {
+    return {
+      data: [
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/home/05.png',
+          text: this.$t('home.college.x'),
+          href: 'https://x.ezijing.com'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/home/onlineEdu_02.png',
+          text: this.$t('home.onlineEdu.prp'),
+          href: 'https://prp.ezijing.com/'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_szcx.png',
+          text: '高管培训<br/>数字创新管理',
+          onClick: this.showTips
+        }
+      ]
+    }
+  },
+  methods: {
+    showTips() {
+      this.$notify({ type: 'primary', message: '暂未开通，尽请期待' })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.service {
+  margin: 0.2rem 0.16rem;
+}
+.service-hd {
+  padding-bottom: 0.1rem;
+  font-size: 0.12rem;
+  font-weight: bold;
+  line-height: 1;
+}
+</style>

langs/zh-CN.js

@@ -3,7 +3,7 @@ export default {
     about: '关于紫荆',
     // services: '教育服务',
     industrialCollege: '数字经济产业学院',
-    degree: '国际教育',
+    degree: '在线国际学位',
     onlineEdu: '在线教育解决方案',
     alumni: '校友会',
     apply: '我要报名',

layouts/default.vue

 <template>
-  <div class="main-layout" :class="{ 'is-fixed': isFixed }">
+  <div class="main-layout is-h5" :class="{ 'is-fixed': isFixed }">
     <app-header />
     <div v-show="!isFixed">
       <Nuxt />

pages/index.vue

@@ -2,17 +2,18 @@
   <div class="home">
     <banner />
     <!-- 产业学院 -->
-    <industrial-college/>
-    <degree />
+    <industrial-college />
+    <!-- <degree /> -->
+    <InternationalDegree></InternationalDegree>
+    <StudyAbroad></StudyAbroad>
     <!-- 在线教育 -->
-    <online-edu/>
+    <online-edu />
     <!-- <service /> -->
     <post />
     <case />
     <publish />
     <story />
     <class />
-    
   </div>
 </template>
 
@@ -28,16 +29,28 @@ import Class from '@/components/home/Class'
 import Case from '@/components/home/Case'
 import IndustrialCollege from '../components/home/IndustrialCollege'
 import OnlineEdu from '../components/home/OnlineEdu'
+import InternationalDegree from '../components/home/InternationalDegree'
+import StudyAbroad from '../components/home/StudyAbroad'
 // api
-import * as api from '@/api'
 export default {
-  layout: 'default',
-  components: { Banner, Degree, Service, Post, Publish, Story, Class, Case, IndustrialCollege, OnlineEdu },
+  components: {
+    Banner,
+    Degree,
+    Service,
+    Post,
+    Publish,
+    Story,
+    Class,
+    Case,
+    IndustrialCollege,
+    OnlineEdu,
+    InternationalDegree,
+    StudyAbroad
+  },
   data() {
     return {}
   }
 }
 </script>
 
-<style>
-</style>
+<style></style>

pages/internationalDegree/index.vue

+<template>
+  <div>
+    <div class="banner">
+      <img src="https://webapp-pub.ezijing.com/www/h5/internationalDegree/banner.jpg" />
+    </div>
+    <div class="w1200">
+      <div class="why">
+        <h1 class="why-title">为什么选择紫荆的国际免联考在线学位课程？</h1>
+        <div class="why-list">
+          <div class="why-item" v-for="(item, index) in whyList" :key="index">
+            <img :src="item.icon" class="why-item__icon" />
+            <img :src="item.hoverIcon" class="why-item__icon_hover" />
+            <div class="why-content" v-html="item.desc"></div>
+          </div>
+        </div>
+      </div>
+      <app-card title="热门专业">
+        <div class="project-list">
+          <div class="project-item" v-for="(item, index) in projectList" :key="index">
+            <AppLink :data="item"><img :src="item.imgUrl"/></AppLink>
+          </div>
+        </div>
+      </app-card>
+      <app-card title="常见问题">
+        <template #header-aside><nuxt-link to="/internationalDegree/qa">查看更多+</nuxt-link></template>
+        <ul class="qa-list">
+          <li v-for="(item, index) in qaList" :key="index">
+            <nuxt-link to="/internationalDegree/qa">{{ item.question }}</nuxt-link>
+          </li>
+        </ul>
+      </app-card>
+      <NewsCard baseUrl="/internationalDegree/news" :params="newsParams"></NewsCard>
+      <TeacherCard :list="teacherList"></TeacherCard>
+      <app-card title="申请流程">
+        <div class="process">
+          <img src="https://webapp-pub.ezijing.com/www/h5/internationalDegree/process.png" />
+        </div>
+      </app-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import AppCard from '@/components/Card.vue'
+import AppLink from '@/components/Link.vue'
+import NewsCard from '@/components/NewsCard.vue'
+import TeacherCard from '@/components/TeacherCard.vue'
+import qaList from '@/assets/internationalDegreeQA.js'
+
+export default {
+  components: { AppCard, AppLink, NewsCard, TeacherCard },
+  data() {
+    return {
+      whyList: [
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_01.png',
+          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_01_hover.png',
+          desc: '优选国际正规院校、学位受到全球普遍承认'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_02.png',
+          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_02_hover.png',
+          desc: '严格审核，正规面试， 以国际标准选拔优秀人才'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_03.png',
+          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_03_hover.png',
+          desc: '国企背景、专业口碑 国际化专业运营团队'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_04.png',
+          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_04_hover.png',
+          desc: '与在校生一样的授课老师，一样的专业课程体系'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_05.png',
+          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_05_hover.png',
+          desc: '针对在线学习特点的教学优化和授课安排'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_06.png',
+          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_06_hover.png',
+          desc: '稳定的学习系统，365天X24小时全球登录'
+        }
+      ],
+      // 热门专业
+      projectList: [
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/internationalDegree/project_kelley.png',
+          href: 'https://kelley.ezijing.com/'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/internationalDegree/project_ciis.png',
+          href: 'https://ciis.ezijing.com/'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/internationalDegree/project_cu.png',
+          href: 'https://cu.ezijing.com/'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/internationalDegree/project_marywood.png',
+          href: 'https://marywood.ezijing.com/'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/internationalDegree/project_shms.png',
+          href: 'https://shms.ezijing.com/'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/internationalDegree/project_caas.png',
+          href: 'https://caas.ezijing.com/'
+        }
+      ],
+      // 常见问题
+      qaList,
+      // 最新动态请求参数
+      newsParams: {
+        project_ids: [
+          '6800243768751554560',
+          '6808657045168848896',
+          '6808657689426526208',
+          '6805762100502200320',
+          '6808658580045037568',
+          '6823789210604929024'
+        ],
+        type_tag: 'article_news_hot',
+        page: 1,
+        limit: 4
+      },
+      teacherList: [
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_01.jpg',
+          name: 'Glenn Hartelius',
+          project: '师资-CIIS',
+          title: '博士',
+          desc:
+            '《国际整合与后人本主义心理学专业手册》编纂人<br/>《国际整合与后人本主义心理学》专业学术期刊主编<br/>2019年复旦大学中国首届整合心理学大会开幕致辞嘉宾'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_02.jpg',
+          name: '钟思嘉',
+          project: '师资-CIIS',
+          title: '教授',
+          desc:
+            '美国俄勒冈大学哲学博士（教育心理学与咨询心理学）<br/>现任浙江师范大学教师教育学院特聘专家<br/>曾任台湾政治大学心理系教授、博士生导师，心理系主任、理学院院长台湾辅导与咨询学会理事长、心理学会理事'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_03.jpg',
+          name: 'Sharon Hundley,Ed.D.',
+          project: '师资-CU',
+          title: '副教授',
+          desc: '康博斯威尔大学教育学院早期儿童教育项目主任<br/>AMI认证3-6岁主教<br/>AMS授证导师'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_04.jpg',
+          name: '胡晓毅',
+          project: '师资-CU',
+          title: '教授',
+          desc:
+            '北京师范大学教育学部教授、硕士生导师<br/>美国堪萨斯大学特殊教育系博士北京师范大学教育学部孤独症儿童教育研究中心主任'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_05.jpg',
+          name: 'Ash Soni',
+          project: '师资-KELLEY',
+          title: '教授',
+          desc: '印第安纳大学工商管理博士<br/>KELLEY商学院副院长、教授'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_06.jpg',
+          name: '肇越',
+          project: '师资-KELLEY',
+          title: '博士',
+          desc:
+            '清华五道口经济学博士<br/>清华大学五道口金融学院业界导师、经济学家兼研究院院长<br/>香港致富证券有限公司首席'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_07.jpg',
+          name: 'Chris Speicher',
+          project: '师资-MARYWOOD',
+          title: '副教授',
+          desc: '天普大学博士副教授'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_08.jpg',
+          name: '张恩忠',
+          project: '师资-MARYWOOD',
+          title: '副教授',
+          desc: '美国普渡大学博士<br/>中国人民大学教授、博士生导师'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_09.jpg',
+          name: 'Andrea Leuenberger',
+          project: '师资-SHMS',
+          title: '项目主管',
+          desc:
+            '擅长于牧学领域的学习设计<br/>曾在纽约奢华酒店Swiss atel The Drake和莫斯科、中亚地区等多家奢华酒店担任运营总监和高管'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped src="@/assets/css/studyAbroad.scss"></style>

pages/internationalDegree/news/_id.vue

+<template>
+  <article-detail :tabs="tabs" @back="$router.push('/internationalDegree/news')"></article-detail>
+</template>
+<script>
+import ArticleDetail from '@/components/ArticleDetail'
+import navList from '@/assets/internationalDegreeNavList.js'
+
+export default {
+  components: { ArticleDetail },
+  data() {
+    return {
+      tabs: navList
+    }
+  }
+}
+</script>

pages/internationalDegree/news/index.vue

+<template>
+  <app-frame :tabs="tabs">
+    <img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
+    <template #article>
+      <article-list v-bind="listOptions"></article-list>
+    </template>
+  </app-frame>
+</template>
+
+<script>
+import AppFrame from '@/components/AppFrame'
+import navList from '@/assets/internationalDegreeNavList.js'
+import ArticleList from '@/components/ArticleList'
+import { getArticleList } from '@/api'
+
+export default {
+  components: { AppFrame, ArticleList },
+  data() {
+    return {
+      tabs: navList
+    }
+  },
+  computed: {
+    listOptions() {
+      return {
+        remote: {
+          httpRequest: getArticleList,
+          params: {
+            project_ids: [
+              '6800243768751554560',
+              '6808657045168848896',
+              '6808657689426526208',
+              '6805762100502200320',
+              '6808658580045037568',
+              '6823789210604929024'
+            ],
+            type_tag: 'article_news_hot'
+          }
+        },
+        to(item) {
+          return { name: 'internationalDegree-news-id', params: { id: item.id } }
+        }
+      }
+    }
+  }
+}
+</script>

pages/internationalDegree/qa.vue

+<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/internationalDegreeNavList.js'
+import qaList from '@/assets/internationalDegreeQA.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>

pages/services/college_old.vue

-<template>
-  <div>
-    <tabs :list="navList" @tabChange="tabChange"></tabs>
-    <template v-if="showModule === 0">
-      <div class="module-1">
-        <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img1-1.png" />
-        <div class="width-con">
-          <img
-            style="margin: 0.26rem 0 0.07rem"
-            src="https://webapp-pub.ezijing.com/www/h5/images/college-img1-2.png"
-          />
-          <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img1-3.png" />
-          <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img1-4.png" />
-          <img
-            style="width: 1.82rem; margin: 0.27rem 0 0.15rem"
-            src="https://webapp-pub.ezijing.com/www/h5/images/college-text.png"
-            alt=""
-          />
-          <div class="layout-con">
-            <div class="lay-con__left">
-              <div class="lay-l__top">
-                <img src="https://webapp-pub.ezijing.com/www/h5/images/college-i1.png" />
-                <img class="img-text" src="https://webapp-pub.ezijing.com/www/h5/images/college-i1-t1.png" />
-              </div>
-              <div class="lay-l__bottom">
-                <img src="https://webapp-pub.ezijing.com/www/h5/images/college-i2.png" />
-                <img class="img-text" src="https://webapp-pub.ezijing.com/www/h5/images/college-i2-t2.png" />
-              </div>
-            </div>
-            <div class="lay-con__right">
-              <img src="https://webapp-pub.ezijing.com/www/h5/images/college-i3.png" />
-              <img class="img-text" src="https://webapp-pub.ezijing.com/www/h5/images/college-i3-t3.png" />
-            </div>
-          </div>
-          <img
-            style="margin: 0.15rem 0 0.17rem"
-            src="https://webapp-pub.ezijing.com/www/h5/images/college-img1-5.png"
-          />
-          <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img1-6.png" />
-          <img style="margin: 0.3rem 0 0.4rem" src="https://webapp-pub.ezijing.com/www/h5/images/college-img1-7.png" />
-        </div>
-      </div>
-    </template>
-    <template v-if="showModule === 1">
-      <div class="module-2">
-        <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img2-1.png" />
-        <div class="width-con">
-          <img
-            style="margin: 0.31rem 0 0.24rem"
-            src="https://webapp-pub.ezijing.com/www/h5/images/college-img2-2.png"
-          />
-          <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img2-3.png" />
-          <div class="title">目标岗位群</div>
-          <college-item :data="m2Data" />
-        </div>
-      </div>
-    </template>
-    <template v-if="showModule === 2">
-      <div class="module-3">
-        <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img3-1.png" />
-        <div class="width-con">
-          <img src="https://webapp-pub.ezijing.com/www/h5/images/college-img3-2.png" />
-          <img style="margin-top: 0.1rem" src="https://webapp-pub.ezijing.com/www/h5/images/college-img3-3.png" />
-          <div class="title">目标岗位群</div>
-          <college-item :data="m3Data1" />
-          <college-item :data="m3Data2" style="margin: 0.1rem 0 0.2rem" />
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-<script>
-import collegeItem from './components/collegeItem'
-import tabs from './components/tab'
-export default {
-  components: { tabs, collegeItem },
-  data() {
-    return {
-      navList: ['现代产业学院', '数字金融', '国际品牌管理与数字运营'],
-      showModule: 0,
-      m2Data: {
-        list: [
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l1.png',
-            text: '数字化营销'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l2.png',
-            text: '数字化运营'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l3.png',
-            text: '智能投顾'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l4.png',
-            text: '风险管理'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l5.png',
-            text: '金融数据分析'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l6.png',
-            text: '财务会计'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l7.png',
-            text: '金融建模'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img2-l8.png',
-            text: '投资分析'
-          }
-        ]
-      },
-      m3Data1: {
-        list: [
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img1-i1n.png'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i2.png',
-            text: '文案策划'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i3.png',
-            text: '营销策划'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i4.png',
-            text: '渠道管理'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i5.png',
-            text: '广告策划'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i6.png',
-            text: '媒体公共'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i7.png',
-            text: '品牌管理运营'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i8.png',
-            text: '产品设计'
-          }
-        ]
-      },
-      m3Data2: {
-        height: '.98rem',
-        list: [
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img1-i2n.png'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i8.png',
-            text: '互联网运营'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i9.png',
-            text: '网站运营'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i10.png',
-            text: '电商运营'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i11.png',
-            text: '新媒体运营'
-          },
-          {
-            img: 'https://webapp-pub.ezijing.com/www/h5/images/college-img3-i12.png',
-            text: '活动策划运营'
-          }
-        ]
-      }
-    }
-  },
-  methods: {
-    tabChange(index) {
-      this.showModule = index
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-img {
-  width: 100%;
-  display: block;
-}
-.width-con {
-  padding: 0 0.17rem;
-}
-.module-1 {
-  .layout-con {
-    display: flex;
-    .lay-con__left {
-      width: 1.25rem;
-      margin-right: 0.03rem;
-      .lay-l__top {
-        height: 0.73rem;
-        position: relative;
-        margin-bottom: 0.03rem;
-        .img-text {
-          width: 0.85rem;
-          position: absolute;
-          bottom: 0.08rem;
-          left: 0.07rem;
-        }
-      }
-      .lay-l__bottom {
-        height: 0.73rem;
-        position: relative;
-        .img-text {
-          width: 0.6rem;
-          position: absolute;
-          bottom: 0.04rem;
-          left: 0.07rem;
-        }
-      }
-    }
-    .lay-con__right {
-      position: relative;
-      width: 2.15rem;
-      height: 1.48rem;
-      .img-text {
-        width: 1rem;
-        position: absolute;
-        bottom: 0.08rem;
-        left: 0.11rem;
-      }
-    }
-  }
-}
-.module-2 {
-  .title {
-    margin: 0.32rem 0 0.06rem;
-    font-size: 0.14rem;
-    line-height: 100%;
-    color: #424242;
-  }
-}
-.module-3 {
-  .title {
-    font-size: 0.14rem;
-    color: #424242;
-    line-height: 100%;
-    margin: 0.3rem 0 0.1rem;
-  }
-}
-</style>

pages/studyAbroad/index.vue

+<template>
+  <div>
+    <div class="banner">
+      <img src="https://webapp-pub.ezijing.com/www/h5/studyAbroad/banner.jpg" />
+    </div>
+    <div class="w1200">
+      <div class="why">
+        <h1 class="why-title">为什么选择紫荆教育的国际留学课程？</h1>
+        <div class="why-list">
+          <div class="why-item" v-for="(item, index) in whyList" :key="index">
+            <img :src="item.icon" class="why-item__icon" />
+            <img :src="item.hoverIcon" class="why-item__icon_hover" />
+            <div class="why-content" v-html="item.desc"></div>
+          </div>
+        </div>
+      </div>
+      <app-card title="热门专业">
+        <div class="project-list">
+          <div class="project-item" v-for="(item, index) in projectList" :key="index">
+            <AppLink :data="item"><img :src="item.imgUrl"/></AppLink>
+          </div>
+        </div>
+      </app-card>
+      <app-card title="常见问题">
+        <template #header-aside><nuxt-link to="/studyAbroad/qa">查看更多+</nuxt-link></template>
+        <ul class="qa-list">
+          <li v-for="(item, index) in qaList" :key="index">
+            <nuxt-link to="/studyAbroad/qa">{{ item.question }}</nuxt-link>
+          </li>
+        </ul>
+      </app-card>
+      <NewsCard baseUrl="/studyAbroad/news" :params="newsParams"></NewsCard>
+      <TeacherCard :list="teacherList"></TeacherCard>
+      <app-card title="申请流程">
+        <div class="process">
+          <img src="https://webapp-pub.ezijing.com/www/h5/studyAbroad/process.png" />
+        </div>
+      </app-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import AppCard from '@/components/Card.vue'
+import AppLink from '@/components/Link.vue'
+import NewsCard from '@/components/NewsCard.vue'
+import TeacherCard from '@/components/TeacherCard.vue'
+import qaList from '@/assets/studyAbroadQA.js'
+
+export default {
+  components: { AppCard, AppLink, NewsCard, TeacherCard },
+  data() {
+    return {
+      whyList: [
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_01.png',
+          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_01_hover.png',
+          desc: '优选国际正规院校、学位受到全球普遍承认'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_02.png',
+          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_02_hover.png',
+          desc: '短期出国，可做中留服同等学历认证'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_03.png',
+          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_03_hover.png',
+          desc: '严格审核，正规面试，以国际标准选拔优秀人才'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_04.png',
+          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_04_hover.png',
+          desc: '国企背景、专业口碑，国际化专业运营团队'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_05.png',
+          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_05_hover.png',
+          desc: '国内外学习过程紧密衔接，全程跟踪服务'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_06.png',
+          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_06_hover.png',
+          desc: '稳定的学习系统，365天X24小时全球登录'
+        }
+      ],
+      // 热门专业
+      projectList: [
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_cbu.png',
+          href: 'https://cbu-plus.ezijing.com/'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_marywood_plus_1.png',
+          href: 'https://marywood-plus.ezijing.com/'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_sbu.png',
+          href: 'https://sbu-plus.ezijing.com/'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_ucr.png',
+          onClick: this.showMessage
+          // href: 'https://cbu-plus.ezijing.com/'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_marywood_plus_2.png',
+          href: 'https://marywood-plus.ezijing.com/'
+        }
+      ],
+      // 常见问题
+      qaList,
+      // 最新动态请求参数
+      newsParams: {
+        project_ids: ['25634964940156928', '25634688011239424', '6886139536666001408'],
+        type_tag: 'article_news_hot',
+        page: 1,
+        limit: 4
+      },
+      teacherList: [
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_01.jpg',
+          name: 'Glenn Hartelius',
+          project: '师资-CIIS',
+          title: '博士',
+          desc:
+            '《国际整合与后人本主义心理学专业手册》编纂人<br/>《国际整合与后人本主义心理学》专业学术期刊主编<br/>2019年复旦大学中国首届整合心理学大会开幕致辞嘉宾'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_02.jpg',
+          name: '钟思嘉',
+          project: '师资-CIIS',
+          title: '教授',
+          desc:
+            '美国俄勒冈大学哲学博士（教育心理学与咨询心理学）<br/>现任浙江师范大学教师教育学院特聘专家<br/>曾任台湾政治大学心理系教授、博士生导师，心理系主任、理学院院长台湾辅导与咨询学会理事长、心理学会理事'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_03.jpg',
+          name: 'Sharon Hundley,Ed.D.',
+          project: '师资-CU',
+          title: '副教授',
+          desc: '康博斯威尔大学教育学院早期儿童教育项目主任<br/>AMI认证3-6岁主教<br/>AMS授证导师'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_04.jpg',
+          name: '胡晓毅',
+          project: '师资-CU',
+          title: '教授',
+          desc:
+            '北京师范大学教育学部教授、硕士生导师<br/>美国堪萨斯大学特殊教育系博士北京师范大学教育学部孤独症儿童教育研究中心主任'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_05.jpg',
+          name: 'Ash Soni',
+          project: '师资-KELLEY',
+          title: '教授',
+          desc: '印第安纳大学工商管理博士<br/>KELLEY商学院副院长、教授'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_06.jpg',
+          name: '肇越',
+          project: '师资-KELLEY',
+          title: '博士',
+          desc:
+            '清华五道口经济学博士<br/>清华大学五道口金融学院业界导师、经济学家兼研究院院长<br/>香港致富证券有限公司首席'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_07.jpg',
+          name: 'Chris Speicher',
+          project: '师资-MARYWOOD',
+          title: '副教授',
+          desc: '天普大学博士副教授'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_08.jpg',
+          name: '张恩忠',
+          project: '师资-MARYWOOD',
+          title: '副教授',
+          desc: '美国普渡大学博士<br/>中国人民大学教授、博士生导师'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_09.jpg',
+          name: 'Andrea Leuenberger',
+          project: '师资-SHMS',
+          title: '项目主管',
+          desc:
+            '擅长于牧学领域的学习设计<br/>曾在纽约奢华酒店Swiss atel The Drake和莫斯科、中亚地区等多家奢华酒店担任运营总监和高管'
+        }
+      ]
+    }
+  },
+  methods: {
+    showMessage() {
+      this.$notify({ type: 'primary', message: '敬请期待' })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped src="@/assets/css/studyAbroad.scss"></style>

pages/studyAbroad/news/_id.vue

+<template>
+  <article-detail :tabs="tabs" @back="$router.push('/studyAbroad/news')"></article-detail>
+</template>
+<script>
+import ArticleDetail from '@/components/ArticleDetail'
+import navList from '@/assets/studyAbroadNavList.js'
+
+export default {
+  components: { ArticleDetail },
+  data() {
+    return {
+      tabs: navList
+    }
+  }
+}
+</script>

pages/studyAbroad/news/index.vue

+<template>
+  <app-frame :tabs="tabs">
+    <img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
+    <template #article>
+      <article-list v-bind="listOptions"></article-list>
+    </template>
+  </app-frame>
+</template>
+
+<script>
+import AppFrame from '@/components/AppFrame'
+import navList from '@/assets/studyAbroadNavList.js'
+import ArticleList from '@/components/ArticleList'
+import { getArticleList } from '@/api'
+
+export default {
+  components: { AppFrame, ArticleList },
+  data() {
+    return {
+      tabs: navList
+    }
+  },
+  computed: {
+    listOptions() {
+      return {
+        remote: {
+          httpRequest: getArticleList,
+          params: {
+            project_ids: ['25634964940156928', '25634688011239424', '6886139536666001408'],
+            type_tag: 'article_news_hot'
+          }
+        },
+        to(item) {
+          return { name: 'studyAbroad-news-id', params: { id: item.id } }
+        }
+      }
+    }
+  }
+}
+</script>

pages/studyAbroad/qa.vue

+<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>