music
/
chart.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>排行</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="js/chart.js"></script>
		<link rel="stylesheet" href="css/chart.css">
	</head>

	<body style="display:none">
		<div class="main">
			<div id="main-left">
				<div class="chart-list">
					<h3>云音乐特色榜</h3>
					<ul>
						<li v-for="(item,index) in chartlist1" :index="index" @click="choosed(item)">
							<a :class="[ item.choose?'choose':'','chart-item']" href="javascript:void(0)">
								<img :src="item.img">
								<p class="black chart-name">{{item.chartname}}</p>
								<p class="grey update-time">{{item.updatetime}}</p>
							</a>
						</li>
					</ul>
				</div>
				<div class="chart-list">
					<h3>全球媒体榜</h3>
					<ul>
						<li v-for="(item,index) in chartlist2" :index="index" @click="choosed(item)">
							<a :class="[ item.choose?'choose':'','chart-item']" href="javascript:void(0)">
								<img :src="item.img">
								<p class="black chart-name">{{item.chartname}}</p>
								<p class="grey update-time">{{item.updatetime}}</p>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div id="main-right">
				<div id="chart-header">
					<div class="img-wrap">
						<img src="img/chartimg1-1.jpg">
					</div>
					<div class="header-right">
						<h2>云音乐飙升榜</h2>
						<div class="clock-icon"></div>
						<span class="black">最近更新：06月05日 <span class="grey">（每周四更新）</span></span>
						<div class="button-list">
							<div class="play-add">
								<a class="play" href="javascript:void(0)">
									<span class="play1">
										<em class="play-icon"></em>
										播放
									</span>
								</a>
								<a class="add" href="javascript:void(0)"></a>
							</div>
							<a v-for="item in buttonlist" class="button" href="javascript:void(0)" :style="{backgroundPosition:item.bgpos} ">
								<i class="icon" ></i>
								<span class="black">{{item.txt}}</span>
							</a>
						</div>
					</div>
				</div>
				<div class="tital">
					<h2>歌曲列表</h2><span class='num bgrey'>100首歌</span><span class="playtimes bgrey">播放:<span class="red bold">789293322</span>次</span>
			    </div>
			    <table class="songs">
			    	<thead>
			    		<tr>
			    			<th></th>
			    			<th class="bgrey">标题</th>
			    			<th class="bgrey">时长</th>
			    			<th class="bgrey">歌手</th>
			    		</tr>
			    	</thead>
			    	<tbody>
			    		<tr v-for="(item,index) in songlist" :class='index<3?"top-3":""'>
			    			<td>
			    				<span class="rank">{{index+1}}</span>
			    				<span v-show='!item.hasOwnProperty("lastRank")' class="new_icon"></span>
			    				<span v-show='item.hasOwnProperty("lastRank")' :class='item.lastRank==index?"stay":(item.lastRank<index?"down":"up")'>{{Math.abs(item.lastRank-index)}}</span>
			    			</td>
			    			<td>
			    				<a v-show='index<3' class="cover" href="javascript:void(0)"><img :src='item.album.picUrl+"?param=50y50&quality=100"'></a>
			    				<div>
			    					<a class="play-icon" href="javascript:void(0)"></a>
			    					<a href="javascript:void(0)" class="black song-name">{{item.name}}</a>
			    					<a v-show='item.mvid>0' class="mv-icon" href="javascript:void(0)"></a>
			    				</div>
			    			</td>
			    			<td>
			    				<span class="bgrey long">{{parseInt(item.duration/60000)+(parseInt(item.duration%60000/1000)<10?':0':':')+parseInt(item.duration%60000/1000)}}</span>
			    				<div class="icon-list">
			    					<a class="add-icon" href="javascript:void(0)"></a>
			    					<a class="collect-icon" href="javascript:void(0)"></a>
			    					<a class="share-icon" href="javascript:void(0)"></a>
			    					<a class="download-icon" href="javascript:void(0)"></a>
			    				</div>
			    			</td>
			    			<td>
			    				<a href="javascript:void(0)" class="black">{{item.artists[0].name}}</a>
			    			</td>
			    		</tr>

			    	</tbody>
			    </table>

			</div>
		</div>
	</body>

</html>