<template>
  <div class="article-item-header">
    <div class="avatar">
      <WidgetAvatar class="widget-avatar" :src="data.avatar" :width="70" :height="70"></WidgetAvatar>
      <span class="name">{{data.name}}</span>
    </div>
    <div class="opts">
      <WidgetFollow v-bind="data"></WidgetFollow>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArticleAuthor',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
  .article-item-header {
    display: flex;
    border-bottom: 4px solid #f0f0f0;
  }

  .avatar {
    display: flex;
    align-items: center;
    padding: 16px 30px;
    width: 400px;
    height: 100px;
    overflow: hidden;
    background-color: #fff;

    .name {
      font-size: 24px;
      margin-left: 20px;
    }

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

  .opts {
    flex: 1;
    padding-right: 30px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
</style>