Merge branch 'master' of github.com:yutent/sonist
宇天
commit
faed0b59b3
File diff suppressed because one or more lines are too long
|
|
@ -8,10 +8,10 @@
|
||||||
|
|
||||||
@import "./var.scss";
|
@import "./var.scss";
|
||||||
|
|
||||||
#app {position:relative;display:flex;flex-flow:column wrap;width:100%;height:100%;background:#fff;
|
#app {position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:linear-gradient(to bottom, #fff, nth($cp, 1));
|
||||||
|
|
||||||
// 标题栏样式
|
// 标题栏样式
|
||||||
.title-bar {position:relative;z-index:9;display:flex;flex:0 5rem;
|
.title-bar {position:relative;z-index:9;display:flex;height:5rem;
|
||||||
|
|
||||||
.btn-box {position:absolute;left:1.2rem;top:0;width:auto;height:3rem;padding:.9rem 0;
|
.btn-box {position:absolute;left:1.2rem;top:0;width:auto;height:3rem;padding:.9rem 0;
|
||||||
|
|
||||||
|
|
@ -54,13 +54,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// 工具栏
|
// 工具栏
|
||||||
.holder {flex:0 22rem;height:100%;background:nth($cp, 1);}
|
.holder {width:18rem;height:100%;}
|
||||||
|
|
||||||
.tools {flex:1;padding:1rem;
|
.tools {flex:1;padding:1rem;
|
||||||
|
|
||||||
.search {position:relative;display:inline-block;line-height:3rem;}
|
.search {display:flex;width:30rem;}
|
||||||
.icon {position:absolute;right:0;top:0;width:2.6rem;height:3rem;}
|
|
||||||
input {width:20rem;padding:0 1.3rem;border-radius:1.5rem;}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -69,12 +67,12 @@
|
||||||
.main-body {flex:1;display:flex;
|
.main-body {flex:1;display:flex;
|
||||||
|
|
||||||
// 侧边栏
|
// 侧边栏
|
||||||
.sidebar {flex:0 22rem;position:relative;height:100%;background:nth($cp, 1);
|
.sidebar {width:18rem;position:relative;height:100%;
|
||||||
|
|
||||||
// 用户信息
|
// 用户信息
|
||||||
.user-box {width:18rem;height:16.5rem;margin:0 2rem;text-align:center;
|
.user-box {width:14rem;height:16.5rem;margin:0 2rem;text-align:center;
|
||||||
|
|
||||||
.avatar {overflow:hidden;width:12rem;height:12rem;margin:0 3rem;border:.6rem solid #fff;border-radius:50%;box-shadow:0 .5rem 1.5rem rgba(0, 0, 0, .15);}
|
.avatar {overflow:hidden;width:10rem;height:10rem;margin:0 2rem;border:.5rem solid #fff;border-radius:50%;box-shadow:0 .5rem 1.5rem rgba(0, 0, 0, .15);}
|
||||||
img {width:100%;height:100%;}
|
img {width:100%;height:100%;}
|
||||||
.uname {line-height:2;font-weight:normal;}
|
.uname {line-height:2;font-weight:normal;}
|
||||||
}
|
}
|
||||||
|
|
@ -96,27 +94,40 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// 功能模块
|
// 功能模块
|
||||||
.module {position:relative;flex:1;display:flex;flex-flow:column wrap;}
|
.module {position:relative;flex:1;display:flex;flex-direction:column;}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.contrl-bar {position:relative;z-index:99;display:flex;flex:0 8rem;background:nth($cp, 1);
|
.contrl-bar {position:relative;z-index:99;display:flex;height:6.5rem;
|
||||||
|
|
||||||
// 播放控制按钮
|
// 播放控制按钮
|
||||||
.play-box {flex:0 22rem;display:flex;justify-content:center;align-items:center;height:8rem;padding:1rem 2rem;text-align:center;
|
.play-box {
|
||||||
|
display:flex;align-items:center;width:16rem;height:4.5rem;margin:1rem;padding:.5rem 1rem;border-radius:.75rem;background:#fff;box-shadow:0 .25rem 1rem rgba(0, 0, 0, .075);
|
||||||
|
|
||||||
.item {flex:0 5rem;margin:0 .5rem;line-height:1;font-size:4.2rem;color:nth($ct, 2);@include ts();
|
|
||||||
|
|
||||||
&:hover {color:nth($co, 1)}
|
.btn-bg {
|
||||||
&:active {color:nth($ct, 1);transform:scale(1.1)}
|
position:absolute;
|
||||||
|
left:3.25rem;
|
||||||
|
height: 3.5rem;
|
||||||
|
border-left: 3.25rem solid nth($cp, 1);
|
||||||
|
border-top: .25rem solid transparent;
|
||||||
|
border-bottom: .25rem solid transparent;
|
||||||
|
|
||||||
|
&::before {position:absolute;left:-5rem;top:-.25rem;width:3.5rem;height:3.5rem;border-radius:50%;background:nth($cp, 1);content:""}
|
||||||
|
&::after {position:absolute;right:-1.5rem;top:0;width:3rem;height:3rem;border-radius:50%;background:nth($cp, 1);content:""}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action {position:relative;display:flex;justify-content:center;align-items:center;
|
||||||
|
|
||||||
|
&.play {width:2.5rem;height:2.5rem;border-radius:50%;background:#fff;box-shadow:0 .25rem .5rem rgba(0, 0, 0, .2)}
|
||||||
|
&.next {width:2rem;height:2rem;margin-left:.75rem}
|
||||||
}
|
}
|
||||||
.play {font-size:5rem;}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 播放条
|
// 播放条
|
||||||
.stat-box {position:relative;flex:1;display:flex;justify-content:center;align-items:center;
|
.stat-box {position:relative;flex:1;display:flex;justify-content:center;align-items:center;
|
||||||
|
|
||||||
.song-stat {flex:1;height:8rem;margin:0 2rem 0 0;
|
.song-stat {flex:1;height:6.5rem;margin:0 2rem 0 0;
|
||||||
|
|
||||||
canvas {display:flex;width:100%;height:100%;}
|
canvas {display:flex;width:100%;height:100%;}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -7,33 +7,12 @@
|
||||||
|
|
||||||
@import "./var.scss";
|
@import "./var.scss";
|
||||||
|
|
||||||
@font-face {font-family: "sonist font";
|
|
||||||
src: url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff')
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^="s-icon-"], [class*=" s-icon-"] {display:inline-block;font-family:"sonist font" !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
|
|
||||||
|
|
||||||
.s-icon-all:before { content: "\e714"; }
|
|
||||||
.s-icon-eq:before { content: "\e715"; }
|
|
||||||
.s-icon-heart:before { content: "\e716"; }
|
|
||||||
.s-icon-music:before { content: "\e717"; }
|
|
||||||
.s-icon-play-list:before { content: "\e719"; }
|
|
||||||
.s-icon-mv:before { content: "\e71d"; }
|
|
||||||
.s-icon-rank:before { content: "\e71e"; }
|
|
||||||
.s-icon-singer:before { content: "\e71f"; }
|
|
||||||
.s-icon-random:before { content: "\e720"; }
|
|
||||||
.s-icon-radio:before { content: "\e721"; }
|
|
||||||
.s-icon-single:before { content: "\e722"; }
|
|
||||||
.s-icon-next:before { content: "\e723"; }
|
|
||||||
.s-icon-prev:before { content: "\e724"; }
|
|
||||||
.s-icon-pause:before { content: "\e725"; }
|
|
||||||
.s-icon-play:before { content: "\e726"; }
|
|
||||||
|
|
||||||
.do-fn-drag {-webkit-app-region:drag;user-select: none;}
|
.do-fn-drag {-webkit-app-region:drag;user-select: none;}
|
||||||
.do-fn-nodrag {-webkit-app-region:no-drag;}
|
.do-fn-nodrag {-webkit-app-region:no-drag;}
|
||||||
|
|
||||||
html {font-size:62.5%}
|
html {font-size:75%}
|
||||||
body {position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;background:#fff;font-size:1.4rem;color:nth($cd, 1);background-size:cover;background-repeat:no-repeat;}
|
body {position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;font-size:1.25rem;color:nth($cd, 1);}
|
||||||
|
|
||||||
table {overflow:auto;display:table;width:100%;line-height:2.5rem;
|
table {overflow:auto;display:table;width:100%;line-height:2.5rem;
|
||||||
thead tr {height:4.5rem;border-bottom:.1rem solid rgba(200, 200, 200, .15)}
|
thead tr {height:4.5rem;border-bottom:.1rem solid rgba(200, 200, 200, .15)}
|
||||||
|
|
@ -46,9 +25,3 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem;
|
||||||
.idx {color:nth($cp, 3);text-shadow:0 .1rem 0 rgba(255, 255, 255, 0.6)}
|
.idx {color:nth($cp, 3);text-shadow:0 .1rem 0 rgba(255, 255, 255, 0.6)}
|
||||||
.active {color:nth($ct, 1);background:rgba(255, 255, 255, 0.6);font-weight:bold}
|
.active {color:nth($ct, 1);background:rgba(255, 255, 255, 0.6);font-weight:bold}
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {width:.6rem;height:.6rem;background:none;}
|
|
||||||
::-webkit-scrollbar:hover {background:rgba(255, 255, 255, .1);}
|
|
||||||
::-webkit-scrollbar-button {display:none;}
|
|
||||||
::-webkit-scrollbar-thumb {background:nth($cp, 3);}
|
|
||||||
::-webkit-scrollbar-thumb:hover {background:nth($ct, 1);}
|
|
||||||
|
|
@ -8,15 +8,18 @@
|
||||||
<link href="css/modules.css" rel="stylesheet">
|
<link href="css/modules.css" rel="stylesheet">
|
||||||
<script type="module" src="js/app.js"></script>
|
<script type="module" src="js/app.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="do-fn-noselect" anot="app" :css="{'background-image': coverBG}">
|
<body class="do-fn-noselect">
|
||||||
|
<div
|
||||||
<div id="app" :class="{blur: isPlaying && !ktvMode, ktv: ktvMode}">
|
id="app"
|
||||||
|
anot="app"
|
||||||
|
:class="{blur: isPlaying && !ktvMode, ktv: ktvMode}"
|
||||||
|
:css="{'background-image': coverBG}">
|
||||||
|
|
||||||
<div class="title-bar do-fn-drag">
|
<div class="title-bar do-fn-drag">
|
||||||
|
|
||||||
<nav class="btn-box do-fn-nodrag" :if="theme === 1" :class="{focus: winFocus}">
|
<nav class="btn-box do-fn-nodrag" :if="theme === 1" :class="{focus: winFocus}">
|
||||||
<i class="item quit" :click="quit(false)"></i>
|
<i class="item quit" @click="quit(false)"></i>
|
||||||
<i class="item min" :click="minimize"></i>
|
<i class="item min" @click="minimize"></i>
|
||||||
<i class="item max"></i>
|
<i class="item max"></i>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
@ -24,33 +27,31 @@
|
||||||
<!-- 背景点位标签 -->
|
<!-- 背景点位标签 -->
|
||||||
<div class="holder"></div>
|
<div class="holder"></div>
|
||||||
<div class="tools do-fn-drag">
|
<div class="tools do-fn-drag">
|
||||||
<div class="search do-fn-nodrag">
|
<wc-input
|
||||||
<input
|
class="search do-fn-nodrag"
|
||||||
class="do-ui-input"
|
label="搜索 音乐/歌手/专辑"
|
||||||
placeholder="搜索 音乐/歌手/专辑"
|
round
|
||||||
:keyup="searchMusic"
|
@submit="searchMusic"
|
||||||
:duplex="searchTxt">
|
:duplex="searchTxt"></wc-input>
|
||||||
<i class="icon do-icon-search"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<nav class="btn-box-win do-fn-nodrag">
|
<nav class="btn-box-win do-fn-nodrag">
|
||||||
<div class="opt">
|
<div class="opt">
|
||||||
<i class="do-icon-menu-right" :click="toggleOptBox"></i>
|
<i class="do-icon-menu-right" @click="toggleOptBox"></i>
|
||||||
<section class="opt-list" :visible="optBoxShow">
|
<section class="opt-list" :visible="optBoxShow">
|
||||||
<span :click="change2mini"><i class="do-icon-maximized"></i> 迷你模式</span>
|
<span @click="change2mini"><i class="do-icon-maximized"></i> 迷你模式</span>
|
||||||
<span :click="toggleModule('profile')">
|
<span @click="toggleModule('profile')">
|
||||||
<i class="do-icon-setting"></i> 首选项
|
<i class="do-icon-setting"></i> 首选项
|
||||||
</span>
|
</span>
|
||||||
<span class="pipe"></span>
|
<span class="pipe"></span>
|
||||||
<span :click="quit(true)"><i class="do-icon-logout"></i> 退出</span>
|
<span @click="quit(true)"><i class="do-icon-logout"></i> 退出</span>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<span :if="theme === 2">
|
<span :if="theme === 2">
|
||||||
<i class="item do-icon-minimize" :click="minimize"></i>
|
<i class="item do-icon-minimize" @click="minimize"></i>
|
||||||
<i class="item do-icon-maximize disabled"></i>
|
<i class="item do-icon-maximize disabled"></i>
|
||||||
<i class="item do-icon-close quit" :click="quit(false)"></i>
|
<i class="item do-icon-close quit" @click="quit(false)"></i>
|
||||||
</span>
|
</span>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -61,39 +62,32 @@
|
||||||
|
|
||||||
<aside class="sidebar do-fn-drag">
|
<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">
|
<dl class="music-box do-fn-nodrag">
|
||||||
<dt class="title">酷狗在线</dt>
|
<dt class="title">酷狗在线</dt>
|
||||||
<dd class="item"
|
<dd class="item"
|
||||||
:click="toggleModule('rank')"
|
@click="toggleModule('rank')"
|
||||||
:class="{active: mod === 'rank'}">
|
:class="{active: mod === 'rank'}">
|
||||||
<i class="s-icon-rank"></i> 排行榜
|
<i class="s-icon-rank"></i> 排行榜
|
||||||
</dd>
|
</dd>
|
||||||
<dd class="item"
|
<dd class="item"
|
||||||
:click="toggleModule('artist')"
|
@click="toggleModule('artist')"
|
||||||
:class="{active: mod === 'artist'}">
|
:class="{active: mod === 'artist'}">
|
||||||
<i class="s-icon-singer"></i> 歌手
|
<i class="s-icon-singer"></i> 歌手
|
||||||
</dd>
|
</dd>
|
||||||
<dd class="item disabled"
|
<dd class="item disabled"
|
||||||
:click="toggleModule('mv')"
|
@click="toggleModule('mv')"
|
||||||
:class="{active: mod === 'mv'}">
|
:class="{active: mod === 'mv'}">
|
||||||
<i class="s-icon-mv"></i> MV
|
<i class="s-icon-mv"></i> MV
|
||||||
</dd>
|
</dd>
|
||||||
|
|
||||||
<dt class="title">我的音乐</dt>
|
<dt class="title">我的音乐</dt>
|
||||||
<dd class="item"
|
<dd class="item"
|
||||||
:click="toggleModule('search')"
|
@click="toggleModule('search')"
|
||||||
:class="{active: mod === 'search'}">
|
:class="{active: mod === 'search'}">
|
||||||
<i class="s-icon-heart"></i> 试听列表
|
<i class="s-icon-heart"></i> 试听列表
|
||||||
</dd>
|
</dd>
|
||||||
<dd class="item"
|
<dd class="item"
|
||||||
:click="toggleModule('local')"
|
@click="toggleModule('local')"
|
||||||
:class="{active: mod === 'local'}">
|
:class="{active: mod === 'local'}">
|
||||||
<i class="s-icon-play-list"></i> 本地音乐
|
<i class="s-icon-play-list"></i> 本地音乐
|
||||||
</dd>
|
</dd>
|
||||||
|
|
@ -118,14 +112,15 @@
|
||||||
|
|
||||||
<div class="contrl-bar">
|
<div class="contrl-bar">
|
||||||
|
|
||||||
<div class="play-box" :click="handleCtrl">
|
<div class="play-box">
|
||||||
<span class="item prev s-icon-prev" data-key="prev"></span>
|
|
||||||
|
<div class="btn-bg"></div>
|
||||||
<span
|
<span
|
||||||
class="item play"
|
class="action play"
|
||||||
data-key="play"
|
data-key="play"
|
||||||
:class="{'s-icon-play': !isPlaying, 's-icon-pause': isPlaying}">
|
:class="{'s-icon-play': !isPlaying, 's-icon-pause': isPlaying}">||
|
||||||
</span>
|
</span>
|
||||||
<span class="item next s-icon-next" data-key="next"></span>
|
<span class="action next" data-key="next">>></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat-box">
|
<div class="stat-box">
|
||||||
|
|
@ -139,7 +134,7 @@
|
||||||
's-icon-single': playMode === 1,
|
's-icon-single': playMode === 1,
|
||||||
's-icon-random': playMode === 2
|
's-icon-random': playMode === 2
|
||||||
}"
|
}"
|
||||||
:click="togglePlayMode">
|
@click="togglePlayMode">
|
||||||
</span>
|
</span>
|
||||||
<section class="ctrl volume">
|
<section class="ctrl volume">
|
||||||
<i
|
<i
|
||||||
|
|
@ -150,12 +145,12 @@
|
||||||
</i>
|
</i>
|
||||||
<span
|
<span
|
||||||
class="volume-ctrl"
|
class="volume-ctrl"
|
||||||
:click="changeValume">
|
@click="changeValume">
|
||||||
<em :css="{flex: '0 ' + volume + '%'}"></em>
|
<em :css="{flex: '0 ' + volume + '%'}"></em>
|
||||||
</span>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
<span class="ctrl s-icon-eq"></span>
|
<span class="ctrl s-icon-eq"></span>
|
||||||
<span class="ctrl lrc" :click="toggleDesktopLrc">词</span>
|
<span class="ctrl lrc" @click="toggleDesktopLrc">词</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,13 @@
|
||||||
|
|
||||||
import '/lib/anot.js'
|
import '/lib/anot.js'
|
||||||
import '/lib/layer/index.js'
|
import '/lib/layer/index.js'
|
||||||
|
import '/lib/form/button.js'
|
||||||
|
import '/lib/form/input.js'
|
||||||
|
import '/lib/form/switch.js'
|
||||||
|
import '/lib/form/checkbox.js'
|
||||||
|
import '/lib/form/radio.js'
|
||||||
import '/lib/store/index.js'
|
import '/lib/store/index.js'
|
||||||
|
|
||||||
import AudioPlayer from '/lib/audio/index.js'
|
import AudioPlayer from '/lib/audio/index.js'
|
||||||
import Lyrics from '/lib/lyrics/index.js'
|
import Lyrics from '/lib/lyrics/index.js'
|
||||||
|
|
||||||
|
|
@ -98,7 +104,7 @@ Anot({
|
||||||
if (this.curr.cover) {
|
if (this.curr.cover) {
|
||||||
return `url(${this.curr.cover})`
|
return `url(${this.curr.cover})`
|
||||||
} else {
|
} else {
|
||||||
return 'none'
|
return ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/**
|
||||||
|
* 播放器图标
|
||||||
|
* @author yutent<yutent@doui.cc>
|
||||||
|
* @date 2019/09/10 10:02:46
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict'
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
export default {
|
||||||
|
all:
|
||||||
|
'M825.5 341.9c-45.4-45.4-105.9-70.5-170.1-70.5H402.9v-48.3c0-15.4-10.6-21.2-23.6-12.8l-116.2 75.1c-13 8.4-12.8 21.9 0.3 30L379.1 387c13.1 8.1 23.8 2.1 23.8-13.3v-48.1h252.5c102.7 0 186.3 83.6 186.3 186.3 0 17-2.3 33.8-6.8 50-4 14.4 4.4 29.4 18.9 33.4 2.4 0.7 4.9 1 7.3 1 11.9 0 22.8-7.9 26.1-19.9 5.8-20.9 8.8-42.6 8.8-64.5 0-64.2-25-124.6-70.5-170z m-44.8 366.8L665.1 637c-13.1-8.1-23.8-2.1-23.8 13.3v48.1H368.6c-102.7 0-186.3-83.6-186.3-186.3 0-36 10.3-70.9 29.7-101 8.1-12.6 4.5-29.4-8.1-37.5-12.6-8.1-29.4-4.5-37.5 8.1-25.1 38.9-38.4 84-38.4 130.5 0 64.3 25 124.7 70.5 170.1 45.4 45.4 105.9 70.5 170.1 70.5h272.6v48.3c0 15.4 10.6 21.2 23.6 12.8L781 738.6c13-8.3 12.9-21.8-0.3-29.9z m0 0',
|
||||||
|
eq:
|
||||||
|
'M576 640H448c-17.6 0-32-14.4-32-32s14.4-32 32-32h128c17.6 0 32 14.4 32 32s-14.4 32-32 32zM512 896c-17.6 0-32-14.4-32-32V160c0-17.6 14.4-32 32-32s32 14.4 32 32v704c0 17.6-14.4 32-32 32zM864 383H736c-17.6 0-32-14.4-32-32s14.4-32 32-32h128c17.6 0 32 14.4 32 32s-14.4 32-32 32zM800 896c-17.6 0-32-14.4-32-32V160c0-17.6 14.4-32 32-32s32 14.4 32 32v704c0 17.6-14.4 32-32 32zM288 320H160c-17.6 0-32-14.4-32-32s14.4-32 32-32h128c17.6 0 32 14.4 32 32s-14.4 32-32 32zM224 896c-17.6 0-32-14.4-32-32V160c0-17.6 14.4-32 32-32s32 14.4 32 32v704c0 17.6-14.4 32-32 32z',
|
||||||
|
like:
|
||||||
|
'M694.3 156.5c-13 0-26 1.8-39 5.3s-25.2 8.3-36.7 14.3c-11.5 6-22.6 13.2-33.4 21.7-10.8 8.5-20.6 17.7-29.6 27.7S538.5 246 531.2 257c-7.3 11-13.6 22.3-19.1 33.7-17.5-37-42.8-68.6-75.7-94.9-33-26.2-68.5-39.4-106.5-39.4-55.5 0-103 19.8-142.5 59.3s-59.3 87-59.3 142.5c0 31 4.2 60.1 12.7 87.4 8.5 27.2 20.6 51.9 36.4 73.9 15.8 22 33.4 43.1 52.9 63.4 19.5 20.3 41.5 41 66 62.3 24.5 21.2 48.4 42.2 71.6 63 23.2 20.8 48 45.1 74.3 73.1 26.3 28 49.6 56.7 70.1 86.3 19.5-29 42-57.6 67.5-85.9 25.5-28.2 49.9-53 73.1-74.3 23.2-21.3 47.2-42.6 72-64.1 24.8-21.5 47-42.5 66.7-63 19.7-20.5 37.7-41.8 54-63.7 16.3-22 28.8-46.4 37.5-73.1 8.8-26.8 13.1-55.1 13.1-85.1 0-55.5-19.8-103-59.3-142.5-39.5-39.6-87-59.4-142.4-59.4z m0 0',
|
||||||
|
music:
|
||||||
|
'M875.1 491.1c-11.5 0-20.8 9.4-20.8 20.8 0 188.7-153.5 342.2-342.2 342.2S169.9 700.6 169.9 511.9s153.5-342.2 342.2-342.2c11.5 0 20.8-9.4 20.8-20.8 0-11.5-9.4-20.8-20.8-20.8-211.7 0-384 172.3-384 384s172.3 384 384 384 384-172.3 384-384c-0.1-11.6-9.5-21-21-21zM595.8 183.6c11.5 0 20.8-9.4 20.8-20.8 0-11.5-9.4-20.8-20.8-20.8-11.5 0-20.8 9.4-20.8 20.8 0 11.5 9.3 20.8 20.8 20.8z m244.5 244.6c0 11.5 9.4 20.8 20.8 20.8 11.5 0 20.8-9.4 20.8-20.8 0-11.5-9.4-20.8-20.8-20.8-11.5-0.1-20.8 9.3-20.8 20.8z m0 0M379.2 567.8c0-11.5-9.4-20.8-20.9-20.8-11.5 0-20.8 9.4-20.8 20.8 0 88.5 72 160.5 160.5 160.5 11.5 0 20.9-9.4 20.9-20.9 0-11.5-9.4-20.8-20.9-20.8-65.5 0-118.8-53.3-118.8-118.8z m70.1-55.8c0 65.4 53.2 118.6 118.5 118.6 65.4 0 118.6-53.2 118.6-118.6v-2.8-2.1c0.1-0.8 0.1-1.6 0.1-2.2V217.6c49 29.2 90 70 119.2 118.6 5.2 8.7 10.1 17.7 14.5 26.9 3.6 7.3 11 12 18.9 12 2.9 0 5.7-0.6 8.3-1.8 5.3-2.3 9.4-6.7 11.4-12.1 1.9-5.3 1.7-10.9-0.8-15.9-5.3-10.9-10.9-21.2-16.5-30.5-38.7-64.5-94.8-115.9-162.1-148.5-1.8-0.9-3.7-1.5-5.8-1.8-2.6-1-5.2-1.6-7.9-1.6-11.5 0-20.8 9.4-20.8 20.8v237.9c-21.3-18.2-48.6-28.4-76.9-28.4-65.5 0.2-118.7 53.4-118.7 118.8z m118.6-77c42.4 0 76.9 34.5 76.9 76.9 0 42.4-34.5 76.9-76.9 76.9-42.4 0-76.9-34.5-76.9-76.9s34.4-76.9 76.9-76.9z m0 0',
|
||||||
|
list:
|
||||||
|
'M686.5 635.4V163c0-19.4 15.7-35 34.6-35h140.3c19.1 0 34.6 15.5 34.6 34.9 0 19.3-15.7 34.9-34.6 34.9h-105v561c-1.3 76-63.3 137.2-139.6 137.2-77.1 0-139.6-62.5-139.6-139.6s62.5-139.6 139.6-139.6c25.3-0.1 49.2 6.7 69.7 18.6zM128 651.6c0-19.3 15.8-34.9 35.4-34.9h208.5c19.5 0 35.4 15.5 35.4 34.9 0 19.3-15.8 34.9-35.4 34.9H163.4c-19.6 0-35.4-15.5-35.4-34.9z m0-174.5c0-19.3 15.7-34.9 35.1-34.9h418.4c19.4 0 35.1 15.5 35.1 34.9 0 19.3-15.7 34.9-35.1 34.9H163.1c-19.4 0-35.1-15.5-35.1-34.9z m0-174.6c0-19.3 15.7-34.9 35.1-34.9h418.4c19.4 0 35.1 15.5 35.1 34.9 0 19.3-15.7 34.9-35.1 34.9H163.1c-19.4 0.1-35.1-15.4-35.1-34.9z m0 0',
|
||||||
|
mv:
|
||||||
|
'M875.1 204.8H148.9c-11.6 0-20.9 9.4-20.9 20.9v572.5c0 11.6 9.4 20.9 20.9 20.9H875c11.6 0 20.9-9.4 20.9-20.9V225.8c0.1-11.6-9.3-21-20.8-21z m-21 460.8H574.8V358.4h279.3v307.2zM169.9 358.4h307.2v307.2H169.9V358.4z m0 418.9v-15.2c2.2 0.8 4.5 1.3 7 1.3h69.8c11.6 0 20.9-9.4 20.9-20.9s-9.4-20.9-20.9-20.9h-69.8c-2.5 0-4.8 0.5-7 1.3v-15.2H498c11.6 0 20.9-9.4 20.9-20.9V337.5c0-11.6-9.4-20.9-20.9-20.9H169.9v-15.2c2.2 0.8 4.5 1.3 7 1.3h69.8c11.6 0 20.9-9.4 20.9-20.9 0-11.6-9.4-20.9-20.9-20.9h-69.8c-2.5 0-4.8 0.5-7 1.3V247h684.2v14h-62.8c-11.6 0-20.9 9.4-20.9 20.9 0 11.6 9.4 20.9 20.9 20.9h62.8v14H553.9c-11.6 0-20.9 9.4-20.9 20.9v349.1c0 11.6 9.4 20.9 20.9 20.9h300.2v14h-62.8c-11.6 0-20.9 9.4-20.9 20.9s9.4 20.9 20.9 20.9h62.8v14H169.9z m230.4-516.6h-69.8c-11.6 0-20.9 9.4-20.9 20.9 0 11.6 9.4 20.9 20.9 20.9h69.8c11.6 0 20.9-9.4 20.9-20.9 0-11.6-9.3-20.9-20.9-20.9z m174.5 20.9c0-11.6-9.4-20.9-20.9-20.9h-69.8c-11.6 0-20.9 9.4-20.9 20.9 0 11.6 9.4 20.9 20.9 20.9h69.8c11.6 0 20.9-9.3 20.9-20.9z m62.9 20.9h69.8c11.6 0 20.9-9.4 20.9-20.9 0-11.6-9.4-20.9-20.9-20.9h-69.8c-11.6 0-20.9 9.4-20.9 20.9-0.1 11.6 9.3 20.9 20.9 20.9z m-237.4 419h-69.8c-11.6 0-20.9 9.4-20.9 20.9s9.4 20.9 20.9 20.9h69.8c11.6 0 20.9-9.4 20.9-20.9s-9.3-20.9-20.9-20.9z m153.6 0h-69.8c-11.6 0-20.9 9.4-20.9 20.9s9.4 20.9 20.9 20.9h69.8c11.6 0 20.9-9.4 20.9-20.9s-9.3-20.9-20.9-20.9z m153.6 0h-69.8c-11.6 0-20.9 9.4-20.9 20.9s9.4 20.9 20.9 20.9h69.8c11.6 0 20.9-9.4 20.9-20.9s-9.3-20.9-20.9-20.9z m0 0',
|
||||||
|
singer:
|
||||||
|
'M721.7 691.3c-3.8 4-10.1 5.1-15.7 2.8-4.3-3.2-10.6-7.8-18.3-13.1-22.2-15.2-55-38-100.2-52.7-33.5-10.9-68.8-16.6-105-16.6-74.6 0-145.5 23.9-205.1 69.2-28.6 21.7-53.7 47.9-74.3 77.5-21 30-37 63-47.6 98-2.3 7.5-10.2 11.8-17.6 9.4-7.4-2.3-11.6-10.3-9.3-17.8 11.5-37.9 28.8-73.6 51.5-106.1 22.3-32 49.5-60.3 80.4-83.8 31.4-23.8 66-42.4 103-55.1 38.2-13.1 78.3-19.8 119-19.8 40.8 0 80.8 6.7 119.1 19.8 19.7 6.8 60.1 22.6 103 55.2 7.5 5.7 13.4 10.6 17.1 13.8 5.1 5.9 4.8 14.4 0 19.3z m-377-200.8c-36.8-36.8-57.1-85.8-57.1-137.9 0-52.1 20.3-101.1 57.1-137.9 36.8-36.8 85.8-57.1 137.9-57.1 52.1 0 101.1 20.3 137.9 57.1 36.8 36.8 57.1 85.8 57.1 137.9s-20.3 101.1-57.1 137.9c-36.8 36.8-85.8 57.1-137.9 57.1-52.1 0-101.1-20.3-137.9-57.1z m-29-137.9c0 44.6 17.4 86.5 48.9 118s73.4 48.9 118 48.9 86.5-17.4 118-48.9 48.9-73.4 48.9-118c0-44.6-17.4-86.5-48.9-118s-73.4-48.9-118-48.9-86.5 17.4-118 48.9c-31.6 31.5-48.9 73.4-48.9 118z m405.4 367.8c-10.6-9.2-23.8-15.8-38.6-18.6-44.9-8.6-88.3 20.9-96.9 65.8-8.6 44.9 20.9 88.3 65.8 96.9 44.5 8.5 87.4-20.3 96.6-64.4l62.4-326.8 61.2 11.7c11 2.1 21.9-5.3 24-16.5 2.2-11.3-5.1-22.1-16.3-24.2l-81.7-15.6c-11-2.1-21.9 5.3-24 16.5l-52.5 275.2z',
|
||||||
|
random:
|
||||||
|
'M534.1 400.5c47.7-47.2 109-68.3 198.9-68.3h4.6v51.2c0 16.4 11.2 22.5 25 13.6l123.3-79.6c13.7-8.9 13.6-23.2-0.3-31.8l-122.7-76.1c-13.9-8.6-25.3-2.3-25.3 14.1v51H733c-104.8 0-180.9 27-239.4 85-58.6 58.1-60.2 112-61.4 155.2-0.5 18.6-1 34.7-5.7 49.3-10.4 32.9-37.8 63.4-77 85.7-49.3 28.2-115.9 42.7-192.5 41.8h-0.3c-15.8 0-28.6 12.6-28.8 28.4-0.2 15.9 12.6 28.9 28.4 29 2.4 0 4.8 0.1 7.1 0.1 42.4 0 82.3-4.3 118.5-12.6 35.6-8.3 67.9-20.7 96-36.7 51.8-29.7 88.5-71.7 103.3-118.4 7.1-22.4 7.7-44.1 8.3-65.1 1.4-39.6 2.3-74 44.6-115.8z m-376.9-68.3c96.3-1 176.8 22.3 226.6 65.9 5.4 4.8 12.2 7.1 18.9 7.1 8 0 16-3.4 21.7-9.8 10.4-12 9.2-30.1-2.7-40.6-28.9-25.3-65.2-45-107.7-58.6-46.3-14.9-99.3-22.1-157.4-21.4-15.9 0.2-28.6 13.2-28.4 29.1 0 15.7 13 28.5 29 28.3z m728.3 370.5l-122.7-75.9c-13.9-8.7-25.3-2.3-25.3 14.1v51H733c-80.4 0-142.1-24.1-194.2-75.7-11.3-11.1-29.5-11-40.6 0.2-11.2 11.3-11.1 29.5 0.1 40.7 62.8 62.1 139.6 92.4 234.8 92.4h4.6v51.3c0 16.3 11.2 22.5 25 13.5L886 734.7c13.5-9 13.4-23.3-0.5-32z m0 0',
|
||||||
|
rank:
|
||||||
|
'M448 128h128v768H448V128zM128 895h128V383H128v512z m640 1h128V512H768v384z',
|
||||||
|
radio:
|
||||||
|
'M742.4 512.2H627.2c-10.8 0-19.2-8.8-19.2-19.2 0-10.4 8.8-19.2 19.2-19.2h115.2c10.8 0 19.2 8.8 19.2 19.2 0 10.7-8.4 19.2-19.2 19.2zM531.2 493c0 10.6 8.6 19.2 19.2 19.2s19.2-8.6 19.2-19.2-8.6-19.2-19.2-19.2-19.2 8.6-19.2 19.2zM358.4 704.1c-63.4 0-115.2-51.8-115.2-115.1S295 473.8 358.4 473.8c63.4 0 115.2 51.8 115.2 115.2s-51.8 115.1-115.2 115.1z m0-191.9c-42.2 0-76.8 34.5-76.8 76.8 0 42.2 34.6 76.8 76.8 76.8 42.2 0 76.8-34.5 76.8-76.8s-34.6-76.8-76.8-76.8zM800 896H224c-53 0-96-43-96-96V377.8c0-53 43-96 96-96h576c53 0 96 43 96 96V800c0 53-43 96-96 96zM224 320.2c-31.9 0-57.6 25.7-57.6 57.6V800c0 31.9 25.7 57.6 57.6 57.6h576c31.9 0 57.6-25.7 57.6-57.6V377.8c0-31.9-25.7-57.6-57.6-57.6H224z m518.4 383.9H627.2c-10.8 0-19.2-8.8-19.2-19.2 0-10.7 8.8-19.2 19.2-19.2h115.2c10.8 0 19.2 8.8 19.2 19.2 0 10.7-8.4 19.2-19.2 19.2zM224 320.2c-7.3 0-14.2-4.2-17.3-11.1-4.6-9.6-0.4-21.1 9.2-25.7l326.4-153.5c9.6-4.6 21.1-0.4 25.7 9.2 4.6 9.6 0.4 21.1-9.2 25.7L232.4 318.3c-3 1.2-5.7 1.9-8.4 1.9z m307.2 364.7c0 10.6 8.6 19.2 19.2 19.2s19.2-8.6 19.2-19.2-8.6-19.2-19.2-19.2-19.2 8.6-19.2 19.2z m0 0',
|
||||||
|
single:
|
||||||
|
'M488.6 306.3H368.4c-63.4 0-125.2 25-170.3 70.1C153 421.5 128 481.6 128 546.7c0 21.7 3.3 43.4 8.3 65.1 3.3 11.7 15 20 26.7 20 1.7 0 5 0 6.7-1.7 15-3.3 23.4-18.4 18.4-33.4-5-16.7-6.7-33.4-6.7-50.1 0-103.5 83.5-187 187-187h110.2c1.7-18.2 5-36.6 10-53.3z m0 0M730.7 608.5c-30.1 61.8-93.5 105.2-167 105.2h-252v-48.4c0-15-10-21.7-23.4-13.4l-115.2 71.8c-13.4 8.3-13.4 21.7 0 30.1L290 828.9c13.4 8.3 23.4 3.3 23.4-13.4v-48.4h252.1c63.4 0 125.2-25 170.3-70.1 28.4-28.4 50.1-63.4 60.1-101.8-21.8 6.6-43.5 11.7-65.2 13.3z m0 0M712.3 191.1c-101.8 0-183.7 81.8-183.7 183.7 0 101.8 81.8 183.7 183.7 183.7 101.8 0 183.7-81.8 183.7-183.7 0-101.9-81.8-183.7-183.7-183.7z m33.4 282.2h-35.1V334.7c-13.4 11.7-28.4 20-48.4 26.7v-36.7c10-1.7 20-6.7 30.1-13.4 10-6.7 20-13.4 26.7-21.7h26.7v183.7z m0 0',
|
||||||
|
next:
|
||||||
|
'M512 128c-212.1 0-384 171.9-384 384s171.9 384 384 384 384-171.9 384-384-171.9-384-384-384z m0 720c-185.6 0-336-150.4-336-336s150.4-336 336-336 336 150.4 336 336-150.4 336-336 336z m0 0M633.4 672c-8.3 0-15-6.8-15-15V367c0-8.2 6.8-15 15-15s15 6.8 15 15v290c0 8.2-6.8 15-15 15zM402.5 672c-7.3 0-13.6-2-18.9-5.9-5.3-3.9-8-8.6-8-14.1V372c0-5.4 2.7-10.1 8-14.1s11.6-5.9 18.9-5.9c7.3 0 13.6 2 18.9 5.9l188.3 140c5.3 3.9 8 8.6 8 14.1 0 5.4-2.7 10.1-8 14.1l-188.3 140c-5.2 3.9-11.5 5.9-18.9 5.9z m188.4-312.4',
|
||||||
|
prev:
|
||||||
|
'M512 128c-212.1 0-384 171.9-384 384s171.9 384 384 384 384-171.9 384-384-171.9-384-384-384z m0 720c-185.6 0-336-150.4-336-336s150.4-336 336-336 336 150.4 336 336-150.4 336-336 336z m0 0M375.6 657V367c0-8.2 6.8-15 15-15s15 6.8 15 15v290c0 8.2-6.8 15-15 15s-15-6.8-15-15zM621.5 672c-7.3 0-13.6-2-18.9-5.9l-188.3-140c-5.3-3.9-8-8.6-8-14.1 0-5.4 2.7-10.1 8-14.1l188.3-140c5.3-3.9 11.6-5.9 18.9-5.9 7.3 0 13.6 1.9 18.9 5.9 5.3 4 8 8.7 8 14.1v280c0 5.4-2.6 10.1-8 14.1-5.3 3.9-11.7 5.9-18.9 5.9zM433.1 359.6',
|
||||||
|
pause:
|
||||||
|
'M512 128c-212.1 0-384 171.9-384 384s171.9 384 384 384 384-171.9 384-384-171.9-384-384-384z m0 720c-185.6 0-336-150.4-336-336s150.4-336 336-336 336 150.4 336 336-150.4 336-336 336z m0 0M405.3 672c-11 0-20-9-20-20V372c0-11 9-20 20-20s20 9 20 20v280c0 11-9 20-20 20zM618.7 672c-11 0-20-9-20-20V372c0-11 9-20 20-20s20 9 20 20v280c0 11-9 20-20 20z',
|
||||||
|
play:
|
||||||
|
'M441.8 672c-7.3 0-13.6-2-18.9-5.9-5.3-3.9-8-8.6-8-14.1V372c0-5.4 2.7-10.1 8-14.1s11.6-5.9 18.9-5.9c7.3 0 13.6 2 18.9 5.9l188.3 140c5.3 3.9 8 8.6 8 14.1 0 5.4-2.7 10.1-8 14.1l-188.3 140c-5.2 3.9-11.5 5.9-18.9 5.9z m188.4-312.4M512 128c-212.1 0-384 171.9-384 384s171.9 384 384 384 384-171.9 384-384-171.9-384-384-384z m0 720c-185.6 0-336-150.4-336-336s150.4-336 336-336 336 150.4 336 336-150.4 336-336 336z m0 0'
|
||||||
|
}
|
||||||
|
|
@ -6,13 +6,7 @@
|
||||||
|
|
||||||
'use strict'
|
'use strict'
|
||||||
|
|
||||||
const {
|
const { app, session, protocol, globalShortcut } = require('electron')
|
||||||
app,
|
|
||||||
BrowserWindow,
|
|
||||||
session,
|
|
||||||
protocol,
|
|
||||||
globalShortcut
|
|
||||||
} = require('electron')
|
|
||||||
const path = require('path')
|
const path = require('path')
|
||||||
const fs = require('iofs')
|
const fs = require('iofs')
|
||||||
const { exec } = require('child_process')
|
const { exec } = require('child_process')
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,7 @@ const path = require('path')
|
||||||
const ROOT = __dirname
|
const ROOT = __dirname
|
||||||
|
|
||||||
module.exports = function(win) {
|
module.exports = function(win) {
|
||||||
app.__TRAY__ = new Tray(
|
app.__TRAY__ = new Tray(path.join(ROOT, '../images/trays/trayTemplate.png'))
|
||||||
path.resolve(__dirname, '../images/trays/trayTemplate.png')
|
|
||||||
)
|
|
||||||
let menuList = Menu.buildFromTemplate([
|
let menuList = Menu.buildFromTemplate([
|
||||||
{
|
{
|
||||||
label: '显示主窗口',
|
label: '显示主窗口',
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="do-mod-artist" anot="artist">
|
<div class="do-mod-artist" anot="artist">
|
||||||
|
|
||||||
<div class="filter-box" :click="search">
|
<div class="filter-box" @click="search">
|
||||||
<section class="item" data-key="hot" :class="{active: filter === 'hot'}">热门歌手</section>
|
<section class="item" data-key="hot" :class="{active: filter === 'hot'}">热门歌手</section>
|
||||||
<section class="item" data-key="0,0" :class="{active: filter === '0,0'}">入驻音乐人</section>
|
<section class="item" data-key="0,0" :class="{active: filter === '0,0'}">入驻音乐人</section>
|
||||||
|
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<ul class="list-box" :click="pickArtist">
|
<ul class="list-box" @click="pickArtist">
|
||||||
<li class="item" :for="it in list" :data="{artist: it.id, index: $index}">
|
<li class="item" :for="it in list" :data="{artist: it.id, index: $index}">
|
||||||
<img :attr="{src: it.avatar, alt: it.name}" />
|
<img :attr="{src: it.avatar, alt: it.name}" />
|
||||||
<summary>
|
<summary>
|
||||||
|
|
@ -52,12 +52,12 @@
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h3 class="name">
|
<h3 class="name">
|
||||||
<i class="s-icon-singer"></i>
|
<i class="s-icon-singer"></i>
|
||||||
<a :click="toArtistListPage">歌手列表</a>
|
<a @click="toArtistListPage">歌手列表</a>
|
||||||
<i class="do-icon-right"></i>
|
<i class="do-icon-right"></i>
|
||||||
<span :text="artist.name"></span>
|
<span :text="artist.name"></span>
|
||||||
</h3>
|
</h3>
|
||||||
<cite class="desc">
|
<cite class="desc">
|
||||||
介绍: {{artist.info | truncate(50)}} <span :click="showArtistInfo">详细</span>
|
介绍: {{artist.info | truncate(50)}} <span @click="showArtistInfo">详细</span>
|
||||||
</cite>
|
</cite>
|
||||||
|
|
||||||
<dl class="song-album">
|
<dl class="song-album">
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="inner-content">
|
<div class="inner-content">
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<img :attr-src="curr.cover" :click="toggleLrcView" />
|
<img :attr-src="curr.cover" @click="toggleLrcView" />
|
||||||
<div class="summary" :visible="!allLrcView">
|
<div class="summary" :visible="!allLrcView">
|
||||||
<h3 :text="curr.title"></h3>
|
<h3 :text="curr.title"></h3>
|
||||||
<section>歌手: {{curr.artist}}</section>
|
<section>歌手: {{curr.artist}}</section>
|
||||||
|
|
@ -23,28 +23,28 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tool-box">
|
<div class="tool-box">
|
||||||
<section class="item" :click="forwardLrc(-0.5)">
|
<section class="item" @click="forwardLrc(-0.5)">
|
||||||
<i class="do-icon-trigon-up"></i>歌词 -0.5s
|
<i class="do-icon-trigon-up"></i>歌词 -0.5s
|
||||||
</section>
|
</section>
|
||||||
<section class="item" :click="showLrcSearch">
|
<section class="item" @click="showLrcSearch">
|
||||||
<i class="do-icon-search"></i>歌词有误
|
<i class="do-icon-search"></i>歌词有误
|
||||||
</section>
|
</section>
|
||||||
<section class="item" :click="layer.alert('歌词编辑功能暂时未开放')">
|
<section class="item" @click="layer.alert('歌词编辑功能暂时未开放')">
|
||||||
<i class="do-icon-edit"></i>歌词编辑
|
<i class="do-icon-edit"></i>歌词编辑
|
||||||
</section>
|
</section>
|
||||||
<section class="item" :click="forwardLrc(0.5)">
|
<section class="item" @click="forwardLrc(0.5)">
|
||||||
<i class="do-icon-trigon-down"></i>歌词 +0.5s
|
<i class="do-icon-trigon-down"></i>歌词 +0.5s
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span class="slide-down do-fn-nodrag" :click="closeKtvMode">
|
<span class="slide-down do-fn-nodrag" @click="closeKtvMode">
|
||||||
<i class="do-icon-right"></i>
|
<i class="do-icon-right"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
|
||||||
<div class="search-box" :if="lrcSearchBoxShow">
|
<div class="search-box" :if="lrcSearchBoxShow">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="title">歌词搜索 <i class="do-icon-close" :click="closeLrcSearch"></i></div>
|
<div class="title">歌词搜索 <i class="do-icon-close" @click="closeLrcSearch"></i></div>
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<input
|
<input
|
||||||
class="do-ui-input"
|
class="do-ui-input"
|
||||||
|
|
@ -65,7 +65,7 @@
|
||||||
<span :text="it.artist"></span>
|
<span :text="it.artist"></span>
|
||||||
<span :text="it.album"></span>
|
<span :text="it.album"></span>
|
||||||
<span :text="it.duration | time"></span>
|
<span :text="it.duration | time"></span>
|
||||||
<span><a class="do-ui-button blue medium" :click="useThisLrc(it)">使用</a></span>
|
<span><a class="do-ui-button blue medium" @click="useThisLrc(it)">使用</a></span>
|
||||||
</li>
|
</li>
|
||||||
<li class="item" :if="lrcForm.result.size() < 1"><span>没有搜到任何结果...</span></li>
|
<li class="item" :if="lrcForm.result.size() < 1"><span>没有搜到任何结果...</span></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="do-mod-local" anot="local">
|
<div class="do-mod-local" anot="local">
|
||||||
<div class="tabbar">
|
<div class="tabbar">
|
||||||
本地音乐({{list.length}}首)<span class="refresh" :click="refresh">重新扫描</span>
|
本地音乐({{list.length}}首)<span class="refresh" @click="refresh">重新扫描</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
:class="{active: it.id === curr}"
|
:class="{active: it.id === curr}"
|
||||||
:for="it in list"
|
:for="it in list"
|
||||||
:on-contextmenu="handleMenu(it, $index, $event)"
|
:on-contextmenu="handleMenu(it, $index, $event)"
|
||||||
:dblclick="play(it, $index)">
|
@dblclick="play(it, $index)">
|
||||||
<td class="idx" :text="$index + 1 + '.'"></td>
|
<td class="idx" :text="$index + 1 + '.'"></td>
|
||||||
<td :text="it.title | truncate(10)" :attr-title="it.title"></td>
|
<td :text="it.title | truncate(10)" :attr-title="it.title"></td>
|
||||||
<td :text="it.artist | truncate(10)" :attr-title="it.artist"></td>
|
<td :text="it.artist | truncate(10)" :attr-title="it.artist"></td>
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
<div class="form" :keyup="closeEditByEnter">
|
<div class="form" :keyup="closeEditByEnter">
|
||||||
<section class="section title">
|
<section class="section title">
|
||||||
歌曲信息编辑
|
歌曲信息编辑
|
||||||
<i class="do-icon-close" :click="closeEdit"></i>
|
<i class="do-icon-close" @click="closeEdit"></i>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="do-mod-profile" anot="profile">
|
<div class="do-mod-profile" anot="profile">
|
||||||
<h3 class="title">
|
<h3 class="title">
|
||||||
设置
|
设置
|
||||||
<span class="save do-ui-button medium teal" :click="save">保存设置</span>
|
<span class="save do-ui-button medium teal" @click="save">保存设置</span>
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<section class="block">
|
<section class="block">
|
||||||
|
|
|
||||||
|
|
@ -2,16 +2,16 @@
|
||||||
<div class="tabbar">
|
<div class="tabbar">
|
||||||
<span class="item"
|
<span class="item"
|
||||||
:class="{active: tab === 'audition'}"
|
:class="{active: tab === 'audition'}"
|
||||||
:click="toggleHistory({ key: 'audition' })">
|
@click="toggleHistory({ key: 'audition' })">
|
||||||
试听列表
|
试听列表
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="item"
|
class="item"
|
||||||
:class="{active: tab === it.key}"
|
:class="{active: tab === it.key}"
|
||||||
:click="toggleHistory(it)"
|
@click="toggleHistory(it)"
|
||||||
:for="it in history"
|
:for="it in history"
|
||||||
:attr-title="it.txt">
|
:attr-title="it.txt">
|
||||||
{{it.txt | truncate(3)}} <i class="do-icon-close" :click="delThis(it, $event)"></i>
|
{{it.txt | truncate(3)}} <i class="do-icon-close" @click="delThis(it, $event)"></i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
<tr
|
<tr
|
||||||
:for="it in list"
|
:for="it in list"
|
||||||
:class="{active: it.kgHash === curr}"
|
:class="{active: it.kgHash === curr}"
|
||||||
:dblclick="play(it, $index)">
|
@dblclick="play(it, $index)">
|
||||||
<td class="idx" :text="$index + 1 + '.'"></td>
|
<td class="idx" :text="$index + 1 + '.'"></td>
|
||||||
<td :text="it.title | truncate(10)" :attr-title="it.title"></td>
|
<td :text="it.title | truncate(10)" :attr-title="it.title"></td>
|
||||||
<td :text="it.artist | truncate(10)" :attr-title="it.artist"></td>
|
<td :text="it.artist | truncate(10)" :attr-title="it.artist"></td>
|
||||||
|
|
|
||||||
Reference in New Issue