<template>
  <div class="container">
    <WidgetAvatar :lazy="true" class="widget-avatar" :src="authorInfo.authorHeadIco" :width="70" :height="70"></WidgetAvatar>
    <span>{{authorInfo.authorName}}</span>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
import WidgetAvatar from '../../../components/widget-avatar';

const { mapGetters } = createNamespacedHelpers('article/articleDetail');

export default {
  name: 'articleAuthor',
  components: {
    WidgetAvatar
  },
  computed: {
    ...mapGetters(['authorInfo'])
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100px;
  padding-left: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;

  .widget-avatar {
    width: 70px;
    height: 70px;
  }

  span {
    margin-left: 20px;
    font-size: 24px;
    color: #222;
    letter-spacing: 0.05px;
  }
}
</style>