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">
      <div class="course-card__info">
        <div class="course-card__title">{{ title }}</div>
      </div>
      <p class="course-card__origin">{{ origin }}</p>
    </div>
    <div class="contentCenter">
      <div class="course-card__description">{{ description }}</div>
    </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',
        backgroundColor: '#F8F9FB'
      }
    }
  },
  methods: {
    checkCourseDetail () {
      const token = this.$store.state.token
      if (token === null) {
        this.$message({
          showClose: true,
          message: '请先登录',
          type: 'error'
        })
      } else {
        window.location.href = this.url
      }
    }
  }

}
</script>

<style lang="scss" scoped>
@import '~/assets/css/course-card.scss';

.contentCenter{
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 8px;
}
</style>