SEEC-Portal-Front/components/CourseCard.vue

<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>