<script setup>
import { NAvatar } from 'naive-ui';

const props = defineProps({
  artists: Array,
})
</script>
<template>
  <table class="arList">
    <tr v-for="(ar) in artists" :key="ar.idx" @click="$router.push('/singer/'+ar.id)">
      <td class="img" >
        <NAvatar :size="60" :src="ar.picUrl" object-fit="cover"></NAvatar>
        <!-- <img :src="ar.picUrl" alt="歌手头像" width="100"> -->
      </td>
      <td class="content">
        <span class="name">{{ar.name}}</span> 
        <span class="alias">
          {{ar.alias.length > 0 ? '（' + ar.alias.join(' ') + '）' : ''}}
        </span>
        </td>
      <td class="others"></td>
    </tr>
  </table>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.arList{
  margin-top: 6px;
  border-spacing: 0;

  tr{
    cursor: pointer;

      .content{
    .name{
      padding: 6px;
    }
    .alias{
      font-size: 14px;
      color: #999;
    }
  }
  }

}


</style>