sonist/views/artist.htm

<div class="do-mod-artist" anot="artist">

  <div class="filter-box" :click="search">
    <section class="item" data-key="hot" :class="{active: filter === 'hot'}">热门歌手</section>
    <section class="item" data-key="0,0" :class="{active: filter === '0,0'}">入驻音乐人</section>

    <span class="pipe"></span>

    <section class="item" data-key="1,1" :class="{active: filter === '1,1'}">华语男歌手</section>
    <section class="item" data-key="1,2" :class="{active: filter === '1,2'}">华语女歌手</section>
    <section class="item" data-key="1,3" :class="{active: filter === '1.3'}">华语组合</section>

    <span class="pipe"></span>

    <section class="item" data-key="6,1" :class="{active: filter === '6,1'}">韩国男歌手</section>
    <section class="item" data-key="6,2" :class="{active: filter === '6,2'}">韩国女歌手</section>
    <section class="item" data-key="6,3" :class="{active: filter === '6,3'}">韩国组合</section>

    <span class="pipe"></span>

    <section class="item" data-key="5,1" :class="{active: filter === '5,1'}">日本男歌手</section>
    <section class="item" data-key="5,2" :class="{active: filter === '5,2'}">日本女歌手</section>
    <section class="item" data-key="5,3" :class="{active: filter === '5,3'}">日本组合</section>

    <span class="pipe"></span>

    <section class="item" data-key="2,1" :class="{active: filter === '2,1'}">欧美男歌手</section>
    <section class="item" data-key="2,2" :class="{active: filter === '2,2'}">欧美女歌手</section>
    <section class="item" data-key="2,3" :class="{active: filter === '2,3'}">欧美组合</section>

    <span class="pipe"></span>

    <section class="item" data-key="4,0" :class="{active: filter === '4,0'}">其他歌手</section>

  </div>


  <ul class="list-box" :click="pickArtist">
    <li class="item" :for="it in list" :data="{artist: it.id, index: $index}">
      <img :attr="{src: it.avatar, alt: it.name}" />
      <summary>
        <strong :text="it.name"></strong>
        <p>粉丝数: {{it.fans}}</p>
      </summary>
    </li>
  </ul>

  <div 
    class="artist-box" 
    :if="display === 'artist'" 
    :css="{'background-image': 'url(' + artist.avatar + ')'}">
    <div class="content">
      <h3 class="name">
        <i class="s-icon-singer"></i>
        <a :click="toArtistListPage">歌手列表</a>
        <i class="do-icon-right"></i>
        <span :text="artist.name"></span>
      </h3>
      <cite class="desc">
        介绍: {{artist.info | truncate(50)}} <span :click="showArtistInfo">详细</span>
      </cite>

      <dl class="song-album">
        <dt class="tab">
          <span class="item active">单曲({{artist.songCount}})</span>
          <span class="item">专辑({{artist.albumCount}})</span>
          <span class="item disabled">MV({{artist.mvCount}})</span>
        </dt>
        <dd class="list">
          <table>
            <tbody>
              <tr :for="it in songList">
                <td :text="it.title"></td>
                <td :text="it.album"></td>
                <td class="ac" :text="it.duration | time"></td>
              </tr>
            </tbody>
          </table>
        </dd>
      </dl>
    </div>

  </div>


  <div class="album-box" :if="display === 'album'">

  </div>


</div>