项目优化

assets/css/studyAbroad.scss

@@ -2,6 +2,22 @@
   max-width: 1200px;
   margin: 0 auto;
 }
+.banner-img {
+  display: block;
+  width: 100%;
+  height: 1.51rem;
+  object-fit: cover;
+}
+::v-deep .van-swipe__indicator {
+  width: 2px;
+  height: 2px;
+  background-color: #fff;
+  opacity: 1;
+}
+::v-deep .van-swipe__indicator--active {
+  width: 10px;
+  border-radius: 2px;
+}
 .banner {
   height: 1.56rem !important;
   img {
@@ -63,35 +79,71 @@
   }
 }
 
-.qa-list {
-  li {
-    padding: 0 0.05rem;
-    margin-left: 0.08rem;
-    position: relative;
-    font-size: 0.11rem;
-    line-height: 0.21rem;
+.qa-list2 {
+  background: rgba(255,255,255,0.39);
+  box-shadow: 0px 1px 11px rgba(0,0,0,0.1);
+  opacity: 1;
+  border-radius: 11px;
+  padding-top:0.22rem;
+  overflow: hidden;
+  width: 3.27rem;
+  min-height:6.89rem;
+  .item{
+  margin-top:0.22rem;
+  }
+  .item:last-child{
+    .line{
+      border:0;
+    }
+  }
+ .tit{
+  width: 3rem;
+  // height: 0.3rem;
+  background: #A81840;
+  opacity: 1;
+  border-radius: 0px 15px 15px 0px;
+  color:#FFFFFF;
+  font-size: 0.12rem;
+  line-height: 0.3rem;
   white-space: nowrap;
-    text-overflow: ellipsis;
-    width:100%;
-    &::before {
+  text-align: left;
+  padding-left:0.15rem;
+ }
+ p {
+  position: relative;
+  margin-top: 0.18rem;
+  margin-left: 0.33rem;
+  margin-right: 0.36rem;
+  font-size: 0.12rem;
+  font-family: SourceHanSansCN-Regular;
+  line-height: 1.5;
+  color: #333333;
+  background-color: #f9f8f8;
+  border-radius: 22px;
+  padding: 14px;
+  &::after {
     content: '';
     position: absolute;
-      left: -0.08rem;
     top: 50%;
-      width: 0.04rem;
-      height: 0.04rem;
-      background: #aa1941;
-      border-radius: 50%;
-      transform: translate(-50%);
-    }
-  }
-  li:nth-child(odd) {
-    background: rgba(153, 153, 153, 0.39);
+    right: -9px;
+    margin-top: -9px;
+    transform: translateY(50%);
+    transform: rotate(45deg);
+    width: 18px;
+    height: 18px;
+    background-color: #f9f8f8;
   }
 }
+.line{
+    height: 0px;
+    border-bottom: 0.01rem dashed #BABABA;
+    margin:0.23rem 0.12rem 0 0.12rem;
+}
+}
 
 .process {
   img {
     width: 100%;
   }
 }
+

assets/internationalDegreeQA.js

 export default [
+  [
     {
-    question: '毕业生颁发的学位证书与在美国/欧洲颁发的证书有何不同？',
-    answer: '没有不同，完全一样，具有相同的形式和效力。'
-  },
-  {
-    question: '紫荆教育在线国际学位项目上课形式是怎么样？',
+      question: '学校是否正规？学籍是否正规？',
       answer:
-      '项目采用在线学习和线下面授相结合的授课方式。在线学习时，学生可根据自己的时间灵活安排学习，线下面授采用周末或短期集中安排的方式。'
-  },
-  {
-    question: '紫荆教育在线国际学位项目学制多久？',
-    answer: '学制为16—24个月不等，具体因项目而异。'
+        '紫荆教育所有合作院校均为各国官方教育机构认证的合规大学，受到US.NEWS,QS，AACSB,ACBSP等数十个国际权威评级和教育评价组织认可。所有学生均注册正规学籍，终身可查。'
     },
     {
-    question: '紫荆教育在线国际学位项目能否顺利毕业拿到证书呢？',
-    answer: '修满规定学分的学员可获得相应项目的学位证书。'
+      question: '在线学习与出国留学颁发的证书有何不同？',
+      answer:
+        '颁发正规学位，与留学生完全一样，且具有相同的形式和法律效力。不存在在线学位、远程学位、校证、特殊学位等说法。'
     },
     {
-    question: '紫荆教育在线国际学位项目是在职还是全职？',
-    answer: '项目为在职硕士项目，采用在线学习和线下面授相结合的学习方式。'
+      question: '关于上课形式，课程体系，老师水平',
+      answer:
+        '以网络授课为主。配合线下课，企业参访，工作坊，国际访学等多种授课形式。课程体系与授课老师完全按照在校生标准配置。'
     },
     {
-    question: '如何申请紫荆教育在线国际学位项目？大概流程是什么？',
-    answer: '申请流程为：在线填写申请资料—初审通过—面试安排—综合评审—录取offer—学费缴纳及入学手续办理。'
-  },
+      question: '学制多久？能否确保拿到学位证书？',
+      answer:
+        '国际在线学位项目的学制一般为16—24个月不等。只要按时上课，完成作业并修满规定学分就可获得所修项目的学位证书。'
+    }
+  ],
+  [
     {
-    question: '紫荆教育在线国际学位项目面试多少人？录取多少人？',
-    answer: '采取现场/视频面试的方式，面试人数和录取人数视申请人数和申请资质而定。'
+      question: '必须要本科吗？非统招本科学历、大专学历能上吗？',
+      answer: '部分项目针对大专学历少量择优录取，详情请咨询招生顾问老师。非统招，专升本都可以上。'
     },
     {
-    question: '申请紫荆教育在线国际学位项目需要提交哪些材料？',
+      question: '申请在线国际学位项目需要提交哪些材料？',
       answer:
-      '申请项目需提交：<br />1. 本科学历证书；<br />2. 身份证正、反面照片；<br />3. 一寸白底证件照。<br /><br />学籍注册需提交：<br />1. 本科阶段中、英文双语版成绩单；<br />2. 英文版《教育部学历证书电子注册备案表》；<br />3. 入学协议；<br />4. 英文简历；<br />5. 推荐信2封；<br />6. 缴费凭证。'
+        '需提交：本科学历证书、本科阶段（中、英文双语版成绩单）、英文版《教育部学历证书电子注册备案表》、及推荐信等个人能力证明文件。'
     },
     {
-    question: '大专毕业通过自考获得本科毕业证和学士学位，能否报考？',
-    answer: '可以报考，只要获得专科及以上学位证书，即可报考，特别优秀者可放宽条件。'
+      question: '每周学习时长？遇到急事可以请假或者补课吗？',
+      answer:
+        '学习时长因人而异，大部分学员保持在每周上2-3次课。每次2个小时左右。可以请假，但部分公开课，线下课及直播课无法补课。'
     },
     {
-    question: '紫荆教育在线国际学位项目学费是多少？ 可以分期吗？',
-    answer: '目前在线国际学位项目的学费在6.9万元—12.6万元人民币，由学生在入学前向紫荆教育缴清（不可选择分期）。'
+      question: '可以做中留服认证吗？',
+      answer:
+        '因国家政策规定，不出国的在线学习项目都不能申请中留服认证。对于市场上承诺可以做中留服的项目请注意鉴别，避免受骗。'
     }
+  ]
 ]

assets/studyAbroadQA.js

 export default [
+  [
     {
-    question: '国际硕士1+1项目对本科学校的专业有没有要求？非财经类能否申请？',
-    answer:
-      '纽约州立大学石溪分校金融硕士1+1项目对专业无强制性要求，有金融学及数学，统计学，计算机等STEM相关专业背景的学生会更有优势，但项目学生第一年能通过金融硕士先修课程补充相关专业基础顺利适应未来金融硕士专业学习。玛丽伍德大学工商管理硕士1+1项目对申请者本科专业也没有硬性规定，但申请管理信息系统硕士最好能有一定的数学与计算机基础。'
+      question: '请问必须有本科学历吗？对专业有没有要求？',
+      answer: '是的，申请者必须要求本科学历或本科在读。但是对专业没有限制。'
     },
     {
-    question: '签证是自己办理吗？拒签了怎么办？',
-    answer:
-      '1+1项目学生一般是首次赴美，签证需要学生面签。但紫荆教育会提供一定的申请签证辅导和协助（面试技巧等）。个别因回答技巧不成熟被拒签的情况也可以调整申请策略后再次申请签证。'
-  },
-  {
-    question: '硕士1+1项目面试难吗？怎么准备？',
-    answer:
-      '国际硕士1+1项目面试环节着重考察同学们专业基础，研究能力，语言表达能力以及其他综合能力。学生提交的申请材料初审通过后招生办会邮件通知获得面试资格，并告知面试相关环节以及准备范围。 面试为中英文方式 ，包括自我介绍以及教授提问等环节。'
+      question: '英语基础不好会影响学习吗?',
+      answer: '紫荆教育提供了英语强化课程，课程测试结果得到美国大学的官方认可。'
     },
     {
-    question: '硕士1+1项目有没有奖学金？',
-    answer:
-      '美国高校通常极少为商科类硕士项目提供奖学金，紫荆教育国际硕士1+1项目基于对中国学子的认可提供最高16,000美元奖学金，学生入学后可以申请，校方会结合考生专业基础英语能力综合素养等综合评审。'
+      question: '签证是自己办理吗？拒签了怎么办?',
+      answer: '签证需要学生面签。紫荆教育会提供相应的办理辅导和协助。'
     },
     {
-    question: '赴美留学生购买医疗保险是否方便？',
-    answer:
-      '去美国留学（F-1）或作访问学者 (J-1)，一般都需要购买医疗保险。美国的多数学校也会为本校学生提供学生集体医疗保险，同学也可选择在校外自行购买医疗保险。'
-  },
-  {
-    question: '在美国留学期间的住宿费和生活费大概预估是多少钱？是住学校宿舍吗？',
-    answer:
-      '留美一年住宿费和生活费预计15-20W人民币。石溪大学1+1项目学员可根据石溪大学录取信上提供的校方房源选择住宿，玛丽伍德大学也为1+1项目统一安排校内住宿。<br/>加州浸会大学工商管理博士项目也为项目学员提供了校区内的房屋，在校园安保范围内，每天可步行至教室，十分方便。'
-  },
+      question: '国内学习什么课程？在哪上课？',
+      answer: '国内开设的是语言强化课、专业先修课、及少量学分课。采用线上授课+线下集中授课的方式。'
+    }
+  ],
+  [
     {
-    question: '英语基础不好会影响学习吗?',
+      question: '硕士1+1申请面试要注意什么？',
       answer:
-      '针对英语基础不足的学员，紫荆教育提供了英语强化课程，课程测试结果得到美国大学的官方认可，帮助学生顺利适应海外学习。'
+        '面试为中英文方式 ，包括自我介绍以及教授提问等环节。面试将考察专业基础，研究能力，语言表达能力以及其他综合能力。'
     },
     {
-    question: '博士项目最少出国几年？',
-    answer:
-      'CBU工商管理博士项目学制是三年：<br />第一年在美国CBU本校上课，6门课程，18学分，如果顺利完成学业，获得学分，12个月就可以了。<br />第二年在国内学习，也是6门课，18学分。<br />第三年主要写毕业论文，根据学生论文的选题决定研究和学习地点。如论文选题研究对象和方向在中国，那么也是在国内学习。'
+      question: '疫情对赴美留学签证有影响吗？申请入学需要多久？',
+      answer: '目前中美双方对学生签证已全面开放,提交资料到入学视材料情况最快60天。'
     },
     {
-    question: '博士项目国内学习的授课方式是线上还是线下？时长？每周学习几次？',
-    answer:
-      '按照学校规定，每门课程（3学分）包含24个教学课时。根据教学安排，学员需要每两个月完成一到两门课程的学习。国内授课以线下集中授课为主，根据疫情影响可能会采用线上直播的形式作为补充。线下课在3整天（每天8课时）内为学员集中授课，直播课每周一次，每次3课时，持续8周。'
+      question: '申请报名要什么材料？',
+      answer: '大学成绩单，托福或雅思成绩（非必需），学历证明文件，推荐信等其它能力证明文件。'
     },
     {
-    question: '疫情期间，赴美留学签证是否受影响？出国学习是否安全？',
-    answer:
-      '目前美国学校学生签证业务已重启，学校正常发放录取，正常签发 I-20 (用于赴美签证的材料)。 2021年中国赴美留学达到35万人，依然是美国最大的国际学生生源国。目前国内已全面放开出国留学手续申请；海外也已全面开放线下教学。'
+      question: '在美国留学期间的住宿费和生活费大概是多少钱？',
+      answer: '留美一年住宿费和生活费预计15-20W人民币。'
     }
+  ]
 ]

components/FormSubmit.vue

+<template>
+  <div class="form-submit">
+    <h2>{{ title }}</h2>
+    <div class="desc" v-if="type === 1">
+      <ul>
+        <li>免联考，在职读</li>
+        <li>申请制入学</li>
+        <li>双语授课</li>
+        <li>学制1-2年</li>
+      </ul>
+      <p>全球正规优选院校 <span>|</span> 6000+全球精英校友 <span>|</span> 国际化师资团队</p>
+    </div>
+    <ul v-if="type === 2" class="desc2">
+      <li v-for="(item, index) in formList" :key="index">
+        <img src="https://webapp-pub.ezijing.com/www/pc/form/form_check_bg.png" alt="" />
+        <h4>{{ item.tit }}</h4>
+        <p>{{ item.desc }}</p>
+      </li>
+    </ul>
+    <div class="form">
+      <div class="form-item">
+        <input class="form-input" type="text" v-model="form.name" placeholder="请输入您的名字" />
+      </div>
+      <div class="form-item">
+        <input class="form-input" type="number" v-model="form.phone" placeholder="请输入您的手机号" maxlength="11" />
+      </div>
+      <div class="form-item">
+        <select class="form-select" placeholder="请选择项目" v-model="form.project_id">
+          <option v-for="(item, index) in projects" :value="item.value" :key="index">{{ item.label }}</option>
+        </select>
+      </div>
+      <div class="form-item">
+        <input class="form-button" type="button" @click="handleSubmit" value="立即报名" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api'
+
+export default {
+  props: { type: { type: Number, default: 1 } },
+  data() {
+    return {
+      form: {
+        name: '',
+        phone: '',
+        project_id: '',
+        channel: this.$route.query.channel_num || 19962
+      },
+      rules: {
+        name: [{ required: true, message: '请输入您的名字', trigger: 'blur' }],
+        phone: [
+          { required: true, message: '请输入您的手机号', trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
+        ],
+        project_id: [{ required: true, message: '请选择项目', trigger: 'change' }]
+      },
+      formList: [
+        {
+          tit: '权威可靠',
+          desc: '-百年学府 中美教育部双认证'
+        },
+        {
+          tit: '校方直录',
+          desc: '-百年学府 中美教育部双认证'
+        },
+        {
+          tit: '免标准化考试',
+          desc: '-美国校方考试替代托福/GMAT'
+        },
+        {
+          tit: '省时省费',
+          desc: '-减免部分学费，赴美1年，校内住宿安全便捷'
+        },
+        {
+          tit: '师资雄厚',
+          desc: '-清华北大教授+全美TOP100大学博士师资'
+        },
+        {
+          tit: '精英辈出',
+          desc: '-美国前总统，诺贝尔奖得主，世界500强CEO等'
+        }
+      ]
+    }
+  },
+  mounted() {
+    if (this.type === 1) {
+      this.form.project_id = '1006'
+    } else {
+      this.form.project_id = '1016'
+    }
+  },
+  computed: {
+    title() {
+      return this.type === 1 ? '在线读国际硕士，与在校生相同的学位' : '全球正规优选院校，可申请中留服认证'
+    },
+    projects() {
+      if (this.type === 1) {
+        return [
+          // { label: this.$t('aside.project4'), value: '1001' },
+          { label: this.$t('aside.project5'), value: '1006' },
+          { label: this.$t('aside.project6'), value: '1005' },
+          { label: '教育学硕士（家庭）MED', value: '1021' },
+          { label: this.$t('aside.project1'), value: '1012' },
+          { label: this.$t('aside.project3'), value: '1008' },
+          { label: '餐饮管理方向MBA', value: '1015' }
+        ]
+      } else {
+        return [
+          { label: '工商管理硕士1+1项目', value: '1016' },
+          { label: '管理信息系统硕士1+1项目', value: '9999' },
+          { label: '工商管理博士项目', value: '1017' },
+          { label: '金融硕士1+1项目', value: '1018' },
+          { label: '工程管理硕士1+1', value: '1020' }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleSubmit() {
+      if (!this.form.name) {
+        this.$notify('请输入您的姓名')
+        return
+      }
+      if (!this.form.phone || !/^1[3-9]\d{9}$/.test(this.form.phone)) {
+        this.$notify('请输入正确的手机号')
+        return
+      }
+      if (!this.form.project_id) {
+        this.$notify('请选择项目')
+        return
+      }
+      const params = { ...this.form }
+      if (params.project_id === '9999') {
+        params.project_id = '1016'
+      }
+      api
+        .submit(params)
+        .then(res => {
+          if (res && res.status === 200 && res.error === 0) {
+            this.$message.success('报名提交成功')
+          } else {
+            this.$message.error('报名提交失败')
+          }
+        })
+        .catch(() => {
+          this.$message.error('报名提交失败')
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.form-submit {
+  margin: 0.25rem 0.15rem 0 0.15rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/internationalDegree/apply_bg1.png) no-repeat
+    center top;
+  background-size: 100% 100%;
+  box-sizing: border-box;
+  h2 {
+    font-size: 0.18rem;
+    font-weight: 500;
+    color: #010101;
+    margin-top: 0.31rem;
+  }
+  .desc {
+    display: flex;
+    flex-direction: column;
+    font-size: 0.12rem;
+    color: #333333;
+    margin-top: 0.08rem;
+
+    span {
+      color: #a81840;
+      margin: 0 0.04rem;
+    }
+    p {
+      padding: 0 0.14rem 0 0.14rem;
+      white-space: nowrap;
+      color: #333333;
+      margin-top: 0.08rem;
+    }
+    ul {
+      display: flex;
+      padding: 0 0.09rem 0 0.12rem;
+      li {
+        padding-left: 0.12rem;
+        padding-right: 0.08rem;
+        background: url(https://webapp-pub.ezijing.com/www/pc/form/form_check_bg.png) no-repeat left center;
+        background-size: 0.11rem;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .desc2 {
+    // width: 1200px;
+    text-align: left;
+    padding-left: 0.2rem;
+    li {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      font-size: 0.12rem;
+      margin-top: 0.12rem;
+      img {
+        width: 0.11rem;
+        height: 0.11rem;
+      }
+      h4 {
+        color: #333333;
+        white-space: nowrap;
+        margin-left: 0.06rem;
+      }
+      p {
+        color: #666666;
+      }
+    }
+  }
+}
+.form {
+  padding: 0.34rem;
+  .form-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.15rem;
+    font-size: 0.12rem;
+    width: 2.9rem;
+    height: 0.35rem;
+  }
+  .form-input {
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.39);
+    border: 1px solid #dcdcdc;
+    padding-left: 0.1rem;
+    &::placeholder {
+      color: #7d7d7d;
+    }
+  }
+  .form-select {
+    position: relative;
+    padding: 0 10px;
+    width: 100%;
+    height: 100%;
+    background: url('https://webapp-pub.ezijing.com/www/h5/images/icon_arrows.png') no-repeat;
+    background-position: right 0.7em top 50%, 0 0;
+    background-size: 30px 30px;
+    box-sizing: border-box;
+    padding-left: 0.1rem;
+    border: 0.01rem solid #dcdcdc;
+    .option:nth-child(1) {
+      color: #7d7d7d;
+    }
+  }
+}
+
+.form-button {
+  padding: 0 0.1rem;
+  width: 100%;
+  height: 100%;
+  font-size: 0.12rem;
+  background-color: #aa1941 !important;
+  color: #fff;
+  box-sizing: border-box;
+  border: none;
+  cursor: pointer;
+}
+</style>

components/TeacherCard.vue

@@ -2,15 +2,12 @@
   <AppCard title="优秀师资">
     <swiper ref="mySwiper" :options="swiperOptions" class="teacher-list">
       <swiper-slide v-for="(item, index) in list" :key="index" class="teacher-item">
-        <div class="teacher-item-hd">
         <div class="teacher-item-hd-text">
-            <h3>{{ item.name }}</h3>
-            <h4>{{ item.project }}</h4>
-            <p>{{ item.title }}</p>
-          </div>
           <img :src="item.imgUrl" />
+          <div class="name">{{ item.name }}</div>
+          <div class="project">{{ item.project }}</div>
+          <div class="desc" v-html="item.desc"></div>
         </div>
-        <div class="teacher-item-bd" v-html="item.desc"></div>
       </swiper-slide>
     </swiper>
   </AppCard>
@@ -27,7 +24,7 @@ export default {
         autoplay: true,
         loop: true,
         slidesPerView: 'auto',
-        spaceBetween: 20
+        spaceBetween: 10
       }
     }
   }
@@ -39,58 +36,42 @@ export default {
   margin-bottom: 60px;
 }
 .teacher-item {
-  position: relative;
-  padding: 0.12rem;
-  width: 2.4rem;
-  height: 3.02rem;
-  background: #a81840;
+  padding: 0.12rem 0.1rem 0.23rem 0.1rem;
+  width: 1.68rem;
+  height: 3.4rem;
+  background: rgba(255, 255, 255, 0.39);
+  box-shadow: 0px 1px 11px rgba(0, 0, 0, 0.1);
   color: #fff;
   box-sizing: border-box;
 }
-.teacher-item-hd {
+
+.teacher-item-hd-text {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   img {
-    width: 1.28rem;
-    height: 1.28rem;
+    width: 1.48rem;
+    height: 1.65rem;
     object-fit: cover;
   }
-}
-.teacher-item-hd-text {
-  flex: 1;
-  overflow: hidden;
-  h3 {
-    font-size: 0.16rem;
-    font-weight: 500;
-    line-height: 0.16rem;
+  .name {
+    font-size: 0.14rem;
+    color: #000000;
+    margin-top: 0.13rem;
+    font-weight: bold;
   }
-  h4 {
-    position: relative;
-    margin-top: 0.1rem;
+  .project {
+    margin-top: 0.05rem;
     font-size: 0.12rem;
-    font-weight: 400;
-    line-height: 0.12rem;
-    &::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      bottom: -0.05rem;
-      width: 0.21rem;
-      height: 0.01rem;
-      background: rgba(255, 255, 255, 0.39);
-    }
+    color: #333333;
+    white-space: nowrap;
   }
-  p {
-    margin-top: 0.1rem;
-    font-size: 0.12rem;
+  .desc {
+    margin-top: 0.17rem;
+    font-size: 0.11rem;
     font-weight: 400;
-    line-height: 0.12rem;
+    color: #575964;
+    text-align: left;
   }
 }
-.teacher-item-bd {
-  margin-top: 0.15rem;
-  font-size: 0.12rem;
-  font-weight: 300;
-  line-height: 0.17rem;
-  color: #fff;
-}
 </style>

pages/internationalDegree/index.vue

 <template>
   <div>
-    <div class="banner">
+    <!-- <div class="banner">
       <img src="https://webapp-pub.ezijing.com/www/h5/internationalDegree/banner.jpg" />
-    </div>
+    </div> -->
     <div class="w1200">
-      <div class="why">
+      <!-- <div class="why">
         <h1 class="why-title">为什么选择紫荆的国际免联考在线学位课程？</h1>
         <div class="why-list">
           <div class="why-item" v-for="(item, index) in whyList" :key="index">
@@ -13,27 +13,35 @@
             <div class="why-content" v-html="item.desc"></div>
           </div>
         </div>
-      </div>
+      </div> -->
+      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
+        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
+          <img :src="item.web_img_uri" class="banner-img" />
+        </van-swipe-item>
+      </van-swipe>
+      <FormSubmit />
       <ProjectCard title="热门专业" :list="projectList"></ProjectCard>
-      <app-card title="常见问题">
-        <template #header-aside><nuxt-link to="/internationalDegree/qa">查看更多+</nuxt-link></template>
-        <ul class="qa-list">
-          <li v-for="(item, index) in qaList" :key="index">
-            <nuxt-link to="/internationalDegree/qa">
-              <div style="width:99%;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
-                {{ item.question }}
-              </div></nuxt-link
-            >
-          </li>
-        </ul>
-      </app-card>
-      <NewsCard baseUrl="/internationalDegree/news" :params="newsParams"></NewsCard>
-      <TeacherCard :list="teacherList"></TeacherCard>
       <app-card title="申请流程">
         <div class="process">
           <img src="https://webapp-pub.ezijing.com/www/h5/internationalDegree/process.png" />
         </div>
       </app-card>
+      <app-card title="报考指南">
+        <swiper ref="mySwiper" :options="swiperOptions">
+          <swiper-slide v-for="(item, index) in qaList" :key="index" class="qa-list2">
+            <div v-for="(it, index1) in item" :key="index1" class="item">
+              <div class="tit">Q：{{ it.question }}</div>
+              <p>{{ it.answer }}</p>
+              <div class="line"></div>
+            </div>
+          </swiper-slide>
+        </swiper>
+      </app-card>
+      <TeacherCard :list="teacherList"></TeacherCard>
+
+      <NewsCard baseUrl="/internationalDegree/news" :params="newsParams"></NewsCard>
+
+      <FormSubmit />
     </div>
   </div>
 </template>
@@ -41,6 +49,7 @@
 <script>
 import AppCard from '@/components/Card.vue'
 import ProjectCard from '@/components/ProjectCard.vue'
+import FormSubmit from '@/components/FormSubmit.vue'
 import NewsCard from '@/components/NewsCard.vue'
 import TeacherCard from '@/components/TeacherCard.vue'
 import qaList from '@/assets/internationalDegreeQA.js'
@@ -63,9 +72,21 @@ export default {
       }
     ]
   },
-  components: { AppCard, ProjectCard, NewsCard, TeacherCard },
+  components: { AppCard, FormSubmit, ProjectCard, NewsCard, TeacherCard },
   data() {
     return {
+      swiperOptions: {
+        autoplay: true,
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 16
+      },
+      bannerList: [
+        { web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner1.jpg' },
+        { web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner2.jpg' },
+        { web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner3.jpg' },
+        { web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner4.jpg' }
+      ],
       whyList: [
         {
           icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_01.png',
@@ -100,29 +121,26 @@ export default {
       ],
       // 热门专业
       projectList: [
-        {
-          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/internationalDegree/project_kelley.png',
-          href: 'https://kelley.ezijing.com/'
-        },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/h5/internationalDegree/project_ciis.png',
-          href: 'https://ciis.ezijing.com/'
+          href: 'http://pages.ezijing.com/ciis/mobile-204001490929.html?channel_num=29758'
         },
+
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/h5/internationalDegree/project_cuw.png',
-          href: 'https://cuw.ezijing.com/'
+          href: 'https://pages.ezijing.com/cuw/20220804.html?channel_num=29758'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/h5/internationalDegree/project_cu.png',
-          href: 'https://cu.ezijing.com/'
+          href: 'https://pages.ezijing.com/campbellsville/mobile-204001490804.html?channel_num=29758'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/h5/internationalDegree/project_marywood.png',
-          href: 'https://marywood.ezijing.com/'
+          href: 'https://pages.ezijing.com/marywood/m204001490514.html?channel_num=29759'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/h5/internationalDegree/project_shms.png',
-          href: 'https://shms.ezijing.com/'
+          href: 'https://pages.ezijing.com/seg/mobile202107190928.html?channel_num=29759'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/h5/internationalDegree/project_caas.png',
@@ -149,68 +167,58 @@ export default {
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_01.jpg',
           name: 'Glenn Hartelius',
-          project: '师资-CIIS',
+          project: '师资-CIIS | 博士',
           title: '博士',
-          desc:
-            '《国际整合与后人本主义心理学专业手册》编纂人<br/>《国际整合与后人本主义心理学》专业学术期刊主编<br/>2019年复旦大学中国首届整合心理学大会开幕致辞嘉宾'
+          desc: '《国际整合与后人本主义心理学专业手册》编纂人<br/>《国际整合与后人本主义心理学》专业学术期刊主编'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_02.jpg',
           name: '钟思嘉',
-          project: '师资-CIIS',
+          project: '师资-CIIS | 教授',
           title: '教授',
-          desc:
-            '美国俄勒冈大学哲学博士（教育心理学与咨询心理学）<br/>现任浙江师范大学教师教育学院特聘专家<br/>曾任台湾政治大学心理系教授、博士生导师，心理系主任、理学院院长台湾辅导与咨询学会理事长、心理学会理事'
+          desc: '美国俄勒冈大学哲学博士（教育心理学与咨询心理学）<br/>现任浙江师范大学教师教育学院特聘专家'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_03.jpg',
           name: 'Sharon Hundley,Ed.D.',
-          project: '师资-CU',
-          title: '副教授',
+          project: '师资-CU | 副教授',
           desc: '康博斯威尔大学教育学院早期儿童教育项目主任<br/>AMI认证3-6岁主教<br/>AMS授证导师'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_04.jpg',
           name: '胡晓毅',
-          project: '师资-CU',
-          title: '教授',
-          desc:
-            '北京师范大学教育学部教授、硕士生导师<br/>美国堪萨斯大学特殊教育系博士北京师范大学教育学部孤独症儿童教育研究中心主任'
+          project: '师资-CU | 教授',
+          desc: '北京师范大学教育学部教授、硕士生导师<br/>美国堪萨斯大学特殊教育系博士'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_05.jpg',
           name: 'Ash Soni',
-          project: '师资-KELLEY',
-          title: '教授',
+          project: '师资-KELLEY | 教授',
           desc: '印第安纳大学工商管理博士<br/>KELLEY商学院副院长、教授'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_06.jpg',
           name: '肇越',
-          project: '师资-KELLEY',
-          title: '博士',
+          project: '师资-KELLEY | 博士',
           desc:
             '清华五道口经济学博士<br/>清华大学五道口金融学院业界导师、经济学家兼研究院院长<br/>香港致富证券有限公司首席'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_07.jpg',
           name: 'Chris Speicher',
-          project: '师资-MARYWOOD',
-          title: '副教授',
+          project: '师资-MARYWOOD | 副教授',
           desc: '天普大学博士副教授'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_08.jpg',
           name: '张恩忠',
-          project: '师资-MARYWOOD',
-          title: '副教授',
+          project: '师资-MARYWOOD | 副教授',
           desc: '美国普渡大学博士<br/>中国人民大学教授、博士生导师'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_09.jpg',
           name: 'Andrea Leuenberger',
-          project: '师资-SHMS',
-          title: '项目主管',
+          project: '师资-SHMS | 项目主管',
           desc:
             '擅长于牧学领域的学习设计<br/>曾在纽约奢华酒店Swiss atel The Drake和莫斯科、中亚地区等多家奢华酒店担任运营总监和高管'
         }

pages/studyAbroad/index.vue

 <template>
   <div>
-    <div class="banner">
+    <!-- <div class="banner">
       <img src="https://webapp-pub.ezijing.com/www/h5/studyAbroad/banner.jpg" />
-    </div>
+    </div> -->
     <div class="w1200">
-      <div class="why">
+      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
+        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
+          <img :src="item.web_img_uri" class="banner-img" />
+        </van-swipe-item>
+      </van-swipe>
+      <!-- <div class="why">
         <h1 class="why-title">为什么选择紫荆教育的国际留学课程？</h1>
         <div class="why-list">
           <div class="why-item" v-for="(item, index) in whyList" :key="index">
@@ -13,33 +18,36 @@
             <div class="why-content" v-html="item.desc"></div>
           </div>
         </div>
-      </div>
+      </div> -->
+      <FormSubmit :type="2" />
+
       <ProjectCard title="热门专业" :list="projectList"></ProjectCard>
-      <app-card title="常见问题">
-        <template #header-aside><nuxt-link to="/studyAbroad/qa">查看更多+</nuxt-link></template>
-        <ul class="qa-list">
-          <li v-for="(item, index) in qaList" :key="index">
-            <nuxt-link to="/studyAbroad/qa">
-              <div style="width:99%;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
-                {{ item.question }}
-              </div></nuxt-link
-            >
-          </li>
-        </ul>
-      </app-card>
-      <NewsCard baseUrl="/studyAbroad/news" :params="newsParams"></NewsCard>
-      <TeacherCard :list="teacherList"></TeacherCard>
       <app-card title="申请流程">
         <div class="process">
           <img src="https://webapp-pub.ezijing.com/www/h5/studyAbroad/process.png" />
         </div>
       </app-card>
+      <app-card title="报考指南">
+        <swiper ref="mySwiper" :options="swiperOptions">
+          <swiper-slide v-for="(item, index) in qaList" :key="index" class="qa-list2">
+            <div v-for="(it, index1) in item" :key="index1" class="item">
+              <div class="tit">Q：{{ it.question }}</div>
+              <p>{{ it.answer }}</p>
+              <div class="line"></div>
+            </div>
+          </swiper-slide>
+        </swiper>
+      </app-card>
+      <TeacherCard :list="teacherList"></TeacherCard>
+      <NewsCard baseUrl="/studyAbroad/news" :params="newsParams"></NewsCard>
     </div>
   </div>
 </template>
 
 <script>
 import AppCard from '@/components/Card.vue'
+import FormSubmit from '@/components/FormSubmit.vue'
+
 import ProjectCard from '@/components/ProjectCard.vue'
 import NewsCard from '@/components/NewsCard.vue'
 import TeacherCard from '@/components/TeacherCard.vue'
@@ -62,9 +70,21 @@ export default {
       }
     ]
   },
-  components: { AppCard, ProjectCard, NewsCard, TeacherCard },
+  components: { AppCard, FormSubmit, ProjectCard, NewsCard, TeacherCard },
   data() {
     return {
+      swiperOptions: {
+        autoplay: true,
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 16
+      },
+      bannerList: [
+        { web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner4.png' },
+        { web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner2.png' },
+        { web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner1.png' },
+        { web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner3.png' }
+      ],
       whyList: [
         {
           icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_01.png',
@@ -101,28 +121,29 @@ export default {
       projectList: [
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_cbu.png',
-          href: 'https://cbu-plus.ezijing.com/'
+          href: 'https://pages.ezijing.com/cbu-plus/20220725.html?channel_num=29758'
         },
         {
-          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_marywood_plus_1.png',
-          href: 'https://marywood-plus.ezijing.com/'
+          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_sbu.png',
+          href: 'https://pages.ezijing.com/sbu-plus/20220725.html?channel_num=29758'
         },
         {
-          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_sbu.png',
-          href: 'https://sbu-plus.ezijing.com/'
+          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_sit.png',
+          href: 'https://pages.ezijing.com/sit-plus/20220801.html?channel_num=29758'
         },
         {
-          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_ucr.png',
-          onClick: this.showMessage
-          // href: 'https://cbu-plus.ezijing.com/'
+          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_marywood_plus_1.png',
+          href: 'https://pages.ezijing.com/marywood/20220729.html?channel_num=29758'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_marywood_plus_2.png',
-          href: 'https://marywood-plus.ezijing.com/'
+          href: 'https://pages.ezijing.com/marywood/20220729.html?channel_num=29758'
         },
+
         {
-          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_sit.png',
-          href: 'https://sit-plus.ezijing.com/'
+          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_ucr.png',
+          onClick: this.showMessage
+          // href: 'https://cbu-plus.ezijing.com/'
         }
       ],
       // 常见问题
@@ -137,49 +158,51 @@ export default {
       teacherList: [
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_01.jpg',
-          name: 'Yair Tauman',
-          project: '师资-SBU',
-          title: '教授',
-          desc:
-            '纽约石溪大学经济学系首席教授<br/>曾任斯坦福大学、伦敦政经客座教授<br/>以色列耶路撒冷希伯来大学 数学博士<br/>导师：罗伯特·奥曼（诺贝尔经济学奖得主，美国科学院院士、艺术与科学学院外籍院士，英国社科院通讯院士）'
+          name: 'Tim Gramling',
+          project: '师资-CBU | 院长',
+          desc: '加州浸会大学商学院院长 <br/>美国东北大学法律与公共政策博士 <br/>哈佛大学计算机科学学士'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_02.jpg',
-          name: 'Danling Jiang',
-          project: '师资-SBU',
-          title: '副院长',
-          desc:
-            '石溪大学商学院副院长分管研究与教师发展工作<br/>石溪大学创业金融中心联合主任<br/>石溪大学区块链商业实验室主任<br/>石溪大学交易与投资实验室主任<br/>石溪大学商学院金融学教授<br/>俄亥俄州立大学金融学博士'
+          name: 'Dmytro Holod',
+          project: '师资－SBU | 副院长',
+          desc: '石溪大学商学院副院长 <br/>肯塔基大学博士'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_03.jpg',
-          name: 'Dmytro Holod',
-          project: '师资-SBU',
-          title: '副院长',
-          desc:
-            '石溪大学商学院副院长<br/>肯塔基大学博士<br/>Holod 博士在众多学术和实践会议上展示了他的研究成果，他的研究成果发表在金融和经济学期刊上，包括《货币、信贷和银行杂志》、《银行和金融杂志》和《金融管理》'
+          name: 'Danling Jiang',
+          project: '师资－SBU | 副院长',
+          desc: '石溪大学商学院金融学教授<br/>俄亥俄州立大学金融学博士'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_04.jpg',
-          name: 'Michael Alan Bernstan',
-          project: '师资-SBU',
-          title: '副校长',
-          desc:
-            '石溪大学教务长兼学术事务高级副校长<br/>美国大学学者协会杰出成员<br/>耶鲁大学经济学博士<br/>美国国家人文中心的安德鲁梅隆研究员、经济史协会论文奖竞赛联合召集人、美国学术协会美国研究项目学术咨询委员会成员，经济史杂志编辑委员会成员'
+          name: 'Yehia Massoud',
+          project: '师资-SIT | 院长',
+          desc: '教授、学院院长<br/>IEEE电气与电子工程师协会院士<br/>麻省理工学院博士'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_05.jpg',
-          name: 'Gokhan Torna',
-          project: '师资-SBU',
-          title: '副教授',
-          desc: '石溪大学金融副教授<br/>堪萨斯大学商学院金融学博士（以优异成绩）'
+          name: 'Kathryn Abel',
+          project: '师资-SIT | 副教授',
+          desc: '史蒂文斯理工学院博士'
         },
         {
           imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_06.jpg',
-          name: 'Sandro Brusco',
-          project: '师资-SBU',
-          title: '教授',
-          desc: '石溪大学经济系和商学院的经济学教授<br/>斯坦福大学商学院经济分析与政策博士'
+          name: 'Steven Hoffenson',
+          project: '师资-SIT | 讲师',
+          desc: '密歇根大学博士'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_07.jpg',
+          name: 'Young Shin Kim',
+          project: '师资－SBU | 副教授',
+          desc: '石溪大学金融副教授<br/>Sogang大学博士'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_08.jpg',
+          name: 'Gokhan Torna',
+          project: '师资－SBU | 副教授',
+          desc: '石溪大学金融副教授<br/>堪萨斯大学商学院金融学博士'
         }
       ]
     }