<template lang="pug">
.user
  .header
    img.avatar(:src="user.avatar" onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'")
    h1
      span.name {{ user.name }}
      span.admin(v-if="user.gid === 1")
        i.fas.fa-user-shield
  .content
    ModelBoxNone
    p 没有公开的资源..
    //p {{ user }}
</template>

<script>
export default {
  asyncData({ $axios, params }) {
    return $axios.get(`/api/user/${params.id}`).then((res) => {
      return { user: res.data };
    });
  },
};
</script>

<style lang="sass">
.user
  >.header
    background-color: rgba(0, 0, 0, .15)
    background-image: linear-gradient(45deg, #ccc 25%, transparent 0, transparent 75%, #ccc 0),linear-gradient(45deg, #ccc 25%, transparent 0, transparent 75%, #ccc 0)
    background-position: 0 0, 40px 40px
    background-size: 90px 60px
    height: 200px
    margin: 0
    padding: 4rem
    text-align: center
    .avatar
      height: 64px
      width: 64px
      border-radius: 50%
      background-color: #ffffff
      overflow: hidden
    .name
      color: #ffffff
    .admin
      margin: 0 .5rem
      font-size: 1.2rem
      color: #ffffff
      background: #ff9988
      border-radius: .25rem
      //padding: 0 .5rem
  >.content
    padding: 4rem
    text-align: center
</style>
