Skip to content

Commit c1c83d3

Browse files
DIYgodDIYgod
committed
optimize the style of aplayer with lrc
1 parent 89992c8 commit c1c83d3

4 files changed

Lines changed: 47 additions & 23 deletions

File tree

‎dist/APlayer.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/APlayer.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/APlayer.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,8 @@ class APlayer {
112112
for (let i = 0; i < this.lrc.length; i++) {
113113
if (currentTime >= this.lrc[i][0] && (!this.lrc[i + 1] || currentTime < this.lrc[i + 1][0])) {
114114
this.lrcIndex = i;
115-
this.lrcContents.style.transform = `translateY(${-this.lrcIndex * 20}px)`;
116-
this.lrcContents.style.webkitTransform = `translateY(${-this.lrcIndex * 20}px)`;
115+
this.lrcContents.style.transform = `translateY(${-this.lrcIndex * 16}px)`;
116+
this.lrcContents.style.webkitTransform = `translateY(${-this.lrcIndex * 16}px)`;
117117
this.lrcContents.getElementsByClassName('aplayer-lrc-current')[0].classList.remove('aplayer-lrc-current');
118118
this.lrcContents.getElementsByTagName('p')[i].classList.add('aplayer-lrc-current');
119119
}
@@ -140,6 +140,9 @@ class APlayer {
140140
if (this.option.showlrc) {
141141
this.element.classList.add('aplayer-withlrc');
142142
}
143+
if (this.option.music.length > 1) {
144+
this.element.classList.add('aplayer-list');
145+
}
143146

144147
// fill in HTML
145148
let eleHTML = `
@@ -172,7 +175,7 @@ class APlayer {
172175
- <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span>
173176
</span>
174177
<div class="aplayer-volume-wrap">
175-
<button class="aplayer-icon aplayer-icon-volume-down">`
178+
<button class="aplayer-icon aplayer-icon-volume-down" ${this.isMobile ? 'style="display: none;"' : ''}>`
176179
+ this.getSVG('volume-down')
177180
+ ` </button>
178181
<div class="aplayer-volume-bar-wrap">

‎src/APlayer.scss‎

Lines changed: 39 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
$aplayer-height: 66px;
2-
$lrc-height: 40px;
3-
$aplayer-height-lrc: $aplayer-height + $lrc-height;
2+
$lrc-height: 30px;
3+
$aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
44

55
.aplayer-narrow {
66
width: $aplayer-height;
@@ -13,16 +13,32 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
1313
&.aplayer-narrow {
1414
width: $aplayer-height-lrc;
1515
}
16-
&.aplayer .aplayer-pic {
17-
height: $aplayer-height-lrc;
18-
width: $aplayer-height-lrc;
19-
}
20-
&.aplayer .aplayer-info {
21-
margin-left: $aplayer-height-lrc;
22-
height: $aplayer-height-lrc;
16+
&.aplayer {
17+
.aplayer-pic {
18+
height: $aplayer-height-lrc;
19+
width: $aplayer-height-lrc;
20+
}
21+
22+
.aplayer-info {
23+
margin-left: $aplayer-height-lrc;
24+
height: $aplayer-height-lrc;
25+
}
26+
27+
.aplayer-lrc {
28+
display: block;
29+
}
30+
31+
.aplayer-info {
32+
padding: 10px 7px 0 7px;
33+
}
2334
}
24-
&.aplayer .aplayer-lrc {
25-
display: block;
35+
}
36+
37+
.aplayer-list {
38+
&.aplayer {
39+
.aplayer-info {
40+
border-bottom: 1px solid #e9e9e9;
41+
}
2642
}
2743
}
2844

@@ -135,6 +151,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
135151
margin-bottom: 13px;
136152
user-select: text;
137153
cursor: default;
154+
padding-bottom: 2px;
138155

139156
.aplayer-title {
140157
font-size: 14px;
@@ -285,7 +302,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
285302
background: #fff;
286303
text-align: center;
287304
overflow: hidden;
288-
margin: -10px 0 10px;
305+
margin: -10px 0 7px;
289306

290307
&:before {
291308
position: absolute;
@@ -311,17 +328,17 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
311328
width: 100%;
312329
height: 33%;
313330
content: ' ';
314-
background: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
315-
background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
316-
background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
317-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
331+
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
332+
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%);
333+
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%);
334+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ccffffff',GradientType=0 );
318335
}
319336

320337
p {
321338
font-size: 12px;
322339
color: #666;
323-
line-height: 20px !important;
324-
height: 20px !important;
340+
line-height: 16px !important;
341+
height: 16px !important;
325342
padding: 0 !important;
326343
margin: 0 !important;
327344
transition: all 0.5s ease-out;
@@ -380,6 +397,10 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
380397
transition: all 0.2s ease;
381398
overflow: hidden;
382399

400+
&:first-child {
401+
border-top: none;
402+
}
403+
383404
&:hover {
384405
background: #efefef;
385406
}

0 commit comments

Comments
 (0)