smsb-web-develop/src/components/card/MediaCard/index.vue

<template>
  <div
    class="o-media-card u-pointer"
    @click="onClick"
    @dblclick="onDblclick"
  >
    <auto-image
      class="o-media-card__image"
      :placeholder="source.icon"
      :src="source.thumb"
    />
    <auto-text
      class="o-media-card__name"
      :text="source.name"
    />
    <slot />
  </div>
</template>

<script>
export default {
  name: 'MediaCard',
  props: {
    source: {
      type: Object,
      required: true
    }
  },
  methods: {
    onClick () {
      this.$emit('click', this.source)
    },
    onDblclick () {
      this.$emit('dblclick', this.source)
    }
  }
}
</script>

<style lang="scss" scoped>
.o-media-card {
  display: inline-block;
  position: relative;
  padding-top: 56.25%;
  color: $info;
  background-color: rgba(0, 0, 0, 0.8);

  &__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 6px;
    font-size: 14px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
  }

  &__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 20px;
  }
}
</style>