feat: 新增终身学习

assets/css/studyAbroad.scss

@@ -62,23 +62,6 @@
     }
   }
 }
-.project-list {
-  padding-bottom: 70px;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  row-gap: 20px;
-  column-gap: 20px;
-}
-.project-item {
-  background-color: #fff;
-  img {
-    width: 100%;
-  }
-  &:hover {
-    box-shadow: 0px 1px 24px rgba(0, 0, 0, 0.11);
-  }
-}
-
 .qa-list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);

components/Head.vue

@@ -410,6 +410,11 @@ export default {
               name: this.$t('menu.alumniChild.alumniStory'),
               isShow: false,
               path: '/alumnus/story'
+            },
+            {
+              name: '终身学习',
+              isShow: false,
+              path: '/roadmap'
             }
           ]
         }

components/ProjectCard.vue

+<template>
+  <AppCard :title="title">
+    <template #header-aside><nuxt-link :to="baseUrl" v-if="baseUrl">查看更多+</nuxt-link></template>
+    <div class="project-list">
+      <div class="project-item" v-for="(item, index) in list" :key="index">
+        <AppLink :data="item"><img :src="item.imgUrl"/></AppLink>
+      </div>
+    </div>
+  </AppCard>
+</template>
+<script>
+import AppCard from '@/components/AppCard.vue'
+import AppLink from '@/components/Link.vue'
+
+export default {
+  name: 'ProjectCard',
+  props: { list: { type: Array, default: () => [] }, title: String, baseUrl: String },
+  components: { AppCard, AppLink },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss">
+.project-list {
+  padding-bottom: 70px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  row-gap: 20px;
+  column-gap: 20px;
+}
+.project-item {
+  background-color: #fff;
+  img {
+    width: 100%;
+  }
+  &:hover {
+    box-shadow: 0px 1px 24px rgba(0, 0, 0, 0.11);
+  }
+}
+</style>

pages/internationalDegree/index.vue

@@ -14,13 +14,7 @@
           </div>
         </div>
       </div>
-      <app-card title="热门专业">
-        <div class="project-list">
-          <div class="project-item" v-for="(item, index) in projectList" :key="index">
-            <AppLink :data="item"><img :src="item.imgUrl"/></AppLink>
-          </div>
-        </div>
-      </app-card>
+      <ProjectCard title="热门专业" :list="projectList"></ProjectCard>
       <app-card title="常见问题">
         <template #header-aside><nuxt-link to="/internationalDegree/qa">查看更多+</nuxt-link></template>
         <ul class="qa-list">
@@ -42,13 +36,13 @@
 
 <script>
 import AppCard from '@/components/AppCard.vue'
-import AppLink from '@/components/Link.vue'
+import ProjectCard from '@/components/ProjectCard.vue'
 import NewsCard from '@/components/NewsCard.vue'
 import TeacherCard from '@/components/TeacherCard.vue'
 import qaList from '@/assets/internationalDegreeQA.js'
 
 export default {
-  components: { AppCard, AppLink, NewsCard, TeacherCard },
+  components: { AppCard, ProjectCard, NewsCard, TeacherCard },
   data() {
     return {
       whyList: [

pages/roadmap/index.vue

+<template>
+  <div>
+    <div class="banner"></div>
+    <div class="w1200">
+      <ProjectCard
+        title="在线国际学位"
+        :list="internationalDegreeProjectList"
+        baseUrl="/internationalDegree"
+      ></ProjectCard>
+      <ProjectCard title="留学中学" :list="studyAbroadProjectList" baseUrl="/studyAbroad"></ProjectCard>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProjectCard from '@/components/ProjectCard.vue'
+
+export default {
+  components: { ProjectCard },
+  data() {
+    return {
+      // 热门专业
+      internationalDegreeProjectList: [
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_kelley.png',
+          href: 'https://kelley.ezijing.com/'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_ciis.png',
+          href: 'https://ciis.ezijing.com/'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_marywood.png',
+          href: 'https://marywood.ezijing.com/'
+        }
+      ],
+      // 热门专业
+      studyAbroadProjectList: [
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_cbu.png',
+          href: 'https://cbu-plus.ezijing.com/'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_marywood_plus_1.png',
+          href: 'https://marywood-plus.ezijing.com/'
+        },
+        {
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_sbu.png',
+          href: 'https://sbu-plus.ezijing.com/'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.w1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+</style>

pages/studyAbroad/index.vue

@@ -14,13 +14,7 @@
           </div>
         </div>
       </div>
-      <app-card title="热门专业">
-        <div class="project-list">
-          <div class="project-item" v-for="(item, index) in projectList" :key="index">
-            <AppLink :data="item"><img :src="item.imgUrl"/></AppLink>
-          </div>
-        </div>
-      </app-card>
+      <ProjectCard title="热门专业" :list="projectList"></ProjectCard>
       <app-card title="常见问题">
         <template #header-aside><nuxt-link to="/studyAbroad/qa">查看更多+</nuxt-link></template>
         <ul class="qa-list">
@@ -42,13 +36,13 @@
 
 <script>
 import AppCard from '@/components/AppCard.vue'
-import AppLink from '@/components/Link.vue'
+import ProjectCard from '@/components/ProjectCard.vue'
 import NewsCard from '@/components/NewsCard.vue'
 import TeacherCard from '@/components/TeacherCard.vue'
 import qaList from '@/assets/studyAbroadQA.js'
 
 export default {
-  components: { AppCard, AppLink, NewsCard, TeacherCard },
+  components: { AppCard, ProjectCard, NewsCard, TeacherCard },
   data() {
     return {
       whyList: [