frontend/src/components/Cards/CourseCard.vue

<template>
  <div class="course-card" title="点击修改课程详情" @click="handleClick">
    <div class="course-card-title">
      <c-icon theme="orange" :left="-2" :right="6" :size="18">book</c-icon>
      {{course.name || '暂无课程名称'}}
    </div>
    <show-transition-small>
      <div v-if="!hideBio"  class="course-card-bio">{{course.bio || '暂无课程简介'}}</div>
    </show-transition-small>
    <show-transition-small>
      <div v-if="!hideTeacher" class="course-card-teacher">教师：{{course.teacherName}}</div>
    </show-transition-small>
    <show-transition-small>
      <div v-if="!hideTime"  class="course-card-time">创建时间：{{createAt}}</div>
    </show-transition-small>
  </div>
</template>

<script>
import CIcon from '@/components/Basic/CIcon'
import ShowTransitionSmall from '@/animations/ShowTransitionSmall'
import momentFromNow from '@/utils/moment-from-now'

export default {
  components: { CIcon, ShowTransitionSmall },
  props: {
    clickHandler: {
      type: Function,
      default: () => {}
    },
    course: {
      type: Object
    },
    hideTeacher: {
      type: Boolean,
      default: false
    },
    hideBio: {
      type: Boolean,
      default: false
    },
    hideTime: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick () {
      this.clickHandler(this.course)
    }
  },
  computed: {
    createAt () {
      return momentFromNow(this.course.createAt)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/style/theme.scss';

.course-card {
  margin: 8px 0;
  padding: 8px 8px 8px 12px;
  // border-left: 4px solid $input-background-color;
  transition: .2s;
  cursor: pointer;
  border-radius: 12px;

  &:hover {
    background: $card-background;
    // border-left: 4px solid $theme-blue;
  }
}

.course-card-title {
  font-size: 16px;
  display: flex;
  align-items: center;
  position: relative;
  line-height: 1.8;
}

.course-card-bio {
  font-size: 14px;
  color: #6a7a8a;
}

.course-card-teacher {
  font-size: 14px;
  color: #8a9aaa;
  line-height: 1.8;
}

.course-card-time {
  font-size: 12px;
  color: #aabaca;
  line-height: 1.8;
}

.c-icon {
  transform: scale(1.3);
}
</style>