updates

assets/css/studyAbroad.scss

@@ -62,12 +62,6 @@
     }
   }
 }
-.project-item {
-  margin-top: 0.1rem;
-  img {
-    width: 100%;
-  }
-}
 
 .qa-list {
   li {

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/Card.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-item {
+  margin-top: 0.1rem;
+  img {
+    width: 100%;
+  }
+}
+</style>

nuxt.config.js

 let config = {}
 if (process.env.NODE_ENV === 'production') {
   config = {
-    server: { port: 2048, host: '0.0.0.0', timing: false }
+    server: { port: 2047, host: '0.0.0.0', timing: false }
   }
 }
 export default {

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/Card.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/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/Card.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: [