modify homepage

assets/css/course-card.scss

@@ -0,0 +1,39 @@
+.course-card{
+  cursor: pointer;
+  width: 360px;
+  height: 300px;
+  padding: 0;
+  border-radius: 5px;
+
+  &__picture{
+    width: 360px;
+    height: 180px;
+  }
+
+  &__header{
+    margin: 15px 20px;
+    display: flex;
+    justify-content: space-between;
+
+  }
+  &__title{
+    display: block;
+    color: $common-color;
+  }
+
+  &__origin{
+    display: block;
+    color: $sub-color;
+  }
+
+  &__description{
+    color: $note-color;
+    width: 100%;
+    padding: 5px 20px;
+    font-size: 13px;
+  }
+
+  .el-card__body{
+    padding: 0;
+  }
+}

assets/css/home.scss

@@ -23,3 +23,18 @@ a{
     margin: 20px 0 40px 0;
   }
 }
+
+.title{
+  width: 100%;
+  text-align: center;
+  //color: #409eff;
+  margin-top: 40px;
+}
+
+.course-list{
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: 30px 50px 60px 50px;
+}

components/CourseCard.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-card class="course-card" @click.native="checkCourseDetail" shadow="hover" :body-style="bodyStyle">
+    <img :src="picture" class="course-card__picture"/>
+    <div class="course-card__header">
+      <h4 class="course-card__title">{{title}}</h4>
+      <p class="course-card__origin">{{origin}}</p>
+    </div>
+    <div class="course-card__description">{{description}}</div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: "CourseCard",
+    props: {
+      title: {
+        type: String,
+        require: true,
+        default: "课程xxxxxxx"
+      },
+      origin: {
+        type: String,
+        require: true,
+        default:"课程提供者xxx"
+      },
+      picture: {
+        type: String,
+        require: true,
+        default: "/image/seec_logo.png"
+      },
+      url: {
+        type: String,
+        require: true,
+        default: "/"
+      },
+      description: {
+        type: String,
+        default: ""
+      }
+    },
+    data(){
+      return{
+        bodyStyle: {padding : '0'}
+      }
+    },
+    methods: {
+      checkCourseDetail(){
+        window.location.href = this.url;
+      }
+    }
+
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '~/assets/css/course-card.scss';
+</style>

pages/index.vue

@@ -18,16 +18,60 @@
         <!--一波精品课程正在内测中，敬请期待！-->
       <!--</div>-->
     <!--</div>-->
+
+    <img class="home-banner" src="/image/SEEC_banner3.png"/>
+    <h1 class="title">热门课程</h1>
+    <div class="course-list">
+      <course-card
+        v-for="(item,index) in courses"
+        v-bind:key="index"
+        :picture="item.picture"
+        :title="item.title"
+        :description="item.description"
+        :url="item.url"
+        :origin="item.origin"
+      >
+      </course-card>
+    </div>
   </div>
 </template>
 
 <script>
 import Logo from '~/components/Logo.vue'
+import courseCard from '~/components/courseCard'
 import { mapState } from 'vuex'
 
 export default {
   components: {
-    Logo
+    Logo,
+    courseCard
+  },
+  data() {
+    return {
+      courses: [
+        {
+          title: '基于Java的面向对象编程范式',
+          origin: '中国大学MOOC',
+          picture: '/image/java.png',
+          url: 'http://mooc.seecoder.cn',
+          description: '了解编程基本思想 养成编程基本习惯 理解面向对象思想'
+        },
+        {
+          title: '软件工程与计算I',
+          origin: '南京大学',
+          picture: '/image/SE1.png',
+          url: 'http://mooc.seecoder.cn',
+          description: '通过Scheme、Python和Java语言，让你分别体会函数式编程范式、结构化编程范式和面向对象编程范式'
+        },
+        {
+          title: '软件工程与计算II',
+          origin: '南京大学',
+          picture: '/image/SE2.png',
+          url: 'http://seec.seecoder.cn',
+          description: '基于DevOps培养团队开发中小规模软件系统的能力'
+        },
+      ]
+    }
   },
   mounted(){
     // this.$cookies.removeAll();