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>