Blame view

apps/pages/article/components/detail/article-author.vue 1.63 KB
htoooth authored
1 2
<template>
  <div class="article-item-header">
TaoHuang authored
3
    <div class="avatar" @click="goAuthor">
htoooth authored
4 5
      <WidgetAvatar class="widget-avatar" :src="data.avatar" :width="70" :height="70"></WidgetAvatar>
      <span class="name">{{data.name}}</span>
TaoHuang authored
6
    </div>
htoooth authored
7
    <div class="opts">
陈峰 authored
8
      <WidgetFollow v-if="data.authorUid" v-bind="data"></WidgetFollow>
htoooth authored
9 10 11 12 13
    </div>
  </div>
</template>

<script>
TaoHuang authored
14 15 16

import YAS from 'utils/yas-constants';
htoooth authored
17 18 19 20 21 22 23 24
export default {
  name: 'ArticleAuthor',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
TaoHuang authored
25 26
    },
    posId: Number
htoooth authored
27 28
  },
  methods: {
TaoHuang authored
29 30 31 32 33 34 35 36
    goAuthor() {
      this.$router.push({
        name: 'author',
        params: {
          type: this.data.authorType,
          id: this.data.authorUid
        }
      });
TaoHuang authored
37 38

      this.reportClickAvatar();
TaoHuang authored
39 40 41 42
    },
    reportClickAvatar() {
      this.$store.dispatch('reportYas', {
        params: {
TaoHuang authored
43
          appop: YAS.eventName.avatar,
TaoHuang authored
44 45 46 47 48 49 50
          param: {
            AUTH_ID: this.data.authorUid,
            POS_ID: this.posId
          }
        }
      });
    }
htoooth authored
51 52 53 54 55 56 57 58
  }
};
</script>

<style lang="scss" scoped>
  .article-item-header {
    display: flex;
    border-bottom: 4px solid #f0f0f0;
TaoHuang authored
59
    height: 44PX;
htoooth authored
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
  }

  .avatar {
    display: flex;
    align-items: center;
    padding: 16px 30px;
    width: 400px;
    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>