feat: 适配移动端

cc7f9a10 · 王鹏飞 · 67da7d45 · cc7f9a10 · cc7f9a10 · cc7f9a10
--- a/.DS_Store
+++ b/.DS_Store
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
+{
+  "i18n-ally.localesPaths": ["langs"],
+  "i18n-ally.enabledParsers": ["js", "json"]
+}
--- a/api/index.js
+++ b/api/index.js
@@ -31,10 +31,17 @@ export function postNes(data) {
  return httpRequest.post('/api/enrollment/v1.0/applications', data)
 }
+/**
+ * 提交留咨信息
+ */
+export function submit(data) {
+  return httpRequest.post('/api/enrollment/v1.0/applications', data)
+}
 /**
 * 获取文章列表
 */
- export function getArticleList(params) {
+export function getArticleList(params) {
  return httpRequest.get('/api/cms/api/v1/articles', { params })
 }

--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -35,102 +35,11 @@ table {
 img {
  vertical-align: middle;
 }
-/* 独立 特殊修改 */
-/* 进度条 原始背景色 加深 */
-.el-progress-bar__outer {
-  background-color: #e5e5e5 !important;
-}
-.el-progress-bar__innerText {
-  color: #313131;
-}
-.el-progress-bar {
-  margin-right: -65px;
-  padding-right: 65px;
-}
-.el-progress__text {
-  margin-left: 6px;
-}
-/* 学分 页面 - 进度条样式 */
-.el-progress-bar__outer {
-  border-radius: 0;
-}
-.el-progress-bar__inner {
-  border-radius: 0;
-}
-/* 富文本 */
-.course-assess .detail .b1 {
-  display: block;
-  max-width: 5rem;
-  margin: 0.2rem auto;
-  width: 100%;
-  height: auto;
-}
-.course-assess .detail .h1 {
-  font-size: 0.16rem;
-  font-weight: 700;
-  color: #313131;
-  line-height: 0.38rem;
-}
-.course-assess .detail .h2 {
-  font-size: 0.14rem;
-  font-weight: 700;
-  color: #313131;
-  line-height: 0.3rem;
-}
-.course-assess .detail .p {
-  font-size: 0.14rem;
-  color: #313131;
-  line-height: 1.5;
-  text-align: justify;
-}
-.course-assess .detail .em {
-  font-size: 0.12rem;
-  color: #b49441;
-  line-height: 1.5;
-  text-align: justify;
-}
-/* 富文本 */
-.discuss-scroll .item-list .text p {
-  margin: 0;
-  padding: 0;
-}
-/* 富文本 */
-.discuss-detail-scroll .ques .text p {
-  margin: 0;
-  padding: 0;
-}
-.discuss-detail-scroll .ask .text p {
-  margin: 0;
-  padding: 0;
-}
-/* 公共标题 - 样式 */
-.con-title {
-  padding: 0 30px;
-  font-size: 16px;
-  line-height: 45px;
-  border-bottom: 1px solid #c9c9c9;
-}
-/* 公共盒子 - 样式 */
-.con-box {
-  margin: 0.3rem;
-  padding: 0.3rem 0.3rem 0.15rem 0.3rem;
-  background: #ffffff;
-  overflow: hidden;
-  position: relative;
-}
 /* Extra small devices (portrait phones, less than 576px) */
 @media (max-width: 575px) {
  html {
    font-size: 80px;
  }
-  .con-box {
-    margin: 0.2rem 0;
-    padding: 0.2rem;
-  }
 }
 /* Small devices (landscape phones, 576px and up) */
@@ -138,14 +47,6 @@ img {
  html {
    font-size: 80px;
  }
-  .step3 {
-    width: 80%;
-  }
-  .con-box {
-    margin: 0.2rem 0;
-    padding: 0.2rem;
-  }
 }
 /* Medium devices (tablets, 768px and up) */
@@ -171,3 +72,8 @@ img {
 a {
  color: currentColor;
 }
+.app-main {
+  max-width: 1200px;
+  margin: 0 auto;
+}
--- a/components/ALink.vue
+++ b/components/ALink.vue
-<template>
-  <div class="app-link">
-    <!-- 外部链接跳转 -->
-    <a :href="href" :target="target" v-if="href"><slot /></a>
-    <!-- 站内跳转 -->
-    <nuxt-link :to="path" v-else-if="path"><slot /></nuxt-link>
-    <!-- 事件 -->
-    <div v-else-if="data.onClick" @click="data.onClick"><slot /></div>
-    <template v-else><slot /></template>
-  </div>
-</template>
-<script>
-export default {
-  name: 'Link',
-  props: {
-    data: { type: Object, default: () => ({}) },
-    to: [String, Object, Function],
-    target: { type: String, default: '_blnak' }
-  },
-  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>
--- a/components/ArticleDetail.vue
+++ b/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>
+      <recommend />
+    </template>
+  </app-frame>
+</template>
+<script>
+import appFrame from '@/components/appFrame'
+import recommend from '@/components/recommend'
+export default {
+  components: { appFrame, recommend },
+  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
+    })
+  },
+  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>
--- a/components/ArticleList.vue
+++ b/components/ArticleList.vue
@@ -93,8 +93,17 @@ export default {
 </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>
--- a/components/ArticleListItem.vue
+++ b/components/ArticleListItem.vue
 <template>
  <div class="article-item">
    <app-link :data="data" v-bind="$attrs">
-      <div :class="$route.path == '/alumni/sharing' ? 'article-item-inner set-list' : 'article-item-inner'">
+      <div class="article-item-inner">
-        <img :src="data.web_img_uri" class="article-item-pic" />
+        <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>
@@ -14,7 +14,7 @@
 </template>
 <script>
-import AppLink from '@/components/ALink'
+import AppLink from '@/components/Link'
 export default {
  name: 'ArticleItem',
  components: { AppLink },
@@ -30,74 +30,68 @@ export default {
 </script>
 <style lang="scss">
-.article-item {
+.is-pc {
-  border-bottom: 1px solid #e6e6e6;
+  .article-item {
-  padding: 36px 0;
+    border-bottom: 1px solid #e6e6e6;
-  margin: 0 50px;
+    padding: 36px 0;
-  cursor: pointer;
+    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-inner {
-.app-link{
+    display: flex;
-  ::v-deep{
+    &.set-list {
-    a{
+      .article-item-pic {
-      height: fit-content;
+        width: 335px;
+        object-fit: cover;
+        height: 130px;
+      }
+      .article-item-content__text {
+        -webkit-line-clamp: 2;
+      }
    }
  }
-}
+  .article-item-pic {
-.article-item-pic {
+    width: 320px;
-  width: 320px;
+    height: 100%;
-  height: 100%;
+    // height: fit-content;
-  // height: fit-content;
+    // height: 210px;
-  // height: 210px;
+    // object-fit: cover;
-  // object-fit: cover;
+  }
-}
+  .article-item-content {
-.article-item-content {
+    flex: 1;
-  flex: 1;
+    overflow: hidden;
-  overflow: hidden;
+    margin-left: 30px;
-  margin-left: 30px;
+  }
-}
+  .article-item-content__date {
-.article-item-content__date {
+    font-size: 16px;
-  font-size: 16px;
+    font-weight: 300;
-  font-weight: 300;
+    line-height: 100%;
-  line-height: 100%;
+    color: #aa1941;
-  color: #aa1941;
+    // padding-top: 13px;
-  // padding-top: 13px;
+  }
-}
+  .article-item-content__title {
-.article-item-content__title {
+    font-size: 22px;
-  font-size: 22px;
+    font-weight: bold;
-  font-weight: bold;
+    line-height: 32px;
-  line-height: 32px;
+    color: #141414;
-  color: #141414;
+    margin-top: 10px;
-  margin-top: 10px;
+    overflow: hidden;
-  overflow: hidden;
+    text-overflow: ellipsis;
-  text-overflow: ellipsis;
+    display: -webkit-box;
-  display: -webkit-box;
+    -webkit-line-clamp: 1;
-  -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
-  -webkit-box-orient: vertical;
+  }
-}
+  .article-item-content__text {
-.article-item-content__text {
+    font-size: 14px;
-  font-size: 14px;
+    font-weight: 300;
-  font-weight: 300;
+    line-height: 24px;
-  line-height: 24px;
+    color: #666666;
-  color: #666666;
+    margin-top: 15px;
-  margin-top: 15px;
+    overflow: hidden;
-  overflow: hidden;
+    text-overflow: ellipsis;
-  text-overflow: ellipsis;
+    display: -webkit-box;
-  display: -webkit-box;
+    -webkit-line-clamp: 4;
-  -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
-  -webkit-box-orient: vertical;
+  }
 }
 .is-h5 {
  .article-list-inner {

--- a/components/Card.vue
+++ b/components/Card.vue
+<template>
+  <div class="card">
+    <div class="card-hd">
+      <div class="card-hd__title">{{ title }}</div>
+      <div class="card-hd__aside"><slot name="header-aside"></slot></div>
+    </div>
+    <div class="card-bd"><slot /></div>
+  </div>
+</template>
+<script>
+export default {
+  props: { title: String },
+  computed: {
+    isMobile() {
+      return this.$store.state.isMobile
+    }
+  }
+}
+</script>
+<style lang="scss">
+.is-pc {
+  .card {
+    // margin: 0.2rem 0.15rem;
+  }
+  .card-hd {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // margin-bottom: 0.15rem;
+  }
+  .card-hd__title {
+    flex: 1;
+    border-left: 7px solid #aa1941;
+    padding-left: 20px;
+    font-size: 32px;
+    font-weight: bold;
+    line-height: 1;
+  }
+  .card-hd__aside {
+    font-size: 16px;
+    color: #9b9b9b;
+    cursor: pointer;
+  }
+  .card-bd {
+  }
+}
+.is-h5 {
+  .card {
+    margin: 0.2rem 0.15rem;
+  }
+  .card-hd {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.15rem;
+  }
+  .card-hd__title {
+    flex: 1;
+    border-left: 0.03rem solid #aa1941;
+    padding-left: 0.05rem;
+    font-size: 0.17rem;
+    font-weight: bold;
+    line-height: 1;
+  }
+  .card-hd__aside {
+    font-size: 0.1rem;
+    color: #9b9b9b;
+  }
+  .card-bd {
+  }
+}
+</style>
--- a/components/Foot.vue
+++ b/components/Foot.vue
-<template>
-  <div class="foot-mian">
-    <div class="foot-box">
-      <div class="foot-content">
-        <div class="left-content">
-          <div>
-            <a href="http://jsj.moe.gov.cn" target="_blank">
-              中国教育部
-            </a>
-          </div>
-          <div>
-            <a href="http://jsj.moe.gov.cn" target="_blank">
-              教育涉外监管信息网
-            </a>
-          </div>
-          <div>
-            <a href="http://www.marywood.edu/business/graduate/zijing-marywood-mba.html" target="_blank">
-              玛丽伍德大学
-            </a>
-          </div>
-          <div>
-            <a href="https://www.msche.org/institution/0531/" target="_blank">
-              美国教育部
-            </a>
-          </div>
-          <div>
-            <a href="http://www.ezijing.com" target="_blank">
-              紫荆教育
-            </a>
-          </div>
-          <!-- <div>
-            合作大学官网
-          </div> -->
-        </div>
-        <div class="center-content">
-          <div class="address">地&nbsp;&nbsp;&nbsp;&nbsp;址：北京市海淀区中关村东路1号院清华科技园7号楼5层</div>
-          <div class="phone">联系电话：010-62793299</div>
-          <div class="mail">邮&nbsp;&nbsp;&nbsp;&nbsp;箱：marywood@ezijing.com</div>
-        </div>
-        <div class="right-content">
-          <img src="https://webapp-pub.ezijing.com/project/mba/footer_qrcode.jpg" class="code" />
-          <div class="tips-txt">
-            <img src="https://zws-imgs-pub.ezijing.com/static/public/184235d9f6edbb39d52fc6f77339ff5b.png" />
-            <div class="txt">微信公众号</div>
-          </div>
-        </div>
-      </div>
-      <!-- <div class="links">
-        友情链接：中国人民银行  中国涉外监管网  中国银行协会   中国证券投资基金业协会
-      </div> -->
-    </div>
-    <div class="copyright" style="height: 40px;line-height: 40px;color: rgba(153, 153, 153, 1);background: #fff;">
-      <div class="inner" style="width: 100%;justify-content: center;display: flex;">
-        <p style="font-size: 12px;">
-          Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司
-        </p>
-        <a
-          target="_blank"
-          href="https://tsm.miit.gov.cn/dxxzsp/"
-          style="color: rgba(153, 153, 153, 1);text-decoration:none;margin-left: 10px;"
-        >
-          <p style="font-size: 12px;">京ICP证150431号</p>
-        </a>
-        <a
-          target="_blank"
-          class="record"
-          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681"
-          style="color: rgba(153, 153, 153, 1);text-decoration:none;align-items: center;display: flex;margin-right: 5px;"
-        >
-          <img
-            src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png"
-            style="width: 20px;height: 20px;margin: 0 6px;display: block;"
-          />
-          <p style="font-size: 12px;">安备 11010802023681号</p>
-        </a>
-        <a
-          target="_blank"
-          href="https://beian.miit.gov.cn/#/Integrated/index"
-          style="color: rgba(153, 153, 153, 1);text-decoration:none;"
-        >
-          <p style="font-size: 12px;">京ICP备15016866号-1</p>
-        </a>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {}
-</script>
-<style lang="scss" scoped>
-.foot-mian {
-  min-width: 1200px;
-  width: 100%;
-  background: rgba(170, 25, 65, 1);
-  .links {
-    padding-top: 12px;
-    font-size: 14px;
-    font-weight: 300;
-    line-height: 24px;
-    color: #ffffff;
-    opacity: 0.6;
-    width: 1200px;
-    margin: 0 auto;
-  }
-  .foot-box {
-    padding: 80px 0 35px;
-    width: 1200px;
-    margin: 0 auto;
-  }
-  .foot-content {
-    // height: 300px;
-    display: flex;
-    .left-content {
-      div {
-        opacity: 0.7;
-        font-size: 18px;
-        font-weight: 300;
-        line-height: 50px;
-        color: #ffffff;
-        text-decoration: underline;
-        letter-spacing: 3px;
-      }
-    }
-    .center-content {
-      font-size: 18px;
-      line-height: 32px;
-      color: #ffffff;
-      letter-spacing: 3px;
-      opacity: 0.7;
-      margin-left: 88px;
-    }
-    .right-content {
-      margin-left: auto;
-      padding-top: 20px;
-      .code {
-        width: 120px;
-        display: block;
-      }
-      .tips-txt {
-        padding-top: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        img {
-          width: 21px;
-          display: block;
-        }
-        .txt {
-          font-size: 14px;
-          color: #ffffff;
-          margin-left: 7px;
-        }
-      }
-    }
-  }
-}
-</style>
--- a/components/Head.vue
+++ b/components/Head.vue
-<template>
-  <div class="head-mian">
-    <div class="color-bar"></div>
-    <div class="head-top-content">
-      <div class="max-width-content">
-        <div class="logo-box">
-          <img
-            @click="goWebsite"
-            src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/ezijing-logo.svg"
-          />
-          <div class="line"></div>
-          <app-link :item="{ path: '/' }">
-            <div class="title">MBA</div>
-          </app-link>
-        </div>
-        <div class="user" v-if="user.id">
-          <span>{{ user.realname || user.nickname }}</span
-          ><em>|</em><span class="logout" @click="logout">退出</span>
-        </div>
-        <div class="login-btn-box" v-else>
-          <div class="login"><a :href="loginURL">快速登录</a></div>
-          <div class="register"><a :href="registerURL">注册</a></div>
-        </div>
-      </div>
-    </div>
-    <div class="head-nav-content max-width-content">
-      <app-menu></app-menu>
-      <div class="search-box"></div>
-    </div>
-  </div>
-</template>
-<script>
-import AppLink from '@/components/Link'
-import AppMenu from '@/components/Menu'
-export default {
-  components: {
-    AppMenu,
-    AppLink
-  },
-  data() {
-    return {}
-  },
-  methods: {
-    goWebsite() {
-      window.location.href = '/'
-    },
-    logout() {
-      this.$store.dispatch('logout').then(() => {
-        this.$router.replace('/')
-      })
-    }
-  },
-  computed: {
-    user() {
-      return this.$store.state.user || {}
-    },
-    loginURL() {
-      return `${process.env.loginURL}/login/index?redirect_uri=${encodeURIComponent(
-        location.origin + this.$route.fullPath
-      )}`
-    },
-    registerURL() {
-      return `${process.env.loginURL}/register?redirect_uri=${encodeURIComponent(
-        location.origin + this.$route.fullPath
-      )}`
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-ul,
-li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.head-mian {
-  width: 100%;
-  min-width: 1200px;
-  background: #fff;
-  .color-bar {
-    height: 10px;
-    background: #aa1941;
-  }
-  .head-top-content {
-    // min-width: 1200px;
-    // margin: 0 auto;
-    border: 1px solid #ebebeb;
-    padding: 23px 0 22px;
-    .max-width-content {
-      display: flex;
-      align-items: center;
-      .logo-box {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        img {
-          height: 55px;
-          cursor: pointer;
-          display: block;
-          &:nth-child(2) {
-            margin-left: 20px;
-          }
-        }
-        .line {
-          border-right: 1px solid #aa1941;
-          height: 26px;
-          width: 0;
-          margin-left: 20px;
-        }
-        .title {
-          font-size: 30px;
-          font-weight: 500;
-          color: #aa1941;
-          padding-left: 20px;
-          box-sizing: border-box;
-          white-space: nowrap;
-          word-wrap: normal;
-          word-break: keep-all;
-        }
-      }
-      .user {
-        margin-left: auto;
-        font-size: 18px;
-        em {
-          font-size: 16px;
-          font-style: normal;
-          padding: 0 14px;
-        }
-        .logout {
-          cursor: pointer;
-        }
-      }
-      .login-btn-box {
-        margin-left: auto;
-        display: flex;
-        div {
-          width: 72px;
-          height: 24px;
-          box-sizing: border-box;
-          text-align: center;
-          line-height: 24px;
-          font-size: 12px;
-          border-radius: 6px;
-          margin-left: 10px;
-          cursor: pointer;
-        }
-        .login {
-          background: #aa1941;
-          color: #fff;
-        }
-        .register {
-          color: #333333;
-          border: 1px solid #eaeaea;
-        }
-      }
-    }
-  }
-  .max-width-content {
-    width: 1200px;
-    margin: 0 auto;
-  }
-  .head-nav-content {
-    height: 72px;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
--- a/components/Link.vue
+++ b/components/Link.vue
 <template>
-  <div class="link-content">
+  <span class="app-link">
-    <template v-if="item.news">
+    <!-- 外部链接跳转 -->
-      <a
+    <a :href="href" :target="target" v-if="href"><slot /></a>
-        :target="item.news.data.uri !== '' ? '_blank' : '_self'"
+    <!-- 站内跳转 -->
-        :href="item.news.data.uri !== '' ? item.news.data.uri : `${item.news.path}/${item.news.data.id}`">
+    <nuxt-link :to="path" v-else-if="path"><slot /></nuxt-link>
-        <slot />
+    <!-- 事件 -->
-      </a>
+    <div v-else-if="data.onClick" @click="data.onClick"><slot /></div>
-    </template>
+    <template v-else><slot /></template>
-    <template v-else>
+  </span>
-      <nuxt-link
-        :to="item.path">
-        <slot />
-      </nuxt-link>
-    </template>
-  </div>
 </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>
-<style lang="scss" scoped>
-.link-content{
-  height: 100%;
-}
-</style>
--- a/components/Menu.vue
+++ b/components/Menu.vue
-<template>
-  <ul class="nav-item-box" @mouseleave="navLeave">
-    <template v-for="(item, index) in navData">
-      <li :key="index">
-        <div :class="getNameActive(item)">
-          <template v-if="!item.path">
-            <template v-if="item.onClick">
-              <span @click="item.onClick">{{ item.name }}</span>
-            </template>
-            <template v-else>
-              {{ item.name }}
-            </template>
-          </template>
-          <template v-else>
-            <nuxt-link :to="item.path">{{ item.name }}</nuxt-link>
-          </template>
-        </div>
-        <div class="child-item" v-if="item.childern">
-          <div class="one-level">
-            <template v-for="(level2Item, level2Index) in item.childern">
-              <div
-                :class="$route.path === level2Item.path || level2Item.isShow ? 'li active' : 'li'"
-                :key="level2Index + 'level2'"
-                @mouseenter="levelShow(level2Item)"
-                @mouseleave="levelShow(level2Item, 'out')"
-              >
-                <app-link
-                  :item="{
-                    path: level2Item.path
-                  }"
-                >
-                  <div class="name">
-                    {{ level2Item.name }}
-                  </div>
-                  <div class="el-icon-arrow-right" v-if="level2Item.childern"></div>
-                </app-link>
-              </div>
-            </template>
-          </div>
-        </div>
-      </li>
-    </template>
-  </ul>
-</template>
-<script>
-import AppLink from '@/components/Link'
-export default {
-  name: 'AppMenu',
-  components: { AppLink },
-  data() {
-    const _this = this
-    return {
-      navData: [
-        {
-          name: '关于紫荆',
-          path: '/about/introduce',
-          childern: [
-            { name: '紫荆简介', path: '/about/introduce' },
-            { name: '文化理念', path: '/about/culture' },
-            // { name: '新闻中心', path: '/about/news' },
-            { name: '校长寄语', path: '/about/message' },
-            { name: '公开课', path: '/about/lesson' },
-            { name: '联系我们', path: '/about/contact' }
-          ]
-        },
-        {
-          name: 'MBA',
-          path: '/mba/intro',
-          childern: [
-            { name: 'MBA', path: '/mba/intro' },
-            { name: 'MBA师资', path: '/mba/teacher' },
-            { name: 'MBA课程', path: '/mba/course' }
-          ]
-        },
-        {
-          name: '在职研究生',
-          path: '/master/intro',
-          childern: [
-            { name: '在职研究生', path: '/master/intro' },
-            { name: '在职研师资', path: '/master/teacher' },
-            { name: '在职研课程', path: '/master/course' }
-          ]
-        },
-        // {
-        //   name: '课程与师资',
-        //   path: '/about/course',
-        //   childern: [
-        //     { name: '课程设置', path: '/about/course' },
-        //     { name: '师资力量', path: '/about/teacher' }
-        //   ]
-        // },
-        {
-          name: '申请攻略',
-          path: '/apply/mba',
-          childern: [
-            { name: 'MBA申请攻略', path: '/apply/mba' },
-            { name: '在职研申请攻略', path: '/apply/master' }
-          ]
-        },
-        {
-          name: '校友专享',
-          path: '/alumni/sharing',
-          childern: [
-            { name: '校友故事', path: '/alumni/sharing' },
-            { name: '校友福利', path: '/alumni/outstanding' }
-          ]
-        },
-        {
-          name: '最新动态',
-          path: '/news/hot',
-          childern: [
-            { name: '热点新闻', path: '/news/hot' },
-            { name: '教授采访', path: '/news/interview' }
-          ]
-        }
-        // {
-        //   name: '招生信息',
-        //   path: '/apply/relevant',
-        //   childern: [
-        //     { name: '有关申请', path: '/apply/relevant' },
-        //     { name: '费用资助', path: '/apply/support' },
-        //     { name: '常见问题', path: '/apply/problem' }
-        //   ]
-        // },
-        // {
-        //   name: '校友风采',
-        //   path: '/alumni/outstanding',
-        //   childern: [
-        //     { name: '杰出校友', path: '/alumni/outstanding' },
-        //     { name: '校友分享', path: '/alumni/sharing' }
-        //   ]
-        // },
-        // {
-        //   name: '报名申请',
-        //   onClick() {
-        //     !_this.user.id
-        //       ? window.open('https://login.ezijing.com/auth/login/index?redirect_uri=https://marywood-bm.ezijing.com/my/account')
-        //       : window.open('https://marywood-bm.ezijing.com/my/account')
-        //   }
-        //   // path: ''
-        // }
-      ],
-      time: null
-    }
-  },
-  methods: {
-    navLeave() {
-      this.navData.map(item => {
-        if (item.childern) {
-          item.childern.map(cItem => {
-            cItem.isShow = false
-          })
-        }
-      })
-      this.$forceUpdate()
-    },
-    levelShow(item, isOut) {
-      if (item.childern) {
-        if (isOut) {
-          clearTimeout(this.time)
-          this.time = setTimeout(() => {
-            item.isShow = false
-          }, 500)
-          return
-        }
-        this.navLeave()
-        item.isShow = true
-      } else {
-        this.navLeave()
-      }
-    }
-  },
-  computed: {
-    user() {
-      return this.$store.state.user || {}
-    },
-    getNameActive() {
-      return item => {
-        const currentPath = this.$route.path
-        if (currentPath.includes(item.path)) {
-          return 'name active'
-        } else {
-          let className = 'name'
-          if (item.childern) {
-            item.childern.map(cData => {
-              currentPath.includes(cData.path) && (className = 'name active')
-            })
-          }
-          return className
-        }
-      }
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.nav-item-box {
-  padding-left: 11px;
-  display: flex;
-  li {
-    position: relative;
-    margin-right: 60px;
-    .name {
-      line-height: 72px;
-      font-size: 22px;
-      color: #333333;
-      cursor: pointer;
-      a {
-        color: #333333;
-        font-size: 22px;
-        text-decoration: none;
-      }
-      &.active {
-        font-weight: 500;
-        color: #aa1941;
-        a {
-          // font-weight: 500;
-          color: #aa1941;
-        }
-      }
-    }
-    &:hover {
-      .name {
-        color: #aa1941;
-        font-weight: 500;
-        a {
-          // font-weight: 500;
-          color: #aa1941;
-        }
-      }
-      .child-item {
-        .one-level {
-          display: block;
-        }
-      }
-    }
-    .child-item {
-      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-      position: absolute;
-      top: 72px;
-      left: -10px;
-      display: flex;
-      background: #fff;
-      z-index: 999;
-      .one-level {
-        padding: 36px 24px 0;
-        border-top: 4px solid rgba(170, 25, 65, 1);
-        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-        display: none;
-        .li {
-          margin-bottom: 36px;
-          display: flex;
-          justify-content: space-between;
-          &.active {
-            .name {
-              color: rgba(170, 25, 65, 1);
-            }
-          }
-          .name {
-            font-weight: 400;
-            line-height: 100%;
-            color: #333333;
-            font-size: 16px;
-            white-space: nowrap;
-            a {
-              color: #333333;
-              font-size: 16px;
-            }
-          }
-          .el-icon-arrow-right {
-            color: rgba(51, 51, 51, 1);
-            margin-left: 15px;
-          }
-          &:hover {
-            .name {
-              color: rgba(170, 25, 65, 1);
-              a {
-                color: rgba(170, 25, 65, 1);
-              }
-            }
-            .el-icon-arrow-right {
-              color: rgba(170, 25, 65, 1);
-            }
-          }
-        }
-      }
-      .two-level {
-        pointer-events: auto;
-        padding: 34px 41px 0 24px;
-        .name {
-          font-size: 16px;
-          font-weight: 400;
-          line-height: 20px;
-          color: #333333;
-          margin-bottom: 36px;
-          white-space: nowrap;
-          &:hover {
-            color: rgba(170, 25, 65, 1);
-          }
-          a {
-            font-size: 16px;
-            font-weight: 400;
-            line-height: 20px;
-            color: #333333;
-            margin-bottom: 36px;
-            white-space: nowrap;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
--- a/components/about/contact.vue
+++ b/components/about/contact.vue
-<template>
-  <div class="contact-content-box">
-    <div id="allmap"></div>
-    <!-- <img src="https://zws-imgs-pub.ezijing.com/static/public/ae02f022dd9ab2ffec155b98a9c5f809.png" alt=""> -->
-    <div class="con-mian">
-      <div class="tit">{{ txt.lxTit }}</div>
-      <div class="info" v-html="txt.contactTxt"></div>
-      <div>
-        <img src="https://webapp-pub.ezijing.com/project/mba/qrcode.jpg" style="width:150px;margin-top:20px" />
-        <div class="name" style="width:150px;text-align:center;padding-top:10px;">扫码加微直接沟通</div>
-      </div>
-      <!-- <div class="follow">
-        <div class="tits">{{ txt.follow }}</div>
-        <ul>
-          <li>
-            <img src="https://zws-imgs-pub.ezijing.com/static/public/5c4a58f1d41f786e7713a5a84069404d.png" alt="" />
-            <div class="name">{{ txt.followCodeT1 }}</div>
-          </li>
-          <li>
-            <img src="https://webapp-pub.ezijing.com/project/marywood/wb-code.png" alt="" />
-            <div class="name">{{ txt.followCodeT2 }}</div>
-          </li>
-          <li>
-            <img src="https://webapp-pub.ezijing.com/project/marywood/douyin-code.png" alt="" />
-            <div class="name" style="margin-top:50px">{{ txt.followCodeT3 }}</div>
-          </li>
-          <li>
-            <img src="https://webapp-pub.ezijing.com/project/marywood/xiaoet-code.png" alt="" />
-            <div class="name">{{ txt.followCodeT4 }}</div>
-          </li>
-        </ul>
-      </div> -->
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      txt: {
-        lxTit: '联系我们',
-        contactTxt: `地&nbsp;&nbsp;址：北京市海淀区中关村东路1号院清华科技园7号楼5层`,
-        follow: '关注我们',
-        followCodeT1: '紫荆企业微信',
-        followCodeT2: '紫荆官方微博',
-        followCodeT3: '紫荆官方抖音',
-        followCodeT4: '微信视频号'
-      }
-    }
-  },
-  mounted() {
-    if (process.browser) {
-      !(function(mapInit) {
-        var script = document.createElement('script')
-        script.type = 'text/javascript'
-        script.src = 'https://api.map.baidu.com/api?v=2.0&ak=Z9Km7UTGFI2fwRrpGp7Mji4ySDsvn30d&callback=mapinit'
-        window['mapinit'] = function() {
-          mapInit()
-        }
-        document.head.appendChild(script)
-      })(function() {
-        // 这里使用BMap
-        var map = new BMap.Map('allmap')
-        map.centerAndZoom(new BMap.Point(116.336323, 39.998848), 20)
-        map.enableScrollWheelZoom(true)
-        // 创建点标记
-        var marker1 = new BMap.Marker(new BMap.Point(116.336323, 39.998848))
-        map.addOverlay(marker1)
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-#allmap {
-  // position: relative;
-  // z-index: 1;
-  width: 1000px;
-  height: 320px;
-}
-.contact-content-box {
-  position: relative;
-  z-index: -1;
-  width: 1000px;
-  padding-bottom: 100px;
-  img {
-    width: 100%;
-    display: block;
-  }
-  .con-mian {
-    background: #fff;
-    padding: 60px 75px 62px;
-    .tit {
-      font-size: 22px;
-      font-weight: 500;
-      line-height: 100%;
-    }
-    .info {
-      font-size: 16px;
-      line-height: 32px;
-      color: #333333;
-      margin-top: 20px;
-    }
-    .follow {
-      padding-top: 97px;
-      .tits {
-        font-size: 22px;
-        font-weight: 500;
-        line-height: 100%;
-        color: #333333;
-        margin-bottom: 30px;
-      }
-      ul {
-        display: flex;
-        li {
-          width: 130px;
-          margin-right: 80px;
-          img {
-            display: block;
-            width: 100%;
-          }
-          .name {
-            font-size: 16px;
-            margin-top: 22px;
-            text-align: center;
-            color: #666666;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
--- a/components/about/culture.vue
+++ b/components/about/culture.vue
-<template>
-  <div class="culture-content-box">
-    <div class="video-box">
-      <video
-        src="https://webapp-pub.ezijing.com/www/pc/%E7%B4%AB%E8%8D%86%E5%AE%A3%E4%BC%A0%E7%89%8720201224.mp4"
-        width=""
-        height=""
-        controls="controls"
-        preload="none"
-      ></video>
-    </div>
-    <div class="honor-content">
-      <div class="tit">{{ txt.title }}</div>
-      <ul>
-        <li>
-          <div class="tits">{{ txt.item1H1 }}</div>
-          <div class="h2">{{ txt.item1H2 }}</div>
-          <div class="txts">
-            <div class="p" v-html="txt.item1Txt"></div>
-          </div>
-        </li>
-        <li>
-          <div class="tits">{{ txt.item2H1 }}</div>
-          <div class="h2">{{ txt.item2H2 }}</div>
-          <div class="txts">
-            <div class="p" v-html="txt.item2Txt"></div>
-          </div>
-        </li>
-        <li>
-          <div class="tits">{{ txt.item3H1 }}</div>
-          <div class="h2">{{ txt.item3H2 }}</div>
-          <div class="txts">
-            <div class="p" v-html="txt.item3Txt"></div>
-          </div>
-        </li>
-        <li>
-          <div class="tits">{{ txt.item4H1 }}</div>
-          <div class="h2">{{ txt.item4H2 }}</div>
-          <div class="txts">
-            <div class="p" v-html="txt.item4Txt"></div>
-          </div>
-        </li>
-      </ul>
-      <!-- <ul>
-        <li>
-          <div class="flex">
-            <img src="https://zws-imgs-pub.ezijing.com/static/public/9f22659632f43c0b1bb93d6adf49bd4c.png" alt="" />
-            <div class="text">
-              2015年<br />
-              将五道口金融学院<br />
-              在线教育中心商业化<br />
-              成立清控紫荆教育
-            </div>
-          </div>
-          <div class="flex">
-            <img src="https://zws-imgs-pub.ezijing.com/static/public/48b2ab5dfc414d3f6c8500e8328f6b28.png" alt="" />
-            <div class="text">
-              2015年9月<br />
-              签约索菲亚大学推出<br />
-              在线MBA学位项目
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="flex">
-            <img src="https://zws-imgs-pub.ezijing.com/static/public/a37b13b8fa98ee448850bbb32a5fcd2f.png" alt="" />
-            <div class="text">
-              行业技术优秀服务商<br />
-              ——在线教育资讯网
-            </div>
-          </div>
-          <div class="flex">
-            <img src="https://zws-imgs-pub.ezijing.com/static/public/00cdb23e91efa803bb711058e251e962.png" alt="" />
-            <div class="text">
-              综合实力突出教育集团<br />
-              ——中国教育网
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="flex">
-            <img src="https://zws-imgs-pub.ezijing.com/static/public/5fdb3a042efcb0f8fb0eea8d4376eacc.png" alt="" />
-            <div class="text">
-              年度城市教育行业<br />
-              影响力机构<br />
-              ——巨量引擎
-            </div>
-          </div>
-        </li>
-      </ul> -->
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      txt: {
-        title: '文化理念',
-        item1H1: '使命',
-        item1H2: '让每个人都有改变的能力',
-        item1Txt: `优质教育是一个稀缺资源，优质的教育能够赋予学子优秀的能力。紫荆教育立志于此，整合国际优质教育资源，让每一个愿意奋斗与学习的学子，都能享受到优质教育资源，同时获得优秀的能力。<br />
-        让每个人都有改变的能力，作为紫荆教育的使命，立志于通过教育，赋予每一个学子获得改变的力量，通过改变，赢取未来竞争的主动。`,
-        item2H1: '愿景',
-        item2H2: '成为世界一流的终身教育机构',
-        item2Txt: `“世界一流的终身教育机构”是紫荆教育在未来5-10年的发展愿景，成为世界一流的终身教育机构，并以一流的教育资源。<br />
-        让每一个人都能享受到世界一流的教育成果，让每一个人在人生阶段的每个关键时刻都能获得应有的能力，让每一个人在紫荆教育都能享受到终身的学习与成长，并终身受益。`,
-        item3H1: '理念',
-        item3H2: '真⼼实意做教育',
-        item3Txt: `紫荆教育不断完善教学教务服务，严格要求每一个环节，真心实意对待每一个学生。紫荆教育不断增强课程研发、专业师资、技术平台、学术建设等核心能力，以满足院校的教学运营需求，真心实意对待每一所合作院校。<br />
-        紫荆教育不断加强企业、院校之间的联系，实现科学对接招聘要求，合理进行岗位匹配，最终促进人才资源的合理配置，真心实意对待合作企业。<br />
-        紫荆教育，是一家真正做教育，给学员、企业、学校提供真正价值的终身教育机构，最终实现学员、院校、企业三方的共同成长。`,
-        item4H1: '价值观',
-        item4H2: '诚信务实、开放创新、追求结果',
-        item4Txt: `紫荆教育坚持做人言行一致，做事诚实无欺，坚持诚信务实是立企之本、发展之基。<br />
-        同时，坚持客户需求导向，开放创新、勇于开拓、不断进取，永远保持对专业的追求和精进。<br />
-        以结果为导向，既是紫荆教育提供了衡量内聚力的尺度，也是对紫荆学员教育服务的责任要求。`
-      }
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.culture-content-box {
-  width: 1000px;
-  padding-bottom: 100px;
-  img {
-    width: 100%;
-    display: block;
-  }
-  .video-box {
-    width: 1000px;
-    height: 552px;
-    background: #aa1941;
-    padding: 25px 50px;
-    box-sizing: border-box;
-    video {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  .honor-content {
-    padding: 50px 90px 20px;
-    background: #fff;
-    .tit {
-      font-size: 22px;
-      font-weight: 500;
-      line-height: 100%;
-      color: #424242;
-      margin-bottom: 30px;
-    }
-    ul{
-      display: flex;
-      flex-wrap: wrap;
-      li{
-        margin-right: 70px;
-        width: 370px;
-        min-height: 430px;
-        margin-top: 30px;
-        &:nth-child(even){
-          margin-right: 0;
-        }
-        .tits{
-          font-size: 22px;
-          font-weight: bold;
-          line-height: 100%;
-          color: #424242;
-          margin-bottom: 12px;
-        }
-        .h2{
-          height: 46px;
-          line-height: 100%;
-          border-bottom: 1px solid #98002E;
-          font-size: 20px;
-          line-height: 100%;
-          color: #424242;
-        }
-        .txts{
-          padding-top: 18px;
-          .p{
-            font-size: 16px;
-            line-height: 34px;
-            color: #424242;
-          }
-        }
-      }
-    }
-    // ul {
-    //   li {
-    //     display: flex;
-    //     justify-content: space-between;
-    //     margin-bottom: 80px;
-    //     .flex {
-    //       align-items: center;
-    //       display: flex;
-    //     }
-    //     img {
-    //       width: 211px;
-    //       display: block;
-    //     }
-    //     .text {
-    //       font-size: 16px;
-    //       font-weight: 300;
-    //       line-height: 32px;
-    //       color: #424242;
-    //       margin-left: 38px;
-    //     }
-    //   }
-    // }
-  }
-}
-</style>
\ No newline at end of file
--- a/components/about/introduce.vue
+++ b/components/about/introduce.vue
-<template>
-  <div class="intr-content-box">
-    <img src="https://webapp-pub.ezijing.com/www/pc/home/banner.png" alt="" />
-    <div class="text-content">
-      <div class="title">{{ txt.title }}</div>
-      <div class="text-intr" v-html="txt.text"></div>
-      <div class="garish-content">
-        <div class="flex-box">
-          <div class="li w184">
-            <div class="col-txt">
-              12<span>{{ txt.unit1 }}</span>
-            </div>
-            <div class="n-txt">{{ txt.itemText1 }}</div>
-          </div>
-          <div class="li w180">
-            <div class="col-txt">
-              522<span>{{ txt.unit2 }}</span>
-            </div>
-            <div class="n-txt">{{ txt.itemText2 }}</div>
-          </div>
-          <div class="li w249">
-            <div class="col-txt">600<span>+</span></div>
-            <div class="n-txt">{{ txt.itemText3 }}</div>
-          </div>
-          <div class="li w186">
-            <div class="col-txt">700<span>+</span></div>
-            <div class="n-txt">{{ txt.itemText4 }}</div>
-          </div>
-        </div>
-        <div class="flex-box mar-t-35">
-          <div class="li w188">
-            <div class="col-txt">1000<span>+</span></div>
-            <div class="n-txt">{{ txt.itemText5 }}</div>
-          </div>
-          <div class="li w180">
-            <div class="col-txt">4800<span>+</span></div>
-            <div class="n-txt">{{ txt.itemText6 }}</div>
-          </div>
-          <div class="li w249">
-            <div class="col-txt">6000<span>+</span></div>
-            <div class="n-txt">{{ txt.itemText7 }}</div>
-          </div>
-          <div class="li w186">
-            <div class="col-txt">
-              <span class="unit3Text">{{ txt.unit3Text }}</span
-              ><span>{{ txt.unit3 }}+</span>
-            </div>
-            <div class="n-txt">{{ txt.itemText8 }}</div>
-          </div>
-        </div>
-      </div>
-      <div class="tab-content">
-        <div class="tab-nav">
-          <div :class="indexActive === 0 ? 'li active' : 'li'" @click="changeIndex(0)">
-            <div class="t1">{{ txt.tabBtn1Tit }}</div>
-            <div class="t2" v-html="txt.tabBtn1Txt"></div>
-          </div>
-          <div :class="indexActive === 1 ? 'li active' : 'li'" @click="changeIndex(1)">
-            <div class="t1">{{ txt.tabBtn2Tit }}</div>
-            <div class="t2" v-html="txt.tabBtn2Txt"></div>
-          </div>
-          <div :class="indexActive === 2 ? 'li active' : 'li'" @click="changeIndex(2)">
-            <div class="t1">{{ txt.tabBtn3Tit }}</div>
-            <div class="t2" v-html="txt.tabBtn3Txt"></div>
-          </div>
-        </div>
-        <div class="tab-con" v-if="indexActive === 0" v-html="txt.tabCon1"></div>
-        <div class="tab-con tab-con2" v-if="indexActive === 1" v-html="txt.tabCon2"></div>
-        <div class="tab-con tab-con3" v-if="indexActive === 2" v-html="txt.tabCon3"></div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  components: {},
-  data() {
-    return {
-      indexActive: 0,
-      txt: {
-        title: '紫荆简介',
-        text:
-          '紫荆教育全称是清控紫荆（北京）教育科技股份有限公司，由清华控股有限公司于2015年以清华大学五道口金融学院相关知识产权创设而成。“紫荆”二字取自清华大学校花“紫荆花”，寓意“自强不息，向美而行”。<br />紫荆教育以教育为本、以科技赋能、以专业化为基础、以国际化为目标，通过研发和应用领先的教育科技，链接全球先进、前沿教育资源，提供高端国际学位教育、职业教育和在线教育解决方案，为我国培养具有国际化视野和全球化思维的复合型和产业型高质量人才。<br />紫荆教育与美国印第安纳大学、加州整合大学、康博斯维尔大学、玛丽伍德大学、索菲亚大学和瑞士高等教育集团等全球知名大学开展深度合作，推出在线MBA、金融学、组织领导力、应用心理学、儿童教育、服务业管理等硕士学位，培养了一大批具有国际先进管理和教育理念的杰出精英。<br />在产教融合方面，依托紫荆教育技术与产业资源优势，以国家教育政策为导向，以企业岗位人才需求为目标，协助院校应对行业变革、政策要求和办学新挑战，为院校提供产业化、国际化、数字化专业提升建设支持，优化人才培养方案，提升师资力量，共同开发精品课程资源，促进教学发展，整体提升专业建设水平，助力院校打造专业特色和优势。',
-        itemText1: '国际合作院校',
-        itemText2: '线上课程',
-        itemText3: '金融机构/协会/政府/学校',
-        itemText4: '国内外师资团队',
-        itemText5: '学术直播课',
-        itemText6: '总研发课时',
-        itemText7: '学位学员',
-        itemText8: '人次学习',
-        unit1: '所',
-        unit2: '门',
-        unit3Text: '500',
-        unit3: '万',
-        tabBtn1Tit: '专业化',
-        tabBtn2Tit: '科技化',
-        tabBtn3Tit: '国际化',
-        tabBtn1Txt: '长期思维&nbsp;&nbsp;严谨治学',
-        tabBtn2Txt: '源自清华&nbsp;&nbsp;持续投入',
-        tabBtn3Txt: '放眼全球&nbsp;&nbsp;国际合作',
-        tabCon1: `<span>9</span>年深耕教育产业，完善的教学管理体系和内控体系 ;  <br />
-        <span>12</span>所国际合作大学，<span>16</span>个国际学位项目，互认学分 ; <br />
-        <span>600+</span>金融机构政府、协会等合作单位 ;   <br />
-        <span>50+</span>课程研发人员，<span>700+</span>师资团队，<span>4800+</span>总研发课时。`,
-        tabCon2: `源自清华，持续投入<span>50+</span>技术研发团队，<span>1亿+</span>累计研发投入 ;<br />
-        <span>500万+</span>总学习人次，<span>24</span>小时在线 ;<br />
-        <span>1000+</span>次直播，<span>10000+</span>题库 ;<br />
-        大数据智能学习分析、作业评判、智能化营销数据分配。<br />`,
-        tabCon3: `<span>AACSB、EQUIS、MSCHE、ACE、HLC、WASC</span>等认证;<br />
-        <span>30</span>余位哈佛、清华、哥伦比亚等国际一流大学人才组成的国际化团队 ;<br />
-        <span>40%</span>员工有研究生学历 ;<br />
-        <span>5</span>大洲<span>16</span>个国家/地区国际校友网络，覆盖全国380+省、市、自治区及行政特区。`
-      }
-    }
-  },
-  methods: {
-    changeIndex(n) {
-      this.indexActive = n
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.intr-content-box {
-  width: 1000px;
-  padding-bottom: 100px;
-  img {
-    width: 100%;
-    display: block;
-  }
-  .text-content {
-    padding: 50px 64px 81px;
-    box-sizing: border-box;
-    background: #fff;
-    .title {
-      font-size: 22px;
-      font-weight: 500;
-      color: #424242;
-      margin-bottom: 15px;
-    }
-    .text-intr {
-      font-size: 16px;
-      line-height: 32px;
-      color: #424242;
-    }
-  }
-  .garish-content {
-    padding-top: 66px;
-    .flex-box {
-      display: flex;
-      width: 800px;
-      margin: 0 auto;
-      &.mar-t-35 {
-        padding-top: 35px;
-      }
-      .li {
-        box-sizing: border-box;
-        padding-top: 6px;
-        // height: 70px;
-        border-right: 1px solid #c3c3c3;
-        &:last-child {
-          border: none;
-        }
-        .col-txt {
-          font-size: 36px;
-          font-weight: 500;
-          line-height: 30px;
-          color: #aa1941;
-          text-align: center;
-          .unit3Text {
-            font-size: 36px;
-          }
-          span {
-            font-size: 24px;
-          }
-        }
-        .n-txt {
-          font-size: 16px;
-          font-family: auto;
-          // line-height: 34px;
-          text-align: center;
-          color: #666666;
-        }
-        &.w184 {
-          width: 184px;
-        }
-        &.w180 {
-          width: 180px;
-        }
-        &.w249 {
-          width: 249px;
-        }
-        &.w186 {
-          width: 186px;
-        }
-        &.w188 {
-          width: 188px;
-        }
-      }
-    }
-  }
-  .tab-content {
-    padding-top: 80px;
-    .tab-nav {
-      display: flex;
-      justify-content: space-between;
-      .li {
-        width: 280px;
-        height: 150px;
-        box-sizing: border-box;
-        padding-top: 38px;
-        background: #fbfbfb;
-        // margin-right: 16px;
-        cursor: pointer;
-        &.active {
-          background: #ffffff;
-          box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
-          position: relative;
-          &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 8px;
-            background: #aa1941;
-          }
-        }
-        .t1 {
-          text-align: center;
-          line-height: 100%;
-          font-size: 24px;
-          font-weight: 500;
-          color: #aa1941;
-        }
-        .t2 {
-          font-size: 20px;
-          line-height: 100%;
-          color: #424242;
-          margin-top: 16px;
-          text-align: center;
-          font-family: auto;
-        }
-      }
-    }
-    .tab-con {
-      width: 872px;
-      background: #ffffff;
-      box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
-      box-sizing: border-box;
-      padding: 20px 48px;
-      margin-top: 40px;
-      position: relative;
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 40px;
-      color: #333333;
-      ::v-deep {
-        span {
-          color: rgba(170, 25, 65, 1);
-          font-size: 28px;
-          font-weight: bold;
-        }
-      }
-      &.tab-con2 {
-        &::after {
-          top: -15px;
-          left: 50%;
-          transform: translateX(-50%);
-        }
-      }
-      &.tab-con3 {
-        &::after {
-          top: -15px;
-          left: auto;
-          right: 140px;
-        }
-      }
-      &::after {
-        content: '';
-        position: absolute;
-        top: -15px;
-        left: 140px;
-        width: 0;
-        height: 0;
-        border-left: 15px solid transparent;
-        border-right: 15px solid transparent;
-        border-bottom: 15px solid #fff;
-      }
-    }
-  }
-}
-</style>
--- a/components/about/newList.vue
+++ b/components/about/newList.vue
-<template>
-  <div class="news-content-box">
-    <img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
-    <ul class="list-content">
-      <template v-for="(item, index) in listData">
-        <li :key="index">
-          <app-link :item="{ news: { data: item, path: '/about/news' } }">
-            <img :src="item.web_img_uri" alt="" />
-            <div class="right-con">
-              <div class="time">{{ formatDate(item.start_time) }}</div>
-              <div class="title">{{ item.title }}</div>
-              <div class="text">{{ item.abstract }}</div>
-            </div>
-          </app-link>
-        </li>
-      </template>
-    </ul>
-    <div class="pages-box">
-      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="limit" :total="total">
-      </el-pagination>
-    </div>
-  </div>
-</template>
-<script>
-import appLink from '@/components/Link'
-export default {
-  props: {
-    type: {
-      type: String,
-      default: 'article_news'
-    }
-  },
-  components: { appLink },
-  data() {
-    return {
-      listData: [],
-      currentPaeg: 1,
-      total: 0,
-      limit: 10
-    }
-  },
-  async fetch() {
-    const params = {
-      project_id: process.env.newProjectId,
-      type_tag: this.type,
-      page: this.currentPaeg,
-      limit: 10
-    }
-    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
-      this.total = res.data.total
-      return res.data.data
-    })
-  },
-  methods: {
-    handleCurrentChange(num) {
-      this.initData(num)
-    },
-    initData(num) {
-      const params = {
-        project_id: process.env.newProjectId,
-        type_tag: this.$route.query.type || 'article_news',
-        page: num,
-        limit: 10
-      }
-      this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
-        this.total = parseInt(res.data.total)
-        this.listData = res.data.data
-      })
-    },
-    formatDate(value) {
-      const date = new Date(value * 1000)
-      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.news-content-box {
-  width: 1000px;
-  padding-bottom: 100px;
-  display: block;
-  .banner {
-    width: 100%;
-    display: block;
-  }
-  .list-content {
-    width: 1000px;
-    padding: 50px;
-    background: #fff;
-    li {
-      border-bottom: 1px solid #e6e6e6;
-      margin-bottom: 20px;
-      padding-bottom: 36px;
-      cursor: pointer;
-      ::v-deep a {
-        display: flex;
-        flex-wrap: wrap;
-        height: fit-content;
-      }
-      &:hover {
-        .right-con {
-          background: rgba(241, 241, 241, 0.6);
-          .text {
-            color: #141414;
-          }
-        }
-      }
-      img {
-        width: 320px;
-        height: 100%;
-        display: block;
-      }
-      .right-con {
-        width: 550px;
-        margin-left: 15px;
-        padding-left: 15px;
-        .time {
-          font-size: 16px;
-          font-weight: 300;
-          line-height: 100%;
-          color: #aa1941;
-          // padding-top: 13px;
-        }
-        .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: 2;
-          -webkit-box-orient: vertical;
-        }
-        .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: 2;
-          -webkit-box-orient: vertical;
-        }
-      }
-    }
-  }
-  .pages-box {
-    display: flex;
-    padding-bottom: 50px;
-    background: #fff;
-    justify-content: center;
-  }
-}
-</style>
--- a/components/about/tabNav.vue
+++ b/components/about/tabNav.vue
-<template>
-  <ul class="tab-content">
-    <li
-      v-for="(item, index) in dataNav"
-      :class="
-        item.pathActive.findIndex(path => {
-          return $route.path.includes(path)
-        }) !== -1 && 'active'
-      "
-      :key="index"
-      @click="goPage(item.goPath)"
-    >
-      {{ item.name }}
-    </li>
-  </ul>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      dataNav: [
-        {
-          name: '紫荆简介',
-          goPath: '/about/introduce',
-          pathActive: ['/about/introduce']
-        },
-        {
-          name: '文化理念',
-          goPath: '/about/culture',
-          pathActive: ['/about/culture']
-        },
-        // {
-        //   name: '新闻中心',
-        //   goPath: '/about/news',
-        //   pathActive: ['/about/news', '/about/news-detail']
-        // },
-        {
-          name: '校长寄语',
-          goPath: '/about/message',
-          pathActive: ['/about/message', '/about/message-detail']
-        },
-        {
-          name: '公开课',
-          goPath: '/about/lesson',
-          pathActive: ['/about/lesson', '/about/lesson-detail']
-        },
-        {
-          name: '联系我们',
-          goPath: '/about/contact',
-          pathActive: ['/about/contact']
-        }
-        // {
-        //   name: '招聘信息',
-        //   goPath: '',
-        //   pathActive: ['']
-        // }
-      ]
-    }
-  },
-  mounted() {},
-  methods: {
-    goPage(path) {
-      this.$router.push({
-        path: path
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.tab-content {
-  width: 160px;
-  // height: 420px;
-  height: fit-content;
-  background: #fff;
-  padding-top: 35px;
-  padding-bottom: 43px;
-  li {
-    position: relative;
-    width: 100%;
-    font-size: 22px;
-    line-height: 40px;
-    text-align: center;
-    color: #777777;
-    margin-bottom: 60px;
-    cursor: pointer;
-    &:last-child {
-      margin: 0;
-    }
-    &.active {
-      color: rgba(170, 25, 65, 1);
-      &::after {
-        content: '';
-        width: 8px;
-        height: 40px;
-        background: rgba(170, 25, 65, 1);
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
-    }
-  }
-}
-</style>
--- a/components/appFrame.vue
+++ b/components/appFrame.vue
 <template>
-  <div class="frame-content-box">
+  <main class="app-main">
-    <ul class="tab-content">
+    <ul class="app-main-tabs">
-      <li
+      <li v-for="(item, index) in tabs" :class="genClassName(item)" :key="index" @click="handleClick(item.path)">
-        v-for="(item, index) in data.slider"
-        :class="item.pathActive.findIndex(path => {
-          return $route.path.includes(path)
-        }) !== -1 && 'active'"
-        :key="index"
-        @click="goPage(item.path)"
-        >
        {{ item.name }}
      </li>
    </ul>
-    <div class="right-content">
+    <section class="app-main-container">
-      <img v-if="data.banner" :src="data.banner" alt="" class="banner">
+      <slot></slot>
-      <div class="content-mian">
+      <article class="app-main-article">
-        <slot></slot>
+        <div>
-      </div>
+          <slot name="article"></slot>
-    </div>
+        </div>
-  </div>
+      </article>
+      <slot name="footer"></slot>
+    </section>
+  </main>
 </template>
 <script>
 export default {
-  name: 'appFrame',
+  name: 'AppFrame',
  props: {
-    data: {
+    tabs: { type: Array, default: () => [] }
-      type: Object
-    }
  },
  data() {
-    return {
+    return {}
-    }
-  },
-  mounted() {
  },
  methods: {
-    goPage(path) {
+    handleClick(path) {
-      this.$router.push({
+      this.$router.push({ path })
-        path: path
+    },
-      })
+    genClassName(data) {
+      return this.$route.fullPath.includes(data.path) ? 'is-active' : ''
    }
  }
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
-.frame-content-box{
+.is-pc {
-  width: 1200px;
+  .app-main {
-  margin: 0 auto;
+    display: flex;
-  padding: 56px 0 100px;
+    align-items: flex-start;
-  display: flex;
+    max-width: 1200px;
-  justify-content: space-between;
+    margin: 0 auto;
-  .right-content{
+    padding: 56px 0;
-    width: 1000px;
-    .banner{
-      width: 100%;
-      display: block;
-      height: 320px;
-    }
-    .content-mian{
-      background: #fff;
-    }
  }
-  .tab-content{
+  .app-main-tabs {
-    width: 160px;
+    min-width: 160px;
-    height: fit-content;
    background: #fff;
-    padding-top: 35px;
+    padding: 40px 0;
-    padding-bottom: 43px;
+    margin-right: 50px;
-    li{
+    li {
      position: relative;
-      width: 100%;
+      padding: 0 20px;
      height: 40px;
      font-size: 22px;
      line-height: 40px;
      text-align: center;
      color: #777777;
-      margin-bottom: 60px;
      cursor: pointer;
-      &:last-child{
+      &.is-active {
-        margin: 0;
-      }
-      &.active{
        color: rgba(170, 25, 65, 1);
-        &::after{
+        &::after {
          content: '';
-          width: 8px;
-          height: 40px;
-          background: rgba(170, 25, 65, 1);
          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: 1.6rem;
+    }
+  }
+  .app-main-article {
+    padding: 0.2rem;
+    background: #fff;
  }
 }
-</style>
+.is-h5 {
\ No newline at end of file
+  .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>
--- a/components/home/alumniStories.vue
+++ b/components/home/alumniStories.vue
 <template>
-  <div class="alumni-content">
+  <div class="home-alumni">
-    <div :class="isScale ? 'title-content max-width scale' : 'title-content max-width'">
+    <card title="校友故事" class="max-width">
-      <div class="left-title">
+      <template #header-aside><nuxt-link to="/alumni/sharing">查看更多+</nuxt-link></template>
-        <div class="line"></div>
+      <p class="tips">You are What you together，结识6000+ 同样优秀的人！</p>
-        <div class="text">校友故事</div>
+    </card>
-      </div>
+    <div class="swiper-content">
-      <div class="right-text" @click="$router.push({ path: '/alumni/sharing' })">
+      <div v-swiper:mySwiper="swiperOptions" ref="mySwiper">
-        查看更多+
-      </div>
-    </div>
-    <div :class="isScale ? 'small-tit max-width scale' : 'small-tit max-width'">
-      You are What you together，结识6000+ 同样优秀的人！
-    </div>
-    <div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
-      <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
-            <app-link
+            <app-link :data="item" :to="`/alumni/sharing/${item.id}`">
-              :item="{
+              <img :src="item.web_img_uri" loading="lazy" />
-                news: {
-                  data: item,
-                  path: '/alumni/sharing'
-                }
-              }"
-            >
-              <img :src="item.web_img_uri" />
              <div class="text">{{ item.title }}</div>
            </app-link>
          </div>
@@ -34,31 +19,20 @@
  </div>
 </template>
 <script>
+import Card from '@/components/Card'
 import appLink from '@/components/Link'
 export default {
-  components: {
+  components: { Card, appLink },
-    appLink
-  },
  data() {
-    const _this = this
    return {
-      isScale: false,
      listData: [],
-      swiperOption: {
+      swiperOptions: {
-        observer: true,
-        observeParents: true,
-        speed: 400,
        autoplay: true,
-        delay: 3000,
+        delay: 5000,
        loop: true,
        slidesPerView: 'auto',
        centeredSlides: true,
-        spaceBetween: 20
+        spaceBetween: 10
-        // on: {
-        //   init() {
-        //     _this.swiper.slideNext()
-        //   }
-        // }
      }
    }
  },
@@ -70,96 +44,41 @@ export default {
    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
      return res.data.data
    })
-    this.swiper.slideTo(1)
-  },
-  computed: {
-    swiper() {
-      return this.$refs.mySwiper.swiper
-    }
-  },
-  methods: {
-    swiperStop() {
-      this.swiper.autoplay.stop()
-    },
-    swiperStart() {
-      this.swiper.autoplay.start()
-    },
-    goPage(item) {
-      if (item.source === '') {
-        this.$router.push({
-          path: '/about/news-detail',
-          query: {
-            id: item.id
-          }
-        })
-      } else {
-        window.open(item.source)
-      }
-    }
  }
 }
 </script>
 <style lang="scss" scoped>
 .max-width {
-  width: 1200px;
+  max-width: 1200px;
  margin: 0 auto;
 }
-.alumni-content {
+.home-alumni {
-  min-width: 1200px;
+  padding-top: 60px;
-  padding-top: 89px;
+  .tips {
-  .title-content {
-    display: flex;
-    .left-title {
-      display: flex;
-      .line {
-        width: 6px;
-        height: 34px;
-        background: #aa1941;
-      }
-      .text {
-        font-size: 34px;
-        font-weight: bold;
-        line-height: 34px;
-        color: #424242;
-        margin-left: 9px;
-      }
-    }
-    .right-text {
-      margin-left: auto;
-      margin-top: 18px;
-      font-size: 16px;
-      font-weight: 300;
-      line-height: 34px;
-      color: #9b9b9b;
-      cursor: pointer;
-    }
-  }
-  .small-tit {
    font-size: 24px;
    font-weight: bold;
    line-height: 34px;
    color: #424242;
-    margin-top: 12px;
+    margin: 0.1rem 0;
  }
  .swiper-content {
-    padding-top: 37px;
+    ::v-deep .swiper-wrapper {
-    // overflow: auto;
+      align-items: center;
-    // width: 100%;
+    }
    .swiper-slide {
      position: relative;
      width: 388px;
      height: 244px;
-      margin-top: 10px;
+      overflow: hidden;
      .text {
        position: absolute;
-        bottom: 0;
        left: 0;
+        bottom: 0;
        width: 100%;
-        height: 40px;
        line-height: 40px;
        background: rgba(0, 0, 0, 0.5);
        padding: 0 20px;
-        box-sizing: border-box;
        font-size: 20px;
        color: #fefefe;
        overflow: hidden;
@@ -167,22 +86,37 @@ export default {
        white-space: nowrap;
      }
      img {
+        display: block;
        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: top;
      }
    }
    .swiper-slide-active {
-      width: 423px;
+      width: 424px;
      height: 266px;
-      margin-top: 0;
-      img {
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
    }
  }
 }
-.scale {
+.is-h5 {
-  transform: scale(0.85);
+  .home-alumni {
+    margin: 0.2rem 0.15rem;
+    padding: 0;
+    .tips {
+      font-size: 0.1rem;
+      font-weight: 500;
+      margin-bottom: 0.1rem;
+    }
+    .swiper-slide {
+      position: relative;
+      width: 2.1rem;
+      height: 1.22rem;
+    }
+    .swiper-slide-active {
+      width: 2.1rem;
+      height: 1.34rem;
+    }
+  }
 }
 </style>
--- a/components/home/banner.vue
+++ b/components/home/banner.vue
 <template>
-  <div class="banner-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
+  <div class="home-banner">
-    <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
+    <swiper :options="swiperOption" ref="mySwiper">
-      <div class="swiper-wrapper">
+      <swiper-slide v-for="(item, index) in listData" :key="index">
-        <div class="swiper-slide" v-for="(item, index) in list" :key="index">
+        <template v-if="item.uri">
+          <a :href="item.uri" target="_black">
+            <img :src="item.web_img_uri" />
+          </a>
+        </template>
+        <template v-else>
          <img :src="item.web_img_uri" />
-        </div>
+        </template>
-      </div>
+      </swiper-slide>
-      <!-- <div class="swiper-pagination swiper-pagination-bullets"></div> -->
+    </swiper>
-    </div>
+    <template v-if="!isMobile">
-    <div class="prev-button"></div>
+      <div class="prev-button"></div>
-    <div class="next-button"></div>
+      <div class="next-button"></div>
+    </template>
  </div>
 </template>
 <script>
-import AppLink from '@/components/Link'
-const _this = this
 export default {
  name: 'banner',
-  components: {
-    AppLink
-  },
  data() {
    return {
-      list: [],
+      listData: [],
-      // 轮播图配置信息, 更多请参考 swiper.js 中文网，上面很详细。
      swiperOption: {
        speed: 400,
        autoplay: true,
@@ -40,39 +40,23 @@ export default {
  },
  async fetch() {
    const params = { project_id: process.env.newProjectId, type_tag: 'ad_banner' }
-    this.list = await this.$axios.get('/api/cms/api/v1/advertisements', { params }).then(res => res.data.data)
+    this.listData = await this.$axios.get('/api/cms/api/v1/advertisements', { params }).then(res => res.data.data)
  },
  computed: {
-    swiper() {
+    isMobile() {
-      return this.$refs.mySwiper.swiper
+      return this.$store.state.isMobile
-    }
-  },
-  mounted() {},
-  methods: {
-    // openPage(path) {
-    //   path !== '' && window.open(path)
-    // }
-    swiperStop() {
-      this.swiper.autoplay.stop()
-    },
-    swiperStart() {
-      this.swiper.autoplay.start()
    }
  }
 }
 </script>
 <style lang="scss" scoped>
-.banner-content {
+.home-banner {
  position: relative;
-  width: 100%;
-  min-width: 1200px;
  .swiper-wrapper {
    width: 100%;
    display: flex;
    .swiper-slide {
-      width: 100%;
-      // float: left;
      img {
        width: 100%;
        display: block;

--- a/components/home/headmasterMsg.vue
+++ b/components/home/headmasterMsg.vue
 <template>
-  <div class="msg-content">
+  <card title="校长寄语" class="home-headmaster">
-    <div class="title-content">
+    <template #header-aside><nuxt-link to="/about/message">查看更多+</nuxt-link></template>
-      <div class="left-title">
+    <div class="gallery-top">
-        <div class="line"></div>
+      <swiper :options="swiperOptionTop" ref="swiperTop">
-        <div class="text">校长寄语</div>
+        <swiper-slide v-for="(item, index) in listData" :key="index">
-      </div>
+          <app-link :data="item" :to="`/about/message/${item.id}`">
-      <div class="right-text" @click="$router.push({ path: '/about/message', query: { type: 'img_text_school' } })">
+            <img :src="item.web_img_uri" loading="lazy" />
-        查看更多+
+          </app-link>
-      </div>
+        </swiper-slide>
+      </swiper>
    </div>
-    <div class="swiper-content">
+    <div class="gallery-thumbs">
-      <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
+      <swiper :options="swiperOptionThumbs" ref="swiperThumbs">
-        <div class="swiper-wrapper">
+        <swiper-slide v-for="(item, index) in listData" :key="index">
-          <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
+          <div class="thumbs">
-            <app-link :item="{ news: { data: item, path: '/about/message' } }">
+            {{ item.title }}
-              <img :src="item.web_img_uri" />
-            </app-link>
          </div>
-        </div>
+        </swiper-slide>
-        <div class="swiper-pagination swiper-pagination-bullets"></div>
+      </swiper>
+      <div class="swiper-btn swiper-button-prev">
+        <img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png" />
+      </div>
+      <div class="swiper-btn swiper-button-next">
+        <img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png" />
      </div>
    </div>
-    <text-swiper v-if="isShowSwiper" :listData="listData" @slideTo="handleSlideTo" />
+  </card>
-  </div>
 </template>
 <script>
+import Card from '@/components/Card'
 import appLink from '@/components/Link'
-import textSwiper from './textSwiper.vue'
 export default {
-  components: {
+  components: { Card, appLink },
-    appLink,
-    textSwiper
-  },
  data() {
    const that = this
    return {
      listData: [],
-      swiperOption: {
+      swiperOptionTop: {
-        speed: 400,
+        loop: true,
-        autoplay: false,
+        loopedSlides: 5, // looped slides should be the same
-        delay: 3000,
+        spaceBetween: 10
-        loop: false,
-        // pagination: {
-        //   el: '.swiper-pagination',
-        //   clickable: true
-        // },
-        // direction: 'vertical',
-        height: 500
-        // autoHeight: true
      },
-      isShowSwiper: false
+      swiperOptionThumbs: {
+        loop: true,
+        loopedSlides: 5, // looped slides should be the same
+        spaceBetween: 10,
+        centeredSlides: true,
+        slidesPerView: 'auto',
+        touchRatio: 0.2,
+        slideToClickedSlide: true,
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
+      }
    }
  },
  async fetch() {
@@ -58,93 +62,85 @@ export default {
      project_id: '6800242743894343680',
      type_tag: 'img_text_school'
    }
-    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
+    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
-      this.isShowSwiper = false
-      setTimeout(() => {
-        this.isShowSwiper = true
-      }, 300)
-      return res.data.data
-    })
-  },
-  computed: {
-    // swiper() {
-    //   return this.$refs.mySwiper.swiper;
-    // }
  },
  mounted() {
-    this.isShowSwiper = false
+    this.$nextTick(() => {
-    setTimeout(() => {
+      const swiperTop = this.$refs.swiperTop.$swiper
-      this.isShowSwiper = true
+      const swiperThumbs = this.$refs.swiperThumbs.$swiper
-    }, 300)
+      swiperTop.controller.control = swiperThumbs
-  },
+      swiperThumbs.controller.control = swiperTop
-  methods: {
+    })
-    handleSlideTo(index) {
-      this.$refs.mySwiper.swiper.slideTo(index)
-    }
  }
 }
 </script>
 <style lang="scss" scoped>
-.msg-content {
+.home-headmaster {
-  padding-top: 90px;
+  padding-top: 60px;
-  width: 1200px;
+  max-width: 1200px;
  margin: 0 auto;
-  .title-content {
-    display: flex;
+  .gallery-top {
-    .left-title {
-      display: flex;
-      .line {
-        width: 6px;
-        height: 34px;
-        background: #aa1941;
-      }
-      .text {
-        font-size: 34px;
-        font-weight: bold;
-        line-height: 34px;
-        color: #424242;
-        margin-left: 9px;
-      }
-    }
-    .right-text {
-      margin-left: auto;
-      margin-top: 18px;
-      font-size: 16px;
-      font-weight: 300;
-      line-height: 34px;
-      color: #9b9b9b;
-      cursor: pointer;
-    }
-  }
-  .swiper-content {
    height: 500px;
    margin-top: 15px;
    overflow: hidden;
    img {
+      display: block;
      width: 100%;
-      height: 520px;
+      object-fit: cover;
+    }
+  }
+}
+.gallery-thumbs {
+  padding: 0 25px;
+  margin-top: 5px;
+  position: relative;
+  .swiper-slide {
+    width: 266px;
+    height: 44px;
+    padding: 0 20px;
+    margin: 7px 0;
+    line-height: 22px;
+    font-size: 16px;
+    cursor: pointer;
+    border-right: 1px solid #a81840;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .swiper-slide-active,
+  .swiper-slide:hover {
+    color: #a81840;
+  }
+  .swiper-btn {
+    width: 20px;
+    height: 35px;
+    position: absolute;
+    left: -5px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    user-select: none;
+    cursor: pointer;
+    img {
+      width: 100%;
+      height: 100%;
      display: block;
    }
-    ::v-deep {
+  }
-      .swiper-pagination-bullets {
+  .swiper-button-next {
-        right: 34px !important;
+    left: unset;
-      }
+    right: -5px;
-      .swiper-pagination-bullet {
+  }
-        width: 6px;
+}
-        height: 6px;
+.is-h5 {
-        border-radius: 100%;
+  .home-headmaster {
-        border: 1px solid #fff;
+    margin: 0.2rem 0.15rem;
-        box-sizing: border-box;
+    padding: 0;
-        background: none;
+    .gallery-top {
-        opacity: 1;
+      height: 1.36rem;
-        margin: 10px 0;
-      }
-      .swiper-pagination-bullet-active {
-        width: 6px;
-        height: 31px;
-        border-radius: 25px;
-        background: #fff;
-      }
    }
  }
 }

--- a/components/home/moduleTitle.vue
+++ b/components/home/moduleTitle.vue
-<template>
-  <div class="title-content">
-    <div class="left-title">
-      <div class="line"></div>
-      <div class="text">{{ data.name }}</div>
-    </div>
-    <div v-if="data.more" class="right-text" @click="$router.push({ path: data.more.path, query: data.more.query ? data.more.query : {} })">
-      查看更多+
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'mTitle',
-  props: {
-    data: {
-      type: Object
-    }
-  },
-  data() {
-    return {
-    }
-  },
-  methods: {
-    goPage(item) {
-      this.$router.push({
-        path: '/about/news-detail',
-        query: {
-          id: item.id
-        }
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.title-content{
-  display: flex;
-  height: 37px;
-  .left-title{
-    display: flex;
-    align-items: center;
-    .line{
-      width: 7px;
-      height: 37px;
-      background: #AA1941;
-    }
-    .text{
-      font-size: 32px;
-      font-weight: bold;
-      line-height: 34px;
-      color: #333;
-      margin-left: 20px;
-    }
-  }
-  .right-text{
-    margin-left: auto;
-    font-size: 16px;
-    color: #9B9B9B;
-    cursor: pointer;
-  }
-}
-</style>
\ No newline at end of file
--- a/components/home/news.vue
+++ b/components/home/news.vue
 <template>
-  <div class="news-content-box">
+  <card title="最新动态" class="home-news">
-    <m-title :data="titleParams" />
+    <template #header-aside><nuxt-link to="/news/hot">查看更多+</nuxt-link></template>
    <div class="content-box" v-if="Object.keys(listData.first).length">
      <div class="news-left">
-        <app-link :item="{ news: { data: listData.first, path: '/news/hot' } }">
+        <app-link :data="listData.first" :to="`/news/hot/${listData.first.id}`">
-          <img :src="listData.first.web_img_uri" alt="" />
+          <img :src="listData.first.web_img_uri" />
          <div class="mantle-box">
-            <div class="tit">{{ listData.first.title }}</div>
+            <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 :item="{ news: { data: listData.first, path: '/news/hot' } }">
+          <app-link :data="item" :to="`/news/hot/${item.id}`">
            <div class="time">{{ formatDate(item.start_time) }}</div>
            <div class="news-r-title">{{ item.title }}</div>
            <div class="del">{{ item.abstract }}</div>
@@ -21,17 +21,14 @@
        </li>
      </ul>
    </div>
-  </div>
+  </card>
 </template>
 <script>
-import mTitle from '@/components/home/moduleTitle'
+import Card from '@/components/Card'
 import AppLink from '@/components/Link'
 export default {
-  name: 'news',
+  name: 'HomeNews',
-  components: {
+  components: { Card, AppLink },
-    mTitle,
-    AppLink
-  },
  async fetch() {
    const params = { project_id: process.env.newProjectId, type_tag: 'article_news_hot', page: 1, limit: 4 }
    await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
@@ -40,111 +37,175 @@ export default {
  },
  data() {
    return {
-      data: [],
+      data: []
-      titleParams: {
-        name: '最新动态',
-        more: {
-          path: '/news/hot'
-        }
-      }
    }
  },
  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)
-      // console.log(date.getMonth())
      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    }
  }
 }
 </script>
 <style lang="scss" scoped>
-.news-content-box {
+.is-pc {
-  width: 1200px;
+  .home-news {
-  margin: 0 auto;
+    max-width: 1200px;
-  padding-top: 65px;
+    margin: 0 auto;
-  .content-box {
+    padding: 60px 0;
-    display: flex;
+    .content-box {
-    justify-content: space-between;
+      display: flex;
-    padding-top: 26px;
+      justify-content: space-between;
-    .news-left {
+      padding-top: 26px;
-      width: 780px;
+      .news-left {
-      height: 500px;
+        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 {
+  .home-news {
+    .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(0, 0, 0, 0.2);
+        background: rgba(8, 8, 8, 0.45);
-        padding: 30px 37px;
+        padding-bottom: 0.14rem;
-        .tit {
+        .con-txt {
-          font-size: 24px;
+          font-size: 0.12rem;
          font-weight: bold;
-          line-height: 100%;
+          line-height: 0.17rem;
          color: #ffffff;
-          width: 696px;
+          padding: 0.14rem 0.32rem 0 0.19rem;
          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;
+        margin-top: 0.1rem;
-        border-bottom: 1px solid #e3e3e3;
+        padding: 0.13rem 0.14rem 0.11rem 0.12rem;
-        padding-bottom: 19px;
+        background: #fff;
-        margin-bottom: 30px;
-        cursor: pointer;
        .time {
-          font-size: 16px;
+          font-size: 0.1rem;
-          font-weight: normal;
          line-height: 100%;
-          color: #8e1e22;
+          color: #ab0a3d;
        }
        .news-r-title {
-          font-size: 22px;
+          font-size: 0.14rem;
-          font-weight: bold;
-          line-height: 30px;
          color: #333333;
-          margin-top: 15px;
+          margin-top: 0.1rem;
+          line-height: 0.21rem;
+          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
-          overflow: hidden;
        }
        .del {
-          width: 350px;
+          font-size: 0.11rem;
+          line-height: 0.2rem;
+          color: #666666;
          overflow: hidden;
-          text-overflow: ellipsis;
+          display: -webkit-box;
-          white-space: nowrap;
+          -webkit-box-orient: vertical;
-          font-size: 14px;
+          -webkit-line-clamp: 2;
-          line-height: 100%;
-          color: #999999;
-          margin-top: 15px;
        }
      }
    }

--- a/components/home/textSwiper.vue
+++ b/components/home/textSwiper.vue
-<template>
-  <div class="title-swiper">
-    <div v-swiper:secondSwiper="swiperOption1" ref="mySwiper1" @click="handleClick">
-      <div class="swiper-wrapper">
-        <div class="swiper-slide swiper-no-swiping" v-for="(item, index) in listData" :key="index">
-          {{item.title}}
-        </div>
-      </div>
-    </div>
-    <div class="swiper-btn swiper-button-prev" @click="handleBtnClick">
-      <img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png">
-    </div>
-    <div class="swiper-btn swiper-button-next" @click="handleBtnClick">
-      <img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png">
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    listData: {
-      type: Array,
-      default() {
-        return []
-      }
-    }
-  },
-  data() {
-    return {
-      swiperOption1: {
-        observer: true,
-        observeParents: true,
-        speed: 400,
-        autoplay: false,
-        delay: 3000,
-        loop: true,
-        slidesPerView: 'auto',
-        centeredSlides: true,
-        spaceBetween: 0,
-        disableOnInteraction: false,
-        on:{
-          init: function(){
-            // that.isShowSwiper = true
-          }
-        },
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev',
-        }
-      },
-      // isEn: false
-    }
-  },
-  mounted() {
-    // this.isEn = this.$cookies.get('lang') === 'en-US'
-  },
-  methods: {
-    handleClick(e) {
-      const index = e.target.dataset.swiperSlideIndex
-      this.$refs.mySwiper1.swiper.slideTo(index % 5 + 5)
-      this.$emit('slideTo', index)
-    },
-    handleBtnClick() {
-      setTimeout(() => {
-        this.$emit('slideTo', this.$refs.mySwiper1.swiper.realIndex)
-      }, 100)
-    }
-  }
-}
-</script>
-<style lang="scss"  scoped>
-.title-swiper{
-  padding: 0 25px;
-  margin-top:5px;
-  position:relative;
-  // overflow: auto;
-  // width: 100%;
-  .swiper-slide{
-    position: relative;
-    width: 266px;
-    height: 44px;
-    padding:0 20px;
-    margin:7px 0;
-    line-height:22px;
-    font-size:16px;
-    cursor: pointer;
-    user-select:none;
-    border-right:1px solid #a81840;
-    overflow : hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-  .swiper-slide-active, .swiper-slide:hover{
-    color:#a81840;
-  }
-  .swiper-btn{
-    width:20px;
-    height:35px;
-    position:absolute;
-    left:-5px;
-    top:50%;
-    transform:translateY(-50%);
-    z-index:2;
-    user-select:none;
-    cursor:pointer;
-    img{
-      width:100%;
-      height:100%;
-      display:block;
-    }
-  }
-  .swiper-button-next{
-    left:unset;
-    right: -5px;
-  }
-}
-</style>
\ No newline at end of file
--- a/components/layout/Footer.vue
+++ b/components/layout/Footer.vue
+<template>
+  <footer class="app-footer">
+    <div class="app-footer-inner">
+      <ul class="app-footer-link">
+        <li><a href="http://jsj.moe.gov.cn" target="_blank">中国教育部</a></li>
+        <li><a href="http://jsj.moe.gov.cn" target="_blank">教育涉外监管信息网</a></li>
+        <li>
+          <a href="http://www.marywood.edu/business/graduate/zijing-marywood-mba.html" target="_blank">玛丽伍德大学 </a>
+        </li>
+        <li><a href="https://www.msche.org/institution/0531/" target="_blank">美国教育部</a></li>
+        <li><a href="https://www.ezijing.com" target="_blank">紫荆教育</a></li>
+      </ul>
+      <div class="app-footer-contact">
+        <dl>
+          <dt>地址</dt>
+          <dd>北京市海淀区中关村东路1号院清华科技园7号楼威盛大厦5层</dd>
+        </dl>
+        <dl>
+          <dt>联系电话</dt>
+          <dd><a href="tel:010-62793299">010-62793299</a></dd>
+        </dl>
+        <dl>
+          <dt>邮箱</dt>
+          <dd><a href="mailto:marywood@ezijing.com" target="_blank">marywood@ezijing.com</a></dd>
+        </dl>
+      </div>
+      <div class="app-footer-qrcode">
+        <img src="https://webapp-pub.ezijing.com/project/mba/footer_qrcode.jpg" width="120" />
+        <div class="app-footer-qrcode-content">
+          <img src="https://zws-imgs-pub.ezijing.com/static/public/184235d9f6edbb39d52fc6f77339ff5b.png" width="20" />
+          <span>微信公众号</span>
+        </div>
+      </div>
+    </div>
+    <div class="app-copyright">
+      <span>Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司</span>
+      <a target="_blank" href="https://tsm.miit.gov.cn/dxxzsp/">京ICP证150431号 </a>
+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681">
+        <img src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png" />
+        安备 11010802023681号
+      </a>
+      <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备15016866号-1</a>
+    </div>
+  </footer>
+</template>
+<script>
+export default {}
+</script>
+<style lang="scss">
+.app-footer {
+  background: rgba(170, 25, 65, 1);
+}
+.app-footer-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 80px 0;
+  display: flex;
+  color: rgba(237, 237, 237, 0.7);
+}
+.app-footer-link {
+  min-width: 300px;
+  font-size: 0.09rem;
+  font-weight: 300;
+  line-height: 0.25rem;
+  text-decoration: underline;
+  letter-spacing: 3px;
+}
+.app-footer-contact {
+  flex: 1;
+  dl {
+    display: flex;
+    font-size: 0.09rem;
+    line-height: 0.15rem;
+  }
+  dt {
+    width: 0.4rem;
+    text-align-last: justify;
+    white-space: nowrap;
+  }
+  dd {
+    flex: 1;
+    overflow: hidden;
+    &::before {
+      content: '：';
+    }
+  }
+}
+.app-footer-qrcode {
+  margin-left: 80px;
+  text-align: center;
+}
+.app-footer-qrcode-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+  span {
+    margin-left: 10px;
+  }
+}
+.app-copyright {
+  background: #fff;
+  font-size: 12px;
+  line-height: 40px;
+  color: #999;
+  text-align: center;
+  a {
+    margin-left: 10px;
+  }
+}
+.is-h5 {
+  .app-footer-inner {
+    padding: 0.1rem;
+    flex-direction: column;
+  }
+  .app-footer-link {
+    text-decoration: none;
+    li {
+      display: inline-block;
+    }
+  }
+  .app-footer-contact {
+    margin: 0.1rem 0;
+  }
+  .app-footer-qrcode {
+    margin-left: 0;
+  }
+}
+</style>
--- a/components/layout/Header.vue
+++ b/components/layout/Header.vue
+<template>
+  <header class="app-header" :class="menuClasses">
+    <div class="app-header-inner">
+      <div class="app-header-left">
+        <nuxt-link to="/">
+          <img
+            src="https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/ezijing-logo.svg"
+            class="logo"
+          />
+          <h1 class="title">MBA</h1>
+        </nuxt-link>
+      </div>
+      <div class="app-header-right">
+        <client-only>
+          <div class="user" v-if="user.id">
+            <span>{{ userName }}</span>
+            <em>|</em><span class="logout" @click="logout">退出</span>
+          </div>
+          <div class="button-group" v-else>
+            <div class="button button-primary"><a :href="loginURL">快速登录</a></div>
+            <div class="button button-default"><a :href="registerURL">注册</a></div>
+          </div>
+        </client-only>
+        <div class="menu" @click="toggleMenu"></div>
+      </div>
+    </div>
+    <AppMenu />
+  </header>
+</template>
+<script>
+import AppLink from '@/components/Link'
+import AppMenu from './Menu'
+export default {
+  components: { AppMenu, AppLink },
+  data() {
+    return {
+      menuVisible: false,
+      location: {}
+    }
+  },
+  computed: {
+    user() {
+      return this.$store.state.user || {}
+    },
+    userName() {
+      return this.user.realname || this.user.nickname || this.user.username
+    },
+    url() {
+      return this.location.origin + this.$route.fullPath
+    },
+    loginURL() {
+      return `${process.env.loginURL}/login/index?redirect_uri=${encodeURIComponent(this.url)}`
+    },
+    registerURL() {
+      return `${process.env.loginURL}/register?redirect_uri=${encodeURIComponent(this.url)}`
+    },
+    menuClasses() {
+      return {
+        'has-menu': this.menuVisible
+      }
+    }
+  },
+  watch: {
+    $route() {
+      this.menuVisible = false
+    }
+  },
+  mounted() {
+    this.location = window.location
+  },
+  methods: {
+    logout() {
+      this.$store.dispatch('logout').then(() => {
+        location.href = '/'
+      })
+    },
+    toggleMenu() {
+      this.menuVisible = !this.menuVisible
+    }
+  }
+}
+</script>
+<style lang="scss">
+.app-header {
+  position: relative;
+  background: #fff;
+  border-top: 0.05rem solid #aa1941;
+  box-shadow: 0 0 15px rgb(0 0 0 / 14%);
+  z-index: 100;
+}
+.app-header-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.app-header-left {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  a {
+    display: flex;
+    align-items: center;
+  }
+  .logo {
+    height: 0.26rem;
+  }
+  .title {
+    position: relative;
+    font-size: 0.15rem;
+    font-weight: 500;
+    color: #aa1941;
+    padding-left: 0.1rem;
+    margin-left: 0.1rem;
+    &::before {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      content: '';
+      display: block;
+      width: 1px;
+      height: 0.13rem;
+      background: #aa1941;
+      transform: translateY(-50%);
+    }
+  }
+}
+.app-header-right {
+  .user {
+    margin-left: auto;
+    font-size: 18px;
+    em {
+      font-size: 16px;
+      font-style: normal;
+      padding: 0 14px;
+    }
+    .logout {
+      cursor: pointer;
+    }
+  }
+  .button-group {
+    margin-left: auto;
+    display: flex;
+    .button {
+      width: 72px;
+      height: 24px;
+      box-sizing: border-box;
+      text-align: center;
+      line-height: 24px;
+      font-size: 12px;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+    .button + .button {
+      margin-left: 10px;
+    }
+    .button-primary {
+      background: #aa1941;
+      color: #fff;
+    }
+    .button-default {
+      color: #333333;
+      border: 1px solid #eaeaea;
+    }
+  }
+}
+.is-h5 {
+  .user,
+  .button-group {
+    display: none;
+  }
+  .app-header-inner {
+    box-shadow: 0 0 15px rgb(0 0 0 / 14%);
+  }
+  .menu {
+    width: 0.18rem;
+    height: 0.18rem;
+    padding: 0 0.08rem;
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAh1BMVEUAAABAQEBgYGBVVVVgYGBmZmZoaGhgYGBgYGBlZWVlZWVjY2NjY2NmZmZkZGRlZWVkZGRmZmZjY2NmZmZlZWVmZmZmZmZlZWVmZmZlZWVmZmZmZmZlZWVlZWVmZmZmZmZlZWVmZmZlZWVlZWVmZmZmZmZmZmZlZWVmZmZmZmZlZWVmZmZmZmZgwHa9AAAALHRSTlMABAgMEBQbICgrMENIS09TVF9kZ2hrbG9zd3t/l5+jp6uvu8PD09fb3+vv86pHCLIAAACcSURBVBgZ7cHHFoJAEATAhkUx5wCsOYE6//99nvum/TxwmCo4107JuIqCaQaWXk3T5CCFqY4gB1PVIJWpziDhbppnDyxdRMWmA+eca6mwjIptFyx7mObVB4mmOoMcTFWDFKY6gqQ30zQ5WDIq4++qWYBzzrmvDeeKSQBLLqZpcpC1qU4ge1M1IKWpLiDhbpr3ACysdntBkcO5f/kAGgG16eBu+akAAAAASUVORK5CYII=')
+      no-repeat center;
+    background-size: 0.18rem 0.18rem;
+    cursor: pointer;
+  }
+  .has-menu .menu {
+    background: url('https://webapp-pub.ezijing.com/www/h5/images/icon_close.png') no-repeat center;
+    background-size: 0.18rem 0.18rem;
+  }
+}
+.has-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
+}
+</style>
--- a/components/layout/Index.vue
+++ b/components/layout/Index.vue
+<template>
+  <div class="app-layout" :class="isMobile ? 'is-h5' : 'is-pc'">
+    <AppHeader></AppHeader>
+    <Nuxt />
+    <AppFooter></AppFooter>
+    <RightAside></RightAside>
+  </div>
+</template>
+<script>
+import AppHeader from './Header.vue'
+import AppFooter from './Footer.vue'
+import RightAside from '../rightAside.vue'
+export default {
+  components: { AppHeader, AppFooter, RightAside },
+  computed: {
+    isMobile() {
+      return this.$store.state.isMobile
+    }
+  }
+}
+</script>
+<style>
+.app-layout.is-pc {
+  min-width: 1200px;
+}
+</style>
--- a/components/layout/Menu.vue
+++ b/components/layout/Menu.vue
+<template>
+  <nav class="app-nav">
+    <div class="app-nav-inner">
+      <ul class="app-menu">
+        <tree-item :item="item" v-for="(item, index) in navList" :key="index"></tree-item>
+      </ul>
+    </div>
+  </nav>
+</template>
+<script>
+import TreeItem from './TreeItem'
+export default {
+  name: 'AppMenu',
+  components: { TreeItem },
+  data() {
+    return {
+      navList: [
+        {
+          name: '关于紫荆',
+          path: '/about/introduce',
+          children: [
+            { name: '紫荆简介', path: '/about/introduce' },
+            { name: '文化理念', path: '/about/culture' },
+            { name: '校长寄语', path: '/about/message' },
+            { name: '公开课', path: '/about/lesson' },
+            { name: '联系我们', path: '/about/contact' }
+          ]
+        },
+        {
+          name: 'MBA',
+          path: '/mba/intro',
+          children: [
+            { name: 'MBA', path: '/mba/intro' },
+            { name: 'MBA师资', path: '/mba/teacher' },
+            { name: 'MBA课程', path: '/mba/course' }
+          ]
+        },
+        {
+          name: '在职研究生',
+          path: '/master/intro',
+          children: [
+            { name: '在职研究生', path: '/master/intro' },
+            { name: '在职研师资', path: '/master/teacher' },
+            { name: '在职研课程', path: '/master/course' }
+          ]
+        },
+        {
+          name: '申请攻略',
+          path: '/apply/mba',
+          children: [
+            { name: 'MBA申请攻略', path: '/apply/mba' },
+            { name: '在职研申请攻略', path: '/apply/master' }
+          ]
+        },
+        {
+          name: '校友专享',
+          path: '/alumni/sharing',
+          children: [
+            { name: '校友故事', path: '/alumni/sharing' },
+            { name: '校友福利', path: '/alumni/outstanding' }
+          ]
+        },
+        {
+          name: '最新动态',
+          path: '/news/hot',
+          children: [
+            { name: '热点新闻', path: '/news/hot' },
+            { name: '教授采访', path: '/news/interview' }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss">
+/** pc **/
+.is-pc {
+  .app-nav {
+    border-top: 1px solid #ebebeb;
+  }
+  .app-nav-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .app-menu {
+    height: 72px;
+    display: flex;
+    align-items: center;
+  }
+  .app-menu > li {
+    position: relative;
+    margin-right: 60px;
+    > .cell {
+      font-size: 22px;
+      line-height: 72px;
+      color: #333;
+    }
+    > .tree-item-group {
+      margin-top: -4px;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border-top: 4px solid #aa1941;
+    }
+  }
+  .tree-item {
+    &:hover {
+      > .cell {
+        color: #aa1941;
+      }
+      > .tree-item-group {
+        display: block !important;
+        .tree-item {
+          padding: 18px 24px;
+          font-size: 16px;
+          color: #333;
+          white-space: nowrap;
+          &:hover,
+          &.is-active {
+            color: #aa1941;
+          }
+        }
+      }
+    }
+    &.is-active {
+      > .cell {
+        color: #aa1941;
+      }
+    }
+  }
+  .tree-item-group {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 100%;
+    padding: 18px 0;
+    background-color: #fff;
+    box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
+    z-index: 1;
+  }
+  .tree-item-group .tree-item-group {
+    top: 0;
+  }
+  .cell-icon {
+    display: none;
+  }
+}
+/** h5 **/
+.is-h5 {
+  .app-nav {
+    min-height: 100vh;
+    display: none;
+  }
+  .has-menu .app-nav {
+    display: block;
+  }
+  .app-menu > li {
+    > .cell .cell-title {
+      font-size: 0.14rem;
+      font-weight: 700;
+    }
+  }
+  .app-nav-inner {
+    padding: 0.1rem;
+  }
+  .tree-item {
+    .cell {
+      display: flex;
+      align-items: center;
+      height: 0.52rem;
+      border-bottom: 1px solid #999;
+    }
+    .cell-title {
+      flex: 1;
+      font-size: 0.13rem;
+      font-weight: 400;
+      color: #333;
+      a {
+        display: flex;
+        align-items: center;
+        height: 0.52rem;
+      }
+    }
+    .cell-icon {
+      font-size: 0.14rem;
+    }
+  }
+}
+</style>
--- a/components/layout/TreeItem.vue
+++ b/components/layout/TreeItem.vue
+<template>
+  <li class="tree-item" :class="{ 'is-active': isActive }">
+    <div class="cell" :class="{ bold: isFolder }" @click.capture="toggle">
+      <div class="cell-title">
+        <app-link :data="item">{{ item.name }}</app-link>
+      </div>
+      <div class="cell-icon" v-if="isFolder">
+        <i class="el-icon-arrow-up" v-if="isOpen"></i>
+        <i class="el-icon-arrow-down" v-else></i>
+      </div>
+    </div>
+    <ul v-show="isOpen" v-if="isFolder" class="tree-item-group">
+      <tree-item v-for="(child, index) in item.children" :key="index" :item="child"></tree-item>
+    </ul>
+  </li>
+</template>
+<script>
+import AppLink from '@/components/Link'
+export default {
+  name: 'TreeItem',
+  props: { item: Object },
+  components: { AppLink },
+  data() {
+    return {
+      isOpen: false
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.isMobile
+    },
+    isFolder() {
+      return this.item.children && this.item.children.length
+    },
+    isActive() {
+      const path = this.$route.path
+      return (
+        path.includes(this.item.path) ||
+        (this.item.children && this.item.children.find(child => path.includes(child.path)))
+      )
+    }
+  },
+  methods: {
+    toggle(e) {
+      if (this.isFolder && this.isMobile) {
+        e.preventDefault()
+        this.isOpen = !this.isOpen
+      }
+    }
+  }
+}
+</script>
+<style lang="scss"></style>
--- a/components/news/newsItem.vue
+++ b/components/news/newsItem.vue
-<template>
-  <div class="news-content-box">
-    <ul class="list-content">
-      <template v-for="(item, index) in data">
-        <template v-if="item.uri">
-          <a :href="item.uri" target="_black" :key="index">
-            <li>
-              <img :src="item.web_img_uri" alt="" />
-              <div class="right-con">
-                <div class="time">{{ formatDate(item.start_time) }}</div>
-                <div class="title">{{ item.title }}</div>
-                <div class="text">{{ item.abstract }}</div>
-              </div>
-            </li>
-          </a>
-        </template>
-        <template v-else>
-          <li :key="index" @click="handleClick(item)">
-            <img :src="item.web_img_uri" alt="" />
-            <div class="right-con">
-              <div class="time">{{ formatDate(item.start_time) }}</div>
-              <div class="title">{{ item.title }}</div>
-              <div class="text">{{ item.abstract }}</div>
-            </div>
-          </li>
-        </template>
-      </template>
-    </ul>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    data: {
-      type: Array
-    }
-  },
-  data() {
-    return {
-      listData: []
-    }
-  },
-  methods: {
-    formatDate(value) {
-      const date = new Date(value * 1000)
-      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
-    },
-    handleClick(item) {
-      this.$emit('onClick', item)
-    }
-  },
-  mounted() {
-    console.log(this.data)
-  }
-}
-</script>
-<style lang="scss" scoped>
-.news-content-box {
-  .list-content {
-    width: 900px;
-    margin: 0 auto;
-    background: #fff;
-    li {
-      display: flex;
-      flex-wrap: wrap;
-      border-bottom: 1px solid #e6e6e6;
-      margin-bottom: 20px;
-      padding-bottom: 36px;
-      cursor: pointer;
-      &:hover {
-        .right-con {
-          .text {
-            color: #141414;
-          }
-        }
-      }
-      img {
-        width: 320px;
-        height: 210px;
-        display: block;
-      }
-      .right-con {
-        width: 550px;
-        margin-left: 30px;
-        .time {
-          font-size: 16px;
-          font-weight: 300;
-          line-height: 100%;
-          color: #aa1941;
-          padding-top: 13px;
-        }
-        .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: 2;
-          -webkit-box-orient: vertical;
-        }
-        .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;
-        }
-      }
-    }
-  }
-}
-</style>
--- a/components/recommend.vue
+++ b/components/recommend.vue
@@ -7,8 +7,8 @@
      </div>
      <ul class="list-box">
        <li v-for="(item, index) in listData" :key="index">
-          <app-link :item="{ news: { data: item, path: '/news/hot' } }">
+          <app-link :data="item" :to="`/news/hot/${item.id}`">
-            <img :src="item.web_img_uri" alt="" />
+            <img :src="item.web_img_uri" />
            <div class="dec">{{ item.title }}</div>
          </app-link>
        </li>
@@ -20,9 +20,7 @@
 <script>
 import AppLink from '@/components/Link'
 export default {
-  components: {
+  components: { AppLink },
-    AppLink
-  },
  data() {
    return {
      data: {},
@@ -38,7 +36,6 @@ export default {
      limit: 3
    }
    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
-      console.log(res.data.data)
      return res.data.data
    })
  },

--- a/layouts/default.vue
+++ b/layouts/default.vue
 <template>
-  <Nuxt />
+  <AppLayout v-bind="$attrs" v-on="$listeners" />
 </template>
+<script>
+import AppLayout from '@/components/layout/Index.vue'
+export default {
+  components: { AppLayout }
+}
+</script>
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -11,8 +11,8 @@ export default {
  props: ['error'],
  layout: 'error',
  middleware: [
-    function ({ redirect }) {
+    function({ redirect }) {
-      return redirect(301, '/el?e=rnf')
+      return redirect(301, '/')
    }
  ]
 }

--- a/layouts/normal.vue
+++ b/layouts/normal.vue
-<template>
-  <div>
-    <Head />
-    <Nuxt />
-    <rightAside />
-    <Foot v-if="hasFooter" />
-  </div>
-</template>
-<script>
-export default {
-  props: { hasFooter: { Boolean, default: true } }
-}
-</script>
-<style>
-html {
-  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    sans-serif;
-  font-size: 16px;
-  word-spacing: 1px;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  box-sizing: border-box;
-}
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-}
-.button--green {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #3b8070;
-  color: #3b8070;
-  text-decoration: none;
-  padding: 10px 30px;
-}
-.button--green:hover {
-  color: #fff;
-  background-color: #3b8070;
-}
-.button--grey {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #35495e;
-  color: #35495e;
-  text-decoration: none;
-  padding: 10px 30px;
-  margin-left: 15px;
-}
-.button--grey:hover {
-  color: #fff;
-  background-color: #35495e;
-}
-</style>
--- a/middleware/device.js
+++ b/middleware/device.js
+export default function(context) {
+  const UA = process.server ? context.req.headers['user-agent'] : navigator.userAgent
+  let isMobile = /iphone/i.test(UA) || (/android/i.test(UA) && /mobile/i.test(UA))
+  if (context.route.path.includes('/my')) {
+    isMobile = false
+  }
+  context.store.commit('setIsMobile', isMobile)
+}
--- a/nuxt.config.js
+++ b/nuxt.config.js
 import path from 'path'
 import fs from 'fs'
-import routes from './router/routes'
+// import routes from './router/routes'
 let config = {}
 if (process.env.NODE_ENV === 'production') {
@@ -32,8 +32,8 @@ if (process.env.NODE_ENV === 'production') {
 }
 export default {
+  // ssr: false,
  ...config,
-  ssr: false,
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: '清控紫荆教育MBA官网_MBA培训_在职研究生_在职考研_免联考硕士学历提升机构',
@@ -42,6 +42,10 @@ export default {
    },
    meta: [
      { charset: 'utf-8' },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover'
+      },
      {
        hid: 'keywords',
        name: 'keywords',
@@ -52,8 +56,7 @@ export default {
        name: 'description',
        content:
          '清控紫荆教育MBA官网，为中高层管理者提供MBA培训_在职研究生_在职考研_免联考硕士学历提升服务，助力企业中高层提升认知，解决问题！'
-      },
+      }
-      { name: 'viewport', id: 'viewport', content: 'initial-scale=-1,maximum-scale=1,shrink-to-fit=no' }
    ],
    link: [
      {
@@ -67,20 +70,7 @@ export default {
  css: ['@ezijing/vue-form/dist/vue-form.css', 'assets/theme/index.css', 'assets/css/base.css'],
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: [
+  plugins: ['@/plugins/router', '@/plugins/axios', '@/plugins/element-ui', '@/plugins/vue-swiper.js'],
-    '@/plugins/router',
-    '@/plugins/axios',
-    '@/plugins/element-ui',
-    {
-      // 引入一个插件，这里的 ssr 表示使用服务端渲染
-      src: 'plugins/vue-swiper.js',
-      ssr: false
-    },
-    {
-      src: 'plugins/tongji.js',
-      ssr: false
-    }
-  ],
  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,
@@ -96,6 +86,7 @@ export default {
    transpile: [/^element-ui/]
  },
  router: {
-    extendRoutes: routes
+    // extendRoutes: routes,
+    middleware: ['device']
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -9,12 +9,12 @@
    "generate": "nuxt generate"
  },
  "dependencies": {
-    "@ezijing/vue-form": "^2.2.1",
+    "@ezijing/vue-form": "^2.2.4",
-    "axios": "^0.21.1",
+    "axios": "^0.26.1",
    "core-js": "^3.9.1",
    "driver.js": "^0.9.8",
-    "element-ui": "^2.15.1",
+    "element-ui": "^2.15.6",
-    "nuxt": "^2.15.3",
+    "nuxt": "^2.15.8",
    "qrcode.vue": "^1.7.0",
    "qs": "^6.10.1",
    "swiper": "^5.4.5",

--- a/pages/about/contact.vue
+++ b/pages/about/contact.vue
 <template>
-  <div class="news-content">
+  <app-frame :tabs="tabs">
-    <tab />
+    <div id="allmap"></div>
-    <contact-content />
+    <template #article>
-  </div>
+      <div class="article-contact">
+        <div class="tit">{{ txt.lxTit }}</div>
+        <div class="info" v-html="txt.contactTxt"></div>
+        <img src="https://webapp-pub.ezijing.com/project/mba/qrcode.jpg" style="width:150px;margin-top:20px" />
+        <div class="name" style="width:150px;text-align:center;padding-top:10px;">扫码加微直接沟通</div>
+      </div>
+    </template>
+  </app-frame>
 </template>
 <script>
-import tab from '../../components/about/tabNav'
+import appFrame from '@/components/appFrame'
-import contactContent from '../../components/about/contact'
+import navList from './navList.js'
 export default {
-  layout: 'normal',
  head: {
    title: '清控紫荆教育联系方式，紫荆教育电话，紫荆教育官方电话',
    meta: [
@@ -19,18 +26,88 @@ export default {
      }
    ]
  },
-  components: {
+  components: { appFrame },
-    tab,
+  data() {
-    contactContent
+    return {
+      tabs: navList,
+      txt: {
+        lxTit: '联系我们',
+        contactTxt: `地&nbsp;&nbsp;址：北京市海淀区中关村东路1号院清华科技园7号楼5层`,
+        follow: '关注我们',
+        followCodeT1: '紫荆企业微信',
+        followCodeT2: '紫荆官方微博',
+        followCodeT3: '紫荆官方抖音',
+        followCodeT4: '微信视频号'
+      }
+    }
+  },
+  mounted() {
+    if (process.browser) {
+      !(function(mapInit) {
+        var script = document.createElement('script')
+        script.type = 'text/javascript'
+        script.src = 'https://api.map.baidu.com/api?v=2.0&ak=Z9Km7UTGFI2fwRrpGp7Mji4ySDsvn30d&callback=mapinit'
+        window['mapinit'] = function() {
+          mapInit()
+        }
+        document.head.appendChild(script)
+      })(function() {
+        // 这里使用BMap
+        var map = new BMap.Map('allmap')
+        map.centerAndZoom(new BMap.Point(116.336323, 39.998848), 20)
+        map.enableScrollWheelZoom(true)
+        // 创建点标记
+        var marker1 = new BMap.Marker(new BMap.Point(116.336323, 39.998848))
+        map.addOverlay(marker1)
+      })
+    }
  }
 }
 </script>
 <style lang="scss" scoped>
-.news-content {
+#allmap {
-  width: 1200px;
+  width: 100%;
-  margin: 0 auto;
+  height: 320px;
-  padding-top: 63px;
+}
-  display: flex;
+.article-contact {
-  justify-content: space-between;
+  .tit {
+    font-size: 22px;
+    font-weight: 500;
+    line-height: 100%;
+  }
+  .info {
+    font-size: 16px;
+    line-height: 32px;
+    color: #333333;
+    margin-top: 20px;
+  }
+  .follow {
+    padding-top: 97px;
+    .tits {
+      font-size: 22px;
+      font-weight: 500;
+      line-height: 100%;
+      color: #333333;
+      margin-bottom: 30px;
+    }
+    ul {
+      display: flex;
+      li {
+        width: 130px;
+        margin-right: 80px;
+      }
+      img {
+        display: block;
+        width: 100%;
+      }
+      .name {
+        font-size: 16px;
+        margin-top: 22px;
+        text-align: center;
+        color: #666666;
+      }
+    }
+  }
 }
 </style>
--- a/pages/about/culture.vue
+++ b/pages/about/culture.vue
 <template>
-  <div class="culture-content">
+  <app-frame :tabs="tabs">
-    <tab />
+    <div class="video-box">
-    <culture-content />
+      <video
-  </div>
+        src="https://webapp-pub.ezijing.com/www/pc/%E7%B4%AB%E8%8D%86%E5%AE%A3%E4%BC%A0%E7%89%8720201224.mp4"
+        controls="controls"
+        preload="auto"
+      ></video>
+    </div>
+    <template #article>
+      <div class="article-honor">
+        <div class="tit">{{ txt.title }}</div>
+        <ul>
+          <li>
+            <div class="tits">{{ txt.item1H1 }}</div>
+            <div class="h2">{{ txt.item1H2 }}</div>
+            <div class="txts">
+              <div class="p" v-html="txt.item1Txt"></div>
+            </div>
+          </li>
+          <li>
+            <div class="tits">{{ txt.item2H1 }}</div>
+            <div class="h2">{{ txt.item2H2 }}</div>
+            <div class="txts">
+              <div class="p" v-html="txt.item2Txt"></div>
+            </div>
+          </li>
+          <li>
+            <div class="tits">{{ txt.item3H1 }}</div>
+            <div class="h2">{{ txt.item3H2 }}</div>
+            <div class="txts">
+              <div class="p" v-html="txt.item3Txt"></div>
+            </div>
+          </li>
+          <li>
+            <div class="tits">{{ txt.item4H1 }}</div>
+            <div class="h2">{{ txt.item4H2 }}</div>
+            <div class="txts">
+              <div class="p" v-html="txt.item4Txt"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </template>
+  </app-frame>
 </template>
 <script>
-import tab from '../../components/about/tabNav'
+import appFrame from '@/components/appFrame'
-import cultureContent from '../../components/about/culture'
+import navList from './navList.js'
 export default {
-  layout: 'normal',
  head: {
    title: '文化理念-清控紫荆教育MBA官网'
  },
-  components: {
+  components: { appFrame },
-    tab,
+  data() {
-    cultureContent
+    return {
+      tabs: navList,
+      txt: {
+        title: '文化理念',
+        item1H1: '使命',
+        item1H2: '让每个人都有改变的能力',
+        item1Txt: `优质教育是一个稀缺资源，优质的教育能够赋予学子优秀的能力。紫荆教育立志于此，整合国际优质教育资源，让每一个愿意奋斗与学习的学子，都能享受到优质教育资源，同时获得优秀的能力。<br />
+        让每个人都有改变的能力，作为紫荆教育的使命，立志于通过教育，赋予每一个学子获得改变的力量，通过改变，赢取未来竞争的主动。`,
+        item2H1: '愿景',
+        item2H2: '成为世界一流的终身教育机构',
+        item2Txt: `“世界一流的终身教育机构”是紫荆教育在未来5-10年的发展愿景，成为世界一流的终身教育机构，并以一流的教育资源。<br />
+        让每一个人都能享受到世界一流的教育成果，让每一个人在人生阶段的每个关键时刻都能获得应有的能力，让每一个人在紫荆教育都能享受到终身的学习与成长，并终身受益。`,
+        item3H1: '理念',
+        item3H2: '真⼼实意做教育',
+        item3Txt: `紫荆教育不断完善教学教务服务，严格要求每一个环节，真心实意对待每一个学生。紫荆教育不断增强课程研发、专业师资、技术平台、学术建设等核心能力，以满足院校的教学运营需求，真心实意对待每一所合作院校。<br />
+        紫荆教育不断加强企业、院校之间的联系，实现科学对接招聘要求，合理进行岗位匹配，最终促进人才资源的合理配置，真心实意对待合作企业。<br />
+        紫荆教育，是一家真正做教育，给学员、企业、学校提供真正价值的终身教育机构，最终实现学员、院校、企业三方的共同成长。`,
+        item4H1: '价值观',
+        item4H2: '诚信务实、开放创新、追求结果',
+        item4Txt: `紫荆教育坚持做人言行一致，做事诚实无欺，坚持诚信务实是立企之本、发展之基。<br />
+        同时，坚持客户需求导向，开放创新、勇于开拓、不断进取，永远保持对专业的追求和精进。<br />
+        以结果为导向，既是紫荆教育提供了衡量内聚力的尺度，也是对紫荆学员教育服务的责任要求。`
+      }
+    }
  }
 }
 </script>
 <style lang="scss" scoped>
-.culture-content {
+.video-box {
-  width: 1200px;
+  background: #000;
-  margin: 0 auto;
+  video {
-  padding-top: 63px;
+    width: 100%;
-  display: flex;
+    height: 100%;
-  justify-content: space-between;
+  }
+}
+.article-honor {
+  .tit {
+    font-size: 22px;
+    font-weight: 500;
+    line-height: 100%;
+    color: #424242;
+    margin-bottom: 30px;
+  }
+  li {
+    margin-top: 30px;
+    .tits {
+      font-size: 22px;
+      font-weight: bold;
+      line-height: 100%;
+      color: #424242;
+      margin-bottom: 12px;
+    }
+    .h2 {
+      height: 46px;
+      line-height: 100%;
+      border-bottom: 1px solid #98002e;
+      font-size: 20px;
+      line-height: 100%;
+      color: #424242;
+    }
+    .txts {
+      padding-top: 18px;
+      .p {
+        font-size: 16px;
+        line-height: 34px;
+        color: #424242;
+      }
+    }
+  }
+}
+.is-pc {
+  .video-box {
+    height: 552px;
+  }
+  .article-honor {
+    ul {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-column-gap: 60px;
+    }
+  }
+}
+.is-h5 {
+  .video-box {
+    height: 1.94rem;
+  }
 }
 </style>
--- a/pages/about/introduce.vue
+++ b/pages/about/introduce.vue
 <template>
-  <div class="intr-content">
+  <app-frame :tabs="tabs">
-    <tab />
+    <img src="https://webapp-pub.ezijing.com/www/pc/home/banner.png" class="banner" />
-    <intr-content />
+    <template #article>
-  </div>
+      <div class="article-introduce">
+        <div class="title">紫荆简介</div>
+        <div class="text-intr">
+          紫荆教育全称是清控紫荆（北京）教育科技股份有限公司，由清华控股有限公司于2015年以清华大学五道口金融学院相关知识产权创设而成。“紫荆”二字取自清华大学校花“紫荆花”，寓意“自强不息，向美而行”。<br />紫荆教育以教育为本、以科技赋能、以专业化为基础、以国际化为目标，通过研发和应用领先的教育科技，链接全球先进、前沿教育资源，提供高端国际学位教育、职业教育和在线教育解决方案，为我国培养具有国际化视野和全球化思维的复合型和产业型高质量人才。<br />紫荆教育与美国印第安纳大学、加州整合大学、康博斯维尔大学、玛丽伍德大学、索菲亚大学和瑞士高等教育集团等全球知名大学开展深度合作，推出在线MBA、金融学、组织领导力、应用心理学、儿童教育、服务业管理等硕士学位，培养了一大批具有国际先进管理和教育理念的杰出精英。<br />在产教融合方面，依托紫荆教育技术与产业资源优势，以国家教育政策为导向，以企业岗位人才需求为目标，协助院校应对行业变革、政策要求和办学新挑战，为院校提供产业化、国际化、数字化专业提升建设支持，优化人才培养方案，提升师资力量，共同开发精品课程资源，促进教学发展，整体提升专业建设水平，助力院校打造专业特色和优势。
+        </div>
+        <div class="garish-content">
+          <div class="flex-box">
+            <div class="li">
+              <div class="col-txt">
+                12<span>{{ txt.unit1 }}</span>
+              </div>
+              <div class="n-txt">{{ txt.itemText1 }}</div>
+            </div>
+            <div class="li">
+              <div class="col-txt">
+                522<span>{{ txt.unit2 }}</span>
+              </div>
+              <div class="n-txt">{{ txt.itemText2 }}</div>
+            </div>
+            <div class="li">
+              <div class="col-txt">600<span>+</span></div>
+              <div class="n-txt">{{ txt.itemText3 }}</div>
+            </div>
+            <div class="li">
+              <div class="col-txt">700<span>+</span></div>
+              <div class="n-txt">{{ txt.itemText4 }}</div>
+            </div>
+          </div>
+          <div class="flex-box mar-t-35">
+            <div class="li">
+              <div class="col-txt">1000<span>+</span></div>
+              <div class="n-txt">{{ txt.itemText5 }}</div>
+            </div>
+            <div class="li">
+              <div class="col-txt">4800<span>+</span></div>
+              <div class="n-txt">{{ txt.itemText6 }}</div>
+            </div>
+            <div class="li">
+              <div class="col-txt">6000<span>+</span></div>
+              <div class="n-txt">{{ txt.itemText7 }}</div>
+            </div>
+            <div class="li">
+              <div class="col-txt">
+                <span class="unit3Text">{{ txt.unit3Text }}</span
+                ><span>{{ txt.unit3 }}+</span>
+              </div>
+              <div class="n-txt">{{ txt.itemText8 }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="tab-content">
+          <div class="tab-nav">
+            <div :class="indexActive === 0 ? 'li active' : 'li'" @click="changeIndex(0)">
+              <div class="t1">{{ txt.tabBtn1Tit }}</div>
+              <div class="t2" v-html="txt.tabBtn1Txt"></div>
+            </div>
+            <div :class="indexActive === 1 ? 'li active' : 'li'" @click="changeIndex(1)">
+              <div class="t1">{{ txt.tabBtn2Tit }}</div>
+              <div class="t2" v-html="txt.tabBtn2Txt"></div>
+            </div>
+            <div :class="indexActive === 2 ? 'li active' : 'li'" @click="changeIndex(2)">
+              <div class="t1">{{ txt.tabBtn3Tit }}</div>
+              <div class="t2" v-html="txt.tabBtn3Txt"></div>
+            </div>
+          </div>
+          <div class="tab-con" v-if="indexActive === 0" v-html="txt.tabCon1"></div>
+          <div class="tab-con tab-con2" v-if="indexActive === 1" v-html="txt.tabCon2"></div>
+          <div class="tab-con tab-con3" v-if="indexActive === 2" v-html="txt.tabCon3"></div>
+        </div>
+      </div>
+    </template>
+  </app-frame>
 </template>
 <script>
-import tab from '../../components/about/tabNav'
+import appFrame from '@/components/appFrame'
-import intrContent from '../../components/about/introduce'
+import navList from './navList.js'
 export default {
-  layout: 'normal',
  head: {
    title: '紫荆教育MBA官网，清控紫荆教育简介，紫荆教育详细介绍，紫荆教育怎么样',
    meta: [
@@ -19,18 +90,204 @@ export default {
      }
    ]
  },
-  components: {
+  components: { appFrame },
-    tab,
+  data() {
-    intrContent
+    return {
+      tabs: navList,
+      indexActive: 0,
+      txt: {
+        itemText1: '国际合作院校',
+        itemText2: '线上课程',
+        itemText3: '金融机构/协会/政府/学校',
+        itemText4: '国内外师资团队',
+        itemText5: '学术直播课',
+        itemText6: '总研发课时',
+        itemText7: '学位学员',
+        itemText8: '人次学习',
+        unit1: '所',
+        unit2: '门',
+        unit3Text: '500',
+        unit3: '万',
+        tabBtn1Tit: '专业化',
+        tabBtn2Tit: '科技化',
+        tabBtn3Tit: '国际化',
+        tabBtn1Txt: '长期思维&nbsp;&nbsp;严谨治学',
+        tabBtn2Txt: '源自清华&nbsp;&nbsp;持续投入',
+        tabBtn3Txt: '放眼全球&nbsp;&nbsp;国际合作',
+        tabCon1: `<span>9</span>年深耕教育产业，完善的教学管理体系和内控体系 ;  <br />
+        <span>12</span>所国际合作大学，<span>16</span>个国际学位项目，互认学分 ; <br />
+        <span>600+</span>金融机构政府、协会等合作单位 ;   <br />
+        <span>50+</span>课程研发人员，<span>700+</span>师资团队，<span>4800+</span>总研发课时。`,
+        tabCon2: `源自清华，持续投入<span>50+</span>技术研发团队，<span>1亿+</span>累计研发投入 ;<br />
+        <span>500万+</span>总学习人次，<span>24</span>小时在线 ;<br />
+        <span>1000+</span>次直播，<span>10000+</span>题库 ;<br />
+        大数据智能学习分析、作业评判、智能化营销数据分配。<br />`,
+        tabCon3: `<span>AACSB、EQUIS、MSCHE、ACE、HLC、WASC</span>等认证;<br />
+        <span>30</span>余位哈佛、清华、哥伦比亚等国际一流大学人才组成的国际化团队 ;<br />
+        <span>40%</span>员工有研究生学历 ;<br />
+        <span>5</span>大洲<span>16</span>个国家/地区国际校友网络，覆盖全国380+省、市、自治区及行政特区。`
+      }
+    }
+  },
+  methods: {
+    changeIndex(n) {
+      this.indexActive = n
+    }
  }
 }
 </script>
 <style lang="scss" scoped>
-.intr-content {
+.article-introduce {
-  width: 1200px;
+  .title {
-  margin: 0 auto;
+    font-size: 22px;
-  padding-top: 63px;
+    font-weight: 500;
-  display: flex;
+    color: #424242;
-  justify-content: space-between;
+    margin-bottom: 15px;
+  }
+  .text-intr {
+    font-size: 16px;
+    line-height: 32px;
+    color: #424242;
+  }
+  .garish-content {
+    padding-top: 66px;
+    .flex-box {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      &.mar-t-35 {
+        padding-top: 35px;
+      }
+      .li {
+        box-sizing: border-box;
+        padding-top: 6px;
+        // height: 70px;
+        border-right: 1px solid #c3c3c3;
+        &:last-child {
+          border: none;
+        }
+        .col-txt {
+          font-size: 36px;
+          font-weight: 500;
+          line-height: 30px;
+          color: #aa1941;
+          text-align: center;
+          .unit3Text {
+            font-size: 36px;
+          }
+          span {
+            font-size: 24px;
+          }
+        }
+        .n-txt {
+          font-size: 16px;
+          font-family: auto;
+          // line-height: 34px;
+          text-align: center;
+          color: #666666;
+        }
+      }
+    }
+  }
+  .tab-content {
+    padding-top: 80px;
+    .tab-nav {
+      display: flex;
+      justify-content: space-between;
+      .li {
+        width: 280px;
+        height: 150px;
+        box-sizing: border-box;
+        padding-top: 38px;
+        background: #fbfbfb;
+        // margin-right: 16px;
+        cursor: pointer;
+        &.active {
+          background: #ffffff;
+          box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
+          position: relative;
+          &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 8px;
+            background: #aa1941;
+          }
+        }
+        .t1 {
+          text-align: center;
+          line-height: 100%;
+          font-size: 24px;
+          font-weight: 500;
+          color: #aa1941;
+        }
+        .t2 {
+          font-size: 0.1rem;
+          line-height: 100%;
+          color: #424242;
+          margin-top: 16px;
+          text-align: center;
+          font-family: auto;
+        }
+      }
+    }
+    .tab-con {
+      box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
+      box-sizing: border-box;
+      padding: 20px 48px;
+      margin-top: 40px;
+      position: relative;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 40px;
+      color: #333333;
+      ::v-deep {
+        span {
+          color: rgba(170, 25, 65, 1);
+          font-size: 28px;
+          font-weight: bold;
+        }
+      }
+      &.tab-con2 {
+        &::after {
+          top: -15px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+      &.tab-con3 {
+        &::after {
+          top: -15px;
+          left: auto;
+          right: 140px;
+        }
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        top: -15px;
+        left: 140px;
+        width: 0;
+        height: 0;
+        border-left: 15px solid transparent;
+        border-right: 15px solid transparent;
+        border-bottom: 15px solid #fff;
+      }
+    }
+  }
+}
+.is-h5 {
+  .article-introduce {
+    .garish-content {
+      .flex-box {
+        grid-template-columns: repeat(2, 1fr);
+        grid-row-gap: 35px;
+        .li:nth-child(even) {
+          border: 0;
+        }
+      }
+    }
+  }
 }
 </style>
--- a/pages/about/lesson/_id.vue
+++ b/pages/about/lesson/_id.vue
 <template>
-  <div class="news-content">
+  <article-detail :tabs="tabs" @back="$router.push('/about/lesson')"></article-detail>
-    <tab />
-    <div class="detail-content-box">
-      <div class="back-btn" @click="$router.go(-1)">
-        <div class="el-icon-arrow-left"></div>
-        <div class="text">返回</div>
-      </div>
-      <div class="times">{{ formatDate(data.start_time) }}</div>
-      <div class="titles">{{ data.title }}</div>
-      <div class="article-content" v-html="data.content"></div>
-      <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">
-            <a :target="item.uri !== '' ? '_blank' : '_self'" :href="item.uri ? item.uri : `/about/lesson/${item.id}`">
-              <img :src="item.web_img_uri" alt="" />
-              <div class="dec">{{ item.title }}</div>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div class="more-btn" @click="$router.push({ path: '/about/lesson' })">查看更多</div>
-    </div>
-  </div>
 </template>
 <script>
-import tab from '@/components/about/tabNav'
+import ArticleDetail from '@/components/ArticleDetail'
+import navList from '../navList.js'
 export default {
-  layout: 'normal',
+  head: { title: '公开课-清控紫荆教育MBA官网' },
-  components: { tab },
+  components: { ArticleDetail },
-  head: {
-    title: '公开课-清控紫荆教育MBA官网'
-  },
  data() {
    return {
-      data: {},
+      tabs: navList
-      listData: []
-    }
-  },
-  async fetch() {
-    this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
-      return res.data
-    })
-    const params = {
-      // project_id: process.env.newProjectId,
-      project_id: '6800242743894343680',
-      type_tag: 'article_publish_class',
-      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
-    })
-  },
-  mounted() {},
-  methods: {
-    goPage(item) {
-      if (item.source === '') {
-        // this.$router.push({
-        //   path: '/about/news-detail',
-        //   query: {
-        //     id: item.id
-        //   }
-        // })
-        window.open(`${window.location.origin}/about/news-detail?id=${item.id}`)
-      } else {
-        window.open(item.source)
-      }
-    },
-    formatDate(value) {
-      const date = new Date(value * 1000)
-      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    }
  }
 }
 </script>
-<style lang="scss" scoped>
-.news-content {
-  width: 1200px;
-  margin: 0 auto;
-  padding-top: 63px;
-  display: flex;
-  justify-content: space-between;
-}
-.detail-content-box {
-  width: 1000px;
-  background: #fff;
-  padding: 50px 50px 94px;
-  box-sizing: border-box;
-  margin-bottom: 100px;
-  .back-btn {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    .el-icon-arrow-left {
-      color: rgba(153, 153, 153, 1);
-      font-size: 16px;
-    }
-    .text {
-      font-size: 16px;
-      color: #999999;
-    }
-  }
-  .times {
-    font-size: 16px;
-    line-height: 100%;
-    margin: 35px 0 16px;
-    color: #999999;
-  }
-  .titles {
-    font-size: 32px;
-    font-weight: bold;
-    color: #141414;
-    // height: 62px;
-    border-bottom: 1px solid #e6e6e6;
-    // line-height: 100%;
-    padding-bottom: 10px;
-  }
-  .article-content {
-    padding-top: 25px;
-    font-size: 14px;
-    line-height: 28px;
-    color: #333333;
-    ::v-deep img {
-      max-width: 100%;
-    }
-  }
-  .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>
--- a/pages/about/lesson/index.vue
+++ b/pages/about/lesson/index.vue
 <template>
-  <div class="news-content">
+  <app-frame :tabs="tabs">
-    <tab />
+    <img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
-    <div class="news-content-box">
+    <template #article>
-      <img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" alt="" class="banner" />
+      <article-list v-bind="listOptions"></article-list>
-      <ul class="list-content">
+    </template>
-        <template v-for="(item, index) in listData">
+  </app-frame>
-          <li :key="index">
-            <app-link :item="{ news: { data: item, path: '/about/lesson' } }">
-              <img :src="item.web_img_uri" alt="" />
-              <div class="right-con">
-                <div class="time">{{ formatDate(item.start_time) }}</div>
-                <div class="title">{{ item.title }}</div>
-                <div class="text">{{ item.abstract }}</div>
-              </div>
-            </app-link>
-          </li>
-        </template>
-      </ul>
-      <div class="pages-box">
-        <el-pagination
-          layout="prev, pager, next"
-          @current-change="handleCurrentChange"
-          :page-size="limit"
-          :total="total"
-        >
-        </el-pagination>
-      </div>
-    </div>
-  </div>
 </template>
 <script>
-import appLink from '@/components/Link'
+import appFrame from '@/components/appFrame'
-import tab from '@/components/about/tabNav'
+import navList from '../navList.js'
+import ArticleList from '@/components/ArticleList'
+import { getArticleList } from '@/api'
 export default {
-  layout: 'normal',
-  components: { tab, appLink },
  head: {
    title: '公开课-清控紫荆教育MBA官网'
  },
+  components: { appFrame, ArticleList },
  data() {
    return {
-      listData: [],
+      tabs: navList
-      currentPaeg: 1,
-      total: 0,
-      limit: 10
    }
  },
-  async fetch() {
+  computed: {
-    const params = {
+    listOptions() {
-      // project_id: process.env.newProjectId,
+      return {
-      project_id: '6800242743894343680',
+        remote: {
-      type_tag: this.$route.query.type || 'article_publish_class',
+          httpRequest: getArticleList,
-      page: this.currentPaeg,
+          params: {
-      limit: 10
+            // project_id: process.env.newProjectId,
-    }
+            project_id: '6800242743894343680',
-    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
+            type_tag: 'article_publish_class'
-      this.total = res.data.total
-      return res.data.data
-    })
-  },
-  methods: {
-    handleCurrentChange(num) {
-      this.initData(num)
-    },
-    initData(num) {
-      const params = {
-        project_id: process.env.newProjectId,
-        type_tag: this.$route.query.type || 'article_publish_class',
-        page: num,
-        limit: 10
-      }
-      this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
-        this.total = parseInt(res.data.total)
-        this.listData = res.data.data
-      })
-    },
-    formatDate(value) {
-      const date = new Date(value * 1000)
-      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.pages-box {
-  display: flex;
-  padding-bottom: 50px;
-  background: #fff;
-  justify-content: center;
-}
-.news-content {
-  width: 1200px;
-  margin: 0 auto;
-  padding-top: 63px;
-  display: flex;
-  justify-content: space-between;
-}
-.news-content-box {
-  width: 1000px;
-  padding-bottom: 100px;
-  display: block;
-  .banner {
-    width: 100%;
-    display: block;
-  }
-  .list-content {
-    width: 1000px;
-    padding: 50px;
-    background: #fff;
-    li {
-      border-bottom: 1px solid #e6e6e6;
-      margin-bottom: 20px;
-      padding-bottom: 36px;
-      cursor: pointer;
-      ::v-deep a {
-        display: flex;
-        flex-wrap: wrap;
-        height: fit-content;
-      }
-      &:hover {
-        .right-con {
-          background: rgba(241, 241, 241, 0.6);
-          .text {
-            color: #141414;
          }
-        }
+        },
-      }
+        to(item) {
-      img {
+          return { name: 'about-lesson-id', params: { id: item.id } }
-        width: 320px;
-        height: 100%;
-        display: block;
-      }
-      .right-con {
-        width: 550px;
-        margin-left: 15px;
-        padding-left: 15px;
-        .time {
-          font-size: 16px;
-          font-weight: 300;
-          line-height: 100%;
-          color: #aa1941;
-          // padding-top: 13px;
-        }
-        .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: 2;
-          -webkit-box-orient: vertical;
-        }
-        .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: 2;
-          -webkit-box-orient: vertical;
        }
      }
    }
  }
 }
-</style>
+</script>
--- a/pages/about/message/_id.vue
+++ b/pages/about/message/_id.vue
 <template>
-  <div class="news-content">
+  <article-detail :tabs="tabs" @back="$router.push('/about/message')"></article-detail>
-    <tab />
-    <div class="detail-content-box">
-      <div class="back-btn" @click="$router.go(-1)">
-        <div class="el-icon-arrow-left"></div>
-        <div class="text">返回</div>
-      </div>
-      <div class="times">{{ formatDate(data.start_time) }}</div>
-      <div class="titles">{{ data.title }}</div>
-      <div class="article-content" v-html="data.content"></div>
-      <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">
-            <a :target="item.uri !== '' ? '_blank' : '_self'" :href="item.uri ? item.uri : `/about/message/${item.id}`">
-              <img :src="item.web_img_uri" alt="" />
-              <div class="dec">{{ item.title }}</div>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div class="more-btn" @click="$router.push({ path: '/about/message' })">查看更多</div>
-    </div>
-  </div>
 </template>
 <script>
-import tab from '@/components/about/tabNav'
+import ArticleDetail from '@/components/ArticleDetail'
+import navList from '../navList.js'
 export default {
-  layout: 'normal',
-  components: { tab },
  head: {
    title: '校长寄语-清控紫荆教育MBA官网'
  },
+  components: { ArticleDetail },
  data() {
    return {
-      data: {},
+      tabs: navList
-      listData: []
-    }
-  },
-  async fetch() {
-    this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
-      return res.data
-    })
-    const params = {
-      project_id: '6800242743894343680',
-      type_tag: 'img_text_school',
-      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
-    })
-  },
-  mounted() {},
-  methods: {
-    goPage(item) {
-      if (item.source === '') {
-        // this.$router.push({
-        //   path: '/about/news-detail',
-        //   query: {
-        //     id: item.id
-        //   }
-        // })
-        window.open(`${window.location.origin}/about/news-detail?id=${item.id}`)
-      } else {
-        window.open(item.source)
-      }
-    },
-    formatDate(value) {
-      const date = new Date(value * 1000)
-      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    }
  }
 }
 </script>
-<style lang="scss" scoped>
-.news-content {
-  width: 1200px;
-  margin: 0 auto;
-  padding-top: 63px;
-  display: flex;
-  justify-content: space-between;
-}
-.detail-content-box {
-  width: 1000px;
-  background: #fff;
-  padding: 50px 50px 94px;
-  box-sizing: border-box;
-  margin-bottom: 100px;
-  .back-btn {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    .el-icon-arrow-left {
-      color: rgba(153, 153, 153, 1);
-      font-size: 16px;
-    }
-    .text {
-      font-size: 16px;
-      color: #999999;
-    }
-  }
-  .times {
-    font-size: 16px;
-    line-height: 100%;
-    margin: 35px 0 16px;
-    color: #999999;
-  }
-  .titles {
-    font-size: 32px;
-    font-weight: bold;
-    color: #141414;
-    // height: 62px;
-    border-bottom: 1px solid #e6e6e6;
-    // line-height: 100%;
-    padding-bottom: 10px;
-  }
-  .article-content {
-    padding-top: 25px;
-    font-size: 14px;
-    line-height: 28px;
-    color: #333333;
-    ::v-deep img {
-      max-width: 100%;
-    }
-  }
-  .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>
--- a/pages/about/message/index.vue
+++ b/pages/about/message/index.vue
 <template>
-  <div class="news-content">
+  <app-frame :tabs="tabs">
-    <tab />
+    <img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
-    <div class="news-content-box">
+    <template #article>
-      <img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" alt="" class="banner" />
+      <article-list v-bind="listOptions"></article-list>
-      <ul class="list-content">
+    </template>
-        <template v-for="(item, index) in listData">
+  </app-frame>
-          <li :key="index">
-            <app-link :item="{ news: { data: item, path: '/about/message' } }">
-              <img :src="item.web_img_uri" alt="" />
-              <div class="right-con">
-                <div class="time">{{ formatDate(item.start_time) }}</div>
-                <div class="title">{{ item.title }}</div>
-                <div class="text">{{ item.abstract }}</div>
-              </div>
-            </app-link>
-          </li>
-        </template>
-      </ul>
-      <div class="pages-box">
-        <el-pagination
-          layout="prev, pager, next"
-          @current-change="handleCurrentChange"
-          :page-size="limit"
-          :total="total"
-        >
-        </el-pagination>
-      </div>
-    </div>
-  </div>
 </template>
 <script>
-import appLink from '@/components/Link'
+import appFrame from '@/components/appFrame'
-import tab from '@/components/about/tabNav'
+import navList from '../navList.js'
+import ArticleList from '@/components/ArticleList'
+import { getArticleList } from '@/api'
 export default {
-  layout: 'normal',
-  components: { tab, appLink },
  head: {
    title: '校长寄语-清控紫荆教育MBA官网'
  },
+  components: { appFrame, ArticleList },
  data() {
    return {
-      listData: [],
+      tabs: navList
-      currentPaeg: 1,
-      total: 0,
-      limit: 10
    }
  },
-  async fetch() {
+  computed: {
-    const params = {
+    listOptions() {
-      // project_id: process.env.newProjectId,
+      return {
-      project_id: '6800242743894343680',
+        remote: {
-      type_tag: this.$route.query.type || 'img_text_school',
+          httpRequest: getArticleList,
-      page: this.currentPaeg,
+          params: {
-      limit: 10
+            // project_id: process.env.newProjectId,
-    }
+            project_id: '6800242743894343680',
-    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
+            type_tag: 'img_text_school'
-      this.total = res.data.total
-      return res.data.data
-    })
-  },
-  methods: {
-    handleCurrentChange(num) {
-      this.initData(num)
-    },
-    initData(num) {
-      const params = {
-        project_id: process.env.newProjectId,
-        type_tag: this.$route.query.type || 'img_text_school',
-        page: num,
-        limit: 10
-      }
-      this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
-        this.total = parseInt(res.data.total)
-        this.listData = res.data.data
-      })
-    },
-    formatDate(value) {
-      const date = new Date(value * 1000)
-      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.pages-box {
-  display: flex;
-  padding-bottom: 50px;
-  background: #fff;
-  justify-content: center;
-}
-.news-content {
-  width: 1200px;
-  margin: 0 auto;
-  padding-top: 63px;
-  display: flex;
-  justify-content: space-between;
-}
-.news-content-box {
-  width: 1000px;
-  padding-bottom: 100px;
-  display: block;
-  .banner {
-    width: 100%;
-    display: block;
-  }
-  .list-content {
-    width: 1000px;
-    padding: 50px;
-    background: #fff;
-    li {
-      border-bottom: 1px solid #e6e6e6;
-      margin-bottom: 20px;
-      padding-bottom: 36px;
-      cursor: pointer;
-      ::v-deep a {
-        display: flex;
-        flex-wrap: wrap;
-        height: fit-content;
-      }
-      &:hover {
-        .right-con {
-          background: rgba(241, 241, 241, 0.6);
-          .text {
-            color: #141414;
          }
-        }
+        },
-      }
+        to(item) {
-      img {
+          return { name: 'about-message-id', params: { id: item.id } }
-        width: 320px;
-        height: 100%;
-        display: block;
-      }
-      .right-con {
-        width: 550px;
-        margin-left: 15px;
-        padding-left: 15px;
-        .time {
-          font-size: 16px;
-          font-weight: 300;
-          line-height: 100%;
-          color: #aa1941;
-          // padding-top: 13px;
-        }
-        .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: 2;
-          -webkit-box-orient: vertical;
-        }
-        .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: 2;
-          -webkit-box-orient: vertical;
        }
      }
    }
  }
 }
-</style>
+</script>
--- a/pages/about/navList.js
+++ b/pages/about/navList.js
+export default [
+  {
+    name: '紫荆简介',
+    path: '/about/introduce'
+  },
+  {
+    name: '文化理念',
+    path: '/about/culture'
+  },
+  // {
+  //   name: '新闻中心',
+  //   path: '/about/news',
+  // },
+  {
+    name: '校长寄语',
+    path: '/about/message'
+  },
+  {
+    name: '公开课',
+    path: '/about/lesson'
+  },
+  {
+    name: '联系我们',
+    path: '/about/contact'
+  }
+  // {
+  //   name: '招聘信息',
+  //   path: '',
+  // }
+]
--- a/pages/alumni/outstanding/_id.vue
+++ b/pages/alumni/outstanding/_id.vue
 <template>
-  <div class="detail-content-box">
+  <article-detail :tabs="tabs" @back="$router.push('/alumni/outstanding')"></article-detail>
-    <app-frame :data="frameParams">
-      <div class="content-box">
-        <div class="back-btn" @click="$router.go(-1)">
-          <div class="el-icon-arrow-left"></div>
-          <div class="text">返回</div>
-        </div>
-        <div class="times">{{ formatDate(data.start_time) }}</div>
-        <div class="titles">{{ data.title }}</div>
-        <div class="article-content" v-html="data.content"></div>
-        <recommend />
-      </div>
-    </app-frame>
-  </div>
 </template>
 <script>
-import appFrame from '@/components/appFrame'
+import ArticleDetail from '@/components/ArticleDetail'
-import recommend from '@/components/recommend'
 export default {
-  layout: 'normal',
  head: {
    title: '定期为紫荆教育校友带来专享福利',
-    meta: [
+    meta: [{ hid: 'keywords', name: 'keywords', content: '紫荆教育校友福利' }]
-      {
-        hid: 'keywords',
-        name: 'keywords',
-        content: '紫荆教育校友福利'
-      }
-    ]
-  },
-  components: {
-    appFrame,
-    recommend
  },
+  components: { ArticleDetail },
  data() {
    return {
-      frameParams: {
+      tabs: [
-        slider: [
+        { name: '校友故事', path: '/alumni/sharing' },
-          {
+        { name: '校友福利', path: '/alumni/outstanding' }
-            name: '校友故事',
+      ]
-            path: '/alumni/sharing',
-            pathActive: ['/alumni/sharing']
-          },
-          {
-            name: '校友福利',
-            path: '/alumni/outstanding',
-            pathActive: ['/alumni/outstanding']
-          }
-        ]
-      },
-      data: {},
-      listData: []
-    }
-  },
-  async fetch() {
-    this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
-      return res.data
-    })
-  },
-  mounted() {},
-  methods: {
-    formatDate(value) {
-      const date = new Date(value * 1000)
-      console.log(date.getMonth())
-      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    }
  }
 }
 </script>
-<style lang="scss" scoped>
-.detail-content-box {
-  // width: 1000px;
-  // background: #fff;
-  // box-sizing: border-box;
-  // margin-bottom: 100px;
-  .content-box {
-    padding: 50px 50px 94px;
-  }
-  .back-btn {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    .el-icon-arrow-left {
-      color: rgba(153, 153, 153, 1);
-      font-size: 16px;
-    }
-    .text {
-      font-size: 16px;
-      color: #999999;
-    }
-  }
-  .times {
-    font-size: 16px;
-    line-height: 100%;
-    margin: 35px 0 16px;
-    color: #999999;
-  }
-  .titles {
-    font-size: 32px;
-    font-weight: bold;
-    color: #141414;
-    // height: 62px;
-    border-bottom: 1px solid #e6e6e6;
-    padding-bottom: 10px;
-    // line-height: 100%;
-  }
-  .article-content {
-    padding-top: 25px;
-    font-size: 14px;
-    line-height: 28px;
-    color: #333333;
-    ::v-deep img {
-      max-width: 100%;
-    }
-  }
-  .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>
--- a/pages/alumni/outstanding/index.vue
+++ b/pages/alumni/outstanding/index.vue
 <template>
-  <app-frame :data="frameParams">
+  <app-frame :tabs="tabs">
-    <article-list v-bind="listOptions"></article-list>
+    <img src="https://webapp-pub.ezijing.com/project/marywood/alumni_banner.jpg" class="banner" />
+    <template #article>
+      <article-list v-bind="listOptions"></article-list>
+    </template>
  </app-frame>
 </template>
 <script>
@@ -8,7 +11,6 @@ import appFrame from '@/components/appFrame'
 import ArticleList from '@/components/ArticleList'
 import { getArticleList } from '@/api'
 export default {
-  layout: 'normal',
  head: {
    title: '定期为紫荆教育校友带来专享福利',
    meta: [
@@ -19,37 +21,13 @@ export default {
      }
    ]
  },
-  components: {
+  components: { appFrame, ArticleList },
-    appFrame,
-    ArticleList
-  },
-  // async fetch() {
-  //   const params = { project_id: process.env.newProjectId, type_tag: 'kelley_alumni_share' }
-  //   this.newsList = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
-  // },
  data() {
    return {
-      newsList: [],
+      tabs: [
-      frameParams: {
+        { name: '校友故事', path: '/alumni/sharing' },
-        banner: 'https://webapp-pub.ezijing.com/project/marywood/alumni_banner.jpg',
+        { name: '校友福利', path: '/alumni/outstanding' }
-        slider: [
+      ]
-          {
-            name: '校友故事',
-            path: '/alumni/sharing',
-            pathActive: ['/alumni/sharing']
-          },
-          {
-            name: '校友福利',
-            path: '/alumni/outstanding',
-            pathActive: ['/alumni/outstanding']
-          }
-        ]
-      }
-    }
-  },
-  methods: {
-    handleClick(item) {
-      this.$router.push({ name: 'alumni-outstanding-id', params: { id: item.id } })
    }
  },
  computed: {
@@ -60,15 +38,10 @@ export default {
          params: { project_id: process.env.newProjectId, type_tag: 'article_xylf' }
        },
        to(item) {
-          return `/alumni/outstanding/${item.id}`
+          return { name: 'alumni-outstanding-id', params: { id: item.id } }
        }
      }
    }
  }
 }
 </script>
-<style lang="scss" scoped>
-.news-item {
-  padding-top: 43px;
-}
-</style>
--- a/pages/alumni/sharing/_id.vue
+++ b/pages/alumni/sharing/_id.vue
 <template>
-  <div class="detail-content-box">
+  <article-detail :tabs="tabs" @back="$router.push('/alumni/sharing')"></article-detail>
-    <app-frame :data="frameParams">
-      <div class="content-box">
-        <div class="back-btn" @click="$router.go(-1)">
-          <div class="el-icon-arrow-left"></div>
-          <div class="text">返回</div>
-        </div>
-        <div class="times">{{ formatDate(data.start_time) }}</div>
-        <div class="titles">{{ data.title }}</div>
-        <div class="article-content" v-html="data.content"></div>
-        <recommend />
-      </div>
-    </app-frame>
-  </div>
 </template>
 <script>
-import appFrame from '@/components/appFrame'
+import ArticleDetail from '@/components/ArticleDetail'
-import recommend from '@/components/recommend'
 export default {
-  layout: 'normal',
  head: {
    title: '分享紫荆教育6000+优秀校友的精彩故事',
-    meta: [
+    meta: [{ hid: 'keywords', name: 'keywords', content: '紫荆教育校友故事' }]
-      {
-        hid: 'keywords',
-        name: 'keywords',
-        content: '紫荆教育校友故事'
-      }
-    ]
-  },
-  components: {
-    appFrame,
-    recommend
  },
+  components: { ArticleDetail },
  data() {
    return {
-      frameParams: {
+      tabs: [
-        slider: [
+        { name: '校友故事', path: '/alumni/sharing' },
-          {
+        { name: '校友福利', path: '/alumni/outstanding' }
-            name: '校友故事',
+      ]
-            path: '/alumni/sharing',
-            pathActive: ['/alumni/sharing']
-          },
-          {
-            name: '校友福利',
-            path: '/alumni/outstanding',
-            pathActive: ['/alumni/outstanding']
-          }
-        ]
-      },
-      data: {},
-      listData: []
-    }
-  },
-  async fetch() {
-    this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
-      return res.data
-    })
-  },
-  mounted() {},
-  methods: {
-    formatDate(value) {
-      const date = new Date(value * 1000)
-      console.log(date.getMonth())
-      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    }
  }
 }
 </script>
-<style lang="scss" scoped>
-.detail-content-box {
-  // width: 1000px;
-  // background: #fff;
-  // box-sizing: border-box;
-  // margin-bottom: 100px;
-  .content-box {
-    padding: 50px 50px 94px;
-  }
-  .back-btn {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    .el-icon-arrow-left {
-      color: rgba(153, 153, 153, 1);
-      font-size: 16px;
-    }
-    .text {
-      font-size: 16px;
-      color: #999999;
-    }
-  }
-  .times {
-    font-size: 16px;
-    line-height: 100%;
-    margin: 35px 0 16px;
-    color: #999999;
-  }
-  .titles {
-    font-size: 32px;
-    font-weight: bold;
-    color: #141414;
-    // height: 62px;
-    border-bottom: 1px solid #e6e6e6;
-    padding-bottom: 10px;
-    // line-height: 100%;
-  }
-  .article-content {
-    padding-top: 25px;
-    font-size: 14px;
-    line-height: 28px;
-    color: #333333;
-    ::v-deep img {
-      max-width: 100%;
-    }
-  }
-  .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>
--- a/pages/alumni/sharing/index.vue
+++ b/pages/alumni/sharing/index.vue
 <template>
-  <app-frame :data="frameParams">
+  <app-frame :tabs="tabs">
-    <article-list v-bind="listOptions"></article-list>
+    <img src="https://webapp-pub.ezijing.com/project/marywood/alumni_banner.jpg" class="banner" />
+    <template #article>
+      <article-list v-bind="listOptions"></article-list>
+    </template>
  </app-frame>
 </template>
 <script>
@@ -8,48 +11,17 @@ import appFrame from '@/components/appFrame'
 import ArticleList from '@/components/ArticleList'
 import { getArticleList } from '@/api'
 export default {
-  layout: 'normal',
  head: {
    title: '分享紫荆教育6000+优秀校友的精彩故事',
-    meta: [
+    meta: [{ hid: 'keywords', name: 'keywords', content: '紫荆教育校友故事' }]
-      {
-        hid: 'keywords',
-        name: 'keywords',
-        content: '紫荆教育校友故事'
-      }
-    ]
-  },
-  components: {
-    appFrame,
-    ArticleList
  },
-  // async fetch() {
+  components: { appFrame, ArticleList },
-  //   const params = { project_id: process.env.newProjectId, type_tag: 'kelley_alumni_share' }
-  //   this.newsList = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
-  // },
  data() {
    return {
-      newsList: [],
+      tabs: [
-      frameParams: {
+        { name: '校友故事', path: '/alumni/sharing' },
-        banner: 'https://webapp-pub.ezijing.com/project/marywood/alumni_banner.jpg',
+        { name: '校友福利', path: '/alumni/outstanding' }
-        slider: [
+      ]
-          {
-            name: '校友故事',
-            path: '/alumni/sharing',
-            pathActive: ['/alumni/sharing']
-          },
-          {
-            name: '校友福利',
-            path: '/alumni/outstanding',
-            pathActive: ['/alumni/outstanding']
-          }
-        ]
-      }
-    }
-  },
-  methods: {
-    handleClick(item) {
-      this.$router.push({ name: 'alumni-sharing-id', params: { id: item.id } })
    }
  },
  computed: {
@@ -60,7 +32,7 @@ export default {
          params: { project_id: process.env.newProjectId, type_tag: 'article_alumni' }
        },
        to(item) {
-          return `/alumni/sharing/${item.id}`
+          return { name: 'alumni-sharing-id', params: { id: item.id } }
        }
      }
    }

--- a/pages/apply/master/_id.vue
+++ b/pages/apply/master/_id.vue
 <template>
-  <div class="detail-content-box">
+  <article-detail :tabs="tabs" @back="$router.push('/apply/master')"></article-detail>
-    <app-frame :data="frameParams">
-      <div class="content-box">
-        <div class="back-btn" @click="$router.push('/apply/master')">
-          <div class="el-icon-arrow-left"></div>
-          <div class="text">返回</div>
-        </div>
-        <div class="times">{{ formatDate(data.start_time) }}</div>
-        <div class="titles">{{ data.title }}</div>
-        <div class="article-content" v-html="data.content"></div>
-        <recommend />
-      </div>
-    </app-frame>
-  </div>
 </template>
 <script>
-import appFrame from '@/components/appFrame'
+import ArticleDetail from '@/components/ArticleDetail'
-import recommend from '@/components/recommend'
 export default {
-  layout: 'normal',
  head: {
    title: '紫荆教育在职研申请攻略_在职研备考技巧_快速获得研究生学历',
    meta: [
@@ -30,144 +17,14 @@ export default {
      }
    ]
  },
-  components: {
+  components: { ArticleDetail },
-    appFrame,
-    recommend
-  },
  data() {
    return {
-      frameParams: {
+      tabs: [
-        slider: [
+        { name: 'MBA申请攻略', path: '/apply/mba' },
-          {
+        { name: '在职研申请攻略', path: '/apply/master' }
-            name: 'MBA申请攻略',
+      ]
-            path: '/apply/mba',
-            pathActive: ['/apply/mba']
-          },
-          {
-            name: '在职研申请攻略',
-            path: '/apply/master',
-            pathActive: ['/apply/master']
-          }
-        ]
-      },
-      data: {},
-      listData: []
-    }
-  },
-  async fetch() {
-    this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
-      return res.data
-    })
-  },
-  methods: {
-    formatDate(value) {
-      const date = new Date(value * 1000)
-      console.log(date.getMonth())
-      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    }
  }
 }
 </script>
-<style lang="scss" scoped>
-.detail-content-box {
-  // width: 1000px;
-  // background: #fff;
-  // box-sizing: border-box;
-  // margin-bottom: 100px;
-  .content-box {
-    padding: 50px 50px 94px;
-  }
-  .back-btn {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    .el-icon-arrow-left {
-      color: rgba(153, 153, 153, 1);
-      font-size: 16px;
-    }
-    .text {
-      font-size: 16px;
-      color: #999999;
-    }
-  }
-  .times {
-    font-size: 16px;
-    line-height: 100%;
-    margin: 35px 0 16px;
-    color: #999999;
-  }
-  .titles {
-    font-size: 32px;
-    font-weight: bold;
-    color: #141414;
-    // height: 62px;
-    border-bottom: 1px solid #e6e6e6;
-    padding-bottom: 10px;
-    // line-height: 100%;
-  }
-  .article-content {
-    padding-top: 25px;
-    font-size: 14px;
-    line-height: 28px;
-    color: #333333;
-    ::v-deep img {
-      max-width: 100%;
-    }
-  }
-  .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>
--- a/pages/apply/master/index.vue
+++ b/pages/apply/master/index.vue
 <template>
-  <div class="hot-content-box">
+  <app-frame :tabs="tabs">
-    <app-frame :data="frameParams">
+    <img src="https://webapp-pub.ezijing.com/project/marywood/new_banner.jpg" class="banner" />
-      <newsItem :data="newsList" class="news-item" @onClick="handleClick" />
+    <template #article>
-    </app-frame>
+      <article-list v-bind="listOptions"></article-list>
-  </div>
+    </template>
+  </app-frame>
 </template>
 <script>
 import appFrame from '@/components/appFrame'
-import newsItem from '@/components/news/newsItem'
+import ArticleList from '@/components/ArticleList'
+import { getArticleList } from '@/api'
 export default {
-  layout: 'normal',
  head: {
    title: '紫荆教育在职研申请攻略_在职研备考技巧_快速获得研究生学历',
    meta: [
@@ -21,47 +23,27 @@ export default {
      }
    ]
  },
-  components: {
+  components: { appFrame, ArticleList },
-    appFrame,
-    newsItem
-  },
-  async fetch() {
-    const params = { project_id: process.env.newProjectId, type_tag: this.$route.query.type || 'article_zzyjssqgl' }
-    this.newsList = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
-  },
  data() {
    return {
-      newsList: [],
+      tabs: [
-      frameParams: {
+        { name: 'MBA申请攻略', path: '/apply/mba' },
-        banner: 'https://webapp-pub.ezijing.com/project/marywood/new_banner.jpg',
+        { name: '在职研申请攻略', path: '/apply/master' }
-        slider: [
+      ]
-          {
-            name: 'MBA申请攻略',
-            path: '/apply/mba',
-            pathActive: ['/apply/mba']
-          },
-          {
-            name: '在职研申请攻略',
-            path: '/apply/master',
-            pathActive: ['/apply/master']
-          }
-        ]
-      }
    }
  },
-  methods: {
+  computed: {
-    handleClick(item) {
+    listOptions() {
-      this.$router.push({ name: 'apply-master-id', params: { id: item.id } })
+      return {
+        remote: {
+          httpRequest: getArticleList,
+          params: { project_id: process.env.newProjectId, type_tag: 'article_zzyjssqgl' }
+        },
+        to(item) {
+          return { name: 'apply-master-id', params: { id: item.id } }
+        }
+      }
    }
  }
 }
 </script>
-<style lang="scss" scoped>
-.hot-content-box {
-  width: 1200px;
-  margin: 0 auto;
-  .news-item {
-    padding-top: 43px;
-  }
-}
-</style>
--- a/pages/apply/mba/_id.vue
+++ b/pages/apply/mba/_id.vue
 <template>
-  <div class="detail-content-box">
+  <article-detail :tabs="tabs" @back="$router.push('/apply/mba')"></article-detail>
-    <app-frame :data="frameParams">
-      <div class="content-box">
-        <div class="back-btn" @click="$router.push('/apply/mba')">
-          <div class="el-icon-arrow-left"></div>
-          <div class="text">返回</div>
-        </div>
-        <div class="times">{{ formatDate(data.start_time) }}</div>
-        <div class="titles">{{ data.title }}</div>
-        <div class="article-content" v-html="data.content"></div>
-        <recommend />
-      </div>
-    </app-frame>
-  </div>
 </template>
 <script>
-import appFrame from '@/components/appFrame'
+import ArticleDetail from '@/components/ArticleDetail'
-import recommend from '@/components/recommend'
 export default {
-  layout: 'normal',
  head: {
    title: '紫荆教育MBA申请攻略_MBA备考技巧_快速获得硕士学历'
  },
-  components: {
+  components: { ArticleDetail },
-    appFrame,
-    recommend
-  },
  data() {
    return {
-      frameParams: {
+      tabs: [
-        slider: [
+        { name: 'MBA申请攻略', path: '/apply/mba' },
-          {
+        { name: '在职研申请攻略', path: '/apply/master' }
-            name: 'MBA申请攻略',
+      ]
-            path: '/apply/mba',
-            pathActive: ['/apply/mba']
-          },
-          {
-            name: '在职研申请攻略',
-            path: '/apply/master',
-            pathActive: ['/apply/master']
-          }
-        ]
-      },
-      data: {},
-      listData: []
-    }
-  },
-  async fetch() {
-    this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
-      return res.data
-    })
-  },
-  methods: {
-    formatDate(value) {
-      const date = new Date(value * 1000)
-      console.log(date.getMonth())
-      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    }
  }
 }
 </script>
-<style lang="scss" scoped>
-.detail-content-box {
-  // width: 1000px;
-  // background: #fff;
-  // box-sizing: border-box;
-  // margin-bottom: 100px;
-  .content-box {
-    padding: 50px 50px 94px;
-  }
-  .back-btn {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    .el-icon-arrow-left {
-      color: rgba(153, 153, 153, 1);
-      font-size: 16px;
-    }
-    .text {
-      font-size: 16px;
-      color: #999999;
-    }
-  }
-  .times {
-    font-size: 16px;
-    line-height: 100%;
-    margin: 35px 0 16px;
-    color: #999999;
-  }
-  .titles {
-    font-size: 32px;
-    font-weight: bold;
-    color: #141414;
-    // height: 62px;
-    border-bottom: 1px solid #e6e6e6;
-    padding-bottom: 10px;
-    // line-height: 100%;
-  }
-  .article-content {
-    padding-top: 25px;
-    font-size: 14px;
-    line-height: 28px;
-    color: #333333;
-    ::v-deep img {
-      max-width: 100%;
-    }
-  }
-  .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>
--- a/pages/apply/mba/index.vue
+++ b/pages/apply/mba/index.vue
 <template>
-  <div class="hot-content-box">
+  <app-frame :tabs="tabs">
-    <app-frame :data="frameParams">
+    <img src="https://webapp-pub.ezijing.com/project/marywood/new_banner.jpg" class="banner" />
-      <newsItem :data="newsList" class="news-item" @onClick="handleClick" />
+    <template #article>
-    </app-frame>
+      <article-list v-bind="listOptions"></article-list>
-  </div>
+    </template>
+  </app-frame>
 </template>
 <script>
 import appFrame from '@/components/appFrame'
-import newsItem from '@/components/news/newsItem'
+import ArticleList from '@/components/ArticleList'
+import { getArticleList } from '@/api'
 export default {
-  layout: 'normal',
  head: {
    title: '紫荆教育MBA申请攻略_MBA备考技巧_快速获得硕士学历',
    meta: [
@@ -20,47 +22,27 @@ export default {
      }
    ]
  },
-  components: {
+  components: { appFrame, ArticleList },
-    appFrame,
-    newsItem
-  },
-  async fetch() {
-    const params = { project_id: process.env.newProjectId, type_tag: this.$route.query.type || 'article_mbasqgl' }
-    this.newsList = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
-  },
  data() {
    return {
-      newsList: [],
+      tabs: [
-      frameParams: {
+        { name: 'MBA申请攻略', path: '/apply/mba' },
-        banner: 'https://webapp-pub.ezijing.com/project/marywood/new_banner.jpg',
+        { name: '在职研申请攻略', path: '/apply/master' }
-        slider: [
+      ]
-          {
-            name: 'MBA申请攻略',
-            path: '/apply/mba',
-            pathActive: ['/apply/mba']
-          },
-          {
-            name: '在职研申请攻略',
-            path: '/apply/master',
-            pathActive: ['/apply/master']
-          }
-        ]
-      }
    }
  },
-  methods: {
+  computed: {
-    handleClick(item) {
+    listOptions() {
-      this.$router.push({ name: 'apply-mba-id', params: { id: item.id } })
+      return {
+        remote: {
+          httpRequest: getArticleList,
+          params: { project_id: process.env.newProjectId, type_tag: 'article_mbasqgl' }
+        },
+        to(item) {
+          return { name: 'apply-mba-id', params: { id: item.id } }
+        }
+      }
    }
  }
 }
 </script>
-<style lang="scss" scoped>
-.hot-content-box {
-  width: 1200px;
-  margin: 0 auto;
-  .news-item {
-    padding-top: 43px;
-  }
-}
-</style>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -20,7 +20,6 @@ import alumniStories from '../components/home/alumniStories'
 import news from '../components/home/news'
 import rightAside from '../components/rightAside'
 export default {
-  layout: 'normal',
  components: {
    banner,
    headmasterMsg,
@@ -29,21 +28,7 @@ export default {
    rightAside
  },
  data() {
-    return {
+    return {}
-      isScale: false
-    }
-  },
-  created() {},
-  mounted() {
-    if (document.documentElement.clientWidth < 1400) {
-      // this.isScale = true
-    }
  }
 }
 </script>
-<style>
-.container {
-  width: 100%;
-  padding-bottom: 100px;
-}
-</style>
--- a/pages/master/course.vue
+++ b/pages/master/course.vue
 <template>
-  <div class="teacher-content-box">
+  <app-frame :tabs="tabs">
-    <app-frame :data="frameParams">
+    <img src="https://webapp-pub.ezijing.com/project/marywood/mary_banner_nx4.jpg" class="banner" />
-      <div class="content-box" v-html="detail.content"></div>
+    <template #article>
-    </app-frame>
+      <div v-html="detail.content"></div>
-  </div>
+    </template>
+  </app-frame>
 </template>
 <script>
 import appFrame from '@/components/appFrame'
 export default {
-  layout: 'normal',
  head: {
    title: '紫荆教育在职研究生课程_在职研究生备考_在职研究生培训',
    meta: [
@@ -20,31 +20,14 @@ export default {
      }
    ]
  },
-  components: {
+  components: { appFrame },
-    appFrame
-  },
  data() {
    return {
-      frameParams: {
+      tabs: [
-        banner: 'https://webapp-pub.ezijing.com/project/marywood/mary_banner_nx4.jpg',
+        { name: '在职研究生', path: '/master/intro' },
-        slider: [
+        { name: '在职研师资', path: '/master/teacher' },
-          {
+        { name: '在职研课程', path: '/master/course' }
-            name: '在职研究生',
+      ],
-            path: '/master/intro',
-            pathActive: ['/master/intro']
-          },
-          {
-            name: '在职研师资',
-            path: '/master/teacher',
-            pathActive: ['/master/teacher']
-          },
-          {
-            name: '在职研课程',
-            path: '/master/course',
-            pathActive: ['/master/course']
-          }
-        ]
-      },
      detail: {}
    }
  },
@@ -55,16 +38,3 @@ export default {
  }
 }
 </script>
-<style lang="scss" scoped>
-.teacher-content-box {
-  width: 1200px;
-  margin: 0 auto;
-  .content-box {
-    padding: 36px 0;
-    margin: 0 36px;
-    ::v-deep img {
-      max-width: 100%;
-    }
-  }
-}
-</style>
--- a/pages/master/intro.vue
+++ b/pages/master/intro.vue
 <template>
-  <div class="teacher-content-box">
+  <app-frame :tabs="tabs">
-    <app-frame :data="frameParams">
+    <img src="https://webapp-pub.ezijing.com/project/marywood/mary_banner_nx4.jpg" class="banner" />
-      <div class="content-box" v-html="detail.content"></div>
+    <template #article>
-    </app-frame>
+      <div v-html="detail.content"></div>
-  </div>
+    </template>
+  </app-frame>
 </template>
 <script>
 import appFrame from '@/components/appFrame'
 export default {
-  layout: 'normal',
  head: {
    title: '紫荆教育在职研究生报名_在职研究生培训_在职研究生报名费用与条件',
    meta: [
@@ -24,26 +24,11 @@ export default {
  },
  data() {
    return {
-      frameParams: {
+      tabs: [
-        banner: 'https://webapp-pub.ezijing.com/project/marywood/mary_banner_nx4.jpg',
+        { name: '在职研究生', path: '/master/intro' },
-        slider: [
+        { name: '在职研师资', path: '/master/teacher' },
-          {
+        { name: '在职研课程', path: '/master/course' }
-            name: '在职研究生',
+      ],
-            path: '/master/intro',
-            pathActive: ['/master/intro']
-          },
-          {
-            name: '在职研师资',
-            path: '/master/teacher',
-            pathActive: ['/master/teacher']
-          },
-          {
-            name: '在职研课程',
-            path: '/master/course',
-            pathActive: ['/master/course']
-          }
-        ]
-      },
      detail: {}
    }
  },
@@ -54,16 +39,3 @@ export default {
  }
 }
 </script>
-<style lang="scss" scoped>
-.teacher-content-box {
-  width: 1200px;
-  margin: 0 auto;
-  .content-box {
-    padding: 36px 0;
-    margin: 0 36px;
-    ::v-deep img {
-      max-width: 100%;
-    }
-  }
-}
-</style>
--- a/pages/master/teacher.vue
+++ b/pages/master/teacher.vue
 <template>
-  <div class="teacher-content-box">
+  <app-frame :tabs="tabs">
-    <app-frame :data="frameParams">
+    <img src="https://webapp-pub.ezijing.com/project/marywood/mary_banner_nx4.jpg" class="banner" />
-      <div class="content-box" v-html="detail.content"></div>
+    <template #article>
-    </app-frame>
+      <div v-html="detail.content"></div>
-  </div>
+    </template>
+  </app-frame>
 </template>
 <script>
 import appFrame from '@/components/appFrame'
 export default {
-  layout: 'normal',
  head: {
    title: '紫荆教育在职研究生师资_在职研究生课程_在职研究生备考',
    meta: [
@@ -25,26 +25,11 @@ export default {
  },
  data() {
    return {
-      frameParams: {
+      tabs: [
-        banner: 'https://webapp-pub.ezijing.com/project/marywood/mary_banner_nx4.jpg',
+        { name: '在职研究生', path: '/master/intro' },
-        slider: [
+        { name: '在职研师资', path: '/master/teacher' },
-          {
+        { name: '在职研课程', path: '/master/course' }
-            name: '在职研究生',
+      ],
-            path: '/master/intro',
-            pathActive: ['/master/intro']
-          },
-          {
-            name: '在职研师资',
-            path: '/master/teacher',
-            pathActive: ['/master/teacher']
-          },
-          {
-            name: '在职研课程',
-            path: '/master/course',
-            pathActive: ['/master/course']
-          }
-        ]
-      },
      detail: {}
    }
  },
@@ -55,16 +40,3 @@ export default {
  }
 }
 </script>
-<style lang="scss" scoped>
-.teacher-content-box {
-  width: 1200px;
-  margin: 0 auto;
-  .content-box {
-    padding: 36px 0;
-    margin: 0 36px;
-    ::v-deep img {
-      max-width: 100%;
-    }
-  }
-}
-</style>
--- a/pages/mba/course.vue
+++ b/pages/mba/course.vue
 <template>
-  <div class="teacher-content-box">
+  <app-frame :tabs="tabs">
-    <app-frame :data="frameParams">
+    <img src="https://webapp-pub.ezijing.com/project/marywood/mary_banner_nx4.jpg" class="banner" />
-      <div class="content-box" v-html="detail.content"></div>
+    <template #article>
-    </app-frame>
+      <div v-html="detail.content"></div>
-  </div>
+    </template>
+  </app-frame>
 </template>
 <script>
 import appFrame from '@/components/appFrame'
 export default {
-  layout: 'normal',
  head: {
    title: '紫荆教育MBA课程_MBA备考_MBA考试',
    meta: [
@@ -19,31 +19,14 @@ export default {
      }
    ]
  },
-  components: {
+  components: { appFrame },
-    appFrame
-  },
  data() {
    return {
-      frameParams: {
+      tabs: [
-        banner: 'https://webapp-pub.ezijing.com/project/marywood/mary_banner_nx4.jpg',
+        { name: 'MBA', path: '/mba/intro' },
-        slider: [
+        { name: 'MBA师资', path: '/mba/teacher' },
-          {
+        { name: 'MBA课程', path: '/mba/course' }
-            name: 'MBA',
+      ],
-            path: '/mba/intro',
-            pathActive: ['/mba/intro']
-          },
-          {
-            name: 'MBA师资',
-            path: '/mba/teacher',
-            pathActive: ['/mba/teacher']
-          },
-          {
-            name: 'MBA课程',
-            path: '/mba/course',
-            pathActive: ['/mba/course']
-          }
-        ]
-      },
      detail: {}
    }
  },
@@ -54,16 +37,3 @@ export default {
  }
 }
 </script>
-<style lang="scss" scoped>
-.teacher-content-box {
-  width: 1200px;
-  margin: 0 auto;
-  .content-box {
-    padding: 36px 0;
-    margin: 0 36px;
-    ::v-deep img {
-      max-width: 100%;
-    }
-  }
-}
-</style>
--- a/pages/mba/intro.vue
+++ b/pages/mba/intro.vue
 <template>
-  <div class="teacher-content-box">
+  <app-frame :tabs="tabs">
-    <app-frame :data="frameParams">
+    <img src="https://webapp-pub.ezijing.com/project/marywood/mary_banner_nx4.jpg" class="banner" />
-      <div class="content-box" v-html="detail.content"></div>
+    <template #article>
-    </app-frame>
+      <div v-html="detail.content"></div>
-  </div>
+    </template>
+  </app-frame>
 </template>
 <script>
 import appFrame from '@/components/appFrame'
 export default {
-  layout: 'normal',
  head: {
    title: '紫荆教育MBA报名_MBA培训_MBA报名费用与条件',
    meta: [
@@ -24,26 +24,11 @@ export default {
  },
  data() {
    return {
-      frameParams: {
+      tabs: [
-        banner: 'https://webapp-pub.ezijing.com/project/marywood/mary_banner_nx4.jpg',
+        { name: 'MBA', path: '/mba/intro' },
-        slider: [
+        { name: 'MBA师资', path: '/mba/teacher' },
-          {
+        { name: 'MBA课程', path: '/mba/course' }
-            name: 'MBA',
+      ],
-            path: '/mba/intro',
-            pathActive: ['/mba/intro']
-          },
-          {
-            name: 'MBA师资',
-            path: '/mba/teacher',
-            pathActive: ['/mba/teacher']
-          },
-          {
-            name: 'MBA课程',
-            path: '/mba/course',
-            pathActive: ['/mba/course']
-          }
-        ]
-      },
      detail: {}
    }
  },
@@ -54,16 +39,3 @@ export default {
  }
 }
 </script>
-<style lang="scss" scoped>
-.teacher-content-box {
-  width: 1200px;
-  margin: 0 auto;
-  .content-box {
-    padding: 36px 0;
-    margin: 0 36px;
-    ::v-deep img {
-      max-width: 100%;
-    }
-  }
-}
-</style>
--- a/pages/mba/teacher.vue
+++ b/pages/mba/teacher.vue
 <template>
-  <div class="teacher-content-box">
+  <app-frame :tabs="tabs">
-    <app-frame :data="frameParams">
+    <img src="https://webapp-pub.ezijing.com/project/marywood/mary_banner_nx4.jpg" class="banner" />
-      <div class="content-box" v-html="detail.content"></div>
+    <template #article>
-    </app-frame>
+      <div v-html="detail.content"></div>
-  </div>
+    </template>
+  </app-frame>
 </template>
 <script>
 import appFrame from '@/components/appFrame'
 export default {
-  layout: 'normal',
  head: {
    title: '紫荆教育MBA师资_MBA课程_MBA备考',
    meta: [
@@ -19,31 +19,14 @@ export default {
      }
    ]
  },
-  components: {
+  components: { appFrame },
-    appFrame
-  },
  data() {
    return {
-      frameParams: {
+      tabs: [
-        banner: 'https://webapp-pub.ezijing.com/project/marywood/mary_banner_nx4.jpg',
+        { name: 'MBA', path: '/mba/intro' },
-        slider: [
+        { name: 'MBA师资', path: '/mba/teacher' },
-          {
+        { name: 'MBA课程', path: '/mba/course' }
-            name: 'MBA',
+      ],
-            path: '/mba/intro',
-            pathActive: ['/mba/intro']
-          },
-          {
-            name: 'MBA师资',
-            path: '/mba/teacher',
-            pathActive: ['/mba/teacher']
-          },
-          {
-            name: 'MBA课程',
-            path: '/mba/course',
-            pathActive: ['/mba/course']
-          }
-        ]
-      },
      detail: {}
    }
  },
@@ -54,16 +37,3 @@ export default {
  }
 }
 </script>
-<style lang="scss" scoped>
-.teacher-content-box {
-  width: 1200px;
-  margin: 0 auto;
-  .content-box {
-    padding: 36px 0;
-    margin: 0 36px;
-    ::v-deep img {
-      max-width: 100%;
-    }
-  }
-}
-</style>
--- a/pages/news/hot/_id.vue
+++ b/pages/news/hot/_id.vue
 <template>
-  <div class="detail-content-box">
+  <article-detail :tabs="tabs" @back="$router.push('/news/hot')"></article-detail>
-    <app-frame :data="frameParams">
-      <div class="content-box">
-        <div class="back-btn" @click="$router.push('/news/hot')">
-          <div class="el-icon-arrow-left"></div>
-          <div class="text">返回</div>
-        </div>
-        <div class="times">{{ formatDate(data.start_time) }}</div>
-        <div class="titles">{{ data.title }}</div>
-        <div class="article-content" v-html="data.content"></div>
-        <recommend />
-      </div>
-    </app-frame>
-  </div>
 </template>
 <script>
-import appFrame from '@/components/appFrame'
+import ArticleDetail from '@/components/ArticleDetail'
-import recommend from '@/components/recommend'
 export default {
-  layout: 'normal',
+  head: { title: '热点新闻-清控紫荆教育MBA官网' },
-  head: {
+  components: { ArticleDetail },
-    title: '热点新闻-清控紫荆教育MBA官网'
-  },
-  components: {
-    appFrame,
-    recommend
-  },
  data() {
    return {
-      frameParams: {
+      tabs: [
-        slider: [
+        { name: '热点新闻', path: '/news/hot' },
-          {
+        { name: '教授采访', path: '/news/interview' }
-            name: '热点新闻',
+      ]
-            path: '/news/hot',
-            pathActive: ['/news/hot', '/news/hot-detail']
-          },
-          {
-            name: '教授采访',
-            path: '/news/interview',
-            pathActive: ['/news/interview', '/news/interview-detail']
-          }
-        ]
-      },
-      data: {},
-      listData: []
-    }
-  },
-  async fetch() {
-    this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
-      return res.data
-    })
-  },
-  methods: {
-    formatDate(value) {
-      const date = new Date(value * 1000)
-      console.log(date.getMonth())
-      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    }
  }
 }
 </script>
-<style lang="scss" scoped>
-.detail-content-box {
-  // width: 1000px;
-  // background: #fff;
-  // box-sizing: border-box;
-  // margin-bottom: 100px;
-  .content-box {
-    padding: 50px 50px 94px;
-  }
-  .back-btn {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    .el-icon-arrow-left {
-      color: rgba(153, 153, 153, 1);
-      font-size: 16px;
-    }
-    .text {
-      font-size: 16px;
-      color: #999999;
-    }
-  }
-  .times {
-    font-size: 16px;
-    line-height: 100%;
-    margin: 35px 0 16px;
-    color: #999999;
-  }
-  .titles {
-    font-size: 32px;
-    font-weight: bold;
-    color: #141414;
-    // height: 62px;
-    border-bottom: 1px solid #e6e6e6;
-    padding-bottom: 10px;
-    // line-height: 100%;
-  }
-  .article-content {
-    padding-top: 25px;
-    font-size: 14px;
-    line-height: 28px;
-    color: #333333;
-    ::v-deep img {
-      max-width: 100%;
-    }
-  }
-  .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>
--- a/pages/news/hot/index.vue
+++ b/pages/news/hot/index.vue
 <template>
-  <div class="hot-content-box">
+  <app-frame :tabs="tabs">
-    <app-frame :data="frameParams">
+    <img src="https://webapp-pub.ezijing.com/project/marywood/new_banner.jpg" class="banner" />
-      <newsItem :data="newsList" class="news-item" @onClick="handleClick" />
+    <template #article>
-    </app-frame>
+      <article-list v-bind="listOptions"></article-list>
-  </div>
+    </template>
+  </app-frame>
 </template>
 <script>
 import appFrame from '@/components/appFrame'
-import newsItem from '@/components/news/newsItem'
+import ArticleList from '@/components/ArticleList'
+import { getArticleList } from '@/api'
 export default {
-  layout: 'normal',
+  head: { title: '热点新闻-清控紫荆教育MBA官网' },
-  head: {
+  components: { appFrame, ArticleList },
-    title: '热点新闻-清控紫荆教育MBA官网'
-  },
-  components: {
-    appFrame,
-    newsItem
-  },
-  async fetch() {
-    const params = { project_id: process.env.newProjectId, type_tag: this.$route.query.type || 'article_news_hot' }
-    this.newsList = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
-  },
  data() {
    return {
-      newsList: [],
+      tabs: [
-      frameParams: {
+        { name: '热点新闻', path: '/news/hot' },
-        banner: 'https://webapp-pub.ezijing.com/project/marywood/new_banner.jpg',
+        { name: '教授采访', path: '/news/interview' }
-        slider: [
+      ]
-          {
-            name: '热点新闻',
-            path: '/news/hot',
-            pathActive: ['/news/hot', '/news/hot-detail']
-          },
-          {
-            name: '教授采访',
-            path: '/news/interview',
-            pathActive: ['/news/interview', '/news/interview-detail']
-          }
-        ]
-      }
    }
  },
-  methods: {
+  computed: {
-    handleClick(item) {
+    listOptions() {
-      this.$router.push({ name: 'news-hot-id', params: { id: item.id } })
+      return {
+        remote: {
+          httpRequest: getArticleList,
+          params: { project_id: process.env.newProjectId, type_tag: this.$route.query.type || 'article_news_hot' }
+        },
+        to(item) {
+          return { name: 'news-hot-id', params: { id: item.id } }
+        }
+      }
    }
  }
 }
 </script>
-<style lang="scss" scoped>
-.hot-content-box {
-  width: 1200px;
-  margin: 0 auto;
-  .news-item {
-    padding-top: 43px;
-  }
-}
-</style>
--- a/pages/news/interview/_id.vue
+++ b/pages/news/interview/_id.vue
 <template>
-  <div class="detail-content-box">
+  <article-detail :tabs="tabs" @back="$router.push('/news/interview')"></article-detail>
-    <app-frame :data="frameParams">
-      <div class="content-box">
-        <div class="back-btn" @click="$router.go(-1)">
-          <div class="el-icon-arrow-left"></div>
-          <div class="text">返回</div>
-        </div>
-        <div class="times">{{ formatDate(data.start_time) }}</div>
-        <div class="titles">{{ data.title }}</div>
-        <div class="article-content" v-html="data.content"></div>
-        <recommend />
-      </div>
-    </app-frame>
-  </div>
 </template>
 <script>
-import appFrame from '@/components/appFrame'
+import ArticleDetail from '@/components/ArticleDetail'
-import recommend from '@/components/recommend'
 export default {
-  layout: 'normal',
+  head: { title: '教授采访-清控紫荆教育MBA官网' },
-  head: {
+  components: { ArticleDetail },
-    title: '教授采访-清控紫荆教育MBA官网'
-  },
-  watchQuery: true,
-  components: {
-    appFrame,
-    recommend
-  },
  data() {
    return {
-      frameParams: {
+      tabs: [
-        slider: [
+        { name: '热点新闻', path: '/news/hot' },
-          {
+        { name: '教授采访', path: '/news/interview' }
-            name: '热点新闻',
+      ]
-            path: '/news/hot',
-            pathActive: ['/news/hot', '/news/hot-detail']
-          },
-          {
-            name: '教授采访',
-            path: '/news/interview',
-            pathActive: ['/news/interview', '/news/interview-detail']
-          }
-        ]
-      },
-      data: {},
-      listData: []
-    }
-  },
-  async fetch() {
-    this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
-      return res.data
-    })
-  },
-  mounted() {},
-  methods: {
-    formatDate(value) {
-      const date = new Date(value * 1000)
-      console.log(date.getMonth())
-      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    }
  }
 }
 </script>
-<style lang="scss" scoped>
-.detail-content-box {
-  // width: 1000px;
-  // background: #fff;
-  // box-sizing: border-box;
-  // margin-bottom: 100px;
-  .content-box {
-    padding: 50px 50px 94px;
-  }
-  .back-btn {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    .el-icon-arrow-left {
-      color: rgba(153, 153, 153, 1);
-      font-size: 16px;
-    }
-    .text {
-      font-size: 16px;
-      color: #999999;
-    }
-  }
-  .times {
-    font-size: 16px;
-    line-height: 100%;
-    margin: 35px 0 16px;
-    color: #999999;
-  }
-  .titles {
-    font-size: 32px;
-    font-weight: bold;
-    color: #141414;
-    // height: 62px;
-    border-bottom: 1px solid #e6e6e6;
-    padding-bottom: 10px;
-    // line-height: 100%;
-  }
-  .article-content {
-    padding-top: 25px;
-    font-size: 14px;
-    line-height: 28px;
-    color: #333333;
-    ::v-deep img {
-      max-width: 100%;
-    }
-  }
-  .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>
--- a/pages/news/interview/index.vue
+++ b/pages/news/interview/index.vue
 <template>
-  <div class="hot-content-box">
+  <app-frame :tabs="tabs">
-    <app-frame :data="frameParams">
+    <img src="https://webapp-pub.ezijing.com/project/marywood/new_banner.jpg" class="banner" />
-      <newsItem :data="newsList" class="news-item" @onClick="handleClick" />
+    <template #article>
-    </app-frame>
+      <article-list v-bind="listOptions"></article-list>
-  </div>
+    </template>
+  </app-frame>
 </template>
 <script>
 import appFrame from '@/components/appFrame'
-import newsItem from '@/components/news/newsItem'
+import ArticleList from '@/components/ArticleList'
+import { getArticleList } from '@/api'
 export default {
-  layout: 'normal',
+  head: { title: '教授采访-清控紫荆教育MBA官网' },
-  head: {
+  components: { appFrame, ArticleList },
-    title: '教授采访-清控紫荆教育MBA官网'
-  },
-  components: {
-    appFrame,
-    newsItem
-  },
-  async fetch() {
-    const params = { project_id: process.env.newProjectId, type_tag: 'kelley_interview' }
-    this.newsList = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
-  },
  data() {
    return {
-      newsList: [],
+      tabs: [
-      frameParams: {
+        { name: '热点新闻', path: '/news/hot' },
-        banner: 'https://webapp-pub.ezijing.com/project/marywood/new_banner.jpg',
+        { name: '教授采访', path: '/news/interview' }
-        slider: [
+      ]
-          {
-            name: '热点新闻',
-            path: '/news/hot',
-            pathActive: ['/news/hot']
-          },
-          {
-            name: '教授采访',
-            path: '/news/interview',
-            pathActive: ['/news/interview']
-          }
-        ]
-      }
    }
  },
-  methods: {
+  computed: {
-    handleClick(item) {
+    listOptions() {
-      this.$router.push({ name: 'news-interview-id', params: { id: item.id } })
+      return {
+        remote: {
+          httpRequest: getArticleList,
+          params: { project_id: process.env.newProjectId, type_tag: 'kelley_interview' }
+        },
+        to(item) {
+          return { name: 'news-interview-id', params: { id: item.id } }
+        }
+      }
    }
  }
 }
 </script>
-<style lang="scss" scoped>
-.hot-content-box {
-  width: 1200px;
-  margin: 0 auto;
-  .news-item {
-    padding-top: 43px;
-  }
-}
-</style>
--- a/plugins/tongji.js
+++ b/plugins/tongji.js
-(function(b,a,e,h,f,c,g,s){b[h]=b[h]||function(){(b[h].c=b[h].c||[]).push(arguments)};b[h].s=!!c;g=a.getElementsByTagName(e)[0];s=a.createElement(e);s.src="//s.union.360.cn/"+f+".js";s.defer=!0;s.async=!0;g.parentNode.insertBefore(s,g)})(window,document,"script","_qha",399169,false);
-var _hmt = _hmt || [];(function() {  var hm = document.createElement("script");  hm.src = "https://hm.baidu.com/hm.js?92a61ce587aaf0da717895531ea8591c";  var s = document.getElementsByTagName("script")[0];   s.parentNode.insertBefore(hm, s);})();
\ No newline at end of file
--- a/plugins/vue-swiper.js
+++ b/plugins/vue-swiper.js
@@ -2,4 +2,4 @@ import Vue from 'vue'
 import VueAwesomeSwiper from 'vue-awesome-swiper'
 import 'swiper/swiper.scss'
 Vue.use(VueAwesomeSwiper)
\ No newline at end of file
--- a/router/routes.js
+++ b/router/routes.js
@@ -6,7 +6,7 @@ export default (routes, resolve) => {
  routes.push(
    {
      path: '/my',
-      component: resolve(__dirname, '../layouts/normal.vue'),
+      component: resolve(__dirname, '../layouts/default.vue'),
      props: { hasFooter: false },
      children: [
        {

--- a/store/index.js
+++ b/store/index.js
 import { getUser, logout } from '@/api/my'
 export const state = () => ({
-  user: {}
+  user: {},
+  isMobile: false,
+  searchVisible: false,
+  menuVisible: false
 })
 export const mutations = {
@@ -9,6 +12,15 @@ export const mutations = {
  },
  removeUser(state) {
    state.user = {}
+  },
+  setIsMobile(state, isMobile) {
+    state.isMobile = isMobile
+  },
+  toggleSearch(state, visible) {
+    state.searchVisible = visible
+  },
+  toggleMenu(state, visible) {
+    state.menuVisible = visible
  }
 }
@@ -20,9 +32,8 @@ export const actions = {
  },
  // 退出登录
  logout({ commit }) {
-    return logout().then(response => {
+    logout().then(response => {
      commit('setUser', {})
-      return response
    })
  },
  // 检测登录状态

--- a/utils/httpRequest.js
+++ b/utils/httpRequest.js
@@ -14,14 +14,13 @@ const httpRequest = axios.create({
 // 请求拦截
 httpRequest.interceptors.request.use(
  function(config) {
-    // console.log(config)
    if (config.headers['Content-Type'] === 'multipart/form-data') {
      const form = new window.FormData()
      for (const key in config.data) {
        form.append(key, config.data[key])
      }
      config.data = form
-    } else if(config.url.includes('/api/cms')){
+    } else if (config.url.includes('/api/cms')) {
      const defaultParams = {
        timestamp: parseInt(Date.now() / 1000),
        nonce: Math.random()