SEEC-Portal-Front/components/ColumnCard.vue

<template>
  <el-card class="column-card" @click.native="checkColumnDetail" shadow="hover" :body-style="bodyStyle">
    <img :src="picture" class="column-card__picture"/>
    <div class="column-card__header">
      <h4 class="column-card__title">{{title}}</h4>
    </div>
    <div class="column-card__description">{{description}}</div>
  </el-card>
</template>

<script>
export default {
  name: 'ColumnCard',
  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: {
    checkColumnDetail () {
      if (this.title !== 'JVM简要入门') {
        this.$message({
          showClose: true,
          message: '即将上线，敬请期待'
        })
      } else {
        this.$router.push('/pay')
      }
    }
  }

}
</script>

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