91 lines
3.2 KiB
HTML
91 lines
3.2 KiB
HTML
|
<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>
|