1+x项目站

package-lock.json

@@ -1710,7 +1710,7 @@
       "dependencies": {
         "debug": {
           "version": "2.6.9",
-          "resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz",
+          "resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz?cache=0&sync_timestamp=1600502873540&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz",
           "integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=",
           "dev": true,
           "requires": {
@@ -3450,6 +3450,11 @@
       "integrity": "sha1-QGXiATz5+5Ft39gu+1Bq1MZ2kGI=",
       "dev": true
     },
+    "dayjs": {
+      "version": "1.9.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.9.7.tgz",
+      "integrity": "sha512-IC877KBdMhBrCfBfJXHQlo0G8keZ0Opy7YIIq5QKtUbCuHMzim8S4PyiVK4YmihI3iOF9lhfUBW4AQWHTR5WHA=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz",
@@ -4379,7 +4384,7 @@
       "dependencies": {
         "debug": {
           "version": "2.6.9",
-          "resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz",
+          "resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz?cache=0&sync_timestamp=1600502873540&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz",
           "integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=",
           "dev": true,
           "requires": {
@@ -5670,7 +5675,7 @@
     },
     "html-tags": {
       "version": "2.0.0",
-      "resolved": "https://registry.npm.taobao.org/html-tags/download/html-tags-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
       "integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos="
     },
     "html-webpack-plugin": {
@@ -6633,7 +6638,7 @@
     },
     "lodash.kebabcase": {
       "version": "4.1.1",
-      "resolved": "https://registry.npm.taobao.org/lodash.kebabcase/download/lodash.kebabcase-4.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
       "integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY="
     },
     "loglevel": {
@@ -9931,7 +9936,7 @@
     },
     "svg-tags": {
       "version": "1.0.0",
-      "resolved": "https://registry.npm.taobao.org/svg-tags/download/svg-tags-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
       "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q="
     },
     "swiper": {
@@ -10740,6 +10745,15 @@
         }
       }
     },
+    "vue-mobile-calendar": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/vue-mobile-calendar/-/vue-mobile-calendar-3.3.0.tgz",
+      "integrity": "sha512-sxtAP8MFYHLX1RIrPiQ6enBu89/4ztCJbBCUfwN8zVP9Wm7Ls6vV5HBE/UF0ztRGd/By6SeinpBUUzMq14w6IQ==",
+      "requires": {
+        "dayjs": "^1.8.10",
+        "vue": "^2.5.22"
+      }
+    },
     "vue-router": {
       "version": "3.4.9",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.9.tgz",
@@ -10992,7 +11006,7 @@
         },
         "eslint-scope": {
           "version": "4.0.3",
-          "resolved": "https://registry.npm.taobao.org/eslint-scope/download/eslint-scope-4.0.3.tgz",
+          "resolved": "https://registry.npm.taobao.org/eslint-scope/download/eslint-scope-4.0.3.tgz?cache=0&sync_timestamp=1599933677754&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-scope%2Fdownload%2Feslint-scope-4.0.3.tgz",
           "integrity": "sha1-ygODMxD2iJoyZHgaqC5j65z+eEg=",
           "dev": true,
           "requires": {

package.json

@@ -91,6 +91,7 @@
     "vue-i18n": "^8.22.2",
     "vue-loader": "^15.9.5",
     "vue-meta-info": "^0.1.7",
+    "vue-mobile-calendar": "^3.3.0",
     "vue-router": "^3.4.9",
     "vue-template-compiler": "^2.6.12",
     "vuex": "^3.6.0"

src/components/layout/footer.vue

@@ -3,7 +3,8 @@
     <div class="app-footer-main">
       <div class="inner">
         <div class="left">
-          <img src="../../assets/img/head/ezijing-logo2.png" class="logo" />
+          <h3>公司信息</h3>
+          <!-- <img src="../../assets/img/head/ezijing-logo2.png" class="logo" /> -->
           <ul class="menu">
             <li v-for="item in menuList" :key="item.href">
               <a :href="item.href" target="_blank">{{ item.title }}</a>
@@ -23,9 +24,8 @@
             </p>
           </div>
           <div class="qrcode">
+            <h3>关注我们</h3>
             <img src="https://zws-imgs-pub.ezijing.com/static/public/29ce10d35376f24ae1ecaccd57215d5c.jpg" alt="" />
-            <p>扫二维码关注官方微信</p>
-            <p>微信公众号zijingedu</p>
           </div>
         </div>
       </div>
@@ -62,13 +62,22 @@ export default {
 <style lang="scss" scoped>
 .app-footer {
   .inner {
-    max-width: 970px;
+    max-width: 800px;
     margin: 0 auto;
+    .left{
+      margin-top: 20px;
+      h3 {
+        font-size: 16px;
+        color: #222;
+        line-height: 1;
+        margin-bottom: 15px;
+      }
+    }
   }
   .app-footer-main {
-    padding: 40px 0;
-    color: #a7a7a7;
-    background-color: #212223;
+    padding: 10px 0;
+    color: #222;
+    background-color: #f9f9f9;
     .inner {
       display: flex;
       justify-content: space-between;
@@ -79,7 +88,7 @@ export default {
     margin-top: 10px;
     line-height: 30px;
     font-size: 12px;
-    color: #7d7d7d;
+    color: #222;
   }
   .right {
     display: flex;
@@ -87,17 +96,23 @@ export default {
   .contact {
     h3 {
       font-size: 16px;
-      color: #fff;
+      color: #222;
       line-height: 1;
       margin-bottom: 15px;
     }
     p {
       font-size: 12px;
-      color: #a7a7a7;
+      color: #222;
       line-height: 24px;
     }
   }
   .qrcode {
+    h3 {
+      font-size: 16px;
+      color: #222;
+      line-height: 1;
+      margin-bottom: 15px;
+    }
     width: 128px;
     margin-left: 80px;
     img {
@@ -113,8 +128,8 @@ export default {
   .copyright {
     height: 40px;
     line-height: 40px;
-    color: #fff;
-    background: #ccc;
+    color: #666;
+    background: #f9f9f9;
     .inner2{
       width: 100%;
       justify-content: center;

src/components/layout/header.vue

 <template>
   <header class="app-header">
-    <section class="app-header-bar">
-      <div class="inner">
-        <div class="login">
-          <template v-if="isLogin">
-            <div>{{ user.nickname || user.realname }}</div>
-            <span>|</span>
-            <div @click="handleLogout">退出</div>
-          </template>
-          <template v-else>
-            <div @click="handleRegister">注册</div>
-            <span>|</span>
-            <div @click="handleLogin">登录</div>
-          </template>
-        </div>
-      </div>
-    </section>
     <section class="app-header-main">
-      <div class="hd">
-        <div class="hd-left">
-          <a href="/"><img src="../../assets/img/head/ezijing-logo.png" class="logo" /></a>
-          <h1 class="title">{{ title }}</h1>
-        </div>
-        <div class="hd-right">
-          <img src="https://zws-imgs-pub.ezijing.com/2f4e4eba3c1e93a220425382aa0f4977.png" />
-        </div>
-      </div>
-      <div class="bd">
-        <ul class="nav">
-          <li v-for="item in navList" :key="item.path">
-            <router-link :to="item.path">{{ item.title }}</router-link>
-          </li>
-        </ul>
-        <div class="search">
-          <div class="lang">EN</div>
-          <input type="text" placeholder="Search" class="search-input" />
-          <div class="search-button">搜索</div>
-        </div>
+      <div class="poster"></div>
+      <div class="handle-btn">
+        <span @click="isLogin = true">用户登录</span>
+        <span>\</span>
+        <span @click="$router.push({ path: '/register' })">注册</span>
       </div>
     </section>
+    <section class="app-header-menu">
+      <ul>
+        <template v-for="(item, index) in navList">
+          <router-link :to="item.path" :key="index">
+            <li
+              :class="isClassShow(item)"
+              >
+              {{ item.title }}
+            </li>
+          </router-link>
+        </template>
+      </ul>
+    </section>
     <vue-passport ref="passport" @ready="onReady" :options="options"></vue-passport>
+    <login v-if="isLogin" @closeMask="closeMask"></login>
   </header>
 </template>
 
 <script>
+import login from './login'
 export default {
+  components: {
+    login
+  },
   data() {
     return {
       title: '索菲亚大学金融方向工商管理硕士项目',
       navList: [
         { title: '首页', path: '/index' },
-        { title: '项目介绍', path: '/project' },
-        { title: '视频中心', path: '/videoCenter' },
-        { title: '招生信息', path: '/recruit' },
-        { title: '教学模块', path: '/teaching' },
-        { title: '师生风采', path: '/presence' },
-        // { title: '职业发展', path: '/careerDev' },
-        { title: '校友工作', path: '/alumniWork' }
+        { title: '工作动态', path: '/news', children: { path: ['/news/detail'] } },
+        { title: '教材中心', path: '/textBook', children: { path: ['/textBook/detail', '/textBook/chapter'] }},
+        { title: '师资培训', path: '/train', children: { path: ['/train/detail', 'train/form'] } },
+        { title: '考核站点', path: '/site' },
+        { title: '证书成绩查询', path: '/query' }
       ],
       isLogin: false,
       user: null,
@@ -74,17 +59,37 @@ export default {
   },
   computed: {
     passport() {
-      return this.$refs.passport
+      return this.$refs.passport 
+    },
+    isClassShow() {
+      return (item) => {
+        
+        return this.$route.path === item.path
+          ? 'active'
+          : item.children
+            ? ((_this) => {
+              const isPath = item.children.path.find(item => {
+                return item === _this.$route.path
+              })
+              return isPath && 'active'
+            })(this)
+            : ''
+      }
     }
   },
+  mounted() {    
+  },
   watch: {
-    $route(route) {
-      if (route.query.needLogin) {
-        this.handleLogin()
-      }
-    }
+    // $route(route) {
+    //   if (route.query.needLogin.path) {
+    //     this.handleLogin()
+    //   }
+    // }
   },
   methods: {
+    closeMask(blo) {
+      this.isLogin = blo
+    },
     handleLogin() {
       this.passport.login()
     },
@@ -121,115 +126,47 @@ export default {
     margin: 0 auto;
   }
 }
-.app-header-bar {
-  height: 40px;
-  background-color: #333;
-  .login {
-    float: right;
-    display: flex;
-    line-height: 40px;
-    color: #fff;
-    div {
-      font-size: 18px;
-      text-align: center;
+.app-header-main {
+  position: relative;
+  .poster{
+    width: 100%;
+    height: 220px;
+    background: url(https://zws-imgs-pub.ezijing.com/static/public/7f46acc2486aec78c8fd4bdf5afd9589.png) center;
+    background-size: cover;
+  }
+  .handle-btn{
+    position: absolute;
+    top: 16px;
+    right: 24px;
+    span{
+      font-size: 14px;
+      color: #FFFFFF;
+      line-height: 20px;
       cursor: pointer;
     }
-    span {
-      padding: 0 20px;
-    }
   }
 }
-.app-header-main {
-  max-width: 970px;
-  margin: 0 auto;
-  .hd {
-    height: 110px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .hd-left {
+.app-header-menu{
+  width: 100%;
+  height: 56px;
+  background: linear-gradient(47deg, #C01540 0%, #C01540 7%, #D43960 26%, #FF87A5 100%, #C01540 100%);
+  ul{
     display: flex;
     justify-content: center;
-    align-items: center;
-  }
-  .logo {
-    width: 156px;
-    height: 50px;
-  }
-  .title {
-    margin-left: 20px;
-    padding: 0 10px;
-    color: #222;
-    font-size: 20px;
-    line-height: 33px;
-    font-weight: 600;
-    border-left: 2px solid #333;
-  }
-  .bd {
-    margin-top: -20px;
-    padding: 10px 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .nav {
-    display: flex;
-    li {
-      font-size: 15px;
-      font-weight: 600;
-      color: #222;
-      line-height: 20px;
-      padding: 0 14px;
-      a {
-        position: relative;
-      }
-      &:first-child {
-        padding-left: 0;
+    li{
+      width: 200px;
+      height: 56px;
+      text-align: center;
+      line-height: 56px;
+      font-size: 20px;
+      color: #FFFFFF;
+      cursor: pointer;
+      &.active{
+        font-size: 20px;
+        color: #AF1B40;
+        background: #fff;
       }
     }
-    li + li {
-      border-left: 1px solid #d7d8d9;
-    }
-  }
-  .router-link-active:after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -3px;
-    height: 2px;
-    background: #bf0927;
-  }
-  .search {
-    display: flex;
-    align-items: center;
-  }
-  .lang {
-    font-size: 15px;
-    color: #999;
-  }
-  .search-input {
-    outline: none;
-    width: 159px;
-    height: 34px;
-    border-radius: 4px;
-    border: 1px solid #ccc;
-    margin: 0 3px 0 8px;
-    padding-left: 13px;
-    font-size: 15px;
-    color: #999;
-  }
-  .search-button {
-    width: 54px;
-    height: 34px;
-    border-radius: 4px;
-    border: 1px solid #ccc;
-    font-size: 15px;
-    color: #999;
-    text-align: center;
-    line-height: 34px;
-    cursor: pointer;
   }
 }
 </style>

src/components/layout/login.vue

+<template>
+  <div class="login-box">
+    <div class="login-card-mian">
+      <div class="title">账号登录</div>
+      <ul>
+        <li>
+          <el-select v-model="value" placeholder="请选择学校" class="forms">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+            <i slot="prefix" class="el-input__icon el-icon-office-building"></i>
+          </el-select>
+        </li>
+        <li>
+          <el-input
+            class="forms"
+            placeholder="请输入账号"
+            prefix-icon="el-icon-user"
+            v-model="input2">
+          </el-input>
+        </li>
+        <li>
+          <el-input
+            class="forms"
+            placeholder="请输入密码"
+            prefix-icon="el-icon-lock"
+            show-password
+            v-model="input3">
+          </el-input>
+        </li>
+      </ul>
+      <div class="login-btn">登录</div>
+      <div class="register-btn">注册</div>
+    </div>
+    <div class="mask" @click="closeMask"></div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return{
+      value: '',
+      input2: '',
+      input3: '',
+      options: []
+    }
+  },
+  methods: {
+    closeMask() {
+      this.$emit('closeMask', false)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.login-box{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba($color: #000000, $alpha: 0.5);
+  z-index: 999;
+  .mask{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9;
+  }
+  .login-card-mian{
+    z-index: 99;
+    box-sizing: border-box;
+    padding: 24px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    width: 328px;
+    background: #FFFFFF;
+    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    .title{
+      font-size: 18px;
+      color: #AF1B40;
+      line-height: 25px;
+      margin-bottom: 24px;
+    }
+    ul{
+      li{
+        margin-bottom: 24px;
+        .forms{
+          width: 100%;
+        }
+      }
+    }
+    .login-btn{
+      text-align: center;
+      line-height: 40px;
+      background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: bold;
+      color: #FFFFFF;
+      cursor: pointer;
+    }
+    .register-btn{
+      margin-top: 4px;
+      text-align: right;
+      font-size: 14px;
+      color: #999999;
+      line-height: 20px;
+      cursor: pointer;
+    }
+  }
+}
+::v-deep{
+  .forms{
+    i {
+      font-size: 20px;
+    }
+    input{
+      border-radius: 4px;
+    }
+  }
+}
+</style>

src/components/news/news.vue

-<template>
-  <div class="new-box">
-    <tap class="child-tabs" :menu="data" @changeChildTab="changeChildTab"></tap>
-    <div class="new-items" v-if="data[dataIndex]">
-      <template v-if="data[0].type != 'list'">
-        <div class="no-data" v-if="data[dataIndex].content == ''">暂无数据</div>
-        <div v-html="data[dataIndex].content"></div>
-        <div class="right-img">
-          <div class="img-box">
-            <img :src="data[dataIndex].image" alt="" class="photo">
-            <div class="line"></div>
-          </div>
-          <slot name="imgBtn"></slot>
-        </div>
-      </template>
-      <template v-else>
-        <slot name="list"></slot>
-      </template>
-    </div>
-  </div>
-</template>
-<script>
-import tap from './tab/changeTab.vue'
-export default {
-  props: {
-    data: {
-      type: Array,
-      default: {}
-    },
-    defaultPage: {
-      type: Number,
-      default: 0
-    }
-  },
-  components: {
-    tap,
-  },
-  data() {
-    return {
-      dataIndex: 0
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.dataIndex = this.defaultPage
-    })
-  },
-  methods: {
-    changeChildTab(index) {
-      this.$emit('changeIndex', index)
-      this.dataIndex = index
-      this.$forceUpdate()
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.no-data{
-  width: 100%;
-  text-align: center;
-  color: #999;
-  font-size: 26px;
-}
-.new-box{
-  width: 100%;
-}
-.child-tabs{
-  width: 670px;
-  margin-bottom: 40px;
-}
-.new-items{
-  // width: 670px;
-  display: flex;
-  ::v-deep p{
-    img{
-      width: 100%;
-      display: block;
-    }
-  }
-  .img-box{
-    position: relative;
-    margin-left: 15px;
-  }
-  .right-img{
-    position: relative;
-    margin-left: auto;
-    .line{
-      position: absolute;
-      top: 35px;
-      left: -15px;
-      width: 213px;
-      height: 280px;
-      border: 1px solid #979797;
-    }
-    .photo{
-      position: relative;
-      z-index: 9;
-      width: 235px;
-      height: 300px;
-      display: flex;
-      position: relative;
-    }
-  }
-}
-</style>

src/components/news/newsList.vue

-<template>
-  <div>
-    <ul>
-      <template v-for="(item, index) in data">
-        <li :key="index" @click="goPage(item.source)">
-          <img :src="item.photo_uri" alt="">
-          <div class="right-txt">
-            <div class="title">{{ item.title }}</div>
-            <div class="cont-txt">{{ item.summary }}</div>
-            <div class="time">{{ item.updated_time }}</div>
-          </div>
-        </li>
-      </template>
-    </ul>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'newsList',
-    props: {
-      data: {
-        type: Array,
-        default: {}
-      }
-    },
-    methods: {
-      goPage(url) {
-        window.open(url)
-      }
-    }
-  }
-</script>
-<style lang="scss" scoped>
-ul{
-  width: 100%;
-  // width: 700px;
-  li{
-    cursor: pointer;
-    display: flex;
-    padding: 40px 0;
-    border-bottom: 1px solid #ccc;
-    &:nth-child(1){
-      padding-top: 0;
-    }
-    img{
-      width: 218px;
-      height: 145px;
-    }
-    .right-txt{
-      margin-left: 20px;
-      .title{
-        font-size: 16px;
-        font-weight: bold;
-        color: #303030;
-        line-height: 22px;
-      }
-      .cont-txt{
-        // width: 461px;
-        font-size: 14px;
-        font-weight: bold;
-        color: #ADADAD;
-        line-height: 24px;
-        margin-top: 20px;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 3;
-        overflow: hidden;
-      }
-      .time{
-        margin-top: 14px;
-        font-size: 12px;
-        font-weight: bold;
-        color: #B6B6B6;
-        line-height: 17px;
-      }
-    }
-  }
-}
-</style>
\ No newline at end of file

src/components/news/tab/bannerTab.vue

-<template>
-  <div>
-    <div class="top-nav">
-      <div class="min-height-img" :style="getImg(data.imgUrl)">
-      </div>
-      <div class="center97">
-        <ul class="menu">
-          <template v-for="(item, index) in data.menu">
-            <li
-              :key="index"
-              :class="activeIndex == index ? 'active' : ''"
-              @click="tab(index, item)"
-            >{{item}}</li>
-          </template>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  components: {
-  },
-  props: {
-    data: {
-      type: Object,
-      default: {}
-    }
-  },
-  data() {
-    return {
-      activeIndex: 0
-    }
-  },
-  computed: {
-    getImg() {
-      return (url) => {
-        return `background:url(${url});background-size: cover;`
-      }
-    }
-  },
-  methods: {
-    tab(index, title) {
-      // if(this.$route.path === '/presence' && title === '学生风采') {
-      //   this.$router.push({ path: '/index' })
-      // }
-      this.activeIndex = index
-      this.$emit('changeTab', this.activeIndex)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.center97{
-  width: 970px;
-  margin: 0 auto;
-}
-.min-height-img{
-  height: 190px;
-  background-size: cover;
-}
-.top-nav{
-  .center97{
-    position: relative;
-  }
-  img{
-    width: 100%;
-    display: block;
-  }
-  .menu{
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    li{
-      width: 128px;
-      line-height: 36px;
-      text-align: center;
-      color: #fff;
-      font-size: 16px;
-      margin-right: 2px;
-      cursor: pointer;
-      background: #BF0927;
-      &.active{
-        background: #fff;
-        color: #C70025;
-      }
-    }
-  }
-}
-</style>

src/components/news/tab/changeTab.vue

-<template>
-  <div>
-    <ul class="child-tab">
-      <template v-for="(item, index) in menu">
-        <li
-          :key="index"
-          :class="activeIndex == index ? 'active' : ''"
-          @click="tab(index)"
-        >{{ item.title }}</li>
-      </template>
-    </ul>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    menu: {
-      type: Array,
-      default: []
-    }
-  },
-  data() {
-    return {
-      activeIndex: 0
-    }
-  },
-  methods: {
-    tab(index) {
-      this.activeIndex = index
-      this.$emit('changeChildTab', this.activeIndex)
-    }
-  },
-  mounted() {
-    this.$route.query.type && (this.activeIndex = this.$route.query.type)
-  }
-}
-</script>
-<style lang="scss" scoped>
-.center97{
-  width: 970px;
-  margin: 0 auto;
-}
-.child-tab{
-  display: flex;
-  justify-content: flex-end;
-  // width: 670px;
-  border-bottom: 1px solid #979797;
-  li{
-    cursor: pointer;
-    position: relative;
-    line-height: 42px;
-    padding: 0 22px;
-    font-size: 14px;
-    color: #222;
-    &.active{
-      border: 1px solid #979797;
-      border-bottom: none;
-      border-top: 2px solid #BF0927;
-      &::after{
-        content: '';
-        width: 100%;
-        height: 3px;
-        background: #fff;
-        position: absolute;
-        bottom: -1px;
-        left: 0;
-      }
-    }
-  }
-}
-</style>

src/components/news/teachingList.vue

-<template>
-  <div>
-    <ul>
-      <template v-if="data.length">
-        <template v-for="(item, index) in data">
-          <li :key="index">
-            <div>
-              <img v-if="type === 1" :src="item.photo_uri" alt="">
-            </div>
-            <div class="info">
-              <div class="name">{{ item.title }}</div>
-              <div class="p">{{ item.summary }}</div>
-            </div>
-          </li>
-        </template>
-      </template>
-      <template v-else>
-        <div class="no-data">暂无数据</div>
-      </template>
-    </ul>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {}
-    },
-    props: {
-      data: {
-        type: Array,
-        default: {}
-      },
-      type: {
-        type: Number,
-        default: 0
-      }
-    }
-  }
-</script>
-<style lang="scss" scoped>
-.no-data{
-  width: 100%;
-  text-align: center;
-  color: #999;
-  font-size: 26px;
-}
-ul{
-  li{
-    cursor: pointer;
-    display: flex;
-    border-bottom: 1px solid #F5F6F7;
-    padding: 30px 0;
-    img{
-      width: 120px;
-      // height: 140px;
-    }
-    .info{
-      margin-left: 20px;
-    }
-    .name{
-      font-size: 16px;
-      font-weight: bold;
-      color: #222222;
-      line-height: 22px;
-      margin-bottom: 10px;
-    }
-    .p{
-      font-size: 14px;
-      color: #222222;
-      line-height: 20px;
-      margin-bottom: 5px;
-    }
-  }
-}
-</style>

src/components/tabs/btnTabs.vue

+<template>
+  <div>
+    <div class="btn-tabs-boxs">
+      <template v-for="(item, index) in data.options">
+        <div :key="index" :class="tabsIndex == index && 'active'" @click="tabs(index)">{{ item }}</div>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    return {
+      tabsIndex: 0
+    }    
+  },
+  mounted() {},
+  methods: {
+    tabs(n) {
+      this.tabsIndex = n
+      this.$emit('tabsChange', n)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.btn-tabs-boxs{
+    // padding: 24px 0 30px;
+    display: flex;
+    justify-content: center;
+    div{
+      cursor: pointer;
+      text-align: center;
+      width: 200px;
+      height: 56px;
+      background: #F9F9F9;
+      font-size: 18px;
+      color: #666666;
+      line-height: 56px;
+      &.active{
+        color: #fff;
+        background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+      }
+    }
+  }
+</style>

src/components/tabs/noData.vue

+<template>
+  <div class="no-data-box">
+    <div class="icon"></div>
+    <div class="txt">暂时没有任何内容</div>
+  </div>
+</template>
+<script>
+export default {
+}
+</script>
+<style lang="scss" scoped>
+.no-data-box{
+  width: 200px;
+  margin: 0 auto;
+  .icon{
+    width: 200px;
+    height: 171px;
+    background: url(https://zws-imgs-pub.ezijing.com/static/public/61ec7327f046bab48226ac43c4fbd4d8.png);
+    background-size: 100% 100%;
+  }
+  .txt{
+    text-align: center;
+    font-size: 18px;
+    color: #666666;
+    line-height: 25px;
+    margin: 24px 0;
+  }
+}
+</style>

src/components/tabs/screenTabs.vue

+<template>
+  <div class="tabs-box">
+    <div class="name">{{ data.name }}</div>
+    <ul>
+      <template v-for="(item, index) in data.options">
+        <li
+          :key="index"
+          :class="tabsIndex == index && 'active'"
+          @click="tabs(index)"
+          >{{ item }}</li>
+      </template>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  components: {
+  },
+  data() {
+    return {
+      tabsIndex: 0
+    }
+  },
+  methods: {
+    tabs(n) {
+      this.tabsIndex = n
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.tabs-box{
+  display: flex;
+  justify-content: center;
+  .name{
+    font-size: 14px;
+    color: #666666;
+    line-height: 20px;
+    margin-right: 24px;
+  }
+  ul{
+    display: flex;
+    li{
+      position: relative;
+      font-size: 14px;
+      color: #666666;
+      line-height: 20px;
+      margin-right: 24px;
+      cursor: pointer;
+      &.active{
+        &::after{
+          content: '';
+          position: absolute;
+          bottom: -4px;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          background: #AF1B40;
+          border-radius: 1px;
+        }
+      }
+    }
+  }
+}
+</style>

src/index.html

@@ -4,12 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta content="origin" name="referrer" />
-    <title>索菲亚大学金融方向工商管理硕士项目</title>
-    <!-- <meta
-      name="viewport"
-      id="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"
-    /> -->
+    <title></title>
     <meta
       name="viewport"
       id="viewport"

src/main.js

@@ -8,6 +8,8 @@ import './style.scss' // 定义 element-ui主题色 + 公共样式
 import router from './router' // router定义
 import store from './store'
 import App from './app.vue'
+import Calendar from 'vue-mobile-calendar'
+Vue.use(Calendar)
 
 // import cTool from '@tool'
 /* 引入 md5 */

src/pages/account/register.vue

+<template>
+  <div class="reg-form-box">
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm forms">
+      <el-form-item label="学校" prop="region">
+        <el-select v-model="ruleForm.region" placeholder="请选择" class="width100">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="姓名" prop="name">
+        <el-input v-model="ruleForm.name"></el-input>
+      </el-form-item>
+      <el-form-item label="手机号" prop="phone">
+        <el-input v-model="ruleForm.phone"></el-input>
+      </el-form-item>
+      <el-form-item label="身份证号" prop="codeId">
+        <el-input v-model="ruleForm.codeId"></el-input>
+      </el-form-item>
+      <el-form-item label="密码" prop="pws">
+        <el-input v-model="ruleForm.pws"></el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="qpws">
+        <el-input v-model="ruleForm.qpws"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')" class="sub-btn">立即创建</el-button>
+        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        ruleForm: {
+          name: '',
+          region: '',
+          phone: '',
+          codeId: '',
+          delivery: false,
+          type: [],
+          pws: '',
+          qpws: ''
+        },
+        rules: {
+          name: [
+            { required: true, message: '请输入活动名称', trigger: 'blur' },
+            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+          ],
+          region: [
+            { required: true, message: '请选择活动区域', trigger: 'change' }
+          ],
+          phone: [
+            { required: true, message: '请输入手机号', trigger: 'blur' }
+          ],
+          codeId: [
+            { required: true, message: '请输入', trigger: 'blur' }
+          ],
+          pws: [
+            { required: true, message: '请输入', trigger: 'blur' }
+          ],
+          qpws: [
+            { required: true, message: '请输入', trigger: 'blur' }
+          ]
+        }
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+.reg-form-box{
+  width: 380px;
+  margin: 0 auto;
+  padding: 24px 0;
+  .width100{
+    width: 100%;
+  }
+}
+::v-deep{
+  .forms{
+    i {
+      font-size: 20px;
+    }
+    input{
+      border-radius: 4px;
+    }
+  }
+}
+.sub-btn{
+  width: 270px;
+  height: 40px;
+  background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+  border-radius: 4px;
+}
+</style>

src/pages/alumniWork/index.vue

-<template>
-  <div>
-    <banner-tab :data="bannerTabData" @changeTab="changeTab"></banner-tab>
-    <div class="cont-mian center97">
-      <div class="module" v-if="activeIndex == 0">
-        <div class="left-txt" v-html="content"></div>
-        <img src="https://zws-imgs-pub.ezijing.com/static/public/3128bdbea80c04f1cbe1d3d5c600f2c5.png" alt="" class="exh" />
-      </div>
-      <div class="module" v-if="activeIndex == 1">
-        <div>
-          <div class="video-box">
-            <div class="text-cont">
-              为给紫荆的校友提供更好的服务，使校友之间的联络更加紧密、促进校友和紫荆的共同发展，紫荆教育特成立紫荆校友办，期望帮助校友建立广阔交流的人脉网络和校友平台。紫荆校友办是为校友提供服务的窗口和平台。校友办始终以服务校友为使命，通过组织形式多样的校友活动、搭建便捷高效的交流平台、传播校友的同学情谊以及向校友提供教育服务等渠道。
-            </div>
-            <div class="videos">
-              <video
-                width="420"
-                controls
-                src="https://zws-imgs-pub.ezijing.com/static/public/d54b17ec8d02432ed440285123acc1c0.mp4"
-              ></video>
-            </div>
-          </div>
-          <div class="list-box">
-            <list :data="M1listData"></list>
-          </div>
-        </div>
-      </div>
-      <div class="module" v-if="activeIndex == 2">
-        <ul class="list-fc">
-          <template v-for="(item, index) in M2listData">
-            <li :key="index" @click="goPage(item.source)">{{ item.title }}</li>
-          </template>
-        </ul>
-        <img src="https://zws-imgs-pub.ezijing.com/static/public/3128bdbea80c04f1cbe1d3d5c600f2c5.png" alt="" class="exh" />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import cAction from '@action'
-import bannerTab from '@/components/news/tab/bannerTab.vue'
-import list from '@/components/news/newsList.vue'
-export default {
-  components: {
-    bannerTab,
-    list
-  },
-  data() {
-    return {
-      bannerTabData: {
-        menu: ['校友会', '校友活动', '校友风采'],
-        imgUrl: 'https://zws-imgs-pub.ezijing.com/static/public/0390956f08b4f3f080171397f2238a12.png'
-      },
-      activeIndex: 0,
-      tabMenu: ['好书推荐', '校友手册', '校友卡申领', '终身邮箱'],
-      content: '',
-      requestParam: {
-        page: 1,
-        per_page: 100,
-        type: 59,
-        project_id: 1000
-      },
-      M1listData: [],
-      M2listData: []
-    }
-  },
-  mounted() {
-    this.getData()
-    this.getM1List()
-    this.getM2List()
-  },
-  methods: {
-    changeTab(index) {
-      this.activeIndex = index
-    },
-    changeChildTab(index) {
-      // this.tabShowItem = index
-    },
-    getData() {
-      cAction.reportAction
-        .getContent('校友会')
-        .then(json => {
-          if (json !== null) {
-            this.content = json[0].content
-          }
-        })
-        .catch(e => {
-          this.$message.error(e.message)
-        })
-        .finally(() => {})
-    },
-    getM1List() {
-      this.requestParam.type = 59
-      cAction.reportAction
-        .getNews(this.requestParam)
-        .then(json => {
-          this.M1listData = json
-        })
-        .catch(e => {
-          this.$message.error(e.message)
-        })
-        .finally(() => {})
-    },
-    getM2List() {
-      this.requestParam.type = 60
-      cAction.reportAction
-        .getNews(this.requestParam)
-        .then(json => {
-          this.M2listData = json
-        })
-        .catch(e => {
-          this.$message.error(e.message)
-        })
-        .finally(() => {})
-    },
-    goPage(url) {
-      window.open(url)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.list-box {
-  // padding-top: 40px;
-  margin-top: 40px;
-  ::v-deep {
-    ul {
-      &:nth-child(1) {
-        padding-top: 40px;
-        border-top: 1px solid #ccc !important;
-      }
-    }
-  }
-}
-.cont-mian {
-  .module {
-    padding-top: 30px;
-    padding-bottom: 60px;
-    display: flex;
-    .left-txt {
-      width: 670px;
-    }
-    .exh {
-      margin-left: auto;
-      // display: block;
-      width: 235px;
-      height: 300px;
-    }
-  }
-}
-.center97 {
-  width: 970px;
-  margin: 0 auto;
-}
-.top-nav {
-  .center97 {
-    position: relative;
-  }
-  img {
-    width: 100%;
-    display: block;
-  }
-  .menu {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    li {
-      cursor: pointer;
-      width: 128px;
-      line-height: 36px;
-      text-align: center;
-      color: #fff;
-      font-size: 16px;
-      margin-right: 2px;
-      cursor: pointer;
-      background: #bf0927;
-      &.active {
-        background: #fff;
-        color: #c70025;
-      }
-    }
-  }
-}
-.video-box {
-  width: 100%;
-  display: flex;
-  // padding-top: 30px;
-  .text-cont {
-    width: 478px;
-    font-size: 14px;
-    color: #000000;
-    line-height: 30px;
-  }
-  .videos {
-    margin-left: auto;
-  }
-}
-.list-fc {
-  li {
-    cursor: pointer;
-    width: 673px;
-    line-height: 82px;
-    border-bottom: 1px solid #ccc;
-    font-size: 16px;
-    font-weight: bold;
-    color: #222222;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-.child-tab {
-  width: 100%;
-}
-</style>

src/pages/home/index.vue

 <template>
   <div>
-    <div class="banner-box">
-      <swiper :options="swiperOptions" ref="mySwiper" class="item-swiper">
-        <swiper-slide>
-          <img src="https://zws-imgs-pub.ezijing.com/static/public/969cfb1308e498492ffce667b9d4d34f.jpg" alt="" />
-        </swiper-slide>
-        <div class="swiper-button-prev" slot="button-prev"></div>
-        <div class="swiper-button-next" slot="button-next"></div>
-      </swiper>
-      <ul class="nav">
-        <li @click="goPage('/my')">
-          <div class="icon">
-            <img src="../../assets/img/lang/banner-i1.png" alt="" />
+    <div class="home-module-news content-max-width">
+      <div class="slide-box">
+        <swiper ref="mySwiper" :options="swiperOptions" class="item-swiper">
+          <swiper-slide v-for="(item, index) in swiperList" :key="index">
+            <img :src="item.url" alt="" />
+          </swiper-slide>
+        </swiper>
+        <div class="assist">
+          <div class="text">{{ swiperList[swiperIndex].content }}</div>
+          <div class="pagination">
+            <span v-for="(item, index) in swiperList" :key="index" :class="index == swiperIndex && 'active'"></span>
           </div>
-          <div class="txt">报名申请</div>
-          <div class="block"></div>
-        </li>
-        <li @click="goPreview('https://zws-imgs-pub.ezijing.com/static/public/fcac7efb74162f33045f8876d28c5b12.pdf')">
-          <div class="icon">
-            <img src="../../assets/img/lang/banner-i2.png" alt="" />
-          </div>
-          <div class="txt">招生简章</div>
-        </li>
-        <li @click="goPage('/project')">
-          <div class="icon">
-            <img src="../../assets/img/lang/banner-i3.png" alt="" />
-          </div>
-          <div class="txt">项目介绍</div>
-        </li>
-        <li @click="goPage('/recruit')">
-          <div class="icon">
-            <img src="../../assets/img/lang/banner-i4.png" alt="" />
-          </div>
-          <div class="txt">资料下载</div>
-        </li>
-        <li @click="goPage('/recruit', 2)">
-          <div class="icon">
-            <img src="../../assets/img/lang/banner-i5.png" alt="" />
-          </div>
-          <div class="txt">常见问题</div>
-        </li>
-      </ul>
+        </div>
+      </div>
+      <div class="news-box">
+        <div class="tabs-btn">
+          <div :class="!tabsIndex ? 'btn active' : 'btn'" @click="tabs(0)">新闻动态</div>
+          <div :class="tabsIndex ? 'btn active' : 'btn'" @click="tabs(1)">活动公告</div>
+        </div>
+        <div class="news-content">
+          <div class="title">关于1+X金融数字化营销证书考核站点申报的通知</div>
+          <ul>
+            <li><span><router-link to="/news/detail">大数据全国分布</router-link></span></li>
+            <li><span><router-link to="/news/detail">关于举办1+X金融数字化营销证书师</router-link></span></li>
+            <li><span><router-link to="/news/detail">关于举办1+X金融数字化营销证书师资培训的通知</router-link></span></li>
+            <li><span><router-link to="/news/detail">关于举办1+X金融数字化营销证书师资培训的通知，北京（项…</router-link></span><div class="more"><router-link to="/news">更多</router-link></div></li>
+          </ul>
+        </div>
+      </div>
     </div>
-    <div class="new-module1">
-      <div class="title">项目特色</div>
+    <div class="home-module-poster content-max-width">
+      <img src="https://zws-imgs-pub.ezijing.com/static/public/e4abb49951a743fb6213ad4888a8bf28.png" alt="">
+    </div>
+    <div class="home-module-entrance content-max-width">
       <ul>
         <li>
-          <img src="../../assets/img/lang/home-s-icon1.png" alt="" />
-          <div class="p">深厚底蕴<br />的超个人心理学学府</div>
-        </li>
-        <li>
-          <img src="../../assets/img/lang/home-s-icon2.png" alt="" />
-          <div class="p">中美双认证大学</div>
+          <div class="entrance">
+            <div class="btn" @click="goPage('/train')">
+              <span>活动报名</span>
+              <div class="icon">→</div>
+            </div>
+            <div class="btn">
+              <span>试点申报</span>
+              <div class="icon">→</div>
+            </div>
+          </div>
         </li>
         <li>
-          <img src="../../assets/img/lang/home-s-icon3.png" alt="" />
-          <div class="p">TOP20<br />全美在线心理学博士排名</div>
+          <div class="entrance one" @click="goPage('https://x-learning.ezijing.com/', 1)">
+            <div class="btn">
+              <span>学习平台入口</span>
+            </div>
+            <div class="btn">
+              <div class="icon">→</div>
+            </div>
+          </div>
         </li>
         <li>
-          <img src="../../assets/img/lang/home-s-icon4.png" alt="" />
-          <div class="p">工商管理<br />融合心理学</div>
+          <div class="entrance">
+            <div class="btn" @click="goPage('/query')">
+              <span>成绩查询</span>
+              <div class="icon">→</div>
+            </div>
+            <div class="btn" @click="goPage('/query')">
+              <span>证书查询</span>
+              <div class="icon">→</div>
+            </div>
+          </div>
         </li>
         <li>
-          <img src="../../assets/img/lang/home-s-icon5.png" alt="" />
-          <div class="p">地处硅谷核心<br />比邻斯坦福</div>
+          <div class="entrance">
+            <div class="btn">
+              <span>考试软件</span>
+              <div class="icon">→</div>
+            </div>
+          </div>
         </li>
       </ul>
     </div>
-    <div class="new-module2">
-      <div class="con970">
-        <div class="top-con">
-          <div class="text">通过FMBA课程的学习<br/><span>获得优势：</span></div>
-          <img src="https://zws-imgs-pub.ezijing.com/static/public/1b4ac75951cfe717db4916bea71603d1.png" alt="">
-        </div>
-        <div class="con-txt">毕业于美国名校<br/>成长为国际化金融人才<br/>具备领军人物的创新精神<br/>数个精准的金融高端社交圈<br/>熟稔金融之术，深谙管理之道<br/>拥有与中美一流师资面对面切磋的宝贵经验<br/>成为紫荆遍布全球校友网络中的一员<br/>全新的人生轨迹</div>
-      </div>
-    </div>
-    <div class="module3">
-      <img
-        src="https://zws-imgs-pub.ezijing.com/static/public/de45f304b8c09b8080b3d3c6202b62f7.jpg"
-        alt=""
-        class="bg"
-      />
-      <img src="../../assets/img/lang/m3-btn.png" alt="" class="btn" @click="videoplay()" />
-      <div id="videoAlert" v-if="videoShow">
-        <div class="cont">
-          <div class="close-box" @click="videoShow = false"></div>
-          <video
-            src="https://zws-imgs-pub.ezijing.com/static/public/630810d0c5276d1195325d88d40a0034.mp4"
-            width=""
-            height=""
-            controls="controls"
-            preload="none"
-            autoplay
-          ></video>
-        </div>
-      </div>
-    </div>
-    <div class="module4">
-      <div class="con970 floats">
-        <div class="swiper-mian" @click="goPreview('https://mp.weixin.qq.com/s/YFcZMtuykIXC9_eNyf_Ijg')">
-          <swiper :options="swiperOptions2" ref="mySwiper2" class="item-swiper">
-            <swiper-slide>
-              <img src="https://zws-imgs-pub.ezijing.com/static/public/7e8d7f04e99a15bb637efa48d2c0c14d.jpg" alt="" />
-            </swiper-slide>
-            <div class="swiper-pagination" slot="pagination"></div>
-          </swiper>
-          <div class="written">
-            <div class="btn">教授观点</div>
-            <div class="txt">肇越：公积金制度如何改革才能让老百姓得实惠？</div>
-          </div>
-        </div>
-        <div
-          class="swiper-mian float-r"
-          @click="
-            goPreview(
-              'https://i3jtw0.smartapps.cn/subpackage/pages/docdetails/doc-details?id=ucms_7yGhOpXQ5Ej&oauthType=search&hostname=baiduboxapp&_swebfr=1'
-            )
-          "
-        >
-          <swiper :options="swiperOptions2" ref="mySwiper2" class="item-swiper">
-            <swiper-slide>
-              <img src="https://zws-imgs-pub.ezijing.com/static/public/010f4dd0338d68dd8a0e54b46b7edb21.png" alt="" />
-            </swiper-slide>
-            <div class="swiper-pagination" slot="pagination"></div>
-          </swiper>
-          <div class="written">
-            <div class="btn color">教授观点</div>
-            <div class="txt">洪灝：牛市中的三大信号</div>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
-import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
+import { Swiper, SwiperSlide, directive, pagination } from 'vue-awesome-swiper'
 import 'swiper/swiper-bundle.css'
 export default {
   components: {
     Swiper,
-    SwiperSlide
+    SwiperSlide,
+    pagination
   },
   directives: {
     swiper: directive
   },
   data() {
+    const _this = this
     return {
-      swiperOptions: {
-        observer: true,
-        autoHeight: true,
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev'
+      tabsIndex: 0,
+      swiperList: [
+        {
+          url: 'https://zws-imgs-pub.ezijing.com/static/public/5436086a25645f903303b4b9013a6a2d.png',
+          content: '关于1+X金融数字化营销证书考核站点申报'
+        },
+        {
+          url: 'https://zws-imgs-pub.ezijing.com/static/public/5436086a25645f903303b4b9013a6a2d.png',
+          content: '关于1+X金融数字化营销证书考核站点申报2'
         }
-      },
-      swiperOptions2: {
-        observer: true,
-        pagination: {
-          el: '.swiper-pagination',
-          clickable: true
+      ],
+      swiperOptions: {
+        on: {
+          slideChangeTransitionStart: function() {
+            _this.swiperIndex = this.activeIndex
+          }
         }
       },
+      swiperIndex: 0,
       videoShow: false
     }
   },
   computed: {
     swiper() {
       return this.$refs.mySwiper.$swiper
-    },
-    swiper2() {
-      return this.$refs.mySwiper2.$swiper
     }
   },
   methods: {
-    videoplay() {
-      this.videoShow = true
-      var video = document.querySelector('#videoAlert')
-      video.play()
+    tabs(n) {
+      this.tabsIndex = n
     },
-    mas() {
-      this.$message('功能暂未开放')
-    },
-    goPage(path, type) {
-      if (type === 2) {
-        this.$router.push({
-          path: path,
-          query: {
-            type: 2
-          }
-        })
+    goPage(path, n) {
+      if (n) {
+        window.open(path)
       } else {
         this.$router.push({
           path: path
         })
       }
-    },
-    goPreview(url) {
-      window.open(url)
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-.con970 {
-  width: 970px;
+.content-max-width{
+  width: 1200px;
   margin: 0 auto;
 }
-.floats {
+
+.home-module-news{
+  padding: 24px 0;
   display: flex;
-}
-.banner-box {
-  position: relative;
-  width: 100%;
-  .item-swiper {
+  .slide-box{
     position: relative;
-    img {
+    width: 630px;
+    height: 354px;
+    .item-swiper{
       width: 100%;
-      display: block;
-    }
-    .swiper-button-prev {
-      position: absolute;
-      top: 50%;
-      left: 125px;
-      -webkit-transform: translateY(-50%);
-      width: 22px;
-      height: 31px;
-      background: url(../../assets/img/lang/banner-arl.png);
-      background-size: 100% 100%;
-      z-index: 9;
-      margin: 0;
-      &::after {
-        content: '';
+      height: 100%;
+      img{
+        display: block;
+        width: 100%;
+        height: 100%;
       }
     }
-    .swiper-button-next {
+    .assist{
+      display: flex;
       position: absolute;
-      top: 50%;
-      right: 125px;
-      -webkit-transform: translateY(-50%);
-      width: 22px;
-      height: 31px;
-      background: url(../../assets/img/lang/banner-arr.png);
-      background-size: 100% 100%;
-      z-index: 9;
-      margin: 0;
-      &::after {
-        content: '';
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 44px;
+      background: rgba(0, 0, 0, .3);
+      z-index: 99;
+      .text{
+        font-size: 14px;
+        color: #FFFFFF;
+        line-height: 44px;
+        margin-left: 24px;
       }
     }
-  }
-  .nav {
-    position: absolute;
-    bottom: -67px;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    width: 970px;
-    z-index: 9;
-    display: flex;
-    height: 134px;
-    li {
-      background: rgba(191, 9, 39, 0.7);
-      flex: 1;
-      .icon {
-        width: 100%;
-        position: relative;
-        height: 100px;
-        border-right: 1px solid rgba(255, 255, 255, 0.3);
-        img {
-          position: absolute;
-          top: 42%;
-          left: 50%;
-          -webkit-transform: translate(-50%, -50%);
+    .pagination{
+      display: flex;
+      margin-left: auto;
+      align-items: center;
+      padding-right: 40px;
+      span{
+        width: 8px;
+        height: 8px;
+        background: #000000;
+        opacity: 0.2;
+        border-radius: 50%;
+        margin-left: 8px;
+        &.active{
+          opacity: 1;
+          background: #fff;
         }
       }
-      .txt {
-        font-size: 19px;
-        color: #fff;
-        text-align: center;
-        line-height: 34px;
-      }
-      .block {
-        width: 100%;
-        height: 20px;
-        display: none;
-      }
-      &:hover {
-        margin-top: -20px;
-        padding-bottom: 20px;
-      }
     }
   }
-}
-.module1 {
-  padding: 127px 0 60px;
-  background: #fff;
-  .title {
-    text-align: center;
-    color: #bf0927;
-    font-size: 32px;
-    margin-bottom: 40px;
-  }
-  ul {
-    width: 970px;
-    margin: 0 auto;
-    li {
+  .news-box{
+    width: 546px;
+    margin-left: auto;
+    .tabs-btn{
       display: flex;
-      margin-bottom: 17px;
-      .txt {
-        position: relative;
-        padding-left: 45px;
-        width: 528px;
-        font-size: 18px;
-        color: #717171;
-        &.mar {
-          margin-right: 100px;
-        }
-        &::after {
-          content: '';
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          background: #717171;
-          position: absolute;
-          top: 50%;
-          left: 20px;
-          -webkit-transform: translateY(-50%);
+      .btn{
+        cursor: pointer;
+        width: 273px;
+        height: 74px;
+        background: #F9F9F9;
+        color: #666666;
+        line-height: 74px;
+        text-align: center;
+        font-size: 24px;
+        &.active{
+          color: #fff;
+          background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
         }
       }
     }
-  }
-}
-.module2 {
-  width: 100%;
-  height: 378px;
-  background: url(../../assets/img/lang/m2-bg.png);
-  background-size: cover;
-  .title {
-    color: #fff;
-    font-size: 32px;
-    padding: 65px 0 25px;
-    text-align: center;
-  }
-  .txt {
-    color: #fff;
-    font-size: 16px;
-    text-align: center;
-    margin-bottom: 7px;
-  }
-}
-.module3 {
-  position: relative;
-  width: 100%;
-  margin-top: 60px;
-  .bg {
-    width: 100%;
-    display: block;
-  }
-  .btn {
-    width: 113px;
-    height: 113px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-  }
-}
-.module4 {
-  background: #fff;
-  padding: 60px 0 30px;
-  .item-swiper {
-    width: 465px;
-    height: 310px;
-  }
-  .float-r {
-    margin-left: auto !important;
-  }
-  ::v-deep {
-    .swiper-container {
-      margin: 0;
-      position: initial;
-    }
-    .swiper-pagination-bullets {
-      bottom: -18px;
-    }
-    .swiper-pagination-bullet-active {
-      background: #bf0927;
-    }
-  }
-  .swiper-mian {
-    position: relative;
-    .written {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 64px;
-      background: rgba(0, 0, 0, 0.3);
-      display: flex;
-      z-index: 9;
-      .btn {
-        width: 114px;
-        height: 64px;
-        background: #bf0927;
+    .news-content{
+      .title{
         text-align: center;
-        line-height: 64px;
-        color: #fff;
-        font-size: 18px;
-        &.color {
-          background: #e5b075;
-        }
+        font-size: 24px;
+        font-weight: bold;
+        color: #C01540;
+        line-height: 33px;
+        margin-top: 24px;
       }
-      .txt {
-        padding: 5px 10px 0;
-        font-size: 16px;
-        font-weight: 600;
-        color: #ffffff;
-        line-height: 26px;
+      ul{
+        margin-top: 10px;
+        li{
+          cursor: pointer;
+          display: flex;
+          width: 100%;
+          height: 49px;
+          border-bottom: 1px solid #eee;
+          align-items: center;
+          span{
+            font-size: 18px;
+            color: #666666;
+          }
+          .more{
+            font-size: 18px;
+            color: #5788D4;
+            margin-left: auto;
+          }
+        }
       }
     }
   }
 }
-
-#videoAlert {
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 100;
-  // display: none;
-}
-// #videoAlert .cont{position: relative;}
-#videoAlert .close {
-  width: 50px;
-  position: absolute;
-  right: 0;
-  top: 1%;
-  max-width: 150px;
-}
-#videoAlert .close img {
-  width: 50px;
-}
-#videoAlert video {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  width: 80%;
-  height: auto;
-  z-index: 9;
-}
-@media (max-width: 1400px) {
-  #videoAlert video {
-    width: 60%;
-  }
-}
-#videoAlert .close-box {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-// $type: screen;
-// $proto: max-width;
-// $value: 1366px;
-// .content {
-//   width: 100%;
-//   height: 814px;
-//   @media #{$type} and ($proto: $value) {
-//     height: 684px;
-//   }
-//   overflow: hidden;
-//   font-weight: 600;
-//   color: #ffffff;
-//   font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei';
-//   background: {
-//     image: url('../../assets/img/index_background.jpg');
-//     size: cover;
-//     position: center;
-//     clip: border-box;
-//     repeat: no-repeat;
-//   }
-//   > h3 {
-//     max-width: 1200px;
-//     margin: {
-//       top: 310px;
-//       left: auto;
-//       right: auto;
-//     }
-//     @media #{$type} and ($proto: $value) {
-//       margin-top: 180px;
-//     }
-//     height: 40px;
-//     line-height: 40px;
-//     font-size: 28px;
-//     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
-//   }
-//   > h2 {
-//     max-width: 1200px;
-//     margin: 16px auto 0;
-//     height: 84px;
-//     font-size: 60px;
-//     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
-//     span {
-//       font-size: 40px;
-//     }
-//   }
-// }
-// .menu {
-//   max-width: 1200px;
-//   margin: 400px auto 0;
-//   display: flex;
-//   justify-content: space-between;
-//   background: url('../../assets/img/index_slogo.png') no-repeat;
-//   padding-top: 200px;
-//   li {
-//     width: 186px;
-//     height: 60px;
-//     border: 2px solid #c41230;
-//     line-height: 60px;
-//     background-color: rgba(0, 0, 0, 0.64);
-//     font-size: 18px;
-//     color: #ffffff;
-//     display: flex;
-//     align-items: center;
-//     justify-content: center;
-//     img {
-//       width: 40px;
-//       height: 40px;
-//       margin: {
-//         right: 10px;
-//       }
-//       overflow: hidden;
-//       vertical-align: middle;
-//     }
-//   }
-//   .sign {
-//     background-color: #c41230;
-//     justify-content: center;
-//   }
-// }
-.module4 {
-  .swiper-slide {
-    img {
-      position: absolute;
-      top: 0;
-      left: 50%;
-      -webkit-transform: translateX(-50%);
-      height: 100%;
-    }
+.home-module-poster{
+  img{
+    width: 100%;
+    display: block;
   }
 }
-.new-module1 {
-  width: 970px;
-  margin: 0 auto;
-  padding: 127px 0 60px;
-  .title {
-    text-align: center;
-    font-size: 32px;
-    font-weight: bold;
-    color: #bf0927;
-    line-height: 45px;
-  }
-  ul {
+.home-module-entrance{
+  padding: 24px 0;
+  ul{
     display: flex;
     justify-content: space-between;
-    margin-top: 40px;
-    li {
-      img {
-        width: 61px;
-        height: 61px;
-        margin: 0 auto;
-        display: block;
+    li{
+      width: 290px;
+      height: 174px;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      &:nth-child(1){
+        background-image: url(https://zws-imgs-pub.ezijing.com/static/public/aa5bf0eb195dbc6bb2c620516f98cd34.png);
       }
-      .p {
-        text-align: center;
-        font-size: 18px;
-        color: #222222;
-        line-height: 25px;
-        margin-top: 10px;
+      &:nth-child(2){
+        background-image: url(https://zws-imgs-pub.ezijing.com/static/public/7d12c495871f8a91ed0c153b68c7fb5f.png);
       }
-    }
-  }
-}
-.new-module2 {
-  width: 100%;
-  height: 412px;
-  background: url(https://zws-imgs-pub.ezijing.com/static/public/ba283a3e3550c7513fa1e2cabe827a43.png);
-  background-size: cover;
-  .top-con{
-    display: flex;
-    padding-top: 58px;
-    .text{
-      font-size: 24px;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: 40px;
-      span{
-        font-size: 36px;
+      &:nth-child(3){
+        background-image: url(https://zws-imgs-pub.ezijing.com/static/public/26e5eee05d46a73d332c517eeb3c3b72.png);
+      }
+      &:nth-child(4){
+        background-image: url(https://zws-imgs-pub.ezijing.com/static/public/1f7235d8d4120b76ef051267f8feac0f.png);
+      }
+      .entrance{
+        padding-left: 16px;
+        &.one{
+          .btn{
+            &:nth-child(1){
+              margin-bottom: 12px;
+            }
+            .icon{
+              margin-left: 0;
+            }
+          }
+        }
+        .btn{
+          cursor: pointer;
+          display: flex;
+          &:nth-child(1){
+            margin-bottom: 24px;
+          }
+          span{
+            font-size: 24px;
+            font-weight: bold;
+            color: #FFFFFF;
+          }
+          .icon{
+            font-size: 20px;
+            font-weight: bold;
+            color: #FFFFFF;
+            line-height: 33px;
+            margin-left: 10px;
+          }
+        }
       }
     }
-    img{
-      width: 486px;
-      display: block;
-      margin-left: 10px;
-    }
-  }
-  .con-txt{
-    font-size: 18px;
-    color: #FFFFFF;
-    line-height: 24px;
-    margin-top: 48px;
   }
 }
 </style>

src/pages/letter/index.vue

-<template>
-  <div class="letter">
-    <header class="header">
-      <div class="inner">
-        <div class="logo">
-          <router-link to="/"><img src="../../assets/img/head/ezijing-logo.png" /></router-link>
-        </div>
-      </div>
-    </header>
-    <nav class="nav"><h1 class="title">索菲亚大学金融方向工商管理硕士项目推荐信</h1></nav>
-    <section class="content">
-      <el-form
-        :model="ruleForm"
-        :rules="rules"
-        ref="form"
-        label-width="100px"
-        :label-position="labelPosition"
-        @submit.native.prevent
-        style="max-width: 680px"
-      >
-        <el-form-item label="姓名" prop="provider_name">
-          <el-input v-model="ruleForm.provider_name" @blur="onBlur('provider_name')"></el-input>
-        </el-form-item>
-        <el-form-item label="推荐信内容" prop="letter_content">
-          <el-input
-            type="textarea"
-            :autosize="{ minRows: 6 }"
-            v-model="ruleForm.letter_content"
-            @blur="onBlur('letter_content')"
-          ></el-input>
-        </el-form-item>
-        <el-form-item label="手机号" prop="provider_phone_number">
-          <el-input v-model="ruleForm.provider_phone_number"></el-input>
-        </el-form-item>
-        <el-form-item label="工作单位" prop="provider_company_name">
-          <el-input v-model="ruleForm.provider_company_name" @blur="onBlur('provider_company_name')"></el-input>
-        </el-form-item>
-        <el-form-item label="职务" prop="provider_job_title">
-          <el-input v-model="ruleForm.provider_job_title" @blur="onBlur('provider_job_title')"></el-input>
-        </el-form-item>
-      </el-form>
-      <div class="buttons">
-        <el-button type="primary" @click="handleSubmit">确认提交</el-button>
-      </div>
-    </section>
-
-    <el-dialog title="推荐信提交成功" :visible.sync="dialogVisible" :center="true" width="348px">
-      <div style="text-align: center"><img src="../../assets/images/icon_success.png" /></div>
-      <template #footer>
-        <el-button type="primary" @click="toHome">了解项目</el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import * as api from '@/api/my'
-
-export default {
-  name: 'LetterIndex',
-  data() {
-    return {
-      ruleForm: {
-        provider_name: '',
-        letter_content: '',
-        provider_phone_number: '',
-        provider_company_name: '',
-        provider_job_title: ''
-      },
-      rules: {
-        provider_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
-        letter_content: [{ required: true, message: '请输入推荐信内容', trigger: 'blur' }],
-        provider_phone_number: [{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入手机号', trigger: 'blur' }],
-        provider_company_name: [{ required: true, message: '请输入工作单位', trigger: 'blur' }],
-        provider_job_title: [{ required: true, message: '请输入职务', trigger: 'blur' }]
-      },
-      dialogVisible: false,
-      clientWidth: 0
-    }
-  },
-  computed: {
-    userId() {
-      return this.$route.params.userId
-    },
-    letterId() {
-      return this.$route.params.letterId
-    },
-    labelPosition() {
-      return this.clientWidth < 768 ? 'top' : 'left'
-    }
-  },
-  methods: {
-    // 提交
-    handleSubmit() {
-      this.$refs.form.validate().then(() => {
-        this.handleAddRequest()
-      })
-    },
-    // 提交推荐信
-    handleAddRequest() {
-      api.addLetter(this.userId, this.letterId, this.ruleForm).then(response => {
-        console.log(response)
-        const { error, message } = response
-        if (error.toString() === '0') {
-          this.dialogVisible = true
-        } else {
-          this.$message.error(message)
-        }
-      })
-    },
-    toHome() {
-      this.$router.push('/')
-    },
-    getClientWidth() {
-      this.clientWidth = document.body.clientWidth
-    },
-    onBlur(key) {
-      if (this.ruleForm[key]) {
-        this.ruleForm[key] = this.ruleForm[key].trim()
-      }
-    }
-  },
-  mounted() {
-    this.getClientWidth()
-    document.body.style = 'background-color:#eee;'
-    window.addEventListener('resize', this.getClientWidth)
-  },
-  destroyed() {
-    document.body.style = ''
-    window.removeEventListener('resize', this.getClientWidth)
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.letter {
-  .header {
-    background-color: #fff;
-    .inner {
-      max-width: 1000px;
-      margin: 0 auto;
-    }
-    .logo {
-      padding: 14px 0;
-      img {
-        height: 50px;
-      }
-    }
-  }
-  .nav {
-    background-color: var(--main-color);
-    .title {
-      font-size: 24px;
-      font-weight: 600;
-      color: #fff;
-      line-height: 60px;
-      text-align: center;
-    }
-  }
-  .content {
-    max-width: 1000px;
-    margin: 20px auto;
-    padding: 20px;
-    background-color: #fff;
-    box-sizing: border-box;
-  }
-  ::v-deep .el-input {
-    max-width: 270px;
-  }
-  ::v-deep .el-form--label-top {
-    .el-form-item__label {
-      line-height: 20px;
-    }
-    .el-input {
-      max-width: 100%;
-    }
-  }
-  ::v-deep .el-input__inner,
-  ::v-deep .el-textarea__inner {
-    border-radius: 0;
-  }
-  .buttons {
-    border-top: 1px solid #f1f1f1;
-    padding: 20px 100px;
-  }
-  @media (max-width: 767px) {
-    .logo {
-      text-align: center;
-    }
-    .buttons {
-      padding: 20px 0;
-      .el-button {
-        width: 100%;
-        display: block;
-      }
-    }
-  }
-}
-</style>

src/pages/my/account/home.vue

-<template>
-  <div class="my">
-    <div class="card">
-      <div class="result">
-        <div class="result-left"><img src="../../../assets/images/my_icon.png" />招生办反馈</div>
-        <div class="result-right">{{ result.submit_status_desc || '未收到报名信息' }}</div>
-      </div>
-    </div>
-    <div class="card" style="min-height: 360px">
-      <ul class="nav">
-        <li @click="toApplication"><img src="../../../assets/images/my_01.png" /></li>
-        <li @click="toInterview"><img src="../../../assets/images/my_02.png" /></li>
-        <li @click="toAdmission"><img src="../../../assets/images/my_03.png" /></li>
-      </ul>
-      <div class="progress">
-        <el-steps :active="activeProgress" finish-status="success" align-center>
-          <el-step v-for="(item, index) in 3" :key="index">
-            <template #title>{{ getProgressStatusText(index) }}</template>
-          </el-step>
-        </el-steps>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import * as api from '@/api/my'
-export default {
-  name: 'AppHome',
-  data() {
-    return {
-      material: {},
-      progress: {},
-      submissionStage: {
-        0: ['FILLING', 'PREPAYMENT'],
-        1: ['INTERVIEW_APPLICATION', 'AUDITION', 'INTERVIEW', 'PAYMENT'],
-        2: ['REGISTRATION'],
-        3: ['CLOSED']
-      },
-      result: {}
-    }
-  },
-  computed: {
-    activeProgress() {
-      for (const key in this.submissionStage) {
-        const list = this.submissionStage[key]
-        if (list.includes(this.material.submission_stage)) {
-          return parseInt(key)
-        }
-      }
-      return 0
-    }
-  },
-  methods: {
-    // 获取进度值
-    getProgressStatusText(index) {
-      if (this.activeProgress === index) {
-        return '进行中'
-      } else {
-        return this.activeProgress > index ? '已完成' : '待进行'
-      }
-    },
-    // 获取报名信息
-    getApplication() {
-      api.getApplication().then(response => {
-        const { data, error, message } = response
-        if (error.toString() === '0') {
-          const { material, progress } = data
-          this.material = material
-          this.progress = progress
-        } else {
-          this.$message.error(message)
-        }
-      })
-    },
-    // 获取报名审核状态
-    getApplicationStatus() {
-      api.getApplicationStatus().then(response => {
-        this.result = response.data
-      })
-    },
-    // 报名申请
-    toApplication() {
-      this.$router.push('/my/application?active=application_info')
-    },
-    // 申请面试
-    toInterview() {
-      if (this.activeProgress < 1) {
-        this.$message.warning('请完成报名申请并缴报名费')
-        return
-      }
-      this.$router.push('/my/interview')
-    },
-    // 办理入学
-    toAdmission() {
-      if (this.activeProgress < 2) {
-        this.$message.warning('请等待面试结果')
-        return
-      }
-      this.$router.push('/my/admission')
-    }
-  },
-  beforeMount() {
-    this.getApplication()
-    this.getApplicationStatus()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.card {
-  background: #fff;
-  border-radius: 5px;
-}
-.card + .card {
-  margin-top: 10px;
-}
-.nav {
-  display: flex;
-  justify-content: space-between;
-  padding: 40px 70px 20px;
-  li {
-    position: relative;
-    width: 180px;
-    height: 120px;
-  }
-  a {
-    color: currentColor;
-  }
-  .cover {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    font-weight: 600;
-    color: #fff;
-    text-align: center;
-    background-color: rgba(0, 0, 0.5);
-  }
-}
-.result {
-  min-height: 40px;
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-}
-.result-left {
-  line-height: 14px;
-  color: var(--main-color);
-  img {
-    margin-right: 10px;
-  }
-}
-.result-right {
-  padding-left: 40px;
-  color: #666;
-}
-.progress {
-  margin: 0 40px;
-}
-</style>

src/pages/my/account/index.vue

-<template>
-  <app-layout>
-    <vue-form
-      :menus="menus"
-      :default-active="currentActive"
-      @page-change="handlePageChange"
-      @success="handleSuccess"
-      @error="handleError"
-      @back="$router.push('/my/account')"
-    >
-      <template #aside-append>
-        <div class="aside-logout" @click="$store.dispatch('logout')"><span>退出登录</span></div>
-      </template>
-      <!-- 首页 -->
-      <app-home v-if="currentActive === 'account'" />
-
-      <template #content>
-        <!-- 基本信息 -->
-        <app-info v-if="currentActive === 'account_info'" />
-        <!-- 密码修改 -->
-        <app-password v-if="currentActive === 'account_password'" />
-      </template>
-    </vue-form>
-  </app-layout>
-</template>
-
-<script>
-import AppLayout from '../layout.vue'
-import AppHome from './home.vue'
-import AppInfo from './info.vue'
-import AppPassword from './password.vue'
-export default {
-  components: { AppLayout, AppHome, AppInfo, AppPassword },
-  data() {
-    return {
-      menus: [
-        {
-          id: 'account',
-          title: '个人信息',
-          children: [
-            { id: 'account_info', title: '基本信息' },
-            { id: 'account_password', title: '密码修改' }
-          ]
-        }
-      ],
-      currentActive: 'account'
-    }
-  },
-  watch: {
-    $route: {
-      immediate: true,
-      handler(route) {
-        const { query = {} } = route
-        this.currentActive = query.active || 'account'
-      }
-    }
-  },
-  methods: {
-    handlePageChange(value) {
-      this.currentActive = value
-      this.$router.push({ path: this.$route.path, query: { active: value } })
-      console.log('页面切换了', value)
-    },
-    handleSuccess(data) {
-      console.log('提交成功了', data)
-      this.$message({ type: 'success', message: data.message })
-    },
-    handleError(data) {
-      console.log('提交失败了', data)
-      this.$message({ type: 'error', message: data.message })
-    }
-  }
-}
-</script>

src/pages/my/account/info.vue

-<template>
-  <div>
-    <el-form
-      :model="ruleForm"
-      :rules="rules"
-      ref="form"
-      label-width="100px"
-      @submit.native.prevent
-      style="max-width: 680px"
-    >
-      <el-form-item label="姓名" prop="real_name">
-        <el-input v-model.trim="ruleForm.real_name"></el-input>
-      </el-form-item>
-      <el-form-item label="手机号" prop="mobile">
-        <el-input v-model.trim="ruleForm.mobile"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="handleSubmit">确认修改</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import * as api from '@/api/my'
-
-export default {
-  name: 'MyInfo',
-  data() {
-    return {
-      ruleForm: {
-        real_name: '',
-        mobile: ''
-      },
-      rules: {
-        real_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
-        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
-      }
-    }
-  },
-  methods: {
-    getUser() {
-      api.getUser().then(response => {
-        const data = response.data
-        this.ruleForm.real_name = data.realname
-        this.ruleForm.mobile = data.mobile
-      })
-    },
-    // 提交
-    handleSubmit() {
-      this.$refs.form.validate().then(this.handleRequest)
-    },
-    // 接口请求
-    handleRequest() {
-      this.loading = true
-      api.updateUser(this.ruleForm).then(response => {
-        response.code === 0 ? this.handleSuccess(response) : this.$message.error(response.msg)
-        this.loading = false
-      })
-    },
-    // 成功
-    handleSuccess(response) {
-      this.$alert('基本信息修改成功', {
-        type: 'success',
-        confirmButtonText: '返回报名系统',
-        callback: action => {
-          this.$router.push('/my')
-        }
-      })
-    }
-  },
-  beforeMount() {
-    this.getUser()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-::v-deep .el-input {
-  max-width: 270px;
-}
-</style>

src/pages/my/account/password.vue

-<template>
-  <div>
-    <el-form :model="ruleForm" :rules="rules" ref="form" label-width="100px" @submit.native.prevent>
-      <el-form-item label="手机号" prop="account">
-        <el-input v-model.trim="ruleForm.account"></el-input>
-      </el-form-item>
-      <el-form-item prop="code" label="验证码">
-        <el-input v-model.trim="ruleForm.code" placeholder="请输入验证码">
-          <countdown
-            slot="suffix"
-            size="mini"
-            :disabled="disabledSend"
-            @start="sendCodeRequest"
-            ref="countdown"
-          ></countdown>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="密码" prop="password">
-        <el-input type="password" v-model.trim="ruleForm.password"></el-input>
-      </el-form-item>
-      <el-form-item label="确认密码" prop="passwordR">
-        <el-input type="password" v-model.trim="ruleForm.passwordR"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="handleSubmit">确认修改</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import * as api from '@/api/my'
-import countdown from '@/components/countdown.vue'
-
-export default {
-  name: 'MyPassword',
-  components: { countdown },
-  data() {
-    const validatePass = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('请再次输入密码'))
-      } else if (value !== this.ruleForm.password) {
-        callback(new Error('两次输入密码不一致!'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      ruleForm: { account: '', code: '', password: '', passwordR: '' },
-      rules: {
-        account: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
-        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
-        password: [
-          { required: true, message: '请输入新密码', trigger: 'blur' },
-          { min: 6, max: 20, message: '长度为6-20个字符', trigger: 'blur' }
-        ],
-        passwordR: [
-          { required: true, message: '请输入新密码', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  computed: {
-    disabledSend() {
-      const value = this.ruleForm.account
-      return !(/^1[3-9]\d{9}$/.test(value) || /@/.test(value))
-    }
-  },
-  methods: {
-    // 提交
-    handleSubmit() {
-      this.$refs.form.validate().then(this.handleRequest)
-    },
-    // 接口请求
-    handleRequest() {
-      this.loading = true
-      api.updatePassword(this.ruleForm).then(response => {
-        response.code === 0 ? this.handleSuccess(response) : this.$message.error(response.msg)
-        this.loading = false
-      })
-    },
-    // 成功
-    handleSuccess(response) {
-      this.$alert('密码修改成功，快去登录吧', '提示', {
-        type: 'success',
-        confirmButtonText: '去登录',
-        callback: action => {
-          this.$router.push('/login')
-        }
-      })
-    },
-    // 验证码
-    sendCodeRequest() {
-      api
-        .sendCode({ account: this.ruleForm.account })
-        .then(response => {
-          console.log(response)
-          if (response.code === 0) {
-            this.$message({ type: 'success', message: '验证码已发送' })
-          } else {
-            // 停止计时
-            this.$refs.countdown.stop()
-            this.$message({ type: 'error', message: response.msg })
-          }
-        })
-        .catch(this.$refs.countdown.stop)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-::v-deep .el-input {
-  max-width: 270px;
-}
-</style>

src/pages/my/admission/form/byzs.js

-export default {
-  id: 'admission_byzs',
-  title: '毕业证书注册备案表',
-  get: {
-    action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-    callback(data) {
-      const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-      const stageList = [
-        'FILLING',
-        'PREPAYMENT',
-        'INTERVIEW_APPLICATION',
-        'AUDITION',
-        'INTERVIEW',
-        'PAYMENT',
-        'REGISTRATION',
-        'CLOSED'
-      ]
-      this.form.options.disabled = stageList.findIndex(item => item === submissionStage) > 6
-      const DIPLOMA_FILING_TABLE = attachments.filter(item => {
-        return item.file_type_id === 'DIPLOMA_FILING_TABLE'
-      })
-      return { DIPLOMA_FILING_TABLE }
-    }
-  },
-  form: {
-    prev: { to: { query: { active: 'admission_cjd' } } },
-    next: { to: { query: { active: 'admission_ywjl' } } },
-    hasButton: false,
-    options: {},
-    items: [
-      {
-        type: 'v-upload',
-        required: true,
-        model: 'DIPLOMA_FILING_TABLE',
-        attrs: {
-          action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-          deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-          data: { file_type: 'DIPLOMA_FILING_TABLE' }
-        },
-        prepend: `
-        <p>学信网《教育部学历证书电子注册备案表》[<a href="https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/pc/sofia/%E6%AF%95%E4%B8%9A%E8%AF%81%E4%B9%A6%E6%B3%A8%E5%86%8C%E5%A4%87%E6%A1%88%E8%A1%A8.pdf" target="_blank" download="毕业证书注册备案表">下载流程表</a>]
-        <p>学历在学信网可查的同学，请下载学信网电子注册备案表提交到系统，具体获取流程请</p>
-        <p>下载附件 上传文件仅限“jpg,jpeg,pdf,png”格式，文件小于10Mb。</p>
-      `
-      }
-    ]
-  }
-}

src/pages/my/admission/form/cjd.js

-export default function(_this) {
-  return {
-    id: 'admission_cjd',
-    title: '成绩单（中+英）',
-    get: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-      callback(data) {
-        const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-        const stageList = [
-          'FILLING',
-          'PREPAYMENT',
-          'INTERVIEW_APPLICATION',
-          'AUDITION',
-          'INTERVIEW',
-          'PAYMENT',
-          'REGISTRATION',
-          'CLOSED'
-        ]
-        this.form.options.disabled = stageList.findIndex(item => item === submissionStage) > 6
-        return attachments.reduce(
-          (result, item) => {
-            if (item.file_type_id === 'REPORT_CARD_CN') {
-              result.REPORT_CARD_CN.push(item)
-            }
-            if (item.file_type_id === 'REPORT_CARD_EN') {
-              result.REPORT_CARD_EN.push(item)
-            }
-            return result
-          },
-          { REPORT_CARD_CN: [], REPORT_CARD_EN: [] }
-        )
-      }
-    },
-    form: {
-      next: { to: { query: { active: 'admission_byzs' } } },
-      hasButton: false,
-      options: { 'label-position': 'top' },
-      hint: `
-      <p>请将中英文成绩单原件扫描或者拍照后提交。</p>
-      <p>获取途径:联系大学时就读学校相关部门(档案馆/教务处)获取成绩单。</p>
-    `,
-      items: [
-        {
-          type: 'v-upload',
-          label: '中文成绩单',
-          model: 'REPORT_CARD_CN',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'REPORT_CARD_CN' }
-          }
-        },
-        {
-          type: 'v-upload',
-          label: '英文成绩单',
-          model: 'REPORT_CARD_EN',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'REPORT_CARD_EN' }
-          }
-        }
-      ]
-    }
-  }
-}

src/pages/my/admission/form/index.js

-import cjd from './cjd'
-import byzs from './byzs'
-import ywjl from './ywjl'
-import xy from './xy'
-import xfjn from './xfjn'
-
-export default function(_this) {
-  return {
-    id: 'admission',
-    title: '入学办理',
-    children: [cjd(_this), byzs, ywjl, xy(_this), xfjn(_this)]
-  }
-}

src/pages/my/admission/form/xfjn.js

-export default function(_this) {
-  return {
-    id: 'admission_xfjn',
-    title: '缴费凭证',
-    get: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-      callback(data) {
-        const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-        const stageList = [
-          'FILLING',
-          'PREPAYMENT',
-          'INTERVIEW_APPLICATION',
-          'AUDITION',
-          'INTERVIEW',
-          'PAYMENT',
-          'REGISTRATION',
-          'CLOSED'
-        ]
-        this.form.options.disabled = stageList.findIndex(item => item === submissionStage) > 6
-        const PAYMENT_VOUCHER = attachments.filter(item => {
-          return item.file_type_id === 'PAYMENT_VOUCHER'
-        })
-        return { PAYMENT_VOUCHER }
-      }
-    },
-    form: {
-      prev: { to: { query: { active: 'admission_xy' } } },
-      hasButton: false,
-      options: { 'label-position': 'top' },
-      hint: `
-        <p><strong>一、对公收款银行信息：</strong></p>
-        <p>户名：清控紫荆（ 北京）教育科技股份有限公司</p>
-        <p>帐号：694485289</p>
-        <p>开户行：中国民生银行股份有限公司北京魏公村支行</p>
-        <p style="margin-top:30px;"><strong>二、支付宝收款账户信息：</strong></p>
-        <p>支付宝账号：service@ezijing.com</p>
-        <p>支付宝户名：清控紫荆（北京）教育科技股份有限公司</p>`,
-      items: [
-        {
-          type: 'v-upload',
-          model: 'PAYMENT_VOUCHER',
-          label: '上传缴费凭证',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'PAYMENT_VOUCHER' }
-          },
-          append: `申请者可将转账/支付缴费凭证截图或拍照后提交。<br>
-          上传多个文件，请打印出来检查无误后再上传。用A4纸打印后内容需显示完整、格式整齐、字迹清晰可辨。上传文件仅限“jpg,jpeg,pdf,png”格式，文件小于10Mb。`
-        }
-      ]
-    }
-  }
-}

src/pages/my/admission/form/xy.js

-export default function(_this) {
-  return {
-    id: 'admission_xy',
-    title: '入学协议',
-    get: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-      callback(data) {
-        const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-        const stageList = [
-          'FILLING',
-          'PREPAYMENT',
-          'INTERVIEW_APPLICATION',
-          'AUDITION',
-          'INTERVIEW',
-          'PAYMENT',
-          'REGISTRATION',
-          'CLOSED'
-        ]
-        this.form.options.disabled = stageList.findIndex(item => item === submissionStage) > 6
-        const ADMISSION_AGREEMENT = attachments.filter(item => {
-          return item.file_type_id === 'ADMISSION_AGREEMENT'
-        })
-        return { ADMISSION_AGREEMENT }
-      }
-    },
-    form: {
-      prev: { to: { query: { active: 'admission_ywjl' } } },
-      next: { to: { query: { active: 'admission_xfjn' } } },
-      hasButton: false,
-      options: {},
-      items: [
-        {
-          type: 'v-upload',
-          required: true,
-          model: 'ADMISSION_AGREEMENT',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'ADMISSION_AGREEMENT' }
-          },
-          prepend: `
-            <p><a href="https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/pc/sofia/%E5%85%A5%E5%AD%A6%E5%8D%8F%E8%AE%AE.pdf" target="_blank" download="入学协议">下载入学协议</a></p>
-            <p>申请者可将签字后的入学协议原件扫描或拍照后提交。</p>
-            <p>学员应仔细阅读《入学协议》以及课程介绍，如对入学协议或课程有异议，请第一时间与课程顾问咨询确认。请用A4纸打印后，在入学协议上签上姓名和日期，内容需显示完整、格式整齐、字迹清晰可辨。上传文件仅限“jpg,jpeg,pdf,png”格式，文件小于10Mb。</p>
-          `
-        }
-      ]
-    }
-  }
-}

src/pages/my/admission/form/ywjl.js

-export default {
-  id: 'admission_ywjl',
-  title: '英文简历',
-  get: {
-    action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-    callback(data) {
-      const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-      const stageList = [
-        'FILLING',
-        'PREPAYMENT',
-        'INTERVIEW_APPLICATION',
-        'AUDITION',
-        'INTERVIEW',
-        'PAYMENT',
-        'REGISTRATION',
-        'CLOSED'
-      ]
-      this.form.options.disabled = stageList.findIndex(item => item === submissionStage) > 6
-      const RESUME_EN = attachments.filter(item => {
-        return item.file_type_id === 'RESUME_EN'
-      })
-      return { RESUME_EN }
-    }
-  },
-  form: {
-    prev: { to: { query: { active: 'admission_byzs' } } },
-    next: { to: { query: { active: 'admission_xy' } } },
-    hasButton: false,
-    options: {},
-    items: [
-      {
-        type: 'v-upload',
-        required: true,
-        model: 'RESUME_EN',
-        attrs: {
-          action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-          deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-          data: { file_type: 'RESUME_EN' }
-        },
-        append: `
-        <p>请下载填写英文简历模板后上传 [<a href="https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/pc/sofia/%E8%8B%B1%E6%96%87%E7%AE%80%E5%8E%86.doc" target="_blank" download="英文简历模板">下载模板</a>]</p>
-        <p>请将英文简历填写完存为"pdf"格式上传，文件小于10MB。</p>`
-      }
-    ]
-  }
-}

src/pages/my/admission/index.vue

-<template>
-  <app-layout>
-    <vue-form
-      :menus="menus"
-      :default-active="currentActive"
-      @page-change="handlePageChange"
-      @success="handleSuccess"
-      @error="handleError"
-      @back="$router.push('/my/account')"
-      @prev="handlePrev"
-      @next="handleNext"
-      @uploaded="getApplication"
-    >
-      <template #aside-append>
-        <div class="aside-logout" @click="$store.dispatch('logout')"><span>退出登录</span></div>
-      </template>
-    </vue-form>
-    <el-dialog
-      title="办理入学资料提交成功"
-      :visible.sync="dialogVisible"
-      :center="true"
-      :close-on-click-modal="false"
-      width="348px"
-    >
-      <div class="dialog-tips">
-        <p>请确认是否已缴费，如未缴费点击下方缴费按钮 <br />（已缴费，请忽略）</p>
-        <div class="icon"><img src="../../../assets/images/icon_success.png" /></div>
-      </div>
-      <template #footer>
-        <el-button type="primary" @click="toPay">立即缴费</el-button>
-        <el-button type="primary" @click="dialogVisible = false">忽略</el-button>
-      </template>
-    </el-dialog>
-  </app-layout>
-</template>
-
-<script>
-import AppLayout from '../layout.vue'
-import getMenu from './form'
-import * as api from '@/api/my'
-
-export default {
-  components: { AppLayout },
-  data() {
-    const menus = getMenu(this)
-    return {
-      menus: [menus],
-      currentActive: 'admission_cjd',
-      dialogVisible: false,
-      detail: null
-    }
-  },
-  watch: {
-    $route: {
-      immediate: true,
-      handler(route) {
-        const { query = {} } = route
-        this.currentActive = query.active || 'admission_cjd'
-      }
-    },
-    showSubmitedDialog(value) {
-      this.dialogVisible = value
-    }
-  },
-  computed: {
-    isSubmited() {
-      if (this.detail) {
-        return !!this.detail.material.attachments.find(item => item.file_type_id === 'ADMISSION_AGREEMENT')
-      }
-      return false
-    },
-    showSubmitedDialog() {
-      return this.isSubmited && this.currentActive === 'admission_xy'
-    }
-  },
-  methods: {
-    // 获取报名信息
-    getApplication() {
-      api.getApplication().then(response => {
-        const { data, error, message } = response
-        if (error.toString() === '0') {
-          this.detail = data
-        } else {
-          this.$message.error(message)
-        }
-      })
-    },
-    handlePageChange(value) {
-      this.currentActive = value
-      this.$router.push({ path: this.$route.path, query: { active: value } }).catch(() => {})
-      console.log('页面切换了', value)
-    },
-    handleSuccess(data) {
-      console.log('提交成功了', data)
-      this.$message({ type: 'success', message: data.message })
-    },
-    handleError(data) {
-      console.log('提交失败了', data)
-      this.$message({ type: 'error', message: data.message })
-    },
-    handlePrev(to) {
-      this.$router.push(to)
-    },
-    handleNext(to) {
-      this.$router.push(to)
-    },
-    toPay() {
-      this.dialogVisible = false
-      this.$router.push({ path: '/my/admission', query: { active: 'admission_xfjn' } })
-    }
-  },
-  beforeMount() {
-    this.getApplication()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.dialog-tips {
-  text-align: center;
-  p {
-    color: #262626;
-    line-height: 20px;
-  }
-  .icon {
-    margin-top: 20px;
-    text-align: center;
-  }
-}
-</style>

src/pages/my/application/complete.vue

-<template>
-  <el-dialog
-    title="您当前完成进度如下："
-    width="348px"
-    :center="true"
-    :close-on-click-modal="false"
-    :visible.sync="dialogVisible"
-    @open="handleOpen"
-    @close="handleClose"
-  >
-    <div>
-      <ul v-if="detail">
-        <li
-          v-for="item in currentOptions"
-          :class="progress[item.code].progress === 1 ? 'is-success' : 'is-error'"
-          :key="item.code"
-        >
-          <span class="name">{{ item.title }}</span>
-          <span class="line"></span>
-          <span class="status">{{ progress[item.code].progress === 1 ? '已完成' : '未完成' }}</span>
-          <span class="view" @click="handleView(item.view.to)">立即查看</span>
-        </li>
-      </ul>
-    </div>
-    <template #footer>
-      <el-button type="primary" @click="dialogVisible = false">我知道啦</el-button>
-    </template>
-  </el-dialog>
-</template>
-
-<script>
-import * as api from '@/api/my'
-export default {
-  props: { value: { type: Boolean, default: false }, type: { type: Number, default: 0 } },
-  data() {
-    return {
-      dialogVisible: false,
-      detail: null,
-      progress: {},
-      options: [
-        [
-          {
-            title: '个人资料',
-            code: 'applicaitonInfo',
-            view: { to: { path: '/my/application', query: { active: 'application_info' } } }
-          }
-          // {
-          //   title: '推荐信',
-          //   code: 'applicationTjx',
-          //   view: { to: { path: '/my/application', query: { active: 'application_tjx' } } }
-          // }
-          // {
-          //   title: '无犯罪证明',
-          //   code: 'applicationWfzzm',
-          //   view: { to: { path: '/my/application', query: { active: 'application_wfzzm' } } }
-          // }
-        ],
-        [
-          {
-            title: '毕业证书',
-            code: 'interviewByzs',
-            view: { to: { path: '/my/interview', query: { active: 'interview_byzs' } } }
-          },
-          // {
-          //   title: '学位证书',
-          //   code: 'interviewXwzs',
-          //   view: { to: { path: '/my/interview', query: { active: 'interview_xwzs' } } }
-          // },
-          // {
-          //   title: '学位证书英文证明',
-          //   code: 'interviewXwzsEnglish',
-          //   view: { to: { path: '/my/interview', query: { active: 'interview_xwzsywzm' } } }
-          // },
-          // {
-          //   title: '英文简历',
-          //   code: 'interviewYwjl',
-          //   view: { to: { path: '/my/interview', query: { active: 'interview_ywjl' } } }
-          // },
-          // {
-          //   title: '成绩单',
-          //   code: 'interviewCjd',
-          //   view: { to: { path: '/my/interview', query: { active: 'interview_cjd' } } }
-          // },
-          {
-            title: '2寸照片',
-            code: 'interviewZp',
-            view: { to: { path: '/my/interview', query: { active: 'interview_zp' } } }
-          }
-
-          // {
-          //   title: '推荐信',
-          //   code: 'interviewTjx',
-          //   view: { to: { path: '/my/application', query: { active: 'application_tjx' } } }
-          // }
-        ]
-      ]
-    }
-  },
-  watch: {
-    value: {
-      immediate: true,
-      handler(value) {
-        this.dialogVisible = value
-      }
-    }
-  },
-  computed: {
-    currentOptions() {
-      return this.options[this.type]
-    }
-  },
-  methods: {
-    // 获取报名信息
-    getApplication() {
-      api.getApplication(this.$route.query).then(response => {
-        const { data, error, message } = response
-        if (error.toString() === '0') {
-          const { progress } = data
-          this.detail = data
-
-          const fillingMissedRequiredList = progress.FILLING.attachments.missed_required_list
-          // 个人资料
-          const applicaitonInfo = { progress: 0 }
-          const infoRequriedList = ['basic_info', 'educations', 'careers', 'answers']
-          for (const key of infoRequriedList) {
-            if (progress.FILLING[key].progress < 1) {
-              applicaitonInfo.progress = 0
-              break
-            }
-            applicaitonInfo.progress = 1
-          }
-          if (applicaitonInfo.progress === 1 && !fillingMissedRequiredList.ID_CARD_PHOTO) {
-            applicaitonInfo.progress = 1
-          } else {
-            applicaitonInfo.progress = 0
-          }
-          // 推荐信
-          const applicationTjx = { progress: 0 }
-          applicationTjx.progress = progress.FILLING.reco_letters ? progress.FILLING.reco_letters.progress : 0
-          // 无犯罪证明
-          const applicationWfzzm = { progress: 0 }
-          applicationWfzzm.progress = fillingMissedRequiredList.NO_CRIMINAL_CERT ? 0 : 1
-
-          const missedRequiredList = progress.INTERVIEW_APPLICATION.attachments.missed_required_list
-          // 2寸照片
-          const interviewZp = { progress: 0 }
-          interviewZp.progress = missedRequiredList.PERSONAL_PHOTO_FOR_ID ? 0 : 1
-          // 毕业证书
-          const interviewByzs = { progress: 0 }
-          interviewByzs.progress = missedRequiredList.DIPLOMA_CN ? 0 : 1
-          // 学位证书
-          const interviewXwzs = { progress: 0 }
-          interviewXwzs.progress = missedRequiredList.DEGREE_CERT_CN ? 0 : 1
-          // 学位证书英文
-          const interviewXwzsEnglish = { progress: 0 }
-          interviewXwzsEnglish.progress = missedRequiredList.DEGREE_CERT_EN ? 0 : 1
-          // 英文简历
-          const interviewYwjl = { progress: 0 }
-          interviewYwjl.progress = missedRequiredList.RESUME_EN ? 0 : 1
-          // 成绩单
-          const interviewCjd = { progress: 0 }
-          interviewCjd.progress = missedRequiredList.REPORT_CARD_CN || missedRequiredList.REPORT_CARD_EN ? 0 : 1
-          // 推荐信
-          const interviewTjx = { progress: 0 }
-          interviewTjx.progress = progress.INTERVIEW_APPLICATION.reco_letters
-            ? progress.INTERVIEW_APPLICATION.reco_letters.progress
-            : 0
-
-          this.progress = {
-            applicaitonInfo,
-            applicationTjx,
-            applicationWfzzm,
-            interviewZp,
-            interviewByzs,
-            interviewXwzs,
-            interviewXwzsEnglish,
-            interviewYwjl,
-            interviewCjd,
-            interviewTjx
-          }
-        } else {
-          this.$message.error(message)
-        }
-      })
-    },
-    handleView(to) {
-      this.dialogVisible = false
-      this.$router.push(to)
-    },
-    handleOpen() {
-      this.getApplication()
-    },
-    handleClose() {
-      this.$emit('input', this.dialogVisible)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-li {
-  padding: 10px 0;
-  display: flex;
-  align-items: center;
-}
-.name {
-  width: 80px;
-  text-align: right;
-}
-.line {
-  width: 40px;
-  height: 1px;
-  margin: 0 10px;
-  background-color: #ccc;
-}
-.is-success {
-  .status {
-    color: #33c011;
-  }
-}
-.is-error {
-  .status {
-    color: #af1b40;
-  }
-}
-.view {
-  margin-left: 40px;
-  color: #57acff;
-  text-decoration: underline;
-  cursor: pointer;
-}
-</style>

src/pages/my/application/form/declare.js

-/**
- * 申请声明
- */
-
-export default function(_this) {
-  return {
-    id: 'application_declare',
-    title: '申请声明',
-    visible() {
-      return _this.visible
-    },
-    get: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-      callback(data) {
-        const { submission_stage: submissionStage = 'FILLING' } = data.data.material
-        const isSubmited = submissionStage !== 'FILLING'
-        this.form.options.disabled = isSubmited
-        if (isSubmited) {
-          return { isAgree: [1] }
-        }
-        return { isAgree: [] }
-      }
-    },
-    update: {
-      action: `/api/enrollment/v1.0/application-materials/submit/${webConf.others.projectId}`,
-      callback() {
-        _this.getApplication()
-        this.form.options.disabled = true
-        // _this.$router.push({ path: this.$route.path, query: { active: 'application_pay' } })
-        _this.$router.push({ path: '/my/interview' })
-      },
-      errorCallback() {
-        _this.completeVisible = true
-      }
-    },
-    form: {
-      prev: { to: { query: { active: 'application_info', tab: 'application_info_honor' } } },
-      submitText: '提交报名申请',
-      model: { isAgree: [] },
-      options: {},
-      items: [
-        {
-          type: 'v-checkbox',
-          values: [{ label: '同意', value: 1 }],
-          model: 'isAgree',
-          rules: [{ required: true, message: '请阅读协议', trigger: 'change' }],
-          prepend: `<p>1、本人知晓此申请表及所附文件将作为申请紫荆-索菲亚大学MBA面试和背景评估的参考依据，一旦成功录取，有关资料将作为学生信息存档。</p>
-            <p>2、本人声明所填资料正确无误，知晓任何不真实的信息或不诚信的行为，均会影响申请结果，已取得的成绩和资格会被取消。我理解并同意所有报名材料归紫荆教育所有，无论考生录取与否均不退回。我授权紫荆教育使用报名表中的信息查询本人学习和工作记录。</p>`
-        }
-      ]
-    }
-  }
-}

src/pages/my/application/form/index.js

-import info from './info'
-// import tjx from './tjx'
-// import wfzsm from './wfzzm'
-import declare from './declare'
-
-export default function(_this) {
-  return {
-    id: 'application',
-    title: '报名申请',
-    children: [
-      info(_this),
-      // tjx(_this),
-      // wfzsm(_this),
-      declare(_this)
-      // {
-      //   id: 'application_pay',
-      //   title: '缴报名费',
-      //   show: false,
-      //   visible() {
-      //     return _this.visible
-      //   }
-      // }
-    ]
-  }
-}

src/pages/my/application/form/info.js

-import first from './info/first'
-import profile from './info/profile'
-import education from './info/education'
-import career from './info/career'
-import honor from './info/honor'
-import training from './info/training'
-import answer from './info/answer'
-
-export default function(_this) {
-  return {
-    id: 'application_info',
-    title: '个人资料',
-    tabs: [first(_this), profile(_this), education(_this), career(_this), answer(_this), training(_this), honor(_this)]
-  }
-}

src/pages/my/application/form/info/answer.js

-/**
- * 学习目的
- */
-
-export default function(_this) {
-  return {
-    id: 'application_info_answer',
-    title: '学习目的',
-    required: true,
-    visible() {
-      return _this.visible
-    },
-    get: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-      callback(data) {
-        const { answers = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-        this.form.options.disabled = submissionStage !== 'FILLING'
-
-        const [first = {}, second = {}] = answers
-        return {
-          qid1: first.qid || '1',
-          question1: '您为什么要申请索菲亚大学金融方向工商管理硕士项目?(60字以上，1000字以内)',
-          answer1: first.answer,
-          qid2: second.qid || '2',
-          question2: '您的短期和长期职业发展目标是什么?您打算如何达成此愿景?(60字以上，1000字以内)',
-          answer2: second.answer
-        }
-      }
-    },
-    update: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}/put`,
-      beforeRequest(data) {
-        return {
-          answers: [
-            { qid: data.qid1, question: data.question1, answer: data.answer1 },
-            { qid: data.qid2, question: data.question2, answer: data.answer2 }
-          ]
-        }
-      }
-    },
-    form: {
-      prev: { to: { query: { active: 'application_info', tab: 'application_info_career' } }, isSubmit: true },
-      next: { to: { query: { active: 'application_info', tab: 'application_info_training' } }, isSubmit: true },
-      options: {},
-      items: [
-        {
-          type: 'v-input',
-          label: '您为什么要申请索菲亚大学金融方向工商管理硕士项目?(60字以上，1000字以内)',
-          model: 'answer1',
-          attrs: { type: 'textarea', rows: '8', maxlength: '1000', style: 'width:100%' },
-          rules: [
-            { required: true, message: '请输入', trigger: 'blur' },
-            { min: 60, max: 1000, message: '长度在 60 到 1000 个字符', trigger: 'blur' }
-          ]
-        },
-        {
-          type: 'v-input',
-          label: '您的短期和长期职业发展目标是什么?您打算如何达成此愿景?(60字以上，1000字以内)',
-          model: 'answer2',
-          attrs: { type: 'textarea', rows: '8', maxlength: '1000', style: 'width:100%' },
-          rules: [
-            { required: true, message: '请输入', trigger: 'blur' },
-            { min: 60, max: 1000, message: '长度在 60 到 1000 个字符', trigger: 'blur' }
-          ]
-        }
-      ]
-    }
-  }
-}

src/pages/my/application/form/info/career.js

-/**
- * 工作经验
- */
-
-export default function(_this) {
-  return {
-    id: 'application_info_career',
-    title: '工作经验',
-    required: true,
-    visible() {
-      return _this.visible
-    },
-    get: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-      callback(data) {
-        const { careers: list = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-        this.form.options.disabled = submissionStage !== 'FILLING'
-        return list.length ? list : [{}]
-      }
-    },
-    update: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}/put`,
-      beforeRequest(data) {
-        const careers = data.map(item => {
-          return [
-            'start_date',
-            'end_date',
-            'company_name_cn',
-            'industry',
-            'dept_cn',
-            'position_cn',
-            'job_desc_cn'
-          ].reduce((result, key) => {
-            result[key] = item[key]
-            return result
-          }, {})
-        })
-        return { careers }
-      }
-    },
-    form: {
-      prev: { to: { query: { active: 'application_info', tab: 'application_info_education' } }, isSubmit: true },
-      next: { to: { query: { active: 'application_info', tab: 'application_info_answer' } }, isSubmit: true },
-      hasAdd: true,
-      options: { labelWidth: '140px' },
-      items: [
-        {
-          type: 'v-datepicker',
-          label: '开始时间',
-          model: 'start_date',
-          attrs: {
-            type: 'month',
-            placeholder: '请选择工作开始时间',
-            valueFormat: 'yyyy-MM'
-          },
-          rules: [{ required: true, message: '请选择工作开始时间', trigger: 'blur' }]
-        },
-        {
-          type: 'v-datepicker',
-          label: '结束时间',
-          model: 'end_date',
-          attrs: {
-            type: 'month',
-            placeholder: '请选择工作结束时间',
-            valueFormat: 'yyyy-MM'
-          },
-          rules: [{ required: true, message: '请选择工作结束时间', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '工作单位',
-          model: 'company_name_cn',
-          attrs: { placeholder: '请输入工作单位' },
-          rules: [{ required: true, message: '请输入工作单位', trigger: 'blur' }]
-        },
-        {
-          type: 'v-select',
-          values: [
-            { value: '互联网/电子商务' },
-            { value: '基金/证券/期货/投资' },
-            { value: '保险' },
-            { value: '银行' },
-            { value: '信托/担保/拍卖/典当' },
-            { value: '计算机软件' },
-            { value: 'IT服务(系统/数据/维护)' },
-            { value: '电子技术/半导体/集成电路' },
-            { value: '计算机硬件' },
-            { value: '通信/电信/网络设备' },
-            { value: '通信/电信运营、增值服务' },
-            { value: '网络游戏' },
-            { value: '房地产/建筑/建材/工程' },
-            { value: '家居/室内设计/装饰装潢' },
-            { value: '物业管理/商业中心' },
-            { value: '专业服务/咨询(财会/法律/人力资源等)' },
-            { value: '广告/会展/公关' },
-            { value: '中介服务' },
-            { value: '检验/检测/认证' },
-            { value: '外包服务' },
-            { value: '快速消费品（食品/饮料/烟酒/日化）' },
-            { value: '耐用消费品（服饰/纺织/皮革/家具/家电）' },
-            { value: '贸易/进出口' },
-            { value: '零售/批发' },
-            { value: '租赁服务' },
-            { value: '教育/培训/院校' },
-            { value: '礼品/玩具/工艺美术/收藏品/奢侈品' },
-            { value: '汽车/摩托车' },
-            { value: '大型设备/机电设备/重工业' },
-            { value: '加工制造（原料加工/模具）' },
-            { value: '仪器仪表及工业自动化' },
-            { value: '印刷/包装/造纸' },
-            { value: '办公用品及设备' },
-            { value: '医药/生物工程' },
-            { value: '医疗设备/器械' },
-            { value: '航空/航天研究与制造' },
-            { value: '交通/运输,物流/仓储' },
-            { value: '医疗/护理/美容/保健/卫生服务' },
-            { value: '酒店/餐饮,旅游/度假,媒体/出版/影视/文化传播' },
-            { value: '娱乐/体育/休闲' },
-            { value: '能源/矿产/采掘/冶炼' },
-            { value: '石油/石化/化工,电气/电力/水利' },
-            { value: '环保' },
-            { value: '政府/公共事业/非盈利机构' },
-            { value: '学术/科研,农/林/牧/渔跨领域经营' },
-            { value: '其他' }
-          ],
-          label: '行业类别',
-          model: 'industry',
-          rules: [{ required: true, message: '请选择行业类别', trigger: 'change' }]
-        },
-        {
-          type: 'v-input',
-          label: '工作部门',
-          model: 'dept_cn',
-          attrs: { placeholder: '请输入工作部门' },
-          rules: [{ required: true, message: '请输入工作部门', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '工作职位',
-          model: 'position_cn',
-          attrs: { placeholder: '请输入工作职位' },
-          rules: [{ required: true, message: '请输入工作职位', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '工作描述',
-          model: 'job_desc_cn',
-          attrs: {
-            type: 'textarea',
-            placeholder: '请输入工作描述',
-            rows: '8',
-            maxlength: '3000'
-          },
-          rules: [{ required: true, message: '请输入工作描述', trigger: 'blur' }]
-        }
-      ]
-    }
-  }
-}

src/pages/my/application/form/info/country.js

-export default [
-  { label: '中国', value: '中国' },
-  { label: '阿富汗', value: '阿富汗' },
-  { label: '奥兰群岛', value: '奥兰群岛' },
-  { label: '阿尔巴尼亚', value: '阿尔巴尼亚' },
-  { label: '阿尔及利亚', value: '阿尔及利亚' },
-  { label: '美属萨摩亚', value: '美属萨摩亚' },
-  { label: '安道尔', value: '安道尔' },
-  { label: '安哥拉', value: '安哥拉' },
-  { label: '安圭拉', value: '安圭拉' },
-  { label: '安提瓜和巴布达', value: '安提瓜和巴布达' },
-  { label: '阿根廷', value: '阿根廷' },
-  { label: '亚美尼亚', value: '亚美尼亚' },
-  { label: '阿鲁巴', value: '阿鲁巴' },
-  { label: '澳大利亚', value: '澳大利亚' },
-  { label: '奥地利', value: '奥地利' },
-  { label: '阿塞拜疆', value: '阿塞拜疆' },
-  { label: '孟加拉', value: '孟加拉' },
-  { label: '巴林', value: '巴林' },
-  { label: '巴哈马', value: '巴哈马' },
-  { label: '巴巴多斯', value: '巴巴多斯' },
-  { label: '白俄罗斯', value: '白俄罗斯' },
-  { label: '比利时', value: '比利时' },
-  { label: '伯利兹', value: '伯利兹' },
-  { label: '贝宁', value: '贝宁' },
-  { label: '百慕大', value: '百慕大' },
-  { label: '不丹', value: '不丹' },
-  { label: '玻利维亚', value: '玻利维亚' },
-  { label: '波斯尼亚和黑塞哥维那', value: '波斯尼亚和黑塞哥维那' },
-  { label: '博茨瓦纳', value: '博茨瓦纳' },
-  { label: '布维岛', value: '布维岛' },
-  { label: '巴西', value: '巴西' },
-  { label: '文莱', value: '文莱' },
-  { label: '保加利亚', value: '保加利亚' },
-  { label: '布基纳法索', value: '布基纳法索' },
-  { label: '布隆迪', value: '布隆迪' },
-  { label: '柬埔寨', value: '柬埔寨' },
-  { label: '喀麦隆', value: '喀麦隆' },
-  { label: '加拿大', value: '加拿大' },
-  { label: '佛得角', value: '佛得角' },
-  { label: '中非', value: '中非' },
-  { label: '乍得', value: '乍得' },
-  { label: '智利', value: '智利' },
-  { label: '圣诞岛', value: '圣诞岛' },
-  { label: '科科斯（基林）群岛', value: '科科斯（基林）群岛' },
-  { label: '哥伦比亚', value: '哥伦比亚' },
-  { label: '科摩罗', value: '科摩罗' },
-  { label: '刚果（金）', value: '刚果（金）' },
-  { label: '刚果', value: '刚果' },
-  { label: '库克群岛', value: '库克群岛' },
-  { label: '哥斯达黎加', value: '哥斯达黎加' },
-  { label: '科特迪瓦', value: '科特迪瓦' },
-  { label: '克罗地亚', value: '克罗地亚' },
-  { label: '古巴', value: '古巴' },
-  { label: '捷克', value: '捷克' },
-  { label: '塞浦路斯', value: '塞浦路斯' },
-  { label: '丹麦', value: '丹麦' },
-  { label: '吉布提', value: '吉布提' },
-  { label: '多米尼加', value: '多米尼加' },
-  { label: '厄瓜多尔', value: '厄瓜多尔' },
-  { label: '埃及', value: '埃及' },
-  { label: '赤道几内亚', value: '赤道几内亚' },
-  { label: '厄立特里亚', value: '厄立特里亚' },
-  { label: '爱沙尼亚', value: '爱沙尼亚' },
-  { label: '埃塞俄比亚', value: '埃塞俄比亚' },
-  { label: '法罗群岛', value: '法罗群岛' },
-  { label: '斐济', value: '斐济' },
-  { label: '芬兰', value: '芬兰' },
-  { label: '法国', value: '法国' },
-  { label: '法国大都会', value: '法国大都会' },
-  { label: '法属圭亚那', value: '法属圭亚那' },
-  { label: '法属波利尼西亚', value: '法属波利尼西亚' },
-  { label: '加蓬', value: '加蓬' },
-  { label: '冈比亚', value: '冈比亚' },
-  { label: '格鲁吉亚', value: '格鲁吉亚' },
-  { label: '德国', value: '德国' },
-  { label: '加纳', value: '加纳' },
-  { label: '直布罗陀', value: '直布罗陀' },
-  { label: '希腊', value: '希腊' },
-  { label: '格林纳达', value: '格林纳达' },
-  { label: '瓜德罗普岛', value: '瓜德罗普岛' },
-  { label: '关岛', value: '关岛' },
-  { label: '危地马拉', value: '危地马拉' },
-  { label: '根西岛', value: '根西岛' },
-  { label: '几内亚比绍', value: '几内亚比绍' },
-  { label: '几内亚', value: '几内亚' },
-  { label: '圭亚那', value: '圭亚那' },
-  { label: '海地', value: '海地' },
-  { label: '洪都拉斯', value: '洪都拉斯' },
-  { label: '匈牙利', value: '匈牙利' },
-  { label: '冰岛', value: '冰岛' },
-  { label: '印度', value: '印度' },
-  { label: '印度尼西亚', value: '印度尼西亚' },
-  { label: '伊朗', value: '伊朗' },
-  { label: '伊拉克', value: '伊拉克' },
-  { label: '爱尔兰', value: '爱尔兰' },
-  { label: '马恩岛', value: '马恩岛' },
-  { label: '以色列', value: '以色列' },
-  { label: '意大利', value: '意大利' },
-  { label: '牙买加', value: '牙买加' },
-  { label: '日本', value: '日本' },
-  { label: '泽西岛', value: '泽西岛' },
-  { label: '约旦', value: '约旦' },
-  { label: '哈萨克斯坦', value: '哈萨克斯坦' },
-  { label: '肯尼亚', value: '肯尼亚' },
-  { label: '基里巴斯', value: '基里巴斯' },
-  { label: '韩国', value: '韩国' },
-  { label: '朝鲜', value: '朝鲜' },
-  { label: '科威特', value: '科威特' },
-  { label: '吉尔吉斯斯坦', value: '吉尔吉斯斯坦' },
-  { label: '老挝', value: '老挝' },
-  { label: '拉脱维亚', value: '拉脱维亚' },
-  { label: '黎巴嫩', value: '黎巴嫩' },
-  { label: '莱索托', value: '莱索托' },
-  { label: '利比里亚', value: '利比里亚' },
-  { label: '利比亚', value: '利比亚' },
-  { label: '列支敦士登', value: '列支敦士登' },
-  { label: '立陶宛', value: '立陶宛' },
-  { label: '卢森堡', value: '卢森堡' },
-  { label: '马其顿', value: '马其顿' },
-  { label: '马拉维', value: '马拉维' },
-  { label: '马来西亚', value: '马来西亚' },
-  { label: '马达加斯加', value: '马达加斯加' },
-  { label: '马尔代夫', value: '马尔代夫' },
-  { label: '马里', value: '马里' },
-  { label: '马耳他', value: '马耳他' },
-  { label: '马绍尔群岛', value: '马绍尔群岛' },
-  { label: '马提尼克岛', value: '马提尼克岛' },
-  { label: '毛里塔尼亚', value: '毛里塔尼亚' },
-  { label: '毛里求斯', value: '毛里求斯' },
-  { label: '马约特', value: '马约特' },
-  { label: '墨西哥', value: '墨西哥' },
-  { label: '密克罗尼西亚', value: '密克罗尼西亚' },
-  { label: '摩尔多瓦', value: '摩尔多瓦' },
-  { label: '摩纳哥', value: '摩纳哥' },
-  { label: '蒙古', value: '蒙古' },
-  { label: '黑山', value: '黑山' },
-  { label: '蒙特塞拉特', value: '蒙特塞拉特' },
-  { label: '摩洛哥', value: '摩洛哥' },
-  { label: '莫桑比克', value: '莫桑比克' },
-  { label: '缅甸', value: '缅甸' },
-  { label: '纳米比亚', value: '纳米比亚' },
-  { label: '瑙鲁', value: '瑙鲁' },
-  { label: '尼泊尔', value: '尼泊尔' },
-  { label: '荷兰', value: '荷兰' },
-  { label: '新喀里多尼亚', value: '新喀里多尼亚' },
-  { label: '新西兰', value: '新西兰' },
-  { label: '尼加拉瓜', value: '尼加拉瓜' },
-  { label: '尼日尔', value: '尼日尔' },
-  { label: '尼日利亚', value: '尼日利亚' },
-  { label: '纽埃', value: '纽埃' },
-  { label: '诺福克岛', value: '诺福克岛' },
-  { label: '挪威', value: '挪威' },
-  { label: '阿曼', value: '阿曼' },
-  { label: '巴基斯坦', value: '巴基斯坦' },
-  { label: '帕劳', value: '帕劳' },
-  { label: '巴勒斯坦', value: '巴勒斯坦' },
-  { label: '巴拿马', value: '巴拿马' },
-  { label: '巴布亚新几内亚', value: '巴布亚新几内亚' },
-  { label: '秘鲁', value: '秘鲁' },
-  { label: '菲律宾', value: '菲律宾' },
-  { label: '皮特凯恩群岛', value: '皮特凯恩群岛' },
-  { label: '波兰', value: '波兰' },
-  { label: '葡萄牙', value: '葡萄牙' },
-  { label: '波多黎各', value: '波多黎各' },
-  { label: '卡塔尔', value: '卡塔尔' },
-  { label: '留尼汪岛', value: '留尼汪岛' },
-  { label: '罗马尼亚', value: '罗马尼亚' },
-  { label: '卢旺达', value: '卢旺达' },
-  { label: '俄罗斯联邦', value: '俄罗斯联邦' },
-  { label: '圣赫勒拿', value: '圣赫勒拿' },
-  { label: '圣基茨和尼维斯', value: '圣基茨和尼维斯' },
-  { label: '圣卢西亚', value: '圣卢西亚' },
-  { label: '圣文森特和格林纳丁斯', value: '圣文森特和格林纳丁斯' },
-  { label: '萨尔瓦多', value: '萨尔瓦多' },
-  { label: '萨摩亚', value: '萨摩亚' },
-  { label: '圣马力诺', value: '圣马力诺' },
-  { label: '圣多美和普林西比', value: '圣多美和普林西比' },
-  { label: '沙特阿拉伯', value: '沙特阿拉伯' },
-  { label: '塞内加尔', value: '塞内加尔' },
-  { label: '塞舌尔', value: '塞舌尔' },
-  { label: '塞拉利昂', value: '塞拉利昂' },
-  { label: '新加坡', value: '新加坡' },
-  { label: '塞尔维亚', value: '塞尔维亚' },
-  { label: '斯洛伐克', value: '斯洛伐克' },
-  { label: '斯洛文尼亚', value: '斯洛文尼亚' },
-  { label: '所罗门群岛', value: '所罗门群岛' },
-  { label: '索马里', value: '索马里' },
-  { label: '南非', value: '南非' },
-  { label: '西班牙', value: '西班牙' },
-  { label: '斯里兰卡', value: '斯里兰卡' },
-  { label: '苏丹', value: '苏丹' },
-  { label: '苏里南', value: '苏里南' },
-  { label: '斯威士兰', value: '斯威士兰' },
-  { label: '瑞典', value: '瑞典' },
-  { label: '瑞士', value: '瑞士' },
-  { label: '叙利亚', value: '叙利亚' },
-  { label: '塔吉克斯坦', value: '塔吉克斯坦' },
-  { label: '坦桑尼亚', value: '坦桑尼亚' },
-  { label: '泰国', value: '泰国' },
-  { label: '特立尼达和多巴哥', value: '特立尼达和多巴哥' },
-  { label: '东帝汶', value: '东帝汶' },
-  { label: '多哥', value: '多哥' },
-  { label: '托克劳', value: '托克劳' },
-  { label: '汤加', value: '汤加' },
-  { label: '突尼斯', value: '突尼斯' },
-  { label: '土耳其', value: '土耳其' },
-  { label: '土库曼斯坦', value: '土库曼斯坦' },
-  { label: '图瓦卢', value: '图瓦卢' },
-  { label: '乌干达', value: '乌干达' },
-  { label: '乌克兰', value: '乌克兰' },
-  { label: '阿拉伯联合酋长国', value: '阿拉伯联合酋长国' },
-  { label: '英国', value: '英国' },
-  { label: '美国', value: '美国' },
-  { label: '乌拉圭', value: '乌拉圭' },
-  { label: '乌兹别克斯坦', value: '乌兹别克斯坦' },
-  { label: '瓦努阿图', value: '瓦努阿图' },
-  { label: '梵蒂冈', value: '梵蒂冈' },
-  { label: '委内瑞拉', value: '委内瑞拉' },
-  { label: '越南', value: '越南' },
-  { label: '瓦利斯群岛和富图纳群岛', value: '瓦利斯群岛和富图纳群岛' },
-  { label: '西撒哈拉', value: '西撒哈拉' },
-  { label: '也门', value: '也门' },
-  { label: '南斯拉夫', value: '南斯拉夫' },
-  { label: '赞比亚', value: '赞比亚' },
-  { label: '津巴布韦', value: '津巴布韦' }
-]

src/pages/my/application/form/info/education.js

-/**
- * 教育背景
- */
-
-export default function(_this) {
-  return {
-    id: 'application_info_education',
-    title: '教育背景',
-    required: true,
-    visible() {
-      return _this.visible
-    },
-    get: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-      callback(data) {
-        const { educations: list = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-        this.form.options.disabled = submissionStage !== 'FILLING'
-        return list.length ? list : [{}]
-      }
-    },
-    update: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}/put`,
-      beforeRequest(data) {
-        const educations = data.map(item => {
-          return ['start_date', 'end_date', 'school_name_cn', 'major_cn', 'degree'].reduce((result, key) => {
-            result[key] = item[key]
-            return result
-          }, {})
-        })
-        return { educations }
-      }
-    },
-    form: {
-      prev: { to: { query: { active: 'application_info', tab: 'application_info_profile' } }, isSubmit: true },
-      next: { to: { query: { active: 'application_info', tab: 'application_info_career' } }, isSubmit: true },
-      hasAdd: true,
-      options: { labelWidth: '140px' },
-      items: [
-        {
-          type: 'v-datepicker',
-          label: '开始时间',
-          model: 'start_date',
-          attrs: {
-            type: 'month',
-            placeholder: '请选择教育开始时间',
-            valueFormat: 'yyyy-MM'
-          },
-          rules: [{ required: true, message: '请选择教育开始时间', trigger: 'blur' }]
-        },
-        {
-          type: 'v-datepicker',
-          label: '结束时间',
-          model: 'end_date',
-          attrs: {
-            type: 'month',
-            placeholder: '请选择教育结束时间',
-            valueFormat: 'yyyy-MM'
-          },
-          rules: [{ required: true, message: '请选择教育结束时间', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '学校名称',
-          model: 'school_name_cn',
-          attrs: { placeholder: '请输入学校名称' },
-          rules: [{ required: true, message: '请输入学校名称', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '专业名称',
-          model: 'major_cn',
-          attrs: { placeholder: '请输入专业名称' },
-          rules: [{ required: true, message: '请输入专业名称', trigger: 'blur' }]
-        },
-        {
-          type: 'v-select',
-          values: [
-            { value: '专科' },
-            { value: '本科' },
-            { value: '本科/学士' },
-            { value: '硕士研究生' },
-            { value: '研究生/硕士' },
-            { value: '博士研究生' },
-            { value: '研究生/博士' },
-            { value: '其他' }
-          ],
-          label: '学历/学位',
-          model: 'degree',
-          rules: [{ required: true, message: '请选择学历/学位', trigger: 'change' }]
-        }
-      ]
-    }
-  }
-}

src/pages/my/application/form/info/first.js

-/**
- * 个人信息
- */
-
-export default function(_this) {
-  return {
-    id: 'application_info_first',
-    title: '个人信息',
-    required: true,
-    visible() {
-      return this.tabActive === 'application_info_first'
-    },
-    get: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-      callback(data) {
-        const {
-          basic_info: basicInfo = {},
-          attachments = [],
-          submission_stage: submissionStage = 'FILLING'
-        } = data.data.material
-        this.form.options.disabled = submissionStage !== 'FILLING'
-
-        const attachment = attachments.reduce(
-          (result, item) => {
-            const types = ['ID_CARD_FRONT', 'ID_CARD_BACK', 'HK_ID_CARD', 'PASSPORT', 'OTHER_ID_CARD_PHOTO']
-            types.forEach(type => {
-              if (item.file_type_id === type) {
-                result[type].push(item)
-              }
-            })
-            return result
-          },
-          { ID_CARD_FRONT: [], ID_CARD_BACK: [], HK_ID_CARD: [], PASSPORT: [], OTHER_ID_CARD_PHOTO: [] }
-        )
-        basicInfo.id_type = basicInfo.id_type === '护照' ? '中国护照' : basicInfo.id_type
-        return Object.assign({}, basicInfo, attachment)
-      }
-    },
-    update: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}/put`,
-      beforeRequest(data) {
-        const basicInfo = ['phone_number', 'email', 'id_type'].reduce((result, key) => {
-          result[key] = data[key]
-          return result
-        }, {})
-        return { basic_info: basicInfo }
-      }
-    },
-    form: {
-      hasButton: false,
-      next: { to: { query: { active: 'application_info', tab: 'application_info_profile' } }, isSubmit: true },
-      options: { labelWidth: '140px' },
-      items: [
-        {
-          type: 'v-input',
-          label: '手机号',
-          model: 'phone_number',
-          attrs: { placeholder: '请输入手机号', maxlength: 11 },
-          rules: [{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入手机号', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '邮箱',
-          model: 'email',
-          attrs: { placeholder: '请输入邮箱' },
-          rules: [{ type: 'email', required: true, message: '请输入邮箱', trigger: 'blur' }]
-        },
-        {
-          type: 'v-select',
-          values: [{ value: '居民身份证' }, { value: '港澳台身份证' }, { value: '中国护照' }, { value: '其他' }],
-          label: '证件类型',
-          model: 'id_type',
-          attrs: { placeholder: '请选择证件类型' },
-          rules: [{ required: true, message: '请选择证件类型', trigger: 'change' }]
-        },
-        // 身份证照片(背面)
-        {
-          type: 'v-upload',
-          label: '身份证人像面',
-          model: 'ID_CARD_BACK',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'ID_CARD_BACK' },
-            limit: 1,
-            accept: 'image/*',
-            image: 'https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/pc/cu/id_card_back.png'
-          },
-          rules: [{ type: 'array', required: true, message: '请上传身份证照片人像面', trigger: 'change' }],
-          isShow(data) {
-            return data.id_type === '居民身份证'
-          }
-        },
-        // 身份证照片(正面）
-        {
-          type: 'v-upload',
-          label: '身份证国徽面',
-          model: 'ID_CARD_FRONT',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'ID_CARD_FRONT' },
-            limit: 1,
-            accept: 'image/*',
-            image: 'https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/pc/cu/id_card_front.png'
-          },
-          rules: [{ type: 'array', required: true, message: '请上传身份证照片国徽面', trigger: 'change' }],
-          isShow(data) {
-            return data.id_type === '居民身份证'
-          }
-        },
-        // 港澳台身份证
-        {
-          type: 'v-upload',
-          label: '港澳台身份证',
-          model: 'HK_ID_CARD',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'HK_ID_CARD' },
-            limit: 1,
-            accept: 'image/*'
-          },
-          rules: [{ type: 'array', required: true, message: '请上传港澳台身份证', trigger: 'change' }],
-          isShow(data) {
-            return data.id_type === '港澳台身份证'
-          }
-        },
-        // 中国护照
-        {
-          type: 'v-upload',
-          label: '中国护照',
-          model: 'PASSPORT',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'PASSPORT' },
-            limit: 1,
-            accept: 'image/*'
-          },
-          rules: [{ type: 'array', required: true, message: '请上传中国护照', trigger: 'change' }],
-          isShow(data) {
-            return data.id_type === '中国护照'
-          }
-        },
-        // 其他证件
-        {
-          type: 'v-upload',
-          label: '其他证件',
-          model: 'OTHER_ID_CARD_PHOTO',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'OTHER_ID_CARD_PHOTO' },
-            limit: 1,
-            accept: 'image/*'
-          },
-          rules: [{ type: 'array', required: true, message: '请上传其他证件', trigger: 'change' }],
-          isShow(data) {
-            return data.id_type === '其他'
-          }
-        }
-      ]
-    }
-  }
-}

src/pages/my/application/form/info/honor.js

-/**
- * 荣誉奖励
- */
-
-export default function(_this) {
-  return {
-    id: 'application_info_honor',
-    title: '荣誉奖励',
-    visible() {
-      return _this.visible
-    },
-    get: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-      callback(data) {
-        const { honors: list = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-        this.form.options.disabled = submissionStage !== 'FILLING'
-        return list.length ? list : [{}]
-      }
-    },
-    update: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}/put`,
-      beforeRequest(data) {
-        const honors = data.map(item => {
-          return ['time', 'title', 'institution_cn'].reduce((result, key) => {
-            result[key] = item[key] || ''
-            return result
-          }, {})
-        })
-        return { honors }
-      }
-    },
-    form: {
-      prev: { to: { query: { active: 'application_info', tab: 'application_info_training' } }, isSubmit: true },
-      next: { to: { query: { active: 'application_declare' } }, isSubmit: true },
-      hasAdd: true,
-      options: { labelWidth: '140px' },
-      items: [
-        {
-          type: 'v-datepicker',
-          label: '获取时间',
-          model: 'time',
-          attrs: { type: 'date', valueFormat: 'yyyy-MM-dd', placeholder: '请选择获取时间' }
-          // rules: [{ required: true, message: '请选择获取时间', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '荣誉奖励',
-          model: 'title',
-          attrs: { placeholder: '请输入荣誉奖励' }
-          // rules: [{ required: true, message: '请输入荣誉奖励', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '证书颁发机构',
-          model: 'institution_cn',
-          attrs: { placeholder: '请输入证书颁发机构' }
-          // rules: [{ required: true, message: '请输入证书颁发机构', trigger: 'blur' }]
-        }
-      ]
-    }
-  }
-}

src/pages/my/application/form/info/profile.js

-/**
- * 个人信息
- */
-
-import country from './country'
-
-export default function(_this) {
-  return {
-    id: 'application_info_profile',
-    title: '个人信息',
-    required: true,
-    visible() {
-      return _this.visible
-    },
-    get: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-      callback(data) {
-        const {
-          basic_info: basicInfo = {},
-          attachments = [],
-          submission_stage: submissionStage = 'FILLING'
-        } = data.data.material
-        this.form.options.disabled = submissionStage !== 'FILLING'
-
-        const attachment = attachments.reduce(
-          (result, item) => {
-            const types = ['ID_CARD_FRONT', 'ID_CARD_BACK', 'HK_ID_CARD', 'PASSPORT', 'OTHER_ID_CARD_PHOTO']
-            types.forEach(type => {
-              if (item.file_type_id === type) {
-                result[type].push(item)
-              }
-            })
-            return result
-          },
-          { ID_CARD_FRONT: [], ID_CARD_BACK: [], HK_ID_CARD: [], PASSPORT: [], OTHER_ID_CARD_PHOTO: [] }
-        )
-        basicInfo.id_type = basicInfo.id_type === '护照' ? '中国护照' : basicInfo.id_type
-        return Object.assign({}, basicInfo, attachment)
-      }
-    },
-    update: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}/put`,
-      beforeRequest(data) {
-        // let [province, city] = data.city.split('-')
-        // data.address_province = province
-        // data.address_city = city
-        const basicInfo = [
-          'phone_number',
-          'email',
-          'id_type',
-          'id_number',
-          'real_name_cn',
-          'real_name_en',
-          'gender',
-          'nationality',
-          'birthday',
-          'address_province',
-          'address_city',
-          'we_chat_account',
-          'mailing_address',
-          'emergency_contact_name',
-          'emergency_contacts_phone'
-        ].reduce((result, key) => {
-          result[key] = data[key]
-          return result
-        }, {})
-        return { basic_info: basicInfo }
-      }
-    },
-    form: {
-      prev: { to: { query: { active: 'application_info', tab: 'application_info_first' } } },
-      next: { to: { query: { active: 'application_info', tab: 'application_info_education' } }, isSubmit: true },
-      options: { labelWidth: '140px' },
-      items: [
-        {
-          type: 'v-input',
-          label: '手机号',
-          model: 'phone_number',
-          attrs: { placeholder: '请输入手机号', maxlength: 11 },
-          rules: [{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入手机号', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '邮箱',
-          model: 'email',
-          attrs: { placeholder: '请输入邮箱' },
-          rules: [{ type: 'email', required: true, message: '请输入邮箱', trigger: 'blur' }],
-          hint: '（后续报名信息将发送至此邮箱，请认真填写）'
-        },
-        {
-          type: 'v-select',
-          values: [{ value: '居民身份证' }, { value: '港澳台身份证' }, { value: '中国护照' }, { value: '其他' }],
-          label: '证件类型',
-          model: 'id_type',
-          attrs: { placeholder: '请选择证件类型' },
-          rules: [{ required: true, message: '请选择证件类型', trigger: 'change' }]
-        },
-        // 身份证照片(背面)
-        {
-          type: 'v-upload',
-          label: '身份证人像面',
-          model: 'ID_CARD_BACK',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'ID_CARD_BACK' },
-            limit: 1,
-            accept: 'image/*',
-            image: 'https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/pc/cu/id_card_back.png'
-          },
-          rules: [{ type: 'array', required: true, message: '请上传身份证照片人像面', trigger: 'change' }],
-          isShow(data) {
-            return data.id_type === '居民身份证'
-          }
-        },
-        // 身份证照片(正面）
-        {
-          type: 'v-upload',
-          label: '身份证国徽面',
-          model: 'ID_CARD_FRONT',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'ID_CARD_FRONT' },
-            limit: 1,
-            accept: 'image/*',
-            image: 'https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/pc/cu/id_card_front.png'
-          },
-          rules: [{ type: 'array', required: true, message: '请上传身份证照片国徽面', trigger: 'change' }],
-          isShow(data) {
-            return data.id_type === '居民身份证'
-          }
-        },
-        // 港澳台身份证
-        {
-          type: 'v-upload',
-          label: '港澳台身份证',
-          model: 'HK_ID_CARD',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'HK_ID_CARD' },
-            limit: 1,
-            accept: 'image/*'
-          },
-          rules: [{ type: 'array', required: true, message: '请上传港澳台身份证', trigger: 'change' }],
-          isShow(data) {
-            return data.id_type === '港澳台身份证'
-          }
-        },
-        // 中国护照
-        {
-          type: 'v-upload',
-          label: '中国护照',
-          model: 'PASSPORT',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'PASSPORT' },
-            limit: 1,
-            accept: 'image/*'
-          },
-          rules: [{ type: 'array', required: true, message: '请上传中国护照', trigger: 'change' }],
-          isShow(data) {
-            return data.id_type === '中国护照'
-          }
-        },
-        // 其他证件
-        {
-          type: 'v-upload',
-          label: '其他证件',
-          model: 'OTHER_ID_CARD_PHOTO',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'OTHER_ID_CARD_PHOTO' },
-            limit: 1,
-            accept: 'image/*'
-          },
-          rules: [{ type: 'array', required: true, message: '请上传其他证件', trigger: 'change' }],
-          isShow(data) {
-            return data.id_type === '其他'
-          }
-        },
-        {
-          type: 'v-input',
-          label: '证件号码',
-          model: 'id_number',
-          attrs: { placeholder: '请输入证件号码' },
-          rules: [{ required: true, message: '请输入证件号码', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '姓名',
-          model: 'real_name_cn',
-          attrs: { placeholder: '请输入姓名' },
-          rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '英文名',
-          model: 'real_name_en',
-          attrs: { placeholder: '请输入英文名' },
-          rules: [{ required: true, message: '请输入英文名', trigger: 'blur' }]
-        },
-        {
-          type: 'v-radio',
-          values: [
-            { label: '男', value: '男' },
-            { label: '女', value: '女' }
-          ],
-          label: '性别',
-          model: 'gender',
-          rules: [{ required: true, message: '请选择性别', trigger: 'change' }]
-        },
-        {
-          type: 'v-select',
-          label: '国籍',
-          model: 'nationality',
-          values: country,
-          attrs: { placeholder: '请选择国籍', filterable: true },
-          rules: [{ required: true, message: '请选择国籍', trigger: 'blur' }]
-        },
-        {
-          type: 'v-datepicker',
-          label: '出生日期',
-          model: 'birthday',
-          attrs: { type: 'date', placeholder: '请选择出生日期', valueFormat: 'yyyy-MM-dd' },
-          rules: [{ required: true, message: '请选择出生日期', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '居住省',
-          model: 'address_province',
-          attrs: { placeholder: '请输入居住省' },
-          rules: [{ required: true, message: '请输入居住省', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '居住市',
-          model: 'address_city',
-          attrs: { placeholder: '请输入居住市' },
-          rules: [{ required: true, message: '请输入居住市', trigger: 'blur' }]
-        },
-        // {
-        //   type: 'city-v-select',
-        //   label: '现居住城市',
-        //   model: 'city',
-        //   separator: '-',
-        //   rules: [{ required: true, message: '请选择居住城市', trigger: 'blur' }]
-        // },
-        {
-          type: 'v-input',
-          label: '微信号',
-          model: 'we_chat_account',
-          attrs: { placeholder: '请输入微信号' },
-          rules: [{ required: true, message: '请输入微信号', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '邮寄地址',
-          model: 'mailing_address',
-          attrs: { placeholder: '请输入邮寄地址' },
-          rules: [{ required: true, message: '请输入邮寄地址', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '紧急联系人',
-          model: 'emergency_contact_name',
-          attrs: { placeholder: '请输入紧急联系人' },
-          rules: [{ required: true, message: '请输入紧急联系人', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '紧急联系电话',
-          model: 'emergency_contacts_phone',
-          attrs: { placeholder: '请输入紧急联系电话' },
-          rules: [{ required: true, message: '请输入紧急联系电话', trigger: 'blur' }]
-        }
-      ]
-    }
-  }
-}

src/pages/my/application/form/info/training.js

-/**
- * 所受培训
- */
-
-export default function(_this) {
-  return {
-    id: 'application_info_training',
-    title: '所受培训',
-    visible() {
-      return _this.visible
-    },
-    get: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-      callback(data) {
-        const { trainings: list = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-        this.form.options.disabled = submissionStage !== 'FILLING'
-        return list.length ? list : [{}]
-      }
-    },
-    update: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}/put`,
-      beforeRequest(data) {
-        const trainings = data.map(item => {
-          return ['start_date', 'end_date', 'institution_cn', 'course_cn'].reduce((result, key) => {
-            result[key] = item[key] || ''
-            return result
-          }, {})
-        })
-        return { trainings }
-      }
-    },
-    form: {
-      prev: { to: { query: { active: 'application_info', tab: 'application_info_answer' } }, isSubmit: true },
-      next: { to: { query: { active: 'application_info', tab: 'application_info_honor' } }, isSubmit: true },
-      hasAdd: true,
-      options: { labelWidth: '140px' },
-      items: [
-        {
-          type: 'v-datepicker',
-          label: '开始时间',
-          model: 'start_date',
-          attrs: {
-            type: 'month',
-            placeholder: '请选择培训开始时间',
-            valueFormat: 'yyyy-MM'
-          }
-          // rules: [{ required: true, message: '请选择培训开始时间', trigger: 'blur' }]
-        },
-        {
-          type: 'v-datepicker',
-          label: '结束时间',
-          model: 'end_date',
-          attrs: {
-            type: 'month',
-            placeholder: '请选择培训结束时间',
-            valueFormat: 'yyyy-MM'
-          }
-          // rules: [{ required: true, message: '请选择培训结束时间', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '培训机构',
-          model: 'institution_cn',
-          attrs: { placeholder: '请输入培训机构' }
-          // rules: [{ required: true, message: '请输入培训机构', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '课程名称',
-          model: 'course_cn',
-          attrs: { placeholder: '请输入课程名称' }
-          // rules: [{ required: true, message: '请输入课程名称', trigger: 'blur' }]
-        }
-      ]
-    }
-  }
-}

src/pages/my/application/form/tjx.js

-/**
- * 推荐信
- */
-
-export default function(_this) {
-  return {
-    id: 'application_tjx',
-    title: '推荐信',
-    visible() {
-      return _this.visible
-    },
-    get: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-      callback(data) {
-        const { submission_stage: submissionStage = 'FILLING' } = data.data.material
-        const stageList = [
-          'FILLING',
-          'PREPAYMENT',
-          'INTERVIEW_APPLICATION',
-          'AUDITION',
-          'INTERVIEW',
-          'PAYMENT',
-          'REGISTRATION',
-          'CLOSED'
-        ]
-        this.form.options.disabled = stageList.findIndex(item => item === submissionStage) > 3
-        const list = data.data.material.reco_letters || []
-        return list.length ? list : [{}, {}]
-      }
-    },
-    update: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}/put`,
-      beforeRequest(data) {
-        return { reco_letters: data }
-      }
-    },
-    form: {
-      minlength: 2,
-      prev: { to: { query: { active: 'application_info', tab: 'application_info_honor' } }, isSubmit: true },
-      next: { to: { query: { active: 'application_wfzzm' } }, isSubmit: true },
-      hasAdd: true,
-      disabled(data) {
-        return !!data.letter_content
-      },
-      aside: {
-        prepend: {
-          html: '<p style="color:#33C011;">推荐人已完成</p>',
-          visible(data) {
-            return !!data.letter_content
-          }
-        },
-        buttons: [
-          {
-            text: '再次邀请',
-            visible(data) {
-              const editable = ['PREPAYMENT', 'INTERVIEW_APPLICATION', 'AUDITION'].includes(
-                _this.detail.material.submission_stage
-              )
-              return data.id && !data.letter_content && editable
-            },
-            onClick(data) {
-              _this.sendToProvider(data)
-            }
-          },
-          {
-            text: '更换推荐人',
-            visible(data) {
-              const editable = ['PREPAYMENT', 'INTERVIEW_APPLICATION', 'AUDITION'].includes(
-                _this.detail.material.submission_stage
-              )
-              return data.id && !data.letter_content && editable
-            },
-            onClick(data, $form) {
-              $form.validate().then(() => {
-                _this.changeProvider(data)
-              })
-            }
-          }
-        ]
-      },
-      options: { labelWidth: '140px' },
-      items: [
-        {
-          type: 'v-input',
-          label: '推荐人姓名',
-          model: 'provider_name',
-          attrs: { placeholder: '请输入推荐人姓名' },
-          rules: [{ required: true, message: '请输入推荐人姓名', trigger: 'blur' }]
-        },
-
-        {
-          type: 'v-input',
-          label: '推荐人电话',
-          model: 'provider_phone_number',
-          attrs: { placeholder: '请输入推荐人电话', maxlength: 11 },
-          rules: [{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入推荐人电话', trigger: 'blur' }]
-        },
-        {
-          type: 'v-input',
-          label: '推荐人邮箱',
-          model: 'provider_email',
-          attrs: { placeholder: '请输入推荐人邮箱' },
-          rules: [{ type: 'email', required: true, message: '请输入推荐人邮箱', trigger: 'blur' }]
-        },
-        {
-          type: 'v-select',
-          values: [
-            { value: '老师/导师' },
-            { value: '领导' },
-            { value: '同学' },
-            { value: '同事' },
-            { value: '亲属' },
-            { value: '朋友' },
-            { value: '其他' }
-          ],
-          label: '与推荐人关系',
-          model: 'provider_relationship',
-          rules: [{ required: true, message: '请选择与推荐人关系', trigger: 'change' }]
-        }
-      ]
-    }
-  }
-}

src/pages/my/application/form/wfzzm.js

-export default function(_this) {
-  return {
-    id: 'application_wfzzm',
-    title: '无犯罪证明',
-    visible() {
-      return _this.visible
-    },
-    get: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-      callback(data) {
-        const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-        this.form.options.disabled = submissionStage !== 'FILLING'
-
-        const NO_CRIMINAL_CERT = attachments.filter(item => {
-          return item.file_type_id === 'NO_CRIMINAL_CERT'
-        })
-        return { NO_CRIMINAL_CERT }
-      }
-    },
-    form: {
-      prev: { to: { query: { active: 'application_tjx' } } },
-      next: { to: { query: { active: 'application_declare' } } },
-      hasButton: false,
-      options: {},
-      items: [
-        {
-          type: 'v-upload',
-          required: true,
-          model: 'NO_CRIMINAL_CERT',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'NO_CRIMINAL_CERT' },
-            limit: 1
-          },
-          prepend: `
-          <p>第一步：点击下载按键获取无犯罪证明模板</p>
-          <p><a href="https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/pc/cu/%E6%97%A0%E7%8A%AF%E7%BD%AA%E8%AE%B0%E5%BD%95%E8%AF%81%E6%98%8E.docx" target="_blank" download>下载模板</a></p>
-          <p>第二步：打印文件后填写内容并签字上传至电脑，点击下方按钮上传文件</p>
-        `
-        }
-      ]
-    }
-  }
-}

src/pages/my/application/index.vue

-<template>
-  <app-layout>
-    <vue-form
-      :menus="menus"
-      :default-active="currentActive"
-      :tab-active="tabActive"
-      @page-change="handlePageChange"
-      @tab-change="handleTabChange"
-      @success="handleSuccess"
-      @error="handleError"
-      @back="$router.push('/my/account')"
-      @prev="handlePrev"
-      @next="handleNext"
-      v-if="detail"
-    >
-      <template #aside-append>
-        <div class="aside-preview" @click="dialogVisible = true" v-if="visible">预览全部</div>
-        <div class="aside-logout" @click="$store.dispatch('logout')"><span>退出登录</span></div>
-      </template>
-      <!-- 报名缴费 -->
-      <template #content v-if="currentActive === 'application_pay'">
-        <app-pay />
-      </template>
-    </vue-form>
-    <el-dialog title="预览全部" :visible.sync="dialogVisible" width="790px" class="dialog-preview">
-      <app-preview :hasEdit="true" @edit="handlePreviewEdit" v-if="dialogVisible" />
-    </el-dialog>
-    <app-complete v-model="completeVisible"></app-complete>
-  </app-layout>
-</template>
-
-<script>
-import AppLayout from '../layout.vue'
-import getMenu from './form'
-import AppPay from './pay.vue'
-import AppPreview from './preview.vue'
-import AppComplete from './complete.vue'
-
-import * as api from '@/api/my'
-
-export default {
-  components: { AppLayout, AppPay, AppPreview, AppComplete },
-  data() {
-    const menus = getMenu(this)
-    return {
-      menus: [menus],
-      currentActive: 'application_info',
-      tabActive: 'application_info_profile',
-      dialogVisible: false,
-      detail: null,
-      completeVisible: false
-    }
-  },
-  watch: {
-    $route: {
-      immediate: true,
-      handler(route) {
-        const { query = {} } = route
-        this.currentActive = query.active || 'application_info'
-        this.tabActive = query.tab || 'application_info_profile'
-      }
-    }
-  },
-  computed: {
-    visible() {
-      return this.currentActive !== 'application_info' || this.tabActive !== 'application_info_first'
-    }
-  },
-  methods: {
-    // 获取报名信息
-    getApplication() {
-      api.getApplication().then(response => {
-        const { data, error, message } = response
-        if (error.toString() === '0') {
-          this.detail = data
-          if (
-            !data.progress.FILLING.attachments ||
-            data.progress.FILLING.attachments.missed_required_list.ID_CARD_PHOTO
-          ) {
-            this.tabActive = 'application_info_first'
-          }
-          const { submission_stage: submissionStage = 'FILLING' } = data.material
-          if (submissionStage !== 'FILLING') {
-            this.menus[0].children.forEach(item => {
-              if (item.id === 'application_pay') {
-                item.show = true
-              }
-            })
-          }
-        } else {
-          this.$message.error(message)
-        }
-      })
-    },
-    handlePageChange(value) {
-      this.currentActive = value
-      this.$router.push({ path: this.$route.path, query: { active: value } }).catch(() => {})
-    },
-    handleTabChange(value) {
-      this.tabActive = value
-      const query = Object.assign({}, this.$route.query, { tab: value })
-      this.$router.push({ query })
-    },
-    handleSuccess(data) {
-      console.log('提交成功了', data)
-      this.$message({ type: 'success', message: '提交成功' })
-    },
-    handleError(data) {
-      console.log('提交失败了', data)
-      this.$message({ type: 'error', message: data.message })
-    },
-    handlePrev(to) {
-      this.$router.push(to)
-    },
-    handleNext(to) {
-      this.$router.push(to)
-    },
-    handlePreviewEdit(to) {
-      this.$router.push(to)
-      this.dialogVisible = false
-    },
-    // 更换推荐人
-    changeProvider(data) {
-      api.updateProvider(data.id, data).then(response => {
-        const { error, message } = response
-        if (error.toString() === '0') {
-          this.$message({ type: 'success', message })
-        } else {
-          this.$message.error(message)
-        }
-      })
-    },
-    // 再次邀请推荐
-    sendToProvider(data) {
-      api.sendToProvider(data.id).then(response => {
-        const { error, message } = response
-        if (error.toString() === '0') {
-          this.$message({ type: 'success', message })
-        } else {
-          this.$message.error(message)
-        }
-      })
-    }
-  },
-  beforeMount() {
-    this.getApplication()
-  }
-}
-</script>
-<style lang="scss" scoped>
-::v-deep .aside-preview {
-  margin-top: -20px;
-  padding-left: 64px;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 44px;
-  color: #222;
-  cursor: pointer;
-}
-.dialog-preview {
-  ::v-deep .el-dialog__body {
-    padding: 0;
-  }
-}
-</style>

src/pages/my/application/pay.vue

-<template>
-  <div class="pay">
-    <div class="pic">
-      <img src="../../../assets/images/my_pay_01.png" />
-    </div>
-    <div class="pay-hd">
-      <h1>欢迎您</h1>
-      <p class="t1">
-        申请紫荆-索菲亚大学金融方向工商管理硕士项目，本项目的注册费、申请费共计<span>700</span>元，请扫描二维码缴费以完成报名。
-      </p>
-      <p class="t1" v-if="isPass">
-        因面试未通过需重新申请紫荆-索菲亚大学金融方向工商管理硕士项目，本项目的注册费、申请费共计<span>700</span>元，请扫描二维码缴费以完成报名。
-      </p>
-    </div>
-    <div class="qrcode-error" v-if="qrcodeError">
-      生成二维码失败请刷新<i class="el-icon-refresh-left" @click="refreshQrcode" title="刷新"></i>
-    </div>
-    <div class="qrcode" v-else>
-      <qrcode-vue :value="qrcodeValue" size="100"></qrcode-vue>
-      <span @click="refreshQrcode">刷新</span>
-    </div>
-    <div class="pay-ft">
-      <p class="t2">注释：再提交700元申请费后，申请人还需上传并提交如下文件。</p>
-      <p class="t2">①本科学位证书、②本科中、英文成绩单各一份、③个人证件照（2寸、免冠、白底）</p>
-      <p class="t2">该申请费不退，请慎重缴费！</p>
-    </div>
-    <el-dialog
-      title="报名费缴费成功"
-      :visible.sync="dialogVisible"
-      :center="true"
-      :close-on-click-modal="false"
-      width="348px"
-    >
-      <div class="dialog-pay">
-        <p>请填写申请面试的材料，材料齐全后<br />招生办老师将给您致电预约面试日期与时间</p>
-        <div class="icon"><img src="../../../assets/images/icon_success.png" /></div>
-      </div>
-      <template #footer>
-        <el-button type="primary" @click="toInterview">立即预约</el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import QrcodeVue from 'qrcode.vue'
-import * as api from '@/api/my'
-
-export default {
-  name: 'AppPay',
-  components: { QrcodeVue },
-  data() {
-    return {
-      isPass: false,
-      order: { id: '', payment_url: '' },
-      qrcodeError: false,
-      dialogVisible: false,
-      timer: null,
-      paymentRecords: [] // 所有订单
-    }
-  },
-  computed: {
-    // 二维码地址
-    qrcodeValue() {
-      return this.order.payment_url
-    },
-    // 支付成功
-    paySuccess() {
-      return this.order.payment_status === 'SUCCESS'
-    },
-    // 待支付订单
-    orderList() {
-      // 筛选待支付订单
-      const list = this.paymentRecords.filter(item => {
-        return item.bill_type === 'APPLICATION_FEE' && item.payment_status === 'WAITING_FOR_PAY'
-      })
-      // 待支付订单是否有当前订单
-      const found = list.find(item => item.id === this.order.id)
-      return found ? list : [...list, this.order]
-    }
-  },
-  methods: {
-    // 获取报名信息
-    async getApplication() {
-      await api.getApplication().then(response => {
-        const { payment_records: paymentRecords = [] } = response.data.material
-        // 获取支付订单
-        this.paymentRecords = paymentRecords
-        if (paymentRecords && paymentRecords.length) {
-          // 获取支付成功的订单
-          const orderPaySuccess = paymentRecords.find(item => {
-            return item.bill_type === 'APPLICATION_FEE' && item.payment_status === 'SUCCESS'
-          })
-          if (orderPaySuccess) {
-            this.order = orderPaySuccess
-            this.dialogVisible = true
-            return
-          }
-          // 获取最后一个订单
-          const [lastPayment] = paymentRecords.reverse()
-          this.order = lastPayment
-        }
-      })
-    },
-    // 获取订单
-    async getOrder() {
-      if (this.paySuccess) {
-        return
-      }
-      await api.getOrder({ payment_method: 'WX_PAY_QR' }).then(response => {
-        const { data, error, message } = response
-        this.qrcodeError = error.toString() === '1'
-        if (error.toString() === '0') {
-          this.order = data
-        } else {
-          this.$message.error(message)
-        }
-      })
-    },
-    // 刷新二维码
-    refreshQrcode() {
-      this.getOrder()
-    },
-    // 检查支付状态
-    async checkPay(order) {
-      if (this.paySuccess) {
-        this.timer && clearInterval(this.timer)
-        return
-      }
-      const userId = window.G.UserInfo.id
-      await api.checkPay(order.id, { user_id: userId }).then(response => {
-        if (response.data.payment_status === 'SUCCESS') {
-          this.timer && clearInterval(this.timer)
-          this.dialogVisible = true
-        }
-      })
-    },
-    setCheckPayTimer() {
-      this.timer && clearInterval(this.timer)
-      this.timer = setInterval(() => {
-        this.orderList.forEach(order => {
-          this.checkPay(order)
-        })
-      }, 3000)
-    },
-    // 申请面试
-    toInterview() {
-      this.$router.push('/my/interview')
-    }
-  },
-  async mounted() {
-    await this.getApplication()
-    await this.getOrder()
-    this.setCheckPayTimer()
-  },
-  destroyed() {
-    this.timer && clearInterval(this.timer)
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.pay {
-  max-width: 562px;
-  margin: 0 auto;
-}
-.pic {
-  text-align: center;
-}
-.pay-hd {
-  h1 {
-    padding: 10px 0;
-    font-size: 24px;
-    font-weight: 500;
-    color: #222;
-    line-height: 1;
-    text-align: center;
-  }
-}
-.qrcode {
-  padding: 20px 0;
-  text-align: center;
-  span {
-    margin-top: 10px;
-    font-size: 12px;
-    color: #999;
-    cursor: pointer;
-  }
-}
-.qrcode-error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  width: 100px;
-  height: 100px;
-  padding: 10px;
-  margin: 20px auto;
-  color: var(--main-color);
-  border-style: dashed;
-  border-width: 1px;
-  border-color: var(--main-color);
-  box-sizing: border-box;
-  text-align: center;
-  i {
-    margin-top: 10px;
-    cursor: pointer;
-  }
-}
-.t1 {
-  font-size: 14px;
-  color: #303030;
-  line-height: 20px;
-  text-align: center;
-  span {
-    color: #ffa448;
-  }
-}
-.t2 {
-  font-size: 12px;
-  color: #999;
-  line-height: 20px;
-}
-.dialog-pay {
-  text-align: center;
-  p {
-    color: #262626;
-    line-height: 20px;
-  }
-  .icon {
-    margin-top: 20px;
-    text-align: center;
-  }
-}
-</style>

src/pages/my/application/preview.vue

-<template>
-  <div class="preview" v-loading="loading">
-    <template v-if="progress.FILLING">
-      <div class="preview-hd">
-        <el-steps align-center :active="options.length">
-          <template v-for="item in options">
-            <el-step
-              :title="item.title"
-              :status="progress.FILLING[item.code] && progress.FILLING[item.code].progress === 1 ? 'success' : 'error'"
-              :key="item.code"
-            ></el-step>
-          </template>
-        </el-steps>
-      </div>
-      <div class="preivew-bd">
-        <template v-for="item in options">
-          <div
-            class="preview-item"
-            :class="progress.FILLING[item.code].progress === 1 ? 'is-success' : 'is-error'"
-            :key="item.code"
-            v-if="progress.FILLING[item.code]"
-          >
-            <div class="preview-item-hd">
-              <div class="title">
-                {{ item.title }}
-                <template v-if="progress.FILLING[item.code].progress === 1">（已完善）</template>
-                <template v-else>（待完善）</template>
-              </div>
-              <div class="line"></div>
-              <el-button plain size="small" @click="handleEdit(item.edit.to)" v-if="hasEdit">编辑</el-button>
-            </div>
-            <div class="preview-item-bd">
-              <template v-if="item.computed">
-                <div v-html="item.computed(material[item.code])"></div>
-              </template>
-              <template v-else-if="item.isMultiple">
-                <div class="group" v-for="(data, index) in material[item.code]" :key="index">
-                  <dl
-                    v-for="subitem in item.items"
-                    :key="subitem.code"
-                    v-show="subitem.visible ? subitem.visible() : true"
-                  >
-                    <dt>{{ subitem.label }}：</dt>
-                    <dd>
-                      <template v-if="subitem.computed">
-                        <div v-html="subitem.computed(data)"></div>
-                      </template>
-                      <template v-else>{{ data[subitem.code] }}</template>
-                    </dd>
-                  </dl>
-                </div>
-              </template>
-              <template v-else>
-                <div class="group">
-                  <dl v-for="subitem in item.items" :key="subitem.code">
-                    <dt>{{ subitem.label }}：</dt>
-                    <dd>
-                      <template v-if="subitem.computed">
-                        <div v-html="subitem.computed(material[item.code])"></div>
-                      </template>
-                      <template v-else>{{ material[item.code][subitem.code] }}</template>
-                    </dd>
-                  </dl>
-                </div>
-              </template>
-            </div>
-          </div>
-        </template>
-        <div class="preview-item is-success" v-if="isManager">
-          <div class="preview-item-hd">
-            <div class="title">照片/附件</div>
-            <div class="line"></div>
-          </div>
-          <div class="preview-item-bd">
-            <template v-if="material.attachments">
-              <ul class="attachments">
-                <li class="attachments-item" v-for="(item, index) in material.attachments" :key="index">
-                  <div class="inner" @click="handlePreview(item)">
-                    <el-image :src="item.oss_sign_url" class="pic">
-                      <template #error>
-                        <i class="el-icon-document"></i>
-                      </template>
-                    </el-image>
-                    <div class="name">{{ item.file_type_label }}</div>
-                    <div v-if="item.status_desc">
-                      <el-tag size="mini">{{ item.status_desc }}</el-tag>
-                    </div>
-                  </div>
-                  <el-button-group v-if="hasButton" style="margin-left: 40px">
-                    <el-button size="mini" :disabled="item.status === 'INACTIVE'" @click="handleRemove(item)"
-                      >删除</el-button
-                    >
-                    <el-button size="mini" :disabled="item.status === 'LOG'" @click="handleSave(item)">存档</el-button>
-                  </el-button-group>
-                </li>
-              </ul>
-            </template>
-          </div>
-        </div>
-        <div class="preview-item is-success" v-if="isManager">
-          <div class="preview-item-hd">
-            <div class="title">支付记录</div>
-            <div class="line"></div>
-          </div>
-          <div class="preview-item-bd">
-            <template v-if="material.payment_records">
-              <el-table :data="material.payment_records">
-                <el-table-column align="left" prop="payment_method_desc" label="支付方式"> </el-table-column>
-                <el-table-column align="center" prop="bill_amount" label="支付金额"> </el-table-column>
-                <el-table-column align="right" prop="payment_status_desc" label="支付状态"> </el-table-column>
-              </el-table>
-            </template>
-          </div>
-        </div>
-      </div>
-    </template>
-    <img :src="previewImageUrl" :alt="previewImageTitle" id="image" style="display: none" />
-  </div>
-</template>
-<script>
-import 'viewerjs/dist/viewer.css'
-import Viewer from 'viewerjs'
-import * as api from '@/api/my'
-
-// 行业类别
-const industryList = [
-  { label: '互联网/电子商务', value: '1 ' },
-  { label: '基金/证券/期货/投资', value: '2 ' },
-  { label: '保险', value: '3 ' },
-  { label: '银行', value: '4 ' },
-  { label: '信托/担保/拍卖/典当', value: '5 ' },
-  { label: '计算机软件', value: '6 ' },
-  { label: 'IT服务(系统/数据/维护)', value: '7 ' },
-  { label: '电子技术/半导体/集成电路', value: '8 ' },
-  { label: '计算机硬件', value: '9 ' },
-  { label: '通信/电信/网络设备', value: '10' },
-  { label: '通信/电信运营、增值服务', value: '11' },
-  { label: '网络游戏', value: '12' },
-  { label: '房地产/建筑/建材/工程', value: '13' },
-  { label: '家居/室内设计/装饰装潢', value: '14' },
-  { label: '物业管理/商业中心', value: '15' },
-  { label: '专业服务/咨询(财会/法律/人力资源等)', value: '16' },
-  { label: '广告/会展/公关', value: '17' },
-  { label: '中介服务', value: '18' },
-  { label: '检验/检测/认证', value: '19' },
-  { label: '外包服务', value: '20' },
-  { label: '快速消费品（食品/饮料/烟酒/日化）', value: '21' },
-  { label: '耐用消费品（服饰/纺织/皮革/家具/家电）', value: '22' },
-  { label: '贸易/进出口', value: '23' },
-  { label: '零售/批发', value: '24' },
-  { label: '租赁服务', value: '25' },
-  { label: '教育/培训/院校', value: '26' },
-  { label: '礼品/玩具/工艺美术/收藏品/奢侈品', value: '27' },
-  { label: '汽车/摩托车', value: '28' },
-  { label: '大型设备/机电设备/重工业', value: '29' },
-  { label: '加工制造（原料加工/模具）', value: '30' },
-  { label: '仪器仪表及工业自动化', value: '31' },
-  { label: '印刷/包装/造纸', value: '32' },
-  { label: '办公用品及设备', value: '33' },
-  { label: '医药/生物工程', value: '34' },
-  { label: '医疗设备/器械', value: '35' },
-  { label: '航空/航天研究与制造', value: '36' },
-  { label: '交通/运输,物流/仓储', value: '37' },
-  { label: '医疗/护理/美容/保健/卫生服务', value: '38' },
-  { label: '酒店/餐饮,旅游/度假,媒体/出版/影视/文化传播', value: '39' },
-  { label: '娱乐/体育/休闲', value: '40' },
-  { label: '能源/矿产/采掘/冶炼', value: '41' },
-  { label: '石油/石化/化工,电气/电力/水利', value: '42' },
-  { label: '环保', value: '43' },
-  { label: '政府/公共事业/非盈利机构', value: '44' },
-  { label: '学术/科研,农/林/牧/渔跨领域经营', value: '45' },
-  { label: '其他', value: '90' }
-]
-export default {
-  name: 'Preview',
-  props: {
-    hasEdit: { type: Boolean, default: false },
-    isManager: { type: Boolean, default: false }
-  },
-  data() {
-    return {
-      loading: false,
-      previewImageUrl: '',
-      previewImageTitle: '',
-      viewer: null,
-      material: {},
-      progress: {},
-      options: [
-        {
-          title: '个人资料',
-          code: 'basic_info',
-          edit: {
-            to: { path: '/my/application', query: { active: 'application_info', tab: 'application_info_profile' } }
-          },
-          items: [
-            { label: '姓名', code: 'real_name_cn' },
-            { label: '英文名', code: 'real_name_en' },
-            {
-              label: '现居住城市',
-              code: 'address_city',
-              computed(data) {
-                return data.address_city ? `${data.address_province}-${data.address_city}` : ''
-              }
-            },
-            { label: '证件类型', code: 'id_type' },
-            { label: '证件号码', code: 'id_number' },
-            { label: '手机', code: 'phone_number' },
-            { label: '邮箱', code: 'email' },
-            { label: '性别', code: 'gender' },
-            { label: '国籍', code: 'nationality' },
-            { label: '生日', code: 'birthday' },
-            { label: '微信号', code: 'we_chat_account' },
-            { label: '邮寄地址', code: 'mailing_address' },
-            { label: '紧急联系人', code: 'emergency_contact_name' },
-            { label: '紧急联系人电话', code: 'emergency_contacts_phone' }
-          ]
-        },
-        {
-          title: '教育背景',
-          code: 'educations',
-          edit: {
-            to: { path: '/my/application', query: { active: 'application_info', tab: 'application_info_education' } }
-          },
-          isMultiple: true,
-          items: [
-            {
-              label: '教育时间',
-              code: 'start_date',
-              computed(data) {
-                return `${data.start_date}至${data.end_date}`
-              }
-            },
-            { label: '专业名称', code: 'major_cn' },
-            { label: '学校名称', code: 'school_name_cn' },
-            { label: '学历/学位', code: 'degree' }
-          ]
-        },
-        {
-          title: '工作经验',
-          code: 'careers',
-          edit: {
-            to: { path: '/my/application', query: { active: 'application_info', tab: 'application_info_career' } }
-          },
-          isMultiple: true,
-          items: [
-            {
-              label: '工作时间',
-              code: 'start_date',
-              computed(data) {
-                return `${data.start_date}至${data.end_date}`
-              }
-            },
-            { label: '工作单位', code: 'company_name_cn' },
-            {
-              label: '行业类别',
-              code: 'industry',
-              computed(data) {
-                const found = industryList.find(item => item.value === data.industry)
-                return found ? found.label : data.industry
-              }
-            },
-            { label: '工作部门', code: 'dept_cn' },
-            { label: '工作职位', code: 'position_cn' },
-            { label: '工作描述', code: 'job_desc_cn' }
-          ]
-        },
-        {
-          title: '学习目的',
-          code: 'answers',
-          edit: {
-            to: { path: '/my/application', query: { active: 'application_info', tab: 'application_info_answer' } }
-          },
-          computed(data = []) {
-            const result = data.map(item => {
-              return `<dl><dt>${item.question}</dt><dd>${item.answer}</dd></dl>`
-            })
-            return `<div class="answers">${result.join('')}</div>`
-          }
-        },
-        {
-          title: '所受培训',
-          code: 'trainings',
-          edit: {
-            to: { path: '/my/application', query: { active: 'application_info', tab: 'application_info_training' } }
-          },
-          isMultiple: true,
-          items: [
-            {
-              label: '培训时间',
-              code: 'start_date',
-              computed(data) {
-                return `${data.start_date}至${data.end_date}`
-              }
-            },
-            { label: '培训机构', code: 'institution_cn' },
-            { label: '课程名称', code: 'course_cn' }
-          ]
-        },
-        {
-          title: '荣誉奖励',
-          code: 'honors',
-          edit: {
-            to: { path: '/my/application', query: { active: 'application_info', tab: 'application_info_honor' } }
-          },
-          isMultiple: true,
-          items: [
-            { label: '获取时间', code: 'time' },
-            { label: '荣誉奖励', code: 'title' },
-            { label: '证书颁发机构', code: 'institution_cn' }
-          ]
-        }
-        // {
-        //   title: '推荐信',
-        //   code: 'reco_letters',
-        //   edit: { to: { path: '/my/application', query: { active: 'application_tjx' } } },
-        //   isMultiple: true,
-        //   items: [
-        //     { label: '推荐人姓名', code: 'provider_name' },
-        //     { label: '推荐人电话', code: 'provider_phone_number' },
-        //     { label: '推荐人邮箱', code: 'provider_email' },
-        //     { label: '与推荐人关系', code: 'provider_relationship' },
-        //     { label: '推荐人工作单位', code: 'provider_company_name', visible: () => this.isManager },
-        //     { label: '推荐人职务', code: 'provider_job_title', visible: () => this.isManager },
-        //     { label: '推荐信内容', code: 'letter_content', visible: () => this.isManager }
-        //   ]
-        // }
-        // {
-        //   title: '无犯罪证明',
-        //   code: 'attachments',
-        //   edit: { to: { path: '/my/application', query: { active: 'application_wfzzm' } } },
-        //   computed(data) {
-        //     if (!data || !data.length) {
-        //       return ''
-        //     }
-        //     const found = data.find(item => item.file_type_id === 'NO_CRIMINAL_CERT')
-        //     return found
-        //       ? `<a href="${found.oss_sign_url}" target="_blank"><img src="${found.oss_sign_url}" style="max-width:300px;margin:10px 0;"></a>`
-        //       : ''
-        //   }
-        // }
-      ]
-    }
-  },
-  computed: {
-    right() {
-      const { right = '' } = this.$route.query
-      return right.toUpperCase()
-    },
-    hasButton() {
-      return this.right.includes('X')
-    }
-  },
-  methods: {
-    // 获取报名信息
-    getApplication() {
-      this.loading = true
-      api.getApplication(this.$route.query).then(response => {
-        const { data, error, message } = response
-        if (error.toString() === '0') {
-          const { material, progress } = data
-          this.material = material
-          const missedRequiredList = progress.FILLING.attachments.missed_required_list
-          progress.FILLING.attachments.progress = missedRequiredList.NO_CRIMINAL_CERT ? 0 : 1
-          this.progress = progress
-        } else {
-          this.$message.error(message)
-        }
-        this.loading = false
-      })
-    },
-    handleEdit(to) {
-      this.$emit('edit', to)
-      // this.$router.push(to)
-    },
-    // 删除
-    handleRemove(data) {
-      this.changeFileStatus(data, 'INACTIVE')
-    },
-    // 存档
-    handleSave(data) {
-      this.changeFileStatus(data, 'LOG')
-    },
-    changeFileStatus(data, status) {
-      api.changeFileStatus(this.material.user_id, data.id, status).then(response => {
-        this.getApplication()
-      })
-    },
-    // 预览
-    handlePreview(file) {
-      let url = file.oss_sign_url
-      if (!url) {
-        this.$message({ type: 'warning', message: '无法查看' })
-        return
-      }
-      url = url.includes('?') ? url.split('?').shift() : url
-      const names = ['jpg', 'jpeg', 'png', 'gif']
-      const name = url.split('.').pop() || ''
-      if (names.includes(name.toLocaleLowerCase())) {
-        this.previewImageUrl = file.oss_sign_url
-        this.previewImageTitle = file.file_type_label
-        this.$nextTick(() => {
-          this.viewer.update()
-          this.viewer.show(true)
-        })
-      } else {
-        this.newWindowPreview(file.oss_sign_url)
-      }
-    },
-    // 新窗口预览
-    newWindowPreview(url) {
-      const a = document.createElement('a')
-      a.href = url
-      a.target = '_blank'
-      document.body.appendChild(a)
-      a.click()
-      a.remove()
-    },
-    createViewer() {
-      this.viewer = new Viewer(document.getElementById('image'), {
-        navbar: false,
-        toolbar: { zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true }
-      })
-    }
-  },
-  beforeMount() {
-    this.getApplication()
-  },
-  mounted() {
-    this.createViewer()
-    document.body.style = 'background-color:#eee;'
-  },
-  destroyed() {
-    this.viewer && this.viewer.destroy()
-    document.body.style = ''
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.preview {
-  max-width: 750px;
-  min-height: 80vh;
-  padding: 20px;
-  margin: 0 auto;
-  background-color: #fff;
-}
-.preview-hd {
-  padding: 20px 0;
-  ::v-deep .el-step__title {
-    font-size: 12px;
-  }
-}
-.preview-item {
-  margin: 20px;
-}
-.is-success {
-  color: #37a912;
-  .line {
-    background: linear-gradient(90deg, #37a912 0%, rgba(255, 218, 218, 0) 100%);
-  }
-}
-.is-error {
-  color: #da2a56;
-  .line {
-    background: linear-gradient(90deg, #da2a56 0%, rgba(255, 218, 218, 0) 100%);
-  }
-}
-.preview-item-hd {
-  display: flex;
-  align-items: center;
-  .title {
-    font-size: 18px;
-    font-weight: 600;
-  }
-  .line {
-    flex: 1;
-    height: 4px;
-    margin: 0 20px;
-  }
-}
-.preview-item-bd {
-  padding-top: 20px;
-  .group {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .group + .group {
-    margin-top: 10px;
-    padding-top: 20px;
-    border-top: 1px solid #f1f1f1;
-  }
-  dl {
-    flex: 50%;
-    display: flex;
-    margin-bottom: 10px;
-    font-size: 14px;
-    color: #222;
-  }
-  dt {
-    font-weight: bold;
-  }
-  dd {
-    flex: 1;
-    word-break: break-all;
-  }
-}
-</style>
-<style lang="scss">
-.preview {
-  .answers {
-    dl {
-      margin-bottom: 10px;
-      font-size: 14px;
-      color: #222;
-      & + dl {
-        margin-top: 20px;
-      }
-    }
-    dt {
-      font-weight: bold;
-      margin-bottom: 5px;
-    }
-    dd {
-      word-break: break-all;
-    }
-  }
-  .attachments-item {
-    display: flex;
-    align-items: center;
-    padding: 0 10px;
-    &:hover {
-      background-color: #f5f7fa;
-    }
-    .inner {
-      flex: 1;
-      padding: 10px 0;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      color: #222;
-      cursor: pointer;
-    }
-    .pic {
-      width: 40px;
-      height: 40px;
-      font-size: 40px;
-      line-height: 40px;
-      text-align: center;
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-    }
-    .name {
-      flex: 1;
-      padding: 0 10px;
-    }
-    .time {
-      font-size: 12px;
-    }
-  }
-  .attachments-item + .attachments-item {
-    border-top: 1px solid #ebeef5;
-  }
-}
-.viewer-toolbar > ul {
-  margin-bottom: 20px;
-}
-</style>

src/pages/my/interview/form/byzs.js

-export default {
-  id: 'interview_byzs',
-  title: '毕业证书',
-  get: {
-    action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-    callback(data) {
-      const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-      const stageList = [
-        'FILLING',
-        'PREPAYMENT',
-        'INTERVIEW_APPLICATION',
-        'AUDITION',
-        'INTERVIEW',
-        'PAYMENT',
-        'REGISTRATION',
-        'CLOSED'
-      ]
-      this.form.options.disabled = stageList.findIndex(item => item === submissionStage) > 2
-      const DIPLOMA_CN = attachments.filter(item => {
-        return item.file_type_id === 'DIPLOMA_CN'
-      })
-      return { DIPLOMA_CN }
-    }
-  },
-  form: {
-    next: { to: { query: { active: 'interview_zp' } } },
-    hasButton: false,
-    options: {},
-    items: [
-      {
-        type: 'v-upload',
-        required: true,
-        model: 'DIPLOMA_CN',
-        attrs: {
-          action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-          deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-          data: { file_type: 'DIPLOMA_CN' }
-        },
-        append:
-          '申请者需要将本科或以上毕业证书原件扫描或者拍照后提交。<br> 可上传多个文件，请确保证书号码清晰可辨。<br> 上传文件仅限“jpg,jpeg,png”格式，文件小于10MB。'
-      }
-    ]
-  }
-}

src/pages/my/interview/form/cjd.js

-export default function(_this) {
-  return {
-    id: 'interview_cjd',
-    title: '成绩单（中+英）',
-    get: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-      callback(data) {
-        const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-        const stageList = [
-          'FILLING',
-          'PREPAYMENT',
-          'INTERVIEW_APPLICATION',
-          'AUDITION',
-          'INTERVIEW',
-          'PAYMENT',
-          'REGISTRATION',
-          'CLOSED'
-        ]
-        this.form.options.disabled = stageList.findIndex(item => item === submissionStage) > 2
-        return attachments.reduce(
-          (result, item) => {
-            if (item.file_type_id === 'REPORT_CARD_CN') {
-              result.REPORT_CARD_CN.push(item)
-            }
-            if (item.file_type_id === 'REPORT_CARD_EN') {
-              result.REPORT_CARD_EN.push(item)
-            }
-            return result
-          },
-          { REPORT_CARD_CN: [], REPORT_CARD_EN: [] }
-        )
-      }
-    },
-    form: {
-      next: { to: { query: { active: 'interview_ywjl' } } },
-      hasButton: false,
-      options: { 'label-position': 'top' },
-      hint: `
-      <p>请将中英文成绩单原件扫描或者拍照后提交。</p>
-      <p>获取途径:联系大学时就读学校相关部门(档案馆/教务处)获取成绩单。</p>
-    `,
-      items: [
-        {
-          type: 'v-upload',
-          label: '中文成绩单',
-          model: 'REPORT_CARD_CN',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'REPORT_CARD_CN' }
-          }
-        },
-        {
-          type: 'v-upload',
-          label: '英文成绩单',
-          model: 'REPORT_CARD_EN',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'REPORT_CARD_EN' }
-          }
-        }
-      ]
-    }
-  }
-}

src/pages/my/interview/form/index.js

-import byzs from './byzs'
-// import xwzs from './xwzs'
-// import ywjl from './ywjl'
-import zp from './zp'
-
-export default function(_this) {
-  return {
-    id: 'interview',
-    title: '申请面试',
-    children: [byzs, zp(_this)]
-  }
-}

src/pages/my/interview/form/xwzs.js

-export default {
-  id: 'interview_xwzs',
-  title: '学位证书',
-  get: {
-    action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-    callback(data) {
-      const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-      const stageList = [
-        'FILLING',
-        'PREPAYMENT',
-        'INTERVIEW_APPLICATION',
-        'AUDITION',
-        'INTERVIEW',
-        'PAYMENT',
-        'REGISTRATION',
-        'CLOSED'
-      ]
-      this.form.options.disabled = stageList.findIndex(item => item === submissionStage) > 2
-      const DEGREE_CERT_CN = attachments.filter(item => {
-        return item.file_type_id === 'DEGREE_CERT_CN'
-      })
-      return { DEGREE_CERT_CN }
-    }
-  },
-  form: {
-    prev: { to: { query: { active: 'interview_byzs' } } },
-    next: { to: { query: { active: 'interview_ywjl' } } },
-    hasButton: false,
-    options: {},
-    items: [
-      {
-        type: 'v-upload',
-        required: true,
-        model: 'DEGREE_CERT_CN',
-        attrs: {
-          action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-          deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-          data: { file_type: 'DEGREE_CERT_CN' }
-        },
-        append:
-          '申请者需要将学位证书原件扫描或者拍照后提交。<br>可上传多个文件，请确保证书号码清晰可辨。<br>上传文件仅限“jpg,jpeg,png”格式，文件小于10MB。'
-      }
-    ]
-  }
-}

src/pages/my/interview/form/xwzszm.js

-export default {
-  id: 'interview_xwzsywzm',
-  title: '学位证书英文证明',
-  get: {
-    action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-    callback(data) {
-      const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-      const stageList = [
-        'FILLING',
-        'PREPAYMENT',
-        'INTERVIEW_APPLICATION',
-        'AUDITION',
-        'INTERVIEW',
-        'PAYMENT',
-        'REGISTRATION',
-        'CLOSED'
-      ]
-      this.form.options.disabled = stageList.findIndex(item => item === submissionStage) > 2
-      const DEGREE_CERT_EN = attachments.filter(item => {
-        return item.file_type_id === 'DEGREE_CERT_EN'
-      })
-      return { DEGREE_CERT_EN }
-    }
-  },
-  form: {
-    prev: { to: { query: { active: 'interview_xwzs' } } },
-    next: { to: { query: { active: 'interview_ywjl' } } },
-    hasButton: false,
-    options: {},
-    items: [
-      {
-        type: 'v-upload',
-        required: true,
-        model: 'DEGREE_CERT_EN',
-        attrs: {
-          action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-          deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-          data: { file_type: 'DEGREE_CERT_EN' }
-        },
-        append: '请将学校出具的学位证书英文证明原件扫描或者拍照后提交。'
-      }
-    ]
-  }
-}

src/pages/my/interview/form/ywjl.js

-export default {
-  id: 'interview_ywjl',
-  title: '英文简历',
-  get: {
-    action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-    callback(data) {
-      const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-      const stageList = [
-        'FILLING',
-        'PREPAYMENT',
-        'INTERVIEW_APPLICATION',
-        'AUDITION',
-        'INTERVIEW',
-        'PAYMENT',
-        'REGISTRATION',
-        'CLOSED'
-      ]
-      this.form.options.disabled = stageList.findIndex(item => item === submissionStage) > 2
-      const RESUME_EN = attachments.filter(item => {
-        return item.file_type_id === 'RESUME_EN'
-      })
-      return { RESUME_EN }
-    }
-  },
-  form: {
-    prev: { to: { query: { active: 'interview_xwzs' } } },
-    next: { to: { query: { active: 'interview_zp' } } },
-    hasButton: false,
-    options: {},
-    items: [
-      {
-        type: 'v-upload',
-        required: true,
-        model: 'RESUME_EN',
-        attrs: {
-          action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-          deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-          data: { file_type: 'RESUME_EN' }
-        },
-        append: `
-        <p>请下载填写英文简历模板后上传 [<a href="https://zws-imgs-pub.ezijing.com/static/public/2e8e4f6898f59e03636139a402ef16c1.docx" target="_blank" download="英文简历模板">下载模板</a>]</p>
-        <p>请将英文简历填写完存为"pdf"格式上传，文件小于10MB。</p>`
-      }
-    ]
-  }
-}

src/pages/my/interview/form/zp.js

-export default function(_this) {
-  return {
-    id: 'interview_zp',
-    title: '2寸照片',
-    get: {
-      action: `/api/enrollment/v1.0/application-materials/${webConf.others.projectId}`,
-      callback(data) {
-        const { attachments = [], submission_stage: submissionStage = 'FILLING' } = data.data.material
-        const stageList = [
-          'FILLING',
-          'PREPAYMENT',
-          'INTERVIEW_APPLICATION',
-          'AUDITION',
-          'INTERVIEW',
-          'PAYMENT',
-          'REGISTRATION',
-          'CLOSED'
-        ]
-        this.form.options.disabled = stageList.findIndex(item => item === submissionStage) > 2
-        const PERSONAL_PHOTO_FOR_ID = attachments.filter(item => {
-          return item.file_type_id === 'PERSONAL_PHOTO_FOR_ID'
-        })
-        return { PERSONAL_PHOTO_FOR_ID }
-      }
-    },
-    update: {
-      action: `/api/enrollment/v1.0/application-materials/submit/${webConf.others.projectId}`,
-      beforeRequest(data) {
-        return { submission_stage: 'INTERVIEW_APPLICATION' }
-      },
-      callback() {
-        this.form.options.disabled = true
-        _this.dialogVisible = true
-        _this.getApplication()
-      },
-      errorCallback() {
-        _this.completeVisible = true
-      }
-    },
-    form: {
-      prev: { to: { query: { active: 'interview_byzs' } } },
-      submitText: '申请面试',
-      model: { submission_stage: 'INTERVIEW_APPLICATION' },
-      options: {},
-      items: [
-        {
-          type: 'v-upload',
-          model: 'PERSONAL_PHOTO_FOR_ID',
-          attrs: {
-            action: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/put`,
-            deleteAction: `/api/enrollment/v1.0/application-materials/attachments/${webConf.others.projectId}/delete`,
-            data: { file_type: 'PERSONAL_PHOTO_FOR_ID' },
-            limit: 1
-          },
-          append:
-            '申请者需要上传本人半年以内的两寸彩色近照。<br> 只需上传一个文件，且照片完整、干净。<br> 上传文件仅限“jpg,jpeg,gif,png”格式的图片文件，且文件小于10MB。'
-        }
-      ]
-    }
-  }
-}

src/pages/my/interview/index.vue

-<template>
-  <app-layout>
-    <vue-form
-      :menus="menus"
-      :default-active="currentActive"
-      @page-change="handlePageChange"
-      @success="handleSuccess"
-      @error="handleError"
-      @back="$router.push('/my/account')"
-      @prev="handlePrev"
-      @next="handleNext"
-    >
-      <template #aside-append>
-        <div class="aside-logout" @click="$store.dispatch('logout')"><span>退出登录</span></div>
-      </template>
-    </vue-form>
-    <app-complete :type="1" v-model="completeVisible"></app-complete>
-    <el-dialog
-      title="您的申请资料已提交成功"
-      :visible.sync="dialogVisible"
-      :center="true"
-      :close-on-click-modal="false"
-      width="348px"
-    >
-      <div class="dialog-tips">
-        <div class="icon"><img src="../../../assets/images/icon_success.png" /></div>
-      </div>
-      <template #footer>
-        <el-button type="primary" @click="dialogVisible = false">我知道啦</el-button>
-      </template>
-    </el-dialog>
-  </app-layout>
-</template>
-
-<script>
-import AppLayout from '../layout.vue'
-import getMenu from './form'
-import AppComplete from '../application/complete.vue'
-import * as api from '@/api/my'
-
-export default {
-  components: { AppLayout, AppComplete },
-  data() {
-    const menus = getMenu(this)
-    return {
-      menus: [menus],
-      currentActive: 'interview_byzs',
-      completeVisible: false,
-      dialogVisible: false,
-      detail: null
-    }
-  },
-  watch: {
-    $route: {
-      immediate: true,
-      handler(route) {
-        const { query = {} } = route
-        this.currentActive = query.active || 'interview_byzs'
-      }
-    },
-    showSubmitedDialog(value) {
-      this.dialogVisible = value
-    }
-  },
-  computed: {
-    isSubmited() {
-      const stageList = [
-        'FILLING',
-        'PREPAYMENT',
-        'INTERVIEW_APPLICATION',
-        'AUDITION',
-        'INTERVIEW',
-        'PAYMENT',
-        'REGISTRATION',
-        'CLOSED'
-      ]
-      if (this.detail) {
-        return stageList.findIndex(item => item === this.detail.material.submission_stage) > 2
-      }
-      return false
-    },
-    showSubmitedDialog() {
-      return this.isSubmited && this.currentActive === 'interview_zp'
-    }
-  },
-  methods: {
-    // 获取报名信息
-    getApplication() {
-      api.getApplication().then(response => {
-        const { data, error, message } = response
-        if (error.toString() === '0') {
-          this.detail = data
-        } else {
-          this.$message.error(message)
-        }
-      })
-    },
-    handlePageChange(value) {
-      this.currentActive = value
-      this.$router.push({ path: this.$route.path, query: { active: value } }).catch(() => {})
-      console.log('页面切换了', value)
-    },
-    handleSuccess(data) {
-      this.getApplication()
-      console.log('提交成功了', data)
-      this.$message({ type: 'success', message: data.message })
-    },
-    handleError(data) {
-      console.log('提交失败了', data)
-      this.$message({ type: 'error', message: data.message })
-    },
-    handlePrev(to) {
-      this.$router.push(to)
-    },
-    handleNext(to) {
-      this.$router.push(to)
-    }
-  },
-  beforeMount() {
-    this.getApplication()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.dialog-tips {
-  text-align: center;
-  p {
-    color: #262626;
-    line-height: 20px;
-  }
-  .icon {
-    margin-top: 20px;
-    text-align: center;
-  }
-}
-</style>

src/pages/my/layout.vue

-<template>
-  <div style="background-color: #eee">
-    <div class="layout">
-      <div class="layout-hd">
-        <slot name="header">
-          <h1 class="title">在线报名</h1>
-        </slot>
-      </div>
-      <div class="layout-bd">
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {},
-  data() {
-    return {}
-  },
-  mounted() {
-    document.body.style = 'background-color:#eee;'
-  },
-  destroyed() {
-    document.body.style = ''
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.layout {
-  max-width: 970px;
-  margin: 0 auto;
-  overflow: hidden;
-}
-.layout-hd {
-  .title {
-    padding: 20px 0;
-    font-size: 18px;
-    line-height: 1;
-    color: var(--main-color);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--main-color);
-  }
-}
-.layout-bd {
-  margin: 20px 0;
-}
-::v-deep .v-layout-aside {
-  position: relative;
-  min-height: 410px;
-  align-self: flex-start;
-  .aside-logout {
-    span {
-      display: inline-block;
-      background: url('../../assets/images/icon_logout.png') no-repeat left center;
-      background-size: 18px 17px;
-      padding-left: 33px;
-    }
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0 10px;
-    padding: 12px;
-    font-size: 12px;
-    color: #999;
-    text-align: center;
-    border-top: 1px solid #eee;
-    cursor: pointer;
-  }
-}
-</style>

src/pages/my/welcome/index.vue

-<template>
-  <div v-if="loaded">
-    <index-welcome @update="handleUpdate" v-if="!isSubmited" />
-    <index-pay v-else />
-  </div>
-</template>
-
-<script>
-import IndexWelcome from './indexWelcome.vue'
-import IndexPay from './indexPay.vue'
-
-import * as api from '@/api/my'
-export default {
-  components: { IndexWelcome, IndexPay },
-  data() {
-    return {
-      loaded: false,
-      progress: {}
-    }
-  },
-  methods: {
-    // 获取报名信息
-    getApplication() {
-      this.loaded = false
-      api.getApplication().then(response => {
-        const { progress = {} } = response.data
-        this.progress = progress
-        // 缴费成功
-        if (progress.PREPAYMENT.total_progress) {
-          this.$router.push('/my/account')
-        } else {
-          this.loaded = true
-        }
-      })
-    },
-    handleUpdate(data) {
-      const { progress } = data
-      this.progress = progress
-    }
-  },
-  computed: {
-    isSubmited() {
-      const { FILLING = {} } = this.progress
-      if (FILLING && FILLING.basic_info) {
-        return !!FILLING.basic_info.progress
-      }
-      return false
-    }
-  },
-  beforeCreate() {
-    document.body.style.background = '#fff'
-  },
-  beforeMount() {
-    this.getApplication()
-  },
-  destroyed() {
-    document.body.style = ''
-  }
-}
-</script>

src/pages/my/welcome/indexPay.vue

-<template>
-  <div class="pay">
-    <div class="pay-hd">
-      <div class="pic">
-        <img src="../../../assets/images/my_pay_02.png" height="160" />
-      </div>
-      <h1>请使用微信扫描下方二维码</h1>
-    </div>
-    <div class="qrcode-error" v-if="qrcodeError">
-      生成二维码失败请刷新<i class="el-icon-refresh-left" @click="refreshQrcode" title="刷新"></i>
-    </div>
-    <div class="qrcode" v-else>
-      <qrcode-vue :value="qrcodeValue" size="100"></qrcode-vue>
-      <span @click="refreshQrcode">刷新</span>
-    </div>
-    <div class="pay-ft">
-      <p class="t2">
-        欢迎您申请紫荆-索菲亚大学金融方向工商管理硕士（FMBA）<br />
-        申请流程：①支付报名费②填写报名资料并提供相关材料（身份证扫描件、毕业证书扫描件、2寸照片）③参加面试④获得录取⑤缴纳学费并签署入学协议⑥入学学习（办
-        理入学手续：提供成绩单、学籍注册等）<br />申请费提交后不予退还
-      </p>
-    </div>
-    <el-dialog
-      title="报名费缴费成功"
-      :visible.sync="dialogVisible"
-      :center="true"
-      :close-on-click-modal="false"
-      width="348px"
-    >
-      <div class="dialog-pay">
-        <p>请按照要求填写报名所需材料，完成“提交报名申请”及“申请面试”</p>
-        <div class="icon"><img src="../../../assets/images/icon_success.png" /></div>
-      </div>
-      <template #footer>
-        <el-button type="primary" @click="toApplication">立即预约</el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import QrcodeVue from 'qrcode.vue'
-import * as api from '@/api/my'
-
-export default {
-  name: 'AppPay',
-  components: { QrcodeVue },
-  data() {
-    return {
-      isPass: false,
-      order: { id: '', payment_url: '' },
-      qrcodeError: false,
-      dialogVisible: false,
-      timer: null,
-      paymentRecords: [] // 所有订单
-    }
-  },
-  computed: {
-    // 二维码地址
-    qrcodeValue() {
-      return this.order.payment_url
-    },
-    // 支付成功
-    paySuccess() {
-      return this.order.payment_status === 'SUCCESS'
-    },
-    // 待支付订单
-    orderList() {
-      // 筛选待支付订单
-      const list = this.paymentRecords.filter(item => {
-        return item.bill_type === 'APPLICATION_FEE' && item.payment_status === 'WAITING_FOR_PAY'
-      })
-      // 待支付订单是否有当前订单
-      const found = list.find(item => item.id === this.order.id)
-      return found ? list : [...list, this.order]
-    }
-  },
-  methods: {
-    // 获取报名信息
-    async getApplication() {
-      await api.getApplication().then(response => {
-        const { payment_records: paymentRecords = [] } = response.data.material
-        // 获取支付订单
-        this.paymentRecords = paymentRecords
-        if (paymentRecords && paymentRecords.length) {
-          // 获取支付成功的订单
-          const orderPaySuccess = paymentRecords.find(item => {
-            return item.bill_type === 'APPLICATION_FEE' && item.payment_status === 'SUCCESS'
-          })
-          if (orderPaySuccess) {
-            this.order = orderPaySuccess
-            this.dialogVisible = true
-            return
-          }
-          // 获取最后一个订单
-          const [lastPayment] = paymentRecords.reverse()
-          this.order = lastPayment
-        }
-      })
-    },
-    // 获取订单
-    async getOrder() {
-      if (this.paySuccess) {
-        return
-      }
-      await api.getOrder({ payment_method: 'WX_PAY_QR' }).then(response => {
-        const { data, error, message } = response
-        this.qrcodeError = error.toString() === '1'
-        if (error.toString() === '0') {
-          this.order = data
-        } else {
-          this.$message.error(message)
-        }
-      })
-    },
-    // 刷新二维码
-    refreshQrcode() {
-      this.getOrder()
-    },
-    // 检查支付状态
-    async checkPay(order) {
-      if (this.paySuccess) {
-        this.timer && clearInterval(this.timer)
-        return
-      }
-      const userId = window.G.UserInfo.id
-      await api.checkPay(order.id, { user_id: userId }).then(response => {
-        if (response.data.payment_status === 'SUCCESS') {
-          this.timer && clearInterval(this.timer)
-          this.dialogVisible = true
-        }
-      })
-    },
-    setCheckPayTimer() {
-      this.timer && clearInterval(this.timer)
-      this.timer = setInterval(() => {
-        this.orderList.forEach(order => {
-          this.checkPay(order)
-        })
-      }, 3000)
-    },
-    // 填写个人资料
-    toApplication() {
-      this.$router.push('/my/application?active=application_info')
-    }
-  },
-  async mounted() {
-    await this.getApplication()
-    await this.getOrder()
-    this.setCheckPayTimer()
-  },
-  destroyed() {
-    this.timer && clearInterval(this.timer)
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.pay {
-  max-width: 562px;
-  margin: 0 auto;
-  padding: 40px 0;
-}
-.pay-hd {
-  .pic {
-    text-align: center;
-  }
-  h1 {
-    margin-top: 40px;
-    font-size: 24px;
-    font-weight: 500;
-    color: #222;
-    line-height: 1;
-    text-align: center;
-  }
-}
-.qrcode {
-  padding: 20px 0;
-  text-align: center;
-  span {
-    margin-top: 10px;
-    font-size: 12px;
-    color: #999;
-    cursor: pointer;
-  }
-}
-.qrcode-error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  width: 100px;
-  height: 100px;
-  padding: 10px;
-  margin: 20px auto;
-  color: var(--main-color);
-  border-style: dashed;
-  border-width: 1px;
-  border-color: var(--main-color);
-  box-sizing: border-box;
-  text-align: center;
-  i {
-    margin-top: 10px;
-    cursor: pointer;
-  }
-}
-.t1 {
-  font-size: 14px;
-  color: #303030;
-  line-height: 20px;
-  text-align: center;
-  span {
-    color: #ffa448;
-  }
-}
-.t2 {
-  font-size: 12px;
-  color: #999;
-  line-height: 20px;
-}
-.dialog-pay {
-  text-align: center;
-  p {
-    color: #262626;
-    line-height: 20px;
-  }
-  .icon {
-    margin-top: 20px;
-    text-align: center;
-  }
-}
-</style>

src/pages/my/welcome/indexWelcome.vue

-<template>
-  <div class="welcome">
-    <div class="top">
-      <div class="pic">
-        <img src="../../../assets/images/my_pay_01.png" />
-      </div>
-      <h1>欢迎您</h1>
-      <p class="t1">
-        申请紫荆-索菲亚大学金融方向工商管理硕士项目，请在填写以下内容并<br />
-        提交报名申请后，扫码支付本项目的申请费共计<span>700</span>元。
-      </p>
-    </div>
-    <div class="form">
-      <el-form :model="ruleForm" :rules="rules" label-width="70px" ref="ruleForm">
-        <el-form-item label="姓名" prop="real_name_cn">
-          <el-input v-model="ruleForm.real_name_cn"></el-input>
-        </el-form-item>
-        <el-form-item label="手机号" prop="phone_number">
-          <el-input v-model="ruleForm.phone_number" :maxlength="11"></el-input>
-        </el-form-item>
-        <el-form-item label="邮箱" prop="email">
-          <el-input v-model="ruleForm.email"></el-input>
-        </el-form-item>
-        <div class="buttons">
-          <el-button type="primary" class="button-submit" @click="handleSubmit">提交</el-button>
-        </div>
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<script>
-import * as api from '@/api/my'
-export default {
-  data() {
-    return {
-      material: {},
-      progress: {},
-      ruleForm: {
-        real_name_cn: '',
-        phone_number: '',
-        email: ''
-      },
-      rules: {
-        real_name_cn: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
-        phone_number: [{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入手机号', trigger: 'blur' }],
-        email: [{ type: 'email', required: true, message: '请输入邮箱', trigger: 'blur' }]
-      }
-    }
-  },
-  methods: {
-    handleSubmit() {
-      this.$refs.ruleForm.validate().then(this.handleSubmitRequest)
-    },
-    handleSubmitRequest() {
-      const params = {
-        basic_info: this.ruleForm
-      }
-      api.updateApplication(params).then(response => {
-        if (response.error === '0') {
-          this.$emit('update', response.data)
-        } else {
-          this.$message({ type: 'error', message: response.message })
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.welcome {
-  margin: 0 auto;
-  padding: 20px 0;
-}
-.top {
-  padding: 40px 0;
-  .pic {
-    text-align: center;
-  }
-  h1 {
-    padding: 20px 0;
-    font-size: 24px;
-    font-weight: 500;
-    color: #222;
-    line-height: 1;
-    text-align: center;
-  }
-}
-.t1 {
-  font-size: 14px;
-  color: #262626;
-  line-height: 20px;
-  text-align: center;
-  span {
-    color: #ffa448;
-  }
-}
-.buttons {
-  text-align: center;
-}
-.button-submit {
-  width: 100px;
-  margin: 0 auto;
-}
-.form {
-  max-width: 350px;
-  margin: 0 auto;
-}
-</style>

src/pages/news/components/listItem.vue

+<template>
+  <div class="item-box">
+    <div class="title">关于1+X金融数字化营销证书考核站点申报的通知</div>
+    <div class="time">2020.11.11</div>
+    <div class="content">亲以引红些它准济始所正八传代或务立只调儿次国起界状与省省温存声历从安革之周特治劳高消数白参军权被又影由区近。应认标风内听本多历起持极矿二习决组状火四专放内又过响知水个实百别得号科能局品走积关效准规并酸把华起思国查其影中根越干认路识者议政效历从安革之周特治劳高消数白参军权被又影由区近。应认标风内听本多历起持极矿二习决组状火四专放内又过响知水个实百别得号科能局品走积关效准规并酸把华起思国查其影中根越干认路识者议政效</div>
+    <router-link to="/news/detail"><div class="detail-btn">查看详情</div></router-link>
+  </div>
+</template>
+<script>
+export default {
+}
+</script>
+<style lang="scss" scoped>
+.item-box{
+  border-bottom: 1px solid #eee;
+  padding-bottom: 32px;
+  padding-top: 24px;
+  .title{
+    font-size: 18px;
+    font-weight: bold;
+    color: #C01540;
+    line-height: 25px;
+  }
+  .time{
+    font-size: 18px;
+    color: #666666;
+    line-height: 25px;
+    margin: 16px 0;
+  }
+  .content{
+    font-size: 18px;
+    color: #666666;
+    line-height: 30px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+  .detail-btn{
+    width: 96px;
+    height: 36px;
+    background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+    border-radius: 4px;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 36px;
+    text-align: center;
+    margin-top: 16px;
+  }
+}
+</style>

src/pages/news/detail.vue

+<template>
+  <div class="news-detail-box">
+    <div class="title">关于1+X金融数字化营销证书考核站点申报的通知</div>
+    <div class="content content-max-width">往价计子断选社界他界四收半很导条回于问个地给资政色金美关做除当打目商马层消酸龙信样世手除制二美信很按划从专我。时先革自好利治条每部教最运则府完接上立什线为象律然对就率则适第变一需党事连识接月报专各口细信要指有飞应组必飞队知从好作用直矿里。已量少查市平料通题界期下干报必决离制所体把成清示果等看书气住更克等发般产元界儿合。给办手生命二也飞法设能速光信要指有飞应组必飞队知从好作用直矿里。已量少查市平料通题界期下干报必决离制所体把成清示果等看书气住更克等发般产元界儿合。给办手生命二也飞法设能速光信要指有飞应组必飞队知从好作用直矿里。已量少查市平料通题界期下干报必决离制所体把成清示果等看书气住更克等发般产元界儿合。给办手生命二也飞法设能速光</div>
+  </div>
+</template>
+<script>
+export default {
+  components: {
+  },
+  data() {
+    return {
+    }    
+  },
+  mounted() {},
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content-max-width{
+  width: 870px;
+  margin: 0 auto;
+}
+.news-detail-box{
+  .title{
+    text-align: center;
+    font-size: 18px;
+    font-weight: bold;
+    color: #C01540;
+    line-height: 25px;
+    margin: 24px 0;
+  }
+  .content{
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #717171;
+    line-height: 20px;
+    margin-bottom: 24px;
+  }
+}
+</style>

src/pages/news/index.vue

+<template>
+  <div class="news-box">
+    <btn-tabs class="tabs-box" :data="tabsData"></btn-tabs>
+    <ul class="content-max-width">
+      <li>
+        <item></item>
+      </li>
+      <li>
+        <item></item>
+      </li>
+    </ul>
+    <div class="pagination">
+      <el-pagination
+        :page-size="100"
+        layout="prev, pager, next, jumper"
+        :total="1000">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import item from './components/listItem'
+import btnTabs from '@/components/tabs/btnTabs'
+export default {
+  components: {
+    item,
+    btnTabs
+  },
+  data() {
+    return {
+      tabsData: {
+        options: ['新闻动态', '活动公告']
+      }
+    }    
+  },
+  mounted() {},
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content-max-width{
+  width: 1112px;
+  margin: 0 auto;
+}
+.news-box{
+  .tabs-box{
+    padding: 24px 0 30px;
+  }
+}
+.pagination{
+  padding: 24px 0;
+  display: flex;
+  justify-content: center;
+}
+</style>

src/pages/presence/index.vue

-<template>
-  <div>
-    <banner-tab :data="bannerTabData" @changeTab="changeTab"></banner-tab>
-    <div class="pre-mian center97">
-      <div class="list-box">
-        <list :data="listData[0]" v-if="activeIndex == 0"></list>
-        <list :data="listData[1]" v-if="activeIndex == 1"></list>
-      </div>
-      <img src="https://zws-imgs-pub.ezijing.com/static/public/b998e6153f6814da345834d585fe28b7.png" alt="" />
-    </div>
-  </div>
-</template>
-<script>
-import cAction from '@action'
-import bannerTab from '@/components/news/tab/bannerTab.vue'
-import list from '@/components/news/newsList.vue'
-export default {
-  components: {
-    bannerTab,
-    list
-  },
-  data() {
-    return {
-      bannerTabData: {
-        menu: ['教授观点', '学生风采'],
-        imgUrl: 'https://zws-imgs-pub.ezijing.com/static/public/b61c3355f53391b163a388d18d18aa62.png'
-      },
-      activeIndex: 0,
-      requestParam: {
-        page: 1,
-        per_page: 100,
-        type: 58,
-        project_id: 1000
-      },
-      listData: {
-        0: [],
-        1: []
-      },
-    }
-  },
-  mounted() {
-    this.request(0)
-  },
-  methods: {
-    changeTab(index) {
-      const key = {
-        0: 58,
-        1: 54
-      }
-      this.requestParam.type = key[index]
-      this.request(index)
-      this.activeIndex = index
-    },
-    request(n) {
-      cAction.reportAction
-        .getNews(this.requestParam)
-        .then(json => {
-          if (Array.isArray(json)) {
-            json.length && (this.listData[n] = json)
-            console.log(this.listData)
-          }
-        })
-        .catch(e => {
-          this.$message.error(e.message)
-        })
-        .finally(() => {})
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.list-box {
-  width: 700px;
-}
-.pre-mian {
-  padding: 30px 0 60px;
-  display: flex;
-  img {
-    width: 235px;
-    height: 300px;
-    margin-left: auto;
-  }
-}
-.cont-mian {
-  .module {
-    padding-top: 30px;
-    padding-bottom: 60px;
-    display: flex;
-    .left-txt {
-      width: 670px;
-    }
-    img {
-      margin-left: auto;
-      // display: block;
-      width: 235px;
-      height: 300px;
-    }
-  }
-}
-.center97 {
-  width: 970px;
-  margin: 0 auto;
-}
-.top-nav {
-  .center97 {
-    position: relative;
-  }
-  img {
-    width: 100%;
-    display: block;
-  }
-  .menu {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    li {
-      width: 128px;
-      line-height: 36px;
-      text-align: center;
-      color: #fff;
-      font-size: 16px;
-      margin-right: 2px;
-      cursor: pointer;
-      background: #bf0927;
-      &.active {
-        background: #fff;
-        color: #c70025;
-      }
-    }
-  }
-}
-</style>

src/pages/project/index.vue

-<template>
-  <div>
-    <div class="modul1">
-      <ul class="tap-btn">
-        <li :class="showIndex === 1 ? 'active' : ''" @click="tap(1)">项目背景</li>
-        <li :class="showIndex === 2 ? 'active' : ''" @click="tap(2)">项目特色</li>
-      </ul>
-    </div>
-    <div class="tap-item-box">
-      <div class="t-item2 con970" v-show="showIndex === 1">
-        <news :data="newsData"></news>
-      </div>
-      <div class="t-item2 con970" v-show="showIndex === 2">
-        <news :data="newsData2"></news>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import cAction from '@action'
-import news from '@/components/news/news.vue'
-export default {
-  components: {
-    news
-  },
-  data() {
-    return {
-      newsData2: [],
-      newsData: [],
-      showIndex: 1
-    }
-  },
-  mounted() {
-    this.getData(1)
-    this.getData(2)
-  },
-  methods: {
-    tap(n) {
-      this.showIndex = n
-    },
-    getData(n) {
-      let requestType = []
-      if (n === 1) {
-        requestType = [
-          {
-            name: '紫荆教育',
-            image: 'https://zws-imgs-pub.ezijing.com/static/public/f62705e4cad2efda7a3c79a3125ff344.png'
-          },
-          {
-            name: '索菲亚大学',
-            image: 'https://zws-imgs-pub.ezijing.com/static/public/9a49ef7992a20616d4d2b7b30d387f9c.png'
-          },
-          {
-            name: '联合办学背景',
-            image: 'https://zws-imgs-pub.ezijing.com/static/public/9a49ef7992a20616d4d2b7b30d387f9c.png'
-          }
-        ]
-      } else {
-        requestType = [
-          {
-            name: '项目特色',
-            image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m1-c1-img1.fc81eacb.png'
-          }
-        ]
-      }
-      requestType.map((item, index) => {
-        this.request(item, index, n)
-      })
-    },
-    request(item, index, n) {
-      cAction.reportAction.getContent(item.name).then(json => {
-        if (n === 1) {
-          this.newsData.push({
-            id: index,
-            title: item.name,
-            content: json === null ? '' : json[0].content,
-            image: item.image
-          })
-          this.newsData = this.newsData.sort((a, b) => a.id - b.id)
-        } else {
-          this.newsData2.push({
-            id: index,
-            title: item.name,
-            content: json === null ? '' : json[0].content,
-            image: item.image
-          })
-          this.newsData2 = this.newsData2.sort((a, b) => a.id - b.id)
-        }
-      }).catch(e => { this.$message.error(e.message) }).finally(() => {})
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.con970{
-  width: 970px;
-  margin: 0 auto;
-}
-.modul1{
-  position: relative;
-  width: 100%;
-  height: 190px;
-  background: url(https://zws-imgs-pub.ezijing.com/static/public/e5edeacd362ce7876f52c799f7e1a98d.png) center;
-  background-size: cover;
-  .tap-btn{
-    width: 970px;
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    display: flex;
-    li{
-      width: 128px;
-      height: 36px;
-      background: #BF0927;
-      margin-right: 2px;
-      font-size: 16px;
-      line-height: 36px;
-      text-align: center;
-      color: #fff;
-      &.active{
-        color: #BF0927;
-        background: #fff;
-      }
-    }
-  }
-}
-.tap-item-box{
-  .t-item1{
-    li{
-      border-bottom: 1px solid #CCCCCC;
-      padding: 30px 0 40px;
-      display: flex;
-      .info{
-        .img{
-          background: #F5F7F8;
-          padding: 21px;
-          img{
-            width: 178px;
-            height: 248px;
-            display: block;
-          }
-        }
-        p{
-          width: 100%;
-          color: #000;
-          font-size: 14px;
-          line-height: 30px;
-          margin: 0;
-          text-align: center;
-          &.name{
-            font-size: 24px;
-            font-weight: bold;
-          }
-        }
-      }
-      .msg{
-        margin-left: 30px;
-        .title{
-          font-size: 23px;
-          color: #000;
-          line-height: 32px;
-        }
-        p{
-          margin-top: 28px;
-          line-height: 30px;
-          color: #000;
-          font-size: 14px;
-        }
-      }
-    }
-  }
-  .new-items{
-    display: flex;
-  }
-  .child-tabs{
-    width: 670px;
-    margin-bottom: 40px;
-  }
-  .t-item2{
-    // display: flex;
-    padding: 60px 0;
-    .article{
-      width: 670px;
-      .title{
-        line-height: 100%;
-        font-size: 23px;
-        font-weight: bold;
-      }
-      .t2{
-        line-height: 25px;
-        font-size: 18px;
-        font-weight: bold;
-        margin-top: 5px;
-      }
-      .txt{
-        padding-top: 30px;
-        p{
-          line-height: 30px;
-          font-size: 14px;
-          color: #000;
-          // text-indent: 2em;
-          &.martop{
-            margin-top: 30px;
-          }
-        }
-      }
-    }
-    .right-img{
-      position: relative;
-      margin-left: auto;
-    }
-    .photo{
-      position: relative;
-      z-index: 9;
-      width: 235px;
-      height: 300px;
-      display: flex;
-      position: relative;
-    }
-    .line{
-      position: absolute;
-      top: 35px;
-      right: 35px;
-      width: 213px;
-      height: 280px;
-      border: 1px solid #979797;
-    }
-  }
-  .t-item3{
-    padding-top: 60px;
-    position: relative;
-    .t1{
-      line-height: 32px;
-      font-size: 23px;
-      font-weight: bold;
-    }
-    .t2{
-      margin-top: 5px;
-      line-height: 25px;
-      font-size: 18px;
-      font-weight: bold;
-      padding-bottom: 30px;
-    }
-    .new-img{
-      width: 891px;
-      margin: 0 auto 60px auto;
-      display: block;
-      // position: absolute;
-      // top: 60px;
-      // left: 50%;
-      // -webkit-transform: translateX(-50%);
-    }
-    ul{
-      li{
-        padding: 40px 0;
-        .con970{
-          overflow: hidden;
-        }
-        img{
-          display: block;
-          width: 140px;
-          height: 140px;
-          float: left;
-        }
-        .wenb{
-          float: left;
-          width: 510px;
-          .title{
-            font-size: 18px;
-            font-weight: bold;
-            color: #262626;
-            line-height: 25px;
-            margin-bottom: 25px;
-          }
-          p{
-            margin-bottom: 10px;
-            font-size: 14px;
-            color: #2B2B2B;
-            line-height: 20px;
-          }
-        }
-        &.type-l{
-          background: #F3F3F3;
-          img{
-            margin-right: 60px;
-          }
-        }
-        &.type-r{
-          .con970{
-            justify-content: right;
-          }
-          img{
-            float: right;
-          }
-          .wenb{
-            text-align: right;
-            margin-right: 60px;
-            float: right;
-          }
-        }
-      }
-    }
-  }
-}
-.new-style{
-  padding-bottom: 60px;
-  .top-cont{
-    width: 970px;
-    margin: 0 auto;
-    display: flex;
-    .left{
-      width: 434px;
-      height: 496px;
-      background: url(https://zws-imgs-pub.ezijing.com/static/public/9ca050bb75b08a232433f570bcac652d.png);
-      background-size: 100% 100%;
-      .txt{
-        font-size: 16px;
-        font-weight: bold;
-        color: #FFFFFF;
-        line-height: 29px;
-        width: 353px;
-        margin: 180px auto 0;
-        text-indent: 2em;
-      }
-    }
-    ul{
-      margin-left: auto;
-      li{
-        transition: all .5s;
-        width: 464px;
-        height: 50px;
-        background: #F1F2F3;
-        padding: 0;
-        margin-bottom: 14px;
-        &.br{
-          &:hover{
-            height: 163px;
-          }
-        }
-        &:hover{
-          height: 143px;
-          background: #D83C56;
-          .dis-b{
-            display: none;
-          }
-          .dis-n{
-            display: block;
-          }
-        }
-        .dis-b{
-          display: flex;
-          align-items: center;
-          height: 100%;
-          .d{
-            width: 8px;
-            height: 8px;
-            background: #BF0927;
-            margin-left: 30px;
-            border-radius: 50%;
-          }
-          .txt{
-            font-size: 18px;
-            color: #BF0927;
-            line-height: 25px;
-            margin-left: 10px;
-          }
-        }
-      }
-    }
-  }
-  .dis-n{
-    margin-left: 50px;
-    display: none;
-    .title{
-      font-size: 24px;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: 33px;
-      padding-top: 30px;
-      margin-bottom: 36px;
-    }
-    .txt{
-      font-size: 14px;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: 20px;
-    }
-  }
-}
-.content{
-  position: relative;
-  width: 100%;
-  height: 350px;
-  background: url(https://zws-imgs-pub.ezijing.com/static/public/3ec70f7e95c722cc38d5b38749768b87.png);
-  background-size: 100% 100%;
-  .title{
-    font-size: 24px;
-    font-weight: bold;
-    color: #FFFFFF;
-    line-height: 33px;
-    padding-top: 60px;
-    text-align: center;
-  }
-  .p1{
-    text-align: center;
-    font-size: 14px;
-    font-weight: bold;
-    color: #FFFFFF;
-    line-height: 20px;
-    margin-top: 10px;
-  }
-  .box-cont{
-    width: 1000px;
-    height: 155px;
-    border: 1px solid rgba(216,60,86,.5);
-    // border: 1px solid #D83C56;
-    margin: 35px auto 0;
-    position: relative;
-    .le-tj{
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 198px;
-      height: 155px;
-      background: rgba(255,255,255,.2);
-      font-size: 18px;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: 155px;
-      text-align: center;
-    }
-    // .txt-box{
-    //   position: absolute;
-    //   top: 0;
-    //   left: 50%;
-    //   -webkit-transform: translateX(-50%);
-    //   padding-top: 33px;
-    //   .pp1{
-    //     font-size: 14px;
-    //     font-weight: bold;
-    //     color: #FFFFFF;
-    //     line-height: 20px;
-    //     margin-bottom: 15px;
-    //   }
-    // }
-  }
-  .txt-box{
-    position: absolute;
-    top: 30%;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    padding-top: 33px;
-    .pp1{
-      font-size: 20px;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: 20px;
-      margin-bottom: 30px;
-    }
-  }
-}
-.zs-cont{
-  padding-top: 60px;
-}
-</style>
\ No newline at end of file

src/pages/query/index.vue

+<template>
+  <div>
+    <div class="site-box">
+      <div class="title">考核站点</div>
+      <div class="content">
+        证书成绩查询请前往职业技能等级证书信息管理服务平台（网址： https://vslc.ncb.edu.cn ）进行查询。
+      </div>
+      <div class="btn" @click="goDetail">去查询</div>
+    </div>
+    <img src="https://zws-imgs-pub.ezijing.com/static/public/ad80cb2d9e46fbc063919ecc1f55578c.png" alt="">
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    goDetail() {
+      window.open('https://vslc.ncb.edu.cn')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.site-box{
+  width: 650px;
+  margin: 0 auto;
+  .title{
+    text-align: center;
+    font-size: 18px;
+    color: #222222;
+    line-height: 18px;
+    margin: 24px 0;
+  }
+  .content{
+    font-size: 14px;
+    color: #666666;
+    line-height: 20px;
+  }
+  .btn{
+    text-align: center;
+    width: 96px;
+    height: 36px;
+    background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+    border-radius: 4px;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 20px;
+    margin: 24px auto;
+    line-height: 36px;
+    cursor: pointer;
+  }
+}
+img{
+  width: 876px;
+  display: block;
+  margin: 0 auto 24px auto;
+}
+</style>

src/pages/recruitInfo/components/apply.vue

-<template>
-  <div>
-    <div class="center97 apply-mian">
-      <news :data="newsData" :defaultPage="defaultPage">
-        <div class="apply-btn" slot="imgBtn">
-          <div class="icon"></div>
-          <div class="txt" @click="goPage">项目申请</div>
-        </div>
-      </news>
-    </div>
-  </div>
-</template>
-<script>
-import cAction from '@action'
-import news from '@/components/news/news.vue'
-export default {
-  components: {
-    news
-  },
-  data() {
-    return {
-      newsData: [],
-      tabShowItem: 0,
-      defaultPage: 0
-    }
-  },
-  mounted() {
-    this.getData()
-    this.$route.query.type && (this.defaultPage = parseInt(this.$route.query.type))
-  },
-  methods: {
-    getData() {
-      const requestType = [
-        {
-          name: '申请条件',
-          image: 'https://zws-imgs-pub.ezijing.com/static/public/7f972b57efd8b5783a286ff219111679.png'
-        },
-        {
-          name: '申请流程',
-          image: 'https://zws-imgs-pub.ezijing.com/static/public/7f972b57efd8b5783a286ff219111679.png'
-        },
-        {
-          name: '常见问题',
-          image: 'https://zws-imgs-pub.ezijing.com/static/public/7f972b57efd8b5783a286ff219111679.png'
-        }
-      ]
-      requestType.map((item, index) => {
-        this.request(item, index)
-      })
-    },
-    request(item, index) {
-      cAction.reportAction.getContent(item.name).then(json => {
-        this.newsData.push({
-          id: index,
-          title: item.name,
-          content: json === null ? '' : json[0].content,
-          image: item.image
-        })
-        this.newsData = this.newsData.sort((a, b) => a.id - b.id)
-      }).catch(e => { this.$message.error(e.message) }).finally(() => {})
-    },
-    goPage() {
-      this.$router.push({
-        path: '/my'
-      })
-    },
-    changeChildTab(index) {
-      this.tabShowItem = index
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.center97{
-  width: 970px;
-  margin: 0 auto;
-}
-.apply-mian{
-  padding-top: 30px;
-  padding-bottom: 60px;
-  display: flex;
-  .apply-left{
-    width: 670px;
-    .tab-item{
-      width: 100%;
-      margin-top: 40px;
-    }
-  }
-  .apply-right{
-    margin-left: auto;
-    .img-box{
-      width: 235px;
-      position: relative;
-      margin-left: 13px;
-      img{
-        position: relative;
-        z-index: 9;
-        display: block;
-        width: 100%;
-        height: 300px;
-      }
-      .line{
-        position: absolute;
-        top: 35px;
-        right: 35px;
-        width: 213px;
-        height: 280px;
-        border: 1px solid #979797;
-      }
-    }
-  }
-}
-.apply-btn{
-  width: 248px;
-  height: 48px;
-  background: #BF0927;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 55px;
-  cursor: pointer;
-  .icon{
-    width: 31px;
-    height: 31px;
-    background: url(@/assets/img/recruitInfo/m1-c1-icon1.png);
-    background-size: 100% 100%;
-  }
-  .txt{
-    font-size: 18px;
-    color: #fff;
-    margin-left: 20px;
-  }
-}
-</style>

src/pages/recruitInfo/components/support.vue

-<template>
-  <div>
-    <div class="center97 apply-mian">
-      <div class="apply-left">
-        <news :data="newsData">
-          <div class="apply-btn" slot="imgBtn">
-            <div class="icon"></div>
-            <div class="txt" @click="goPage">项目申请</div>
-          </div>
-        </news>
-        <!-- <div class="tab-item" v-if="tabShowItem == 2" v-html="data.module5"></div> -->
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import cAction from '@action'
-import news from '@/components/news/news.vue'
-export default {
-  components: {
-    news
-  },
-  props: {
-    data: {
-      type: Object,
-      default: {}
-    }
-  },
-  data() {
-    return {
-      newsData: [],
-      tabMenu: ['学费', '贷款']
-    }
-  },
-  mounted() {
-    this.getData()
-  },
-  methods: {
-    goPage() {
-      this.$router.push({
-        path: '/my'
-      })
-    },
-    getData() {
-      const requestType = [
-        {
-          name: '学费',
-          image: 'https://zws-imgs-pub.ezijing.com/static/public/7f972b57efd8b5783a286ff219111679.png'
-        },
-        {
-          name: '贷款',
-          image: 'https://zws-imgs-pub.ezijing.com/static/public/7f972b57efd8b5783a286ff219111679.png'
-        }
-      ]
-      requestType.map((item, index) => {
-        this.request(item, index)
-      })
-    },
-    request(item, index) {
-      cAction.reportAction.getContent(item.name).then(json => {
-        this.newsData.push({
-          id: index,
-          title: item.name,
-          content: Array.isArray(json) ?
-            json.length === 0
-              ? ''
-              : json[0].content
-            : json === null
-              ? ''
-              : json[0].content,
-          image: item.image
-        })
-        this.newsData = this.newsData.sort((a, b) => a.id - b.id)
-      }).catch(e => { this.$message.error(e.message) }).finally(() => {})
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.center97{
-  width: 970px;
-  margin: 0 auto;
-}
-.apply-mian{
-  padding-top: 30px;
-  padding-bottom: 60px;
-  display: flex;
-  .apply-left{
-    width: 100%;
-    .tab-item{
-      width: 100%;
-      margin-top: 40px;
-    }
-  }
-  .apply-right{
-    margin-left: auto;
-    .img-box{
-      width: 235px;
-      position: relative;
-      margin-left: 13px;
-      img{
-        position: relative;
-        z-index: 9;
-        display: block;
-        width: 100%;
-        height: 300px;
-      }
-      .line{
-        position: absolute;
-        top: 35px;
-        right: 35px;
-        width: 213px;
-        height: 280px;
-        border: 1px solid #979797;
-      }
-    }
-  }
-}
-.apply-btn{
-  width: 248px;
-  height: 48px;
-  background: #BF0927;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 55px;
-  cursor: pointer;
-  .icon{
-    width: 31px;
-    height: 31px;
-    background: url(@/assets/img/recruitInfo/m1-c1-icon1.png);
-    background-size: 100% 100%;
-  }
-  .txt{
-    font-size: 18px;
-    color: #fff;
-    margin-left: 20px;
-  }
-}
-</style>

src/pages/recruitInfo/index.vue

-<template>
-  <div>
-    <banner-tab
-      :data="bannerTabData"
-      @changeTab="changeTab"
-    ></banner-tab>
-    <apply v-show="activeIndex == 0" :data="content"></apply>
-    <support v-show="activeIndex == 1" :data="content"></support>
-  </div>
-</template>
-<script>
-import cAction from '@action'
-import bannerTab from '@/components/news/tab/bannerTab.vue'
-import apply from './components/apply.vue'
-import support from './components/support.vue'
-export default {
-  components: {
-    apply,
-    bannerTab,
-    support
-  },
-  data() {
-    return {
-      bannerTabData: {
-        menu: ['有关申请', '费用与资助'],
-        imgUrl: 'https://zws-imgs-pub.ezijing.com/static/public/d94d3b94c95674ebc6d1932b3322cb14.png'
-      },
-      activeIndex: 0,
-      content: {
-        module0: '',
-        module1: '',
-        module2: '',
-        module3: '',
-        module4: ''
-      }
-    }
-  },
-  mounted() {
-    // this.getData()
-  }, 
-  methods: {
-    changeTab(index) {
-      this.activeIndex = index
-    }
-  },
-}
-</script>
-<style lang="scss" scoped>
-.center97{
-  width: 970px;
-  margin: 0 auto;
-}
-.top-nav{
-  .center97{
-    position: relative;
-  }
-  img{
-    width: 100%;
-    display: block;
-  }
-  .menu{
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    li{
-      width: 128px;
-      line-height: 36px;
-      text-align: center;
-      color: #fff;
-      font-size: 16px;
-      margin-right: 2px;
-      cursor: pointer;
-      background: #BF0927;
-      &.active{
-        background: #fff;
-        color: #C70025;
-      }
-    }
-  }
-}
-</style>

src/pages/site/detail.vue

+<template>
+  <div>
+    <div class="site-box">
+      <div class="title">考核站点</div>
+      <div class="content">
+        证书成绩查询请前往职业技能等级证书信息管理服务平台（网址： https://vslc.ncb.edu.cn ）进行查询。
+      </div>
+      <div class="btn" @click="goDetail">去查询</div>
+    </div>
+    <img src="https://zws-imgs-pub.ezijing.com/static/public/ad80cb2d9e46fbc063919ecc1f55578c.png" alt="">
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    goDetail() {
+      window.open('https://vslc.ncb.edu.cn')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.site-box{
+  width: 650px;
+  margin: 0 auto;
+  .title{
+    text-align: center;
+    font-size: 18px;
+    color: #222222;
+    line-height: 18px;
+    margin: 24px 0;
+  }
+  .content{
+    font-size: 14px;
+    color: #666666;
+    line-height: 20px;
+  }
+  .btn{
+    text-align: center;
+    width: 96px;
+    height: 36px;
+    background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+    border-radius: 4px;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 20px;
+    margin: 24px auto;
+    line-height: 36px;
+    cursor: pointer;
+  }
+}
+img{
+  width: 876px;
+  display: block;
+  margin: 0 auto 24px auto;
+}
+</style>

src/pages/site/index.vue

+<template>
+  <div class="site-box">
+    <div class="title">考核站点</div>
+    <div class="content">
+      有关单位意向申报成为1+X职业技能等级证书考核站点，请按要求登录政府网站申请试点院校业务平台（网址： https://vslc.ncb.edu.cn ）输入试点院校管理员的账号密码，在考试管理菜单中，打开申报考点栏目，即可自主申报考核站点
+    </div>
+    <div class="btn" @click="goDetail">去申请</div>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    goDetail() {
+      this.$router.push({
+        path: '/site/detail'
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.site-box{
+  width: 650px;
+  margin: 0 auto;
+  .title{
+    text-align: center;
+    font-size: 18px;
+    color: #222222;
+    line-height: 18px;
+    margin: 24px 0;
+  }
+  .content{
+    font-size: 14px;
+    color: #666666;
+    line-height: 20px;
+  }
+  .btn{
+    text-align: center;
+    width: 96px;
+    height: 36px;
+    background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+    border-radius: 4px;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 20px;
+    margin: 24px auto;
+    line-height: 36px;
+    cursor: pointer;
+  }
+}
+</style>

src/pages/teaching/components/setCourse.vue

-<template>
-  <div class="course-box">
-    <news :data="newsData"></news>
-  </div>
-</template>
-<script>
-import cAction from '@action'
-import news from '@/components/news/news.vue'
-export default {
-  components: {
-    news
-  },
-  data() {
-    return {
-      newsData: []
-    }
-  },
-  mounted() {
-    this.getData()
-  },
-  methods: {
-    getData() {
-      const requestType = [
-        {
-          name: '课程设置',
-          image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m2-r-img.b002ecd2.png'
-        }
-      ]
-      requestType.map((item, index) => {
-        this.request(item, index)
-      })
-    },
-    request(item, index) {
-      cAction.reportAction.getContent(item.name).then(json => {
-        this.newsData.push({
-          id: index,
-          title: item.name,
-          content: json === null ? '' : json[0].content,
-          image: item.image
-        })
-        this.newsData = this.newsData.sort((a, b) => a.id - b.id)
-      }).catch(e => { this.$message.error(e.message) }).finally(() => {})
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.course-box {
-  padding: 32px 0 60px;
-  display: flex;
-  .cont-left {
-    .m1 {
-      padding: 40px 20px;
-      width: 308px;
-      background: #ffeef1;
-      .title {
-        font-size: 23px;
-        font-weight: bold;
-        color: #bf0927;
-        line-height: 32px;
-      }
-      .p {
-        font-size: 14px;
-        color: #000000;
-        line-height: 20px;
-        margin-top: 20px;
-      }
-    }
-    .m2 {
-      width: 308px;
-      height: 292px;
-      background: url(@/assets/img/recruitInfo/setcou-m1-bg.png);
-      background-size: 100% 100%;
-      margin-top: 10px;
-      .title {
-        font-size: 23px;
-        font-weight: bold;
-        color: #ffffff;
-        line-height: 32px;
-        padding-top: 40px;
-        margin-left: 20px;
-      }
-      .p {
-        padding: 20px 20px 0;
-        font-weight: bold;
-        color: #ffffff;
-        line-height: 32px;
-      }
-    }
-  }
-  .cont-center {
-    margin-left: 30px;
-    .title {
-      width: 100%;
-      text-align: center;
-      font-size: 23px;
-      font-weight: bold;
-      color: #bf0927;
-      line-height: 32px;
-    }
-    .cen-mian {
-      display: flex;
-      padding-top: 30px;
-      .item {
-        border-left: 1px solid #ccc;
-        padding-left: 20px;
-        margin-bottom: 20px;
-        max-width: 180px;
-        &.marle {
-          margin-left: 30px;
-        }
-        .title {
-          text-align: left;
-          font-size: 14px;
-          font-weight: bold;
-          color: #222222;
-          line-height: 20px;
-          margin-bottom: 5px;
-        }
-        p {
-          font-size: 14px;
-          color: #222222;
-          line-height: 16px;
-          margin: 7px 0;
-          &.weight {
-            font-weight: bold;
-            margin-top: 10px;
-          }
-        }
-      }
-    }
-  }
-  .cont-right {
-    margin-left: auto;
-    .title {
-      font-size: 23px;
-      font-weight: bold;
-      color: #bf0927;
-      line-height: 32px;
-    }
-    p {
-      width: 210px;
-      font-size: 14px;
-      color: #222222;
-      line-height: 32px;
-      margin-top: 10px;
-    }
-  }
-}
-</style>

src/pages/teaching/index.vue

-<template>
-  <div>
-    <banner-tab :data="bannerTabData" @changeTab="changeTab"></banner-tab>
-    <div class="cont-mian center97">
-      <set-course v-show="activeIndex == 0"></set-course>
-      <div class="module" v-show="activeIndex == 1">
-        <div class="left-txt">
-          <news :data="newsData" @changeIndex="changeIndex">
-            <div slot="list"></div>
-          </news>
-          <div class="tea-mian">
-            <div class="list-box">
-              <teaching-list v-show="teachingListIndex == 0" :data="this.allList[55]" :type="1"></teaching-list>
-              <teaching-list v-show="teachingListIndex == 1" :data="this.allList[56]" :type="1"></teaching-list>
-              <teaching-list v-show="teachingListIndex == 2" :data="this.allList[57]" :type="1"></teaching-list>
-            </div>
-            <img src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m2-r-img.b002ecd2.png" alt="" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import cAction from '@action'
-import bannerTab from '@/components/news/tab/bannerTab.vue'
-import news from '@/components/news/news.vue'
-import teachingList from '@/components/news/teachingList.vue'
-import setCourse from './components/setCourse.vue'
-export default {
-  components: {
-    bannerTab,
-    news,
-    setCourse,
-    teachingList
-  },
-  data() {
-    return {
-      bannerTabData: {
-        menu: ['课程设置', '师资力量'],
-        imgUrl: 'https://zws-imgs-pub.ezijing.com/static/public/03036d9b2460f3b182c929e4b3af0eb2.png'
-      },
-      activeIndex: 0,
-      teachingListIndex: 1,
-      requestParam: {
-        page: 1,
-        per_page: 100,
-        type: 55,
-        project_id: 1000
-      },
-      allList: {
-        55: [],
-        56: [],
-        57: []
-      },
-      newsData: []
-    }
-  },
-  mounted() {
-    this.getData()
-  },
-  methods: {
-    changeIndex(index) {
-      // 由于没有 0，所以直接 +1
-      this.teachingListIndex = index + 1
-    },
-    getData() {
-      const requestType = [
-        {
-          type: 56,
-          name: '美方师资',
-          image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m2-r-img.b002ecd2.png'
-        },
-        {
-          type: 57,
-          name: '中方师资',
-          image: 'https://zws-imgs-pub.ezijing.com/static/build/learn-mba/resources/m2-r-img.b002ecd2.png'
-        }
-      ]
-      requestType.map((item, index) => {
-        this.request(item, index)
-      })
-    },
-    request(item, index) {
-      this.requestParam.type = item.type
-      cAction.reportAction
-        .getNews(this.requestParam)
-        .then(json => {
-          this.newsData.push({
-            typeId: item.type,
-            type: 'list',
-            id: index,
-            title: item.name,
-            content: '',
-            image: item.image
-          })
-          this.teachingListSetData(item.type, json)
-          // 针对 如果是多个 则进行数组排序
-          if (this.newsData.length === 2) {
-            this.newsData.sort((_, __) => {
-              return _.typeId - __.typeId
-            })
-          }
-        })
-        .catch(e => {
-          this.$message.error(e.message)
-        })
-        .finally(() => {})
-    },
-    changeTab(index) {
-      this.activeIndex = index
-    },
-    teachingListSetData(type, item) {
-      this.allList[type] = item
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.list-box{
-  width: 100%;
-}
-.cont-mian {
-  .module {
-    padding-top: 30px;
-    padding-bottom: 60px;
-    display: flex;
-    .left-txt {
-      width: 100%;
-    }
-    img {
-      margin-left: auto;
-      // display: block;
-      width: 235px;
-      height: 300px;
-    }
-  }
-}
-.center97 {
-  width: 970px;
-  margin: 0 auto;
-}
-.top-nav {
-  .center97 {
-    position: relative;
-  }
-  img {
-    width: 100%;
-    display: block;
-  }
-  .menu {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    li {
-      width: 128px;
-      line-height: 36px;
-      text-align: center;
-      color: #fff;
-      font-size: 16px;
-      margin-right: 2px;
-      cursor: pointer;
-      background: #bf0927;
-      &.active {
-        background: #fff;
-        color: #c70025;
-      }
-    }
-  }
-}
-.tea-mian {
-  display: flex;
-  img {
-    margin-left: auto;
-    width: 235px;
-    height: 300px;
-  }
-}
-</style>

src/pages/textBook/chapter.vue

+<template>
+  <div class="chapter-box">
+    <div class="intr">
+      <div class="title">
+        <div class="content-max-width">资源介绍</div>
+      </div>
+      <div class="content content-max-width">
+        <div class="con-left">
+          <div class="text-box">
+            <div class="name">所属课程：</div>
+            <div class="nr">金融数字化营销</div>
+          </div>
+          <div class="text-box">
+            <div class="name">上传时间：</div>
+            <div class="nr">2020/09/03</div>
+          </div>
+          <div class="text-box">
+            <div class="name">浏览数：</div>
+            <div class="nr">35</div>
+          </div>
+        </div>
+        <div class="v-code-box">
+          <div class="code"></div>
+          <div class="text">手机扫码浏览</div>
+        </div>
+      </div>
+    </div>
+    <div class="screenshot">
+      <div class="title">
+        <div class="content-max-width">屏幕截图</div>
+      </div>
+      <div class="content-max-width">
+        <div class="block"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+}
+</script>
+<style lang="scss" scoped>
+.content-max-width{
+  width: 1109px;
+  margin: 0 auto;
+}
+.chapter-box{
+  padding-top: 24px;
+  .intr{
+    .title{
+      width: 100%;
+      height: 40px;
+      background: #f9f9f9;
+      .content-max-width{
+        line-height: 40px;
+        font-size: 14px;
+        font-weight: bold;
+        color: #C0004F;
+      }
+    }
+    .content{
+      display: flex;
+      .con-left{
+        width: 427px;
+        margin-left: 56px;
+        .text-box{
+          margin-top: 12px;
+          display: flex;
+          .name{
+            font-size: 14px;
+            font-weight: bold;
+            color: #222222;
+            line-height: 20px;
+          }
+          .nr{
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            color: #717171;
+            line-height: 20px;
+          }
+        }
+      }
+      .v-code-box{
+        width: 136px;
+        margin-top: 12px;
+        .code{
+          width: 136px;
+          height: 136px;
+          background: #D8D8D8;
+        }
+        .text{
+          font-size: 14px;
+          color: #222222;
+          line-height: 20px;
+          text-align: center;
+          margin-top: 8px;
+        }
+      }
+    }
+  }
+  .screenshot{
+    margin-top: 24px;
+    .title{
+      width: 100%;
+      height: 40px;
+      background: #f9f9f9;
+      .content-max-width{
+        line-height: 40px;
+        font-size: 14px;
+        font-weight: bold;
+        color: #C0004F;
+      }
+    }
+    .block{
+      width: 444px;
+      height: 250px;
+      background: #D8D8D8;
+      margin: 12px auto;
+    }
+  }
+}
+</style>

src/pages/textBook/components/item.vue

+<template>
+  <div class="item-box">
+    <img src="https://zws-imgs-pub.ezijing.com/static/public/7c63bd40600a040f867fe4db9014fb7c.png" alt="">
+    <div class="right-content">
+      <div class="title">关于1+X金融数字化营销证书考核站点申报的通知</div>
+      <div class="des-box">
+        <p class="ind">作者：基础数据维护及档案管理</p>
+        <p>出版时间：基础数据维护及档案管理</p>
+        <p class="ind">ISBN：基础数据维护及档案管理</p>
+        <p>书籍简介：基础数据维护及档案管理</p>
+      </div>
+      <router-link to="/textBook/detail">
+        <div class="detail-btn">查看详情</div>
+      </router-link>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.item-box{
+  padding: 24px 0;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  img{
+    width: 383px;
+    height: 213px;
+    display: block;
+  }
+  .right-content{
+    margin-left: 24px;
+    .title{
+      font-size: 18px;
+      font-weight: bold;
+      color: #C01540;
+      line-height: 25px;
+    }
+    .des-box{
+      margin-top: 24px;
+      p{
+        font-size: 14px;
+        color: #666666;
+        line-height: 20px;
+        margin-bottom: 8px;
+        &.ind{
+          text-indent: 2em;
+        }
+      }
+    }
+    .detail-btn{
+      color: #fff;
+      text-align: center;
+      line-height: 36px;
+      width: 96px;
+      height: 36px;
+      background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+      border-radius: 4px;
+      margin-top: 16px;
+    }
+  }
+}
+</style>

src/pages/textBook/components/search.vue

+<template>
+  <div class="search-box">
+    <div class="name">教材搜索</div>
+     <el-input
+      class="input"
+      placeholder="请输入内容"
+      v-model="input">
+      <i slot="prefix" class="el-input__icon el-icon-search"></i>
+    </el-input>
+    <div class="search-btn">查询</div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.search-box{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .input{
+    width: 360px;
+    border-radius: 4px;
+    margin: 0 12px;
+  }
+  .search-btn{
+    text-align: center;
+    line-height: 32px;
+    width: 60px;
+    height: 32px;
+    background: linear-gradient(312deg, rgba(192, 21, 64, 0.67) 0%, #C01540 100%);
+    border-radius: 4px;
+    font-size: 14px;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+}
+</style>

src/pages/textBook/detail.vue

+<template>
+  <div class="book-detail-box content-max-width">
+    <div class="bool-det-top">
+      <div class="item-box">
+        <img src="https://zws-imgs-pub.ezijing.com/static/public/7c63bd40600a040f867fe4db9014fb7c.png" alt="">
+        <div class="right-content">
+          <div class="title">关于1+X金融数字化营销证书考核站点申报的通知</div>
+          <div class="des-box">
+            <p><span>教材简介：</span><i>往价计子断选社界他界四收半很导条回于问个地给资政色金美关做除当打目商马层消酸龙信样世手除制二美信很按划从专我。时先革自好利治条每部教最运则府完接上立什线为象律然对就率则适第变一需党事连识接月报专各口细信要指有飞应组必飞队知从好作用直矿里。已量少查市平料通题界期下干</i></p>
+            <p><span>定价：</span><i>199¥</i></p>
+            <p><span>作者：</span><i>基础数据维护及档案管理</i></p>
+            <p><span>出版时间：</span><i>基础数据维护及档案管理</i></p>
+            <p><span>ISBN：</span><i>基础数据维护及档案管理</i></p>
+          </div>
+        </div>
+      </div>
+      <div class="v-code-box">
+        <div class="block"></div>
+        <div class="text">手机扫码浏览</div>
+      </div>
+    </div>
+    <div class="book-det-bottom">
+      <div class="catalog">
+        <div class="title">目录</div>
+        <ul>
+          <li>
+            <div class="chapter">第一章</div>
+            <div class="node" @click="goChapter">第一节</div>
+          </li>
+          <li>
+            <div class="chapter">第一章</div>
+            <div class="node" @click="goChapter">第一节</div>
+          </li>
+          <li>
+            <div class="chapter">第一章</div>
+            <div class="node" @click="goChapter">第一节</div>
+          </li>
+        </ul>
+      </div>
+      <div class="author">
+        <div class="title">作者</div>
+        <div class="item">
+          <div class="info-box">
+            <img src="https://zws-imgs-pub.ezijing.com/static/public/f064b2cb83039e1d4754993167d73864.png" alt="">
+            <div class="info">
+              <div class="name">赵瑾龙</div>
+              <div class="xx">研究院</div>
+            </div>
+          </div>
+          <div class="intr">
+            <div class="name">简介：</div>
+            <div class="text">往价计子断选社界他界四收半很导条回于问个地给资政色金美关做除当打目商马层消酸龙信样世手除制二美信很按划从专我。</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  methods: {
+    goChapter() {
+      this.$router.push({
+        path: '/textBook/chapter'
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content-max-width{
+  width: 1109px;
+  margin: 0 auto;
+}
+.book-det-bottom{
+  display: flex;
+  .catalog{
+    .title{
+      font-size: 18px;
+      font-weight: bold;
+      color: #C80046;
+      line-height: 25px;
+      margin-bottom: 24px;
+    }
+    ul{
+      li{
+        width: 729px;
+        padding: 16px 0;
+        border-top: 1px solid #eee;
+        .chapter{
+          font-size: 18px;
+          font-weight: bofld;
+          color: #262626;
+          line-height: 25px;
+        }
+        .node{
+          font-size: 14px;
+          color: #7D7D7D;
+          line-height: 20px;
+          margin-top: 12px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .author{
+    margin-left: auto;
+    .title{
+      font-size: 18px;
+      font-weight: bold;
+      color: #C80046;
+      line-height: 25px;
+      margin-bottom: 24px;
+    }
+    .item{
+      width: 280px;
+      border-top: 1px solid #eee;
+      margin-top: 24px;
+      .info-box{
+        padding-top: 16px;
+        display: flex;
+        align-items: center;
+        img{
+          width: 80px;
+          height: 80px;
+        }
+        .info{
+          margin-left: 16px;
+          .name{
+            font-size: 18px;
+            font-weight: bold;
+            color: #2B2B2B;
+            line-height: 25px;
+          }
+          .xx{
+            font-size: 14px;
+            color: #888888;
+            line-height: 20px;
+            margin-top: 12px;
+          }
+        }
+      }
+      .intr{
+        margin-top: 16px;
+        display: flex;
+        .name{
+          font-size: 14px;
+          font-weight: bold;
+          color: #262626;
+          line-height: 20px;
+          white-space: nowrap;
+        }
+        .text{
+          font-size: 14px;
+          color: #7D7D7D;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+}
+.bool-det-top{
+  display: flex;
+  padding-top: 24px;
+}
+.book-detail-box{
+  .v-code-box{
+    width: 136px;
+    margin-left: auto;
+    // margin-top: 24px;
+    .block{
+      width: 136px;
+      height: 136px;
+      background: #D8D8D8;
+      border: 1px solid #979797;
+    }
+    .text{
+      font-size: 14px;
+      color: #222222;
+      line-height: 20px;
+      margin-top: 8px;
+      text-align: center;
+    }
+  }
+  .item-box{
+    // padding: 24px 0;
+    // border-bottom: 1px solid #eee;
+    display: flex;
+    img{
+      width: 258px;
+      height: 143px;
+      display: block;
+    }
+    .right-content{
+      margin-left: 24px;
+      .title{
+        font-size: 18px;
+        font-weight: bold;
+        color: #C01540;
+        line-height: 25px;
+      }
+      .des-box{
+        margin-top: 24px;
+        p{
+          font-size: 14px;
+          color: #666666;
+          line-height: 20px;
+          margin-bottom: 8px;
+          display: flex;
+          span{
+            width: 70px;
+            font-size: 14px;
+            font-weight: bold;
+            color: #222222;
+            line-height: 20px;
+            white-space: nowrap;
+          }
+          i{
+            max-width: 400px;
+            font-style: normal;
+            font-size: 14px;
+            color: #717171;
+            line-height: 20px;
+          }
+        }
+      }
+      .detail-btn{
+        color: #fff;
+        text-align: center;
+        line-height: 36px;
+        width: 96px;
+        height: 36px;
+        background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+        border-radius: 4px;
+        margin-top: 16px;
+      }
+    }
+  }
+}
+</style>

src/pages/textBook/index.vue

+<template>
+  <div class="book-box">
+    <search />
+    <screen-tabs class="tabs-box" :data="tabsData"></screen-tabs>
+    <ul class="list-box content-max-width">
+      <li>
+        <item />
+      </li>
+      <li>
+        <item />
+      </li>
+    </ul>
+    <div class="pagination">
+      <el-pagination
+        :page-size="100"
+        layout="prev, pager, next, jumper"
+        :total="1000">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import search from './components/search'
+import item from './components/item'
+import screenTabs from '@/components/tabs/screenTabs'
+export default {
+  components: {
+    search,
+    item,
+    screenTabs
+  },
+  data() {
+    return {
+      tabsIndex: 0,
+      tabsData: {
+        name: '出版时间',
+        options: ['全部', '2020年', '2019年', '2018年']
+      }
+    }
+  },
+  methods: {
+    tabs(n) {
+      this.tabsIndex = n
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content-max-width{
+  width: 1109px;
+  margin: 0 auto;
+}
+.book-box{
+  padding-top: 24px;
+  .tabs-box{
+    margin-top: 24px;
+    // margin-bottom: 30px;
+  }
+  // .tabs-box{
+  //   margin-top: 24px;
+  //   margin-bottom: 30px;
+  //   display: flex;
+  //   justify-content: center;
+  //   .name{
+  //     font-size: 14px;
+  //     color: #666666;
+  //     line-height: 20px;
+  //     margin-right: 24px;
+  //   }
+  //   ul{
+  //     display: flex;
+  //     li{
+  //       position: relative;
+  //       font-size: 14px;
+  //       color: #666666;
+  //       line-height: 20px;
+  //       margin-right: 24px;
+  //       cursor: pointer;
+  //       &.active{
+  //         &::after{
+  //           content: '';
+  //           position: absolute;
+  //           bottom: -4px;
+  //           left: 0;
+  //           width: 100%;
+  //           height: 2px;
+  //           background: #AF1B40;
+  //           border-radius: 1px;
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
+}
+.pagination{
+  padding: 24px 0;
+  display: flex;
+  justify-content: center;
+}
+</style>

src/pages/train/components/item.vue

+<template>
+  <div class="item-box">
+    <img src="https://zws-imgs-pub.ezijing.com/static/public/7c63bd40600a040f867fe4db9014fb7c.png" alt="">
+    <div class="right-content">
+      <div class="title">关于1+X金融数字化营销证书考核站点申报的通知</div>
+      <div class="des-box">
+        <p class="ind">作者：基础数据维护及档案管理</p>
+        <p>出版时间：基础数据维护及档案管理</p>
+        <p class="ind">ISBN：基础数据维护及档案管理</p>
+        <p>书籍简介：基础数据维护及档案管理</p>
+      </div>
+      <router-link to="/train/detail">
+        <div class="detail-btn">查看详情</div>
+      </router-link>
+    </div>
+    <div class="right-time">
+      <div class="week">星期四</div>
+      <div class="time">12月29日</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.item-box{
+  padding: 24px 0;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  img{
+    width: 180px;
+    height: 100px;
+    display: block;
+  }
+  .right-content{
+    margin-left: 24px;
+    .title{
+      font-size: 18px;
+      font-weight: bold;
+      color: #C01540;
+      line-height: 25px;
+    }
+    .des-box{
+      margin-top: 24px;
+      p{
+        font-size: 14px;
+        color: #666666;
+        line-height: 20px;
+        margin-bottom: 8px;
+        &.ind{
+          text-indent: 2em;
+        }
+      }
+    }
+    .detail-btn{
+      color: #fff;
+      text-align: center;
+      line-height: 36px;
+      width: 96px;
+      height: 36px;
+      background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+      border-radius: 4px;
+      margin-top: 16px;
+    }
+  }
+}
+.right-time{
+  margin-left: auto;
+  width: 77px;
+  height: 59px;
+  background: url(https://zws-imgs-pub.ezijing.com/static/public/30ec4d9c7c282da2e3dae066b00b180b.png);
+  background-size: 100% 100%;
+  position: relative;
+  .week{
+    text-align: center;
+    font-size: 12px;
+    color: #FFFFFF;
+    line-height: 12px;
+    margin-top: 6px;
+  }
+  .time{
+    margin-top: 8px;
+    text-align: center;
+    font-size: 16px;
+    font-weight: bold;
+    color: #666666;
+    line-height: 22px;
+  }
+}
+</style>

src/pages/train/components/search.vue

+<template>
+  <div class="search-box">
+     <el-input
+      class="input"
+      placeholder="请输入内容"
+      v-model="input">
+      <i slot="prefix" class="el-input__icon el-icon-search"></i>
+    </el-input>
+    <div class="search-btn">查询</div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.search-box{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .input{
+    width: 328px;
+    border-radius: 4px;
+    margin: 0 12px 0 0;
+  }
+  .search-btn{
+    text-align: center;
+    line-height: 32px;
+    width: 60px;
+    height: 32px;
+    background: linear-gradient(312deg, rgba(192, 21, 64, 0.67) 0%, #C01540 100%);
+    border-radius: 4px;
+    font-size: 14px;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+}
+</style>

src/pages/train/detail.vue

+<template>
+  <div class="train-detail-box content-max-width">
+    <div class="content-left">
+      <div class="title">智能处理与应用</div>
+      <div class="item-box">
+        <img src="https://zws-imgs-pub.ezijing.com/static/public/7c63bd40600a040f867fe4db9014fb7c.png" alt="">
+        <div class="right-content">
+          <!-- <div class="title">关于1+X金融数字化营销证书考核站点申报的通知</div> -->
+          <div class="des-box">
+            <p class="ind">作者：基础数据维护及档案管理</p>
+            <p>出版时间：基础数据维护及档案管理</p>
+            <p class="ind">ISBN：基础数据维护及档案管理</p>
+            <p>书籍简介：基础数据维护及档案管理</p>
+          </div>
+          <router-link to="/train/form">
+            <div class="detail-btn">查看详情</div>
+          </router-link>
+        </div>
+      </div>
+    </div>
+    <div class="content-card">
+      <div class="tit">最新会议</div>
+      <div class="text">生实解着利土具度海张际取得时美议九报当社并因或争拉青再大精周不院指权展理会后市中议候只土写海院油称县白力反油子特军再六红省采大队清</div>
+      <div class="btn-boxs">
+        <div class="btns">确定</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import item from './components/item'
+export default {
+  components: {
+    item
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content-max-width{
+  width: 1112px;
+  margin: 0 auto;
+}
+.train-detail-box{
+  display: flex;
+  padding-top: 12px;
+  .title{
+    width: 753px;
+    line-height: 50px;
+    border-bottom: 1px solid #eee;
+    font-size: 18px;
+    font-weight: bold;
+    color: #C01540;
+  }
+}
+.content-left{
+  width: 753px;
+}
+.item-box{
+  padding: 24px 0;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  img{
+    width: 200px;
+    height: 100px;
+    display: block;
+  }
+  .right-content{
+    margin-left: 24px;
+    .title{
+      font-size: 18px;
+      font-weight: bold;
+      color: #C01540;
+      line-height: 25px;
+    }
+    .des-box{
+      // margin-top: 24px;
+      p{
+        font-size: 14px;
+        color: #666666;
+        line-height: 20px;
+        margin-bottom: 8px;
+        &.ind{
+          text-indent: 2em;
+        }
+      }
+    }
+    .detail-btn{
+      color: #fff;
+      text-align: center;
+      line-height: 36px;
+      width: 96px;
+      height: 36px;
+      background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+      border-radius: 4px;
+      margin-top: 70px;
+    }
+  }
+}
+.content-card{
+  margin-top: 20px;
+  margin-left: auto;
+  width: 336px;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
+  height: auto;
+  height: max-content;  
+  .tit{
+    height: 58px;
+    line-height: 58px;
+    border-bottom: 1px solid #eee;
+    font-size: 14px;
+    color: #222222;
+    line-height: 58pxpx;
+    padding-left: 20px;
+    box-sizing: border-box;
+  }
+  .text{
+    padding: 10px 20px 20px;
+    font-size: 16px;
+    color: #C01540;
+    line-height: 22px;
+  }
+  .btn-boxs{
+    height: 56px;
+    border-top: 1px solid #eee;
+    display: flex;
+    align-items: center;
+    .btns{
+      line-height: 36px;
+      text-align: center;
+      width: 62px;
+      height: 36px;
+      background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+      border-radius: 4px;
+      margin-left: auto;
+      margin-right: 24px;
+      color: #fff;
+    }
+  }
+}
+</style>

src/pages/train/form.vue

+<template>
+  <div class="form-box">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="姓名" label-width="100px">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="性别" label-width="100px">
+        <el-select v-model="form.sex" placeholder="请选择">
+          <el-option label="男" value="shanghai"></el-option>
+          <el-option label="女" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="手机号" label-width="100px">
+        <el-input v-model="form.phone"></el-input>
+      </el-form-item>
+      <el-form-item label="邮箱" label-width="100px">
+        <el-input v-model="form.emil"></el-input>
+      </el-form-item>
+      <el-form-item label="发票抬头" label-width="100px">
+        <el-input v-model="form.fp"></el-input>
+      </el-form-item>
+      <el-form-item label="纳税人识别号" label-width="100px">
+        <el-input v-model="form.num"></el-input>
+      </el-form-item>
+      <el-form-item label="职务" label-width="100px">
+        <el-input v-model="form.zw"></el-input>
+      </el-form-item>
+      <el-form-item label="单/合住" label-width="100px">
+        <el-select v-model="form.zf" placeholder="请选择">
+          <el-option label="男" value="shanghai"></el-option>
+          <el-option label="女" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="付款方式" label-width="100px">
+        <el-select v-model="form.fk" placeholder="请选择">
+          <el-option label="男" value="shanghai"></el-option>
+          <el-option label="女" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="身份证号" label-width="100px">
+        <el-input v-model="form.code"></el-input>
+      </el-form-item>
+      <el-form-item label="地址" label-width="100px">
+        <el-input type="textarea" v-model="form.desc"></el-input>
+      </el-form-item>
+      <el-form-item label="培训需求" label-width="100px">
+        <el-input type="textarea" v-model="form.xq"></el-input>
+      </el-form-item>
+      <el-form-item label-width="100px">
+        <el-upload
+          class="upload-demo"
+          drag
+          action="https://jsonplaceholder.typicode.com/posts/"
+          multiple>
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+        </el-upload>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">提交</el-button>
+        <el-button @click="back">返回</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        name: '',
+        sex: '',
+        phone: '',
+        emil: ''
+      }
+    }
+  },
+  methods: {
+    onSubmit() {
+      console.log('submit!');
+    },
+    back() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.form-box{
+  padding: 30px 0;
+  width: 500px;
+  margin: 0 auto;
+}
+</style>

src/pages/train/index.vue

+<template>
+  <div class="content-max-width">
+    <btn-tabs class="btn-tabs-box" @tabsChange="tabsChange" :data="btnTabsData"></btn-tabs>
+    <template v-if="!tabsIndex">
+      <screen-tabs class="screen-tabs-box" :data="screenTabsData"></screen-tabs>
+      <div class="train-mian">
+        <ul>
+          <li>
+            <item />
+          </li>
+          <li>
+            <item />
+          </li>
+        </ul>
+        <div class="calendar">
+          <inlineCalendar mode="during"></inlineCalendar>
+          <div class="btn-box">
+            <div class="btn">确定</div>
+          </div>
+        </div>
+      </div>
+      <div class="pagination">
+        <el-pagination
+          :page-size="100"
+          layout="prev, pager, next, jumper"
+          :total="1000">
+        </el-pagination>
+      </div>
+    </template>
+    <template v-else>
+      <search />
+      <noData/>
+    </template>
+  </div>
+</template>
+<script>
+import btnTabs from '@/components/tabs/btnTabs'
+import screenTabs from '@/components/tabs/screenTabs'
+import noData from '@/components/tabs/noData'
+import item from './components/item'
+import search from './components/search'
+export default {
+  components: {
+    btnTabs,
+    screenTabs,
+    item,
+    noData,
+    search
+  },
+  data() {
+    return {
+      tabsIndex: 0,
+      value3: '',
+      btnTabsData: {
+        options: ['新闻动态', '活动公告']
+      },
+      screenTabsData: {
+        name: '筛选：',
+        options: ['全部', '正在进行', '未开始', '已结束']
+      }
+    }
+  },
+  mounted() {},
+  methods: {
+    tabsChange(i) {
+      console.log(111)
+      this.tabsIndex = i
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.pagination{
+  padding: 24px 0;
+  display: flex;
+  justify-content: center;
+}
+.content-max-width{
+  width: 1112px;
+  margin: 0 auto;
+}
+.btn-tabs-box{
+  padding: 24px 0;
+}
+.train-mian{
+  display: flex;
+  ul{
+    width: 700px;
+  }
+  .calendar{
+    width: 336px;
+    height: 385px;
+    background: #FFFFFF;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
+    margin-left: auto;
+    .btn-box{
+      width: 100%;
+      border-top: 1px solid #eee;
+      overflow: hidden;  
+      .btn{
+        margin-top: 10px;
+        width: 62px;
+        height: 36px;
+        background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
+        border-radius: 4px;
+        text-align: center;
+        line-height: 36px;
+        color: #fff;
+        font-size: 14px;
+        float: right;
+        margin-right: 24px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+::v-deep{
+  .m-row{
+    &::before{
+      background-color: #fff !important;
+    }
+  }
+  .m-week-header{
+    background: #fff;
+  }
+  .m-calendar{
+    .m-toolbar{
+      height: 58px;
+      background: #fff;
+      border-bottom: 1px solid #eee;
+      margin-bottom: 10px;
+    }
+  }
+  .m-during{
+    background: #C01540 !important;
+  }
+}
+</style>

src/pages/videoCenter/index.vue

-<template>
-  <div>
-    <banner-tab :data="bannerTabData" @changeTab="changeTab"></banner-tab>
-    <div class="cont-mian center97">
-      <div class="module" v-if="activeIndex == 0">
-        <news :data="newsData"></news>
-      </div>
-      <div class="module" v-if="activeIndex === 1">
-        <list :data="listData[1]"></list>
-        <div class="no-data" v-if="!listData[1].length">暂无数据</div>
-      </div>
-      <div class="module" v-if="activeIndex === 2">
-        <list :data="listData[2]"></list>
-        <div class="no-data" v-if="!listData[2].length">暂无数据</div>
-      </div>
-      <div class="module" v-if="activeIndex === 3">
-        <list :data="listData[3]"></list>
-        <div class="no-data" v-if="!listData[3].length">暂无数据</div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import news from '@/components/news/news.vue'
-import bannerTab from '@/components/news/tab/bannerTab.vue'
-import list from '@/components/news/newsList.vue'
-import cAction from '@action'
-export default {
-  components: {
-    bannerTab,
-    news,
-    list
-  },
-  data() {
-    return {
-      listData: {
-        1: [],
-        2: [],
-        3: []
-      },
-      bannerTabData: {
-        menu: ['项目介绍', '宣传片', '教授采访', '学生风采'],
-        imgUrl: 'https://zws-imgs-pub.ezijing.com/static/public/24c97bb61b77949b415adcb06c7e43b1.png'
-      },
-      newsData: [
-      ],
-      activeIndex: 0,
-      tabMenu: ['宣讲会实录', '项目介绍'],
-      childActiveIndex: 0,
-      requestParam: {
-        page: 1,
-        per_page: 100,
-        type: 52,
-        project_id: 1000
-      }
-    }
-  },
-  methods: {
-    changeTab(index) {
-      const key = {
-        1: 52,
-        2: 53,
-        3: 54
-      }
-      if (index) {
-        this.requestParam.type = key[index]
-        this.requestList(index)
-      }
-      this.activeIndex = index
-    },
-    changeChildTab(index) {
-      this.childActiveIndex = index
-    },
-    getData() {
-      const requestType = [
-        {
-          name: '宣讲会实录',
-          image: 'https://zws-imgs-pub.ezijing.com/static/public/09a620add2643574f9f0de4424db5ebe.png'
-        },
-        {
-          name: '项目介绍',
-          image: 'https://zws-imgs-pub.ezijing.com/static/public/09a620add2643574f9f0de4424db5ebe.png'
-        }
-      ]
-      requestType.map((item, index) => {
-        this.request(item, index)
-      })
-    },
-    request(item, index) {
-      cAction.reportAction.getContent(item.name).then(json => {
-        this.newsData.push({
-          id: index,
-          title: item.name,
-          content: json === null ? '' : json[0].content,
-          image: item.image
-        })
-        this.newsData = this.newsData.sort((a, b) => a.id - b.id)
-      }).catch(e => { this.$message.error(e.message) }).finally(() => {})
-    },
-    requestList(n) {
-      cAction.reportAction
-        .getNews(this.requestParam)
-        .then(json => {
-          if (Array.isArray(json)) {
-            json.length && (this.listData[n] = json)
-          }
-        })
-        .catch(e => {
-          this.$message.error(e.message)
-        })
-        .finally(() => {})
-    }
-  },
-  mounted() {
-    this.getData()
-    // this.request(50)
-  }
-}
-</script>
-<style lang="scss" scoped>
-.no-data {
-  width: 100%;
-  text-align: center;
-  color: #999;
-  font-size: 26px;
-}
-.cont-mian {
-  .module {
-    width: 100%;
-    padding-top: 30px;
-    padding-bottom: 60px;
-    display: flex;
-    .left-txt {
-      // width: 670px;
-    }
-    img {
-      margin-left: auto;
-      // display: block;
-      width: 235px;
-      height: 300px;
-    }
-    &.wid {
-      width: 100%;
-    }
-  }
-}
-.center97 {
-  width: 970px;
-  margin: 0 auto;
-}
-.top-nav {
-  .center97 {
-    position: relative;
-  }
-  img {
-    width: 100%;
-    display: block;
-  }
-  .menu {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    li {
-      width: 128px;
-      line-height: 36px;
-      text-align: center;
-      color: #fff;
-      font-size: 16px;
-      margin-right: 2px;
-      cursor: pointer;
-      background: #bf0927;
-      &.active {
-        background: #fff;
-        color: #c70025;
-      }
-    }
-  }
-}
-</style>

src/pages/videoCenter/list.vue

-<template>
-  <div class="list-box">
-    <ul>
-      <li>2019招生说明会-教学模块&校园生活-陈雅如</li>
-      <li>2019招生说明会-教学模块&校园生活-陈雅如</li>
-      <li>2019招生说明会-教学模块&校园生活-陈雅如</li>
-      <li>2019招生说明会-教学模块&校园生活-陈雅如</li>
-    </ul>
-  </div>
-</template>
-
-<script>
-  export default {
-  }
-</script>
-
-<style lang="scss" scoped>
-.list-box{
-  width: 100%;
-}
-ul{
-  width: 100%;
-  li{
-    width: 100%;
-    line-height: 82px;
-    border-bottom: 1px solid #ccc;
-    font-size: 16px;
-    font-weight: bold;
-    color: #222222;
-    overflow: hidden;
-    text-overflow:ellipsis;
-    white-space: nowrap;
-  }
-}
-</style>
\ No newline at end of file

src/router/index.js

@@ -7,5 +7,8 @@ Vue.use(Router)
 export default new Router({
   routes,
   mode: 'history', // 还有一个 hash 默认
-  fallback: true // 浏览器不支持 history时，自动改成 hash方式
+  fallback: true, // 浏览器不支持 history时，自动改成 hash方式
+  scrollBehavior (to, from, savedPosition) {
+    return { x: 0, y: 0 }
+  }
 })

src/router/routes.js

@@ -8,83 +8,28 @@ export default [
     children: [
       { path: '', redirect: '/index' },
       { path: '/index', component: () => import('@/pages/home/index.vue') },
-      {
-        path: '/project', // 项目介绍
-        component: () => import('@/pages/project/index.vue')
-      },
-      {
-        path: '/recruit', // 招生信息
-        component: () => import('@/pages/recruitInfo/index.vue')
-      },
-      {
-        path: '/presence', // 师生风采
-        component: () => import('@/pages/presence/index.vue')
-      },
-      {
-        path: '/alumniWork', // 校友工作
-        component: () => import('@/pages/alumniWork/index.vue')
-      },
-      {
-        path: '/teaching', // 教学模块
-        component: () => import('@/pages/teaching/index.vue')
-      },
-      {
-        path: '/videoCenter', // 视频中心
-        component: () => import('@/pages/videoCenter/index.vue')
-      }
+      // 工作动态
+      { path: '/news', component: () => import('@/pages/news/index.vue') },
+      // 工作动态详情
+      { path: '/news/detail', component: () => import('@/pages/news/detail.vue') },
+      // 教材中心
+      { path: '/textBook', component: () => import('@/pages/textBook/index.vue') },
+      // 教材中心详情
+      { path: '/textBook/detail', component: () => import('@/pages/textBook/detail.vue') },
+      // 教材中心详情->章节
+      { path: '/textBook/chapter', component: () => import('@/pages/textBook/chapter.vue') },
+      // 师资培训
+      { path: '/train', component: () => import('@/pages/train/index.vue') },
+      // 师资培训详情
+      { path: '/train/detail', component: () => import('@/pages/train/detail.vue') },
+      // 师资培训详情->报名
+      { path: '/train/form', component: () => import('@/pages/train/form.vue') },
+      // 考核站点
+      { path: '/site', component: () => import('@/pages/site/index.vue') },
+      // 证书成绩查询
+      { path: '/query', component: () => import('@/pages/query/index.vue') },
+      // 证书成绩查询
+      { path: '/register', component: () => import('@/pages/account/register.vue') }
     ]
-  },
-  // 在线报名
-  {
-    path: '/my',
-    component: Layout,
-    props: { hasFooter: false },
-    children: [
-      {
-        name: 'apply',
-        path: '',
-        component: () => import(/* webpackChunkName: "my-welcome" */ '@/pages/my/welcome/index.vue'),
-        meta: { requiredLogin: true }
-      },
-      {
-        name: 'account',
-        path: 'account',
-        component: () => import(/* webpackChunkName: "my-account" */ '@/pages/my/account/index.vue'),
-        meta: { requiredLogin: true }
-      },
-      {
-        path: 'application',
-        component: () => import(/* webpackChunkName: "my-application" */ '@/pages/my/application/index.vue'),
-        meta: { requiredLogin: true }
-      },
-      {
-        path: 'interview',
-        component: () => import(/* webpackChunkName: "my-interview" */ '@/pages/my/interview/index.vue'),
-        meta: { requiredLogin: true }
-      },
-      {
-        path: 'admission',
-        component: () => import(/* webpackChunkName: "my-admission" */ '@/pages/my/admission/index.vue'),
-        meta: { requiredLogin: true }
-      }
-    ]
-  },
-  // 推荐信
-  {
-    path: '/letter',
-    component: () => import(/* webpackChunkName: "letter" */ '@/pages/letter/index.vue')
-  },
-  {
-    path: '/application-materials/reco-letters/submit/:projectId/:userId/:letterId',
-    component: () => import(/* webpackChunkName: "letter" */ '@/pages/letter/index.vue')
-  },
-  {
-    path: '/preview',
-    props: { isManager: true },
-    component: () => import(/* webpackChunkName: "preview" */ '@/pages/my/application/preview.vue')
-  },
-  {
-    path: '/complete',
-    component: () => import(/* webpackChunkName: "complete" */ '@/pages/my/application/complete.vue')
   }
 ]