<div class="player player-sm">
<div class="head">
<div data-action="home" class="bg logo"></div>
</div>
<div id="sm-mid" class="mid">
<h3><div id="title"><span class="sub"></span></div></h3>
<div id="bar" class="bar">
<div class="played j-flag" style="width:0;"><span class="bg thumb j-flag"></span></div>
</div>
</div>
<div class="right">
<div id="play" class="bg play-sm" data-action="play"></div>
<div id="pause" class="bg pause-sm f-hide" data-action="pause"></div>
<div id="loading" class="loading f-hide"></div>
</div>
</div>
<div class="player player-mid f-cb f-pr">
<div class="cover cover-sm f-pr">
<img id="cover" src="//s4.music.126.net/style/web2/img/default/default_list.jpg?param=66y66"/>
<div class="mask"></div>
<div id="play" class="bg play-bg" data-action="play"></div>
<div id="pause" class="bg pause-bg f-hide" data-action="pause"></div>
</div>
<div id="mid-ctrl" class="ctrlBox">
<h2 class="f-pr"><i data-action="home" class="bg logo"></i><div id="title" class="title"></div></h2>
<div id="bar" class="bar">
<div class="played j-flag"><span class="bg thumb j-flag"></span></div>
</div>
</div>
<span id="time" class="time">- 00:00</span>
</div>
<div class="player">
<div class="f-cb">
<div class="cover">
<img id="cover" src="//s4.music.126.net/style/web2/img/default/default_list.jpg?param=90y90"/>
</div>
<div id="ctrl-box" class="ctrlBox">
<h2 class="f-pr"><i data-action="home" class="bg logo"></i><div id="title" class="title"></div></h2>
<div id="bar" class="bar">
<div class="played j-flag" style="width:0px;"><span class="bg thumb j-flag"></span></div>
</div>
<div class="oprBox">
<div id="time" class="time">- 0:00</div>
<div class="btnGroup f-cb">
<div id="prev" class="bg prev" data-action="prev"></div>
<div id="pause" class="bg mid pause f-hide" data-action="pause"></div>
<div id="play" class="bg mid play" data-action="play"></div>
<div id="next" class="bg next" data-action="next"></div>
</div>
<div class="bg open z-dis" data-action="open"></div>
</div>
</div>
</div>
</div>
<div class="player">
<div class="f-cb">
<div class="cover">
<img id="cover" src="//s4.music.126.net/style/web2/img/default/default_list.jpg?param=90y90"/>
</div>
<div id="ctrl-box" class="ctrlBox">
<h2 class="f-pr"><i data-action="home" class="bg logo"></i><div id="title" class="title"></div></h2>
<div id="bar" class="bar">
<div class="played j-flag" style="width:0px;"><span class="bg thumb j-flag"></span></div>
</div>
<div class="oprBox">
<div id="time" class="time">- 0:00</div>
<div class="btnGroup f-cb">
<div id="prev" class="bg prev" data-action="prev"></div>
<div id="pause" class="bg mid pause f-hide" data-action="pause"></div>
<div id="play" class="bg mid play" data-action="play"></div>
<div id="next" class="bg next" data-action="next"></div>
</div>
<div class="bg open " data-action="open"></div>
</div>
</div>
</div>
<div id="list" class="list">
<div class="box">
<ul class="f-cb" id="list-box">
</ul>
<div class="track j-flag"><div class="scroll j-flag"></div></div>
</div>
<div data-action="home" class="foot">
<div class="bg logo"></div>
<div class="yyy">Netease Cloud Music</div>
<div class="slogan">Audio quality of the first CD of 43 million music library</div>
</div>
</div>
</div>
${title}
{if typeof(sub)!='undefined'}
<span class="sub"> - ${sub}</span>
{/if}
{list songs as s}
<li class="f-cb {if s_index%2==0}odd{/if}{if s_index==playIndex} z-sel{/if}" data-action="playByIndex" data-index="${s_index}">
<div class="cur"></div>
<div class="index">${s_index+1}</div>
<div class="name f-thide" title="${s.name}">${s.name}</div>
<div class="by f-thide">
{list s.artists as a}
${a.name}
{if a_index < s.artists.length-1}
/
{/if}
{/list}
</div>
</li>
{/list}