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(){
        this.$message({
          showClose: true,
          message: '即将上线，敬请期待'
        });
      }
    }

  };
</script>

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