front/src/views/permission/components/mx-teacher-info.vue

<template>
  <el-card shadow="hover" class="relative">
    <div class="fx-row fx-bet-cen">
      <div class="fx-column fx-cen-cen">
        <el-image :src="avatar||defaultAvatar" class="icon80 rd40 mb10"></el-image>
        <slot name="extra"></slot>
      </div>
      <div class="fx-1 fx-column ml10" style="overflow-y: auto" :style="{height: contentHeight}">
        <div class="bold">{{ name }}</div>
        <div v-if="subjects" class="light f13 f-999 mt5" style="word-break: break-all">{{ subjects }}</div>
        <div v-if="classes" class="light f13 f-999 mt5" style="word-break: break-all">{{ classes }}</div>
      </div>
    </div>
    <div class="icon-wrap" v-if="selectMode">
      <i class="el-icon-success active" v-if="selected"></i>
      <!--<i class="el-icon-success" v-else></i>-->
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'mx-teacher-info',
  props: {
    selectMode: {
      type: Boolean,
      default: false
    },
    selected: {
      type: Boolean,
      default: false
    },
    avatar: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    subjects: {
      type: String,
      default: ''
    },
    classes: {
      type: String,
      default: ''
    },
    contentHeight: {
      type: String,
      default: '110px'
    }
  },
  data() {
    return {
      defaultAvatar: require('@/assets/images/teacher_avatar.png')
    }
  }
}
</script>

<style scoped>
.icon-wrap {
  position: absolute;
  right: 8px;
  cursor: pointer;
  top: 8px;
}

.active {
  color: #42b983;
}
</style>