178 lines
4.9 KiB
HTML
178 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link href="lib/css/reset-basic.css" rel="stylesheet">
|
|
<link href="lib/css/elem-ui.css" rel="stylesheet">
|
|
<link href="css/common.css" rel="stylesheet">
|
|
<link href="css/app.css" rel="stylesheet">
|
|
<link href="css/modules.css" rel="stylesheet">
|
|
<script>window.LIBS_BASE_URL = location.origin + '/lib';</script>
|
|
<script type="module" src="js/app.js"></script>
|
|
</head>
|
|
<body class="do-fn-noselect" anot="app" :css="{'background-image': coverBG}">
|
|
|
|
<div id="app" :class="{blur: isPlaying && !ktvMode, ktv: ktvMode}">
|
|
|
|
<div class="title-bar do-fn-drag">
|
|
|
|
<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"></i>
|
|
</nav>
|
|
|
|
|
|
<!-- 背景点位标签 -->
|
|
<div class="holder"></div>
|
|
<div class="tools do-fn-drag">
|
|
<div class="search do-fn-nodrag">
|
|
<input
|
|
class="do-ui-input"
|
|
placeholder="搜索 音乐/歌手/专辑"
|
|
:keyup="searchMusic"
|
|
:duplex="searchTxt">
|
|
<i class="icon do-icon-search"></i>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<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 :click="change2mini"><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 disabled"></i>
|
|
<i class="item do-icon-close quit" :click="quit(false)"></i>
|
|
</span>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="main-body">
|
|
|
|
<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>
|
|
|
|
<dl class="music-box do-fn-nodrag">
|
|
<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"
|
|
:include="'/views/ktv.htm'"
|
|
:css="{'background-image': coverBG}">
|
|
</div>
|
|
|
|
|
|
|
|
<div class="contrl-bar">
|
|
|
|
<div class="play-box" :click="handleCtrl">
|
|
<span class="item prev s-icon-prev" data-key="prev"></span>
|
|
<span
|
|
class="item play"
|
|
data-key="play"
|
|
:class="{'s-icon-play': !isPlaying, 's-icon-pause': isPlaying}">
|
|
</span>
|
|
<span class="item next s-icon-next" data-key="next"></span>
|
|
</div>
|
|
|
|
<div class="stat-box">
|
|
<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>
|
|
<section class="ctrl volume">
|
|
<i
|
|
:class="{
|
|
'do-icon-unmute' : volume > 0 && !muted,
|
|
'do-icon-mute' : volume === 0 || muted
|
|
}">
|
|
</i>
|
|
<span
|
|
class="volume-ctrl"
|
|
:click="changeValume">
|
|
<em :css="{flex: '0 ' + volume + '%'}"></em>
|
|
</span>
|
|
</section>
|
|
<span class="ctrl s-icon-eq"></span>
|
|
<span class="ctrl lrc" :click="toggleDesktopLrc">词</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="loading" :if="loading">
|
|
<div class="box">
|
|
<i></i><i></i><i></i><i></i><i></i>
|
|
<span></span>
|
|
<span></span>
|
|
<cite>{{progress}}%</cite>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |
JavaScript
60.1%
SCSS
19.2%
HTML
16.9%
CSS
3.8%