2018-12-26 23:58:24 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
2019-01-04 16:24:42 +08:00
|
|
|
<link href="lib/css/reset-basic.css" rel="stylesheet">
|
|
|
|
|
<link href="lib/css/elem-ui.css" rel="stylesheet">
|
2018-12-26 23:58:24 +08:00
|
|
|
<link href="css/app.css" rel="stylesheet">
|
|
|
|
|
<link href="css/modules.css" rel="stylesheet">
|
2019-01-04 16:24:42 +08:00
|
|
|
<script>window.LIBS_BASE_URL = location.origin + '/lib';window.__ENV_LANG__ = 'zh'</script>
|
2018-12-26 23:58:24 +08:00
|
|
|
<script type="module" src="js/app.js"></script>
|
|
|
|
|
</head>
|
2018-12-29 20:00:19 +08:00
|
|
|
<body class="do-fn-noselect" anot="app" :css="{'background-image': coverBG}">
|
2018-12-26 23:58:24 +08:00
|
|
|
|
2018-12-29 20:00:19 +08:00
|
|
|
<div class="do-mod-app" :class="{blur: isPlaying && !ktvMode, ktv: ktvMode}">
|
2018-12-26 23:58:24 +08:00
|
|
|
|
2018-12-29 20:00:19 +08:00
|
|
|
<div class="title-bar do-fn-drag">
|
2018-12-26 23:58:24 +08:00
|
|
|
|
2018-12-29 20:00:19 +08:00
|
|
|
<nav class="btn-box do-fn-nodrag" :if="theme === 1" :class="{focus: winFocus}">
|
|
|
|
|
<i class="item quit" :click="quit(false)"></i>
|
|
|
|
|
<i class="item min" :click="minimize"></i>
|
|
|
|
|
<i class="item max" :click="maximize"></i>
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 背景点位标签 -->
|
|
|
|
|
<div class="holder"></div>
|
|
|
|
|
<div class="tools do-fn-drag">
|
|
|
|
|
<div class="search do-fn-nodrag">
|
|
|
|
|
<input class="do-ui-input" placeholder="搜索 音乐/歌手/专辑" value="">
|
|
|
|
|
<i class="icon do-icon-search"></i>
|
2018-12-26 23:58:24 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2018-12-29 20:00:19 +08:00
|
|
|
|
|
|
|
|
<nav class="btn-box-win do-fn-nodrag">
|
|
|
|
|
<div class="opt">
|
|
|
|
|
<i class="do-icon-menu-right" :click="toggleOptBox"></i>
|
|
|
|
|
<section class="opt-list" :visible="optBoxShow">
|
|
|
|
|
<span><i class="do-icon-maximized"></i> 迷你模式</span>
|
|
|
|
|
<span :click="toggleModule('profile')">
|
|
|
|
|
<i class="do-icon-setting"></i> 首选项
|
|
|
|
|
</span>
|
|
|
|
|
<span class="pipe"></span>
|
|
|
|
|
<span :click="quit(true)"><i class="do-icon-logout"></i> 退出</span>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
<span :if="theme === 2">
|
|
|
|
|
<i class="item do-icon-minimize" :click="minimize"></i>
|
|
|
|
|
<i class="item do-icon-maximize" :click="maximize"></i>
|
|
|
|
|
<i class="item do-icon-close" :click="quit(false)"></i>
|
2018-12-26 23:58:24 +08:00
|
|
|
</span>
|
2018-12-29 20:00:19 +08:00
|
|
|
</nav>
|
|
|
|
|
</div>
|
2018-12-26 23:58:24 +08:00
|
|
|
|
2018-12-29 20:00:19 +08:00
|
|
|
|
2018-12-26 23:58:24 +08:00
|
|
|
|
2018-12-29 20:00:19 +08:00
|
|
|
<div class="main-body">
|
2018-12-26 23:58:24 +08:00
|
|
|
|
2018-12-29 20:00:19 +08:00
|
|
|
<aside class="sidebar do-fn-drag">
|
|
|
|
|
|
|
|
|
|
<div class="user-box">
|
|
|
|
|
<div class="avatar">
|
|
|
|
|
<img src="/images/avatar.jpg" alt="yutent">
|
|
|
|
|
</div>
|
|
|
|
|
<h2 class="uname">yutent</h2>
|
|
|
|
|
</div>
|
2018-12-26 23:58:24 +08:00
|
|
|
|
2018-12-29 20:00:19 +08:00
|
|
|
<dl class="music-box">
|
|
|
|
|
<dt class="title">酷狗在线</dt>
|
|
|
|
|
<dd class="item"
|
|
|
|
|
:click="toggleModule('rank')"
|
|
|
|
|
:class="{active: mod === 'rank'}">
|
|
|
|
|
<i class="s-icon-rank"></i> 排行榜
|
|
|
|
|
</dd>
|
|
|
|
|
<dd class="item"
|
|
|
|
|
:click="toggleModule('artist')"
|
|
|
|
|
:class="{active: mod === 'artist'}">
|
|
|
|
|
<i class="s-icon-singer"></i> 歌手
|
|
|
|
|
</dd>
|
|
|
|
|
<dd class="item disabled"
|
|
|
|
|
:click="toggleModule('mv')"
|
|
|
|
|
:class="{active: mod === 'mv'}">
|
|
|
|
|
<i class="s-icon-mv"></i> MV
|
|
|
|
|
</dd>
|
|
|
|
|
|
|
|
|
|
<dt class="title">我的音乐</dt>
|
|
|
|
|
<dd class="item"
|
|
|
|
|
:click="toggleModule('search')"
|
|
|
|
|
:class="{active: mod === 'search'}">
|
|
|
|
|
<i class="s-icon-heart"></i> 试听列表
|
|
|
|
|
</dd>
|
|
|
|
|
<dd class="item"
|
|
|
|
|
:click="toggleModule('local')"
|
|
|
|
|
:class="{active: mod === 'local'}">
|
|
|
|
|
<i class="s-icon-play-list"></i> 本地音乐
|
|
|
|
|
</dd>
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
</aside>
|
|
|
|
|
|
|
|
|
|
<content class="module" :include="views" data-cache="true"></content>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
class="ktv-box"
|
|
|
|
|
:if="ktvMode"
|
|
|
|
|
:css="{'background-image': coverBG}">
|
|
|
|
|
|
|
|
|
|
<div class="inner-content">
|
|
|
|
|
<div class="info">
|
|
|
|
|
<img :attr-src="curr.cover" />
|
2018-12-30 00:58:04 +08:00
|
|
|
<div class="summary">
|
|
|
|
|
<h3 :text="curr.title"></h3>
|
|
|
|
|
<section>歌手: {{curr.artist}}</section>
|
|
|
|
|
<section>专辑: {{curr.album}}</section>
|
|
|
|
|
<section>时长: {{curr.duration | time}}</section>
|
|
|
|
|
</div>
|
2018-12-29 20:00:19 +08:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="lrc-box">
|
2018-12-30 00:58:04 +08:00
|
|
|
<section class="left">
|
2019-01-04 19:28:03 +08:00
|
|
|
<span :text="lrc.l.txt" :css="{background: lrc.l.bg}"></span>
|
2018-12-30 00:58:04 +08:00
|
|
|
</section>
|
|
|
|
|
<section class="right">
|
2019-01-04 19:28:03 +08:00
|
|
|
<span :text="lrc.r.txt" :css="{background: lrc.r.bg}"></span>
|
2018-12-30 00:58:04 +08:00
|
|
|
</section>
|
2018-12-26 23:58:24 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-12-29 20:00:19 +08:00
|
|
|
</div>
|
2018-12-26 23:58:24 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2018-12-29 20:00:19 +08:00
|
|
|
<div class="contrl-bar">
|
2018-12-26 23:58:24 +08:00
|
|
|
|
2018-12-29 20:00:19 +08:00
|
|
|
<div class="play-box">
|
|
|
|
|
<span class="item prev s-icon-prev" :click="nextSong(-1)"></span>
|
|
|
|
|
<span
|
|
|
|
|
class="item play"
|
|
|
|
|
:class="{'s-icon-play': !isPlaying, 's-icon-pause': isPlaying}"
|
|
|
|
|
:click="play(null)">
|
|
|
|
|
</span>
|
|
|
|
|
<span class="item next s-icon-next" :click="nextSong(1)"></span>
|
|
|
|
|
</div>
|
2018-12-26 23:58:24 +08:00
|
|
|
|
2018-12-29 20:00:19 +08:00
|
|
|
<div class="stat-box">
|
2018-12-26 23:58:24 +08:00
|
|
|
<div class="song-stat">
|
|
|
|
|
<canvas ref="player"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
<span
|
|
|
|
|
class="ctrl"
|
|
|
|
|
:class="{
|
|
|
|
|
's-icon-all': playMode === 0,
|
|
|
|
|
's-icon-single': playMode === 1,
|
|
|
|
|
's-icon-random': playMode === 2
|
|
|
|
|
}"
|
|
|
|
|
:click="togglePlayMode">
|
|
|
|
|
</span>
|
2018-12-28 22:19:29 +08:00
|
|
|
<section class="ctrl volume">
|
|
|
|
|
<i
|
|
|
|
|
:class="{
|
|
|
|
|
'do-icon-unmute' : volume > 0,
|
|
|
|
|
'do-icon-mute' : volume === 0
|
|
|
|
|
}">
|
|
|
|
|
</i>
|
|
|
|
|
<span
|
|
|
|
|
class="volume-ctrl"
|
|
|
|
|
:click="changeValume">
|
|
|
|
|
<em :css="{flex: '0 ' + volume + '%'}"></em>
|
|
|
|
|
</span>
|
|
|
|
|
</section>
|
2018-12-26 23:58:24 +08:00
|
|
|
<span class="ctrl s-icon-eq"></span>
|
|
|
|
|
<span class="ctrl lrc">词</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
