mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2024-11-24 10:58:52 +08:00
fix: revert some code
This commit is contained in:
qier222
parent
6e57766433
commit
94ef0934a5
|
|
@ -1,23 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong
|
||||
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title>
|
||||
<%= htmlWebpackPlugin.options.title %>
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
|
||||
properly without JavaScript enabled. Please enable it to
|
||||
continue.</strong
|
||||
>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
24
src/App.vue
24
src/App.vue
|
|
@ -91,15 +91,6 @@ export default {
|
|||
--color-navbar-bg: rgba(255, 255, 255, 0.86);
|
||||
--color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
|
||||
--color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
|
||||
|
||||
--main-content-padding-x: 10vw;
|
||||
--main-content-padding: 0 var(--main-content-padding-x);
|
||||
}
|
||||
|
||||
@media (max-width: 1336px) {
|
||||
:root {
|
||||
--main-content-padding-x: 5vw;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
|
|
@ -126,18 +117,27 @@ input {
|
|||
}
|
||||
body {
|
||||
background-color: var(--color-body-bg);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-y: overlay;
|
||||
min-width: 340px;
|
||||
min-width: 768px;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 100vw;
|
||||
margin-top: 84px;
|
||||
margin-bottom: 96px;
|
||||
padding: {
|
||||
right: 10vw;
|
||||
left: 10vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1336px) {
|
||||
main {
|
||||
padding: 0 5vw;
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
<template>
|
||||
<div
|
||||
class="cover-row"
|
||||
:style="rowStyles"
|
||||
:class="{ 'without-padding': withoutPadding }"
|
||||
>
|
||||
<div class="cover-row" :style="rowStyles">
|
||||
<div
|
||||
class="item"
|
||||
v-for="item in items"
|
||||
|
|
@ -54,7 +50,6 @@ export default {
|
|||
showPlayCount: { type: Boolean, default: false },
|
||||
columnNumber: { type: Number, default: 5 },
|
||||
gap: { type: String, default: "44px 24px" },
|
||||
withoutPadding: { type: Boolean, default: false },
|
||||
},
|
||||
computed: {
|
||||
rowStyles() {
|
||||
|
|
@ -119,13 +114,6 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.cover-row {
|
||||
display: grid;
|
||||
padding: var(--main-content-padding);
|
||||
max-width: calc(100vw - var(--main-content-padding-x));
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.cover-row.without-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
|
@ -155,18 +143,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.item {
|
||||
width: 256px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.item {
|
||||
width: 192px;
|
||||
}
|
||||
}
|
||||
|
||||
.item.artist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<nav :class="{ 'search-box-open': isSearchBoxOpen }">
|
||||
<nav>
|
||||
<div class="win32-titlebar">
|
||||
<div class="title">YesPlayMusic</div>
|
||||
<div class="controls">
|
||||
|
|
@ -51,9 +51,6 @@
|
|||
v-if="settings.showGithubIcon !== false"
|
||||
><svg-icon icon-class="github" class="github"
|
||||
/></a>
|
||||
<button-icon @click.native="toggleSearchBox()" class="search-button">
|
||||
<svg-icon icon-class="search" />
|
||||
</button-icon>
|
||||
<div class="search-box">
|
||||
<div class="container" :class="{ active: inputFocus }">
|
||||
<svg-icon icon-class="search" />
|
||||
|
|
@ -96,7 +93,6 @@ export default {
|
|||
inputFocus: false,
|
||||
langs: ["zh-CN", "en"],
|
||||
keywords: "",
|
||||
isSearchBoxOpen: false,
|
||||
windowIsMaximized: win ? win.isMaximized() : true,
|
||||
};
|
||||
},
|
||||
|
|
@ -121,9 +117,6 @@ export default {
|
|||
params: { keywords: this.keywords },
|
||||
});
|
||||
},
|
||||
toggleSearchBox() {
|
||||
this.isSearchBoxOpen = !this.isSearchBoxOpen;
|
||||
},
|
||||
windowMinimize() {
|
||||
win.minimize();
|
||||
},
|
||||
|
|
@ -158,9 +151,6 @@ nav {
|
|||
left: 10vw;
|
||||
}
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
border-bottom: 1px solid transparent;
|
||||
transition-property: padding-bottom, border-bottom;
|
||||
transition-duration: 0.4s;
|
||||
|
||||
background-color: var(--color-navbar-bg);
|
||||
z-index: 100;
|
||||
|
|
@ -368,75 +358,9 @@ nav {
|
|||
color: var(--color-text);
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
.github {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.search-button {
|
||||
display: none;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.search-button {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.right-part {
|
||||
flex: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.navigation-links > a {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.navigation-buttons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
nav.search-box-open {
|
||||
padding-bottom: 36px;
|
||||
border-bottom-color: var(--color-secondary-bg-for-transparent);
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 56px;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
.container {
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition-property: height, opacity;
|
||||
transition-duration: 0.4s;
|
||||
.input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-electron-platform-win32="yes"] {
|
||||
.search-box {
|
||||
// Add more 20px to top for title bar
|
||||
top: calc(56px + 20px);
|
||||
}
|
||||
}
|
||||
|
||||
nav.search-box-open .container {
|
||||
opacity: 1;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -62,10 +62,7 @@
|
|||
<div class="middle-control-buttons">
|
||||
<div class="blank"></div>
|
||||
<div class="container" @click.stop>
|
||||
<button-icon
|
||||
@click.native="previous"
|
||||
:title="$t('player.previous')"
|
||||
class="auto-hide"
|
||||
<button-icon @click.native="previous" :title="$t('player.previous')"
|
||||
><svg-icon icon-class="previous"
|
||||
/></button-icon>
|
||||
<button-icon
|
||||
|
|
@ -81,7 +78,7 @@
|
|||
</div>
|
||||
<div class="blank"></div>
|
||||
</div>
|
||||
<div class="right-control-buttons auto-hide">
|
||||
<div class="right-control-buttons">
|
||||
<div class="blank"></div>
|
||||
<div class="container" @click.stop>
|
||||
<button-icon
|
||||
|
|
@ -346,18 +343,6 @@ export default {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.controls {
|
||||
display: flex;
|
||||
}
|
||||
.playing {
|
||||
flex: 1;
|
||||
}
|
||||
.playing .container {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.playing .container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -463,20 +448,6 @@ export default {
|
|||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.controls {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.middle-control-buttons {
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
.auto-hide,
|
||||
.blank {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// .lyrics-button {
|
||||
// position: fixed;
|
||||
// right: 18px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="track-list" :class="{ 'without-padding': withoutPadding }">
|
||||
<div class="track-list">
|
||||
<ContextMenu ref="menu">
|
||||
<div class="item-info">
|
||||
<img :src="rightClickedTrack.al.picUrl | resizeImage(224)" />
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
>
|
||||
<div class="item" @click="addTrackToPlaylist">添加到歌单</div>
|
||||
</ContextMenu>
|
||||
<div :style="listStyles" class="track-list-inner-container">
|
||||
<div :style="listStyles">
|
||||
<TrackListItem
|
||||
v-for="(track, index) in tracks"
|
||||
:track="track"
|
||||
|
|
@ -78,6 +78,10 @@ export default {
|
|||
return []; // 'removeTrackFromPlaylist'
|
||||
},
|
||||
},
|
||||
columnNumber: {
|
||||
type: Number,
|
||||
default: 4,
|
||||
},
|
||||
highlightPlayingTrack: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
|
|
@ -86,10 +90,6 @@ export default {
|
|||
type: String,
|
||||
default: "id",
|
||||
},
|
||||
withoutPadding: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -107,6 +107,7 @@ export default {
|
|||
this.listStyles = {
|
||||
display: "grid",
|
||||
gap: "4px",
|
||||
gridTemplateColumns: `repeat(${this.columnNumber}, 1fr)`,
|
||||
};
|
||||
}
|
||||
},
|
||||
|
|
@ -239,36 +240,4 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.track-list {
|
||||
--col-num: 4;
|
||||
padding: var(--main-content-padding);
|
||||
|
||||
.track-list-inner-container {
|
||||
grid-template-columns: repeat(var(--col-num), 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.track-list.without-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.track-list {
|
||||
--col-num: 3;
|
||||
padding: var(--main-content-padding);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.track-list {
|
||||
--col-num: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.track-list {
|
||||
--col-num: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -193,7 +193,6 @@ button {
|
|||
padding: 8px;
|
||||
border-radius: 12px;
|
||||
user-select: none;
|
||||
transition: all 0.3s;
|
||||
|
||||
.no {
|
||||
display: flex;
|
||||
|
|
@ -294,11 +293,6 @@ button {
|
|||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.album {
|
||||
flex: 0;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
font-size: 16px;
|
||||
width: 50px;
|
||||
|
|
@ -313,6 +307,7 @@ button {
|
|||
}
|
||||
|
||||
.track.focus {
|
||||
transition: all 0.3s;
|
||||
background: var(--color-secondary-bg);
|
||||
}
|
||||
|
||||
|
|
@ -359,12 +354,6 @@ button {
|
|||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.actions {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.track.playing {
|
||||
background: var(--color-primary-bg);
|
||||
color: var(--color-primary);
|
||||
|
|
|
|||
|
|
@ -276,7 +276,6 @@ export default {
|
|||
display: flex;
|
||||
width: 78vw;
|
||||
margin-bottom: 72px;
|
||||
padding: var(--main-content-padding);
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -331,29 +330,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.playlist-info {
|
||||
width: calc(100vw - 2 * var(--main-content-padding-x));
|
||||
padding: var(--main-content-padding);
|
||||
display: block;
|
||||
|
||||
.cover {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 24px;
|
||||
margin-left: 0;
|
||||
|
||||
.title {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.explicit-symbol {
|
||||
opacity: 0.28;
|
||||
color: var(--color-text);
|
||||
|
|
@ -369,7 +345,6 @@ export default {
|
|||
font-size: 12px;
|
||||
opacity: 0.48;
|
||||
color: var(--color-text);
|
||||
padding: var(--main-content-padding);
|
||||
div {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
|
@ -388,7 +363,6 @@ export default {
|
|||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 20px;
|
||||
padding: var(--main-content-padding);
|
||||
}
|
||||
}
|
||||
.description-fulltext {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="head">
|
||||
<img :src="artist.img1v1Url | resizeImage(1024)" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div>
|
||||
<div class="name">{{ artist.name }}</div>
|
||||
<div class="artist">{{ $t("artist.artist") }}</div>
|
||||
<div class="statistics">
|
||||
|
|
@ -253,7 +253,6 @@ export default {
|
|||
align-items: center;
|
||||
margin-bottom: 26px;
|
||||
color: var(--color-text);
|
||||
padding: var(--main-content-padding);
|
||||
img {
|
||||
height: 192px;
|
||||
width: 192px;
|
||||
|
|
@ -290,37 +289,12 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.artist-info {
|
||||
display: block;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 16px;
|
||||
padding: var(--main-content-padding);
|
||||
padding-top: 46px;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -335,11 +309,6 @@ export default {
|
|||
|
||||
.latest-release {
|
||||
color: var(--color-text);
|
||||
padding: var(--main-content-padding);
|
||||
.section-title {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.release {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -374,7 +343,6 @@ export default {
|
|||
.popular-tracks {
|
||||
.show-more {
|
||||
display: flex;
|
||||
padding: var(--main-content-padding);
|
||||
|
||||
button {
|
||||
padding: 4px 8px;
|
||||
|
|
|
|||
|
|
@ -81,7 +81,6 @@ export default {
|
|||
h1 {
|
||||
font-size: 42px;
|
||||
color: var(--color-text);
|
||||
padding: var(--main-content-padding);
|
||||
.avatar {
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel" v-bind:class="{ show: showCatOptions }">
|
||||
<div class="panel" v-show="showCatOptions">
|
||||
<div class="big-cat" v-for="bigCat in allBigCats" :key="bigCat">
|
||||
<div class="name">{{ bigCat }}</div>
|
||||
<div class="cats">
|
||||
|
|
@ -174,23 +174,6 @@ export default {
|
|||
},
|
||||
},
|
||||
activated() {
|
||||
var updatePanelHeight = () => {
|
||||
var panelChildren = this.$el.getElementsByClassName("panel")[0].children;
|
||||
this.$el.style.setProperty(
|
||||
"--explore-panel-children-height",
|
||||
`${
|
||||
Math.abs(
|
||||
panelChildren[0].getBoundingClientRect().y -
|
||||
(panelChildren[panelChildren.length - 1].getBoundingClientRect()
|
||||
.y +
|
||||
panelChildren[panelChildren.length - 1].clientHeight)
|
||||
) + 16
|
||||
}px`
|
||||
);
|
||||
};
|
||||
window.addEventListener("load", updatePanelHeight);
|
||||
window.addEventListener("resize", updatePanelHeight);
|
||||
|
||||
this.loadData();
|
||||
},
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
|
|
@ -210,12 +193,10 @@ export default {
|
|||
h1 {
|
||||
color: var(--color-text);
|
||||
font-size: 56px;
|
||||
padding: var(--main-content-padding);
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: var(--main-content-padding);
|
||||
}
|
||||
.button {
|
||||
user-select: none;
|
||||
|
|
@ -245,19 +226,8 @@ h1 {
|
|||
margin-top: 10px;
|
||||
background: var(--color-secondary-bg);
|
||||
border-radius: 10px;
|
||||
padding: 0 8px;
|
||||
margin: var(--main-content-padding);
|
||||
padding: 8px;
|
||||
color: var(--color-text);
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.show {
|
||||
height: var(--explore-panel-children-height);
|
||||
opacity: 1;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.big-cat {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -152,7 +152,6 @@ export default {
|
|||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
padding: var(--main-content-padding);
|
||||
a {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@
|
|||
:id="likedSongsPlaylist.id"
|
||||
dbclickTrackFunc="playPlaylistByID"
|
||||
:columnNumber="3"
|
||||
:withoutPadding="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -356,7 +355,6 @@ h1 {
|
|||
color: var(--color-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--main-content-padding);
|
||||
.avatar {
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
|
|
@ -375,7 +373,6 @@ h1 {
|
|||
.section-one {
|
||||
display: flex;
|
||||
margin-top: 24px;
|
||||
padding: var(--main-content-padding);
|
||||
.songs {
|
||||
flex: 7;
|
||||
margin-top: 8px;
|
||||
|
|
@ -384,16 +381,6 @@ h1 {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.section-one {
|
||||
display: block;
|
||||
.songs {
|
||||
margin-top: 20px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.liked-songs {
|
||||
flex: 3;
|
||||
margin-top: 8px;
|
||||
|
|
@ -473,7 +460,6 @@ h1 {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
padding: var(--main-content-padding);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
|
|
|
|||
|
|
@ -106,7 +106,6 @@ export default {
|
|||
.login {
|
||||
display: flex;
|
||||
color: var(--color-text);
|
||||
padding: var(--main-content-padding);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -146,13 +146,11 @@ export default {
|
|||
background: transparent;
|
||||
overflow: hidden;
|
||||
max-height: 100vh;
|
||||
margin: var(--main-content-padding);
|
||||
}
|
||||
|
||||
.video-info {
|
||||
margin-top: 12px;
|
||||
color: var(--color-text);
|
||||
padding: var(--main-content-padding);
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
|
|
@ -177,8 +175,6 @@ export default {
|
|||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
opacity: 0.88;
|
||||
padding: var(--main-content-padding);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -135,22 +135,8 @@
|
|||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<div class="container" :class="{ active: inputFocus }">
|
||||
<svg-icon icon-class="search" />
|
||||
<div class="input">
|
||||
<input
|
||||
v-model="playlistKeyword"
|
||||
:placeholder="inputFocus ? '' : $t('playlist.search')"
|
||||
@focus="inputFocus = true"
|
||||
@blur="inputFocus = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TrackList
|
||||
:tracks="filteredTracks"
|
||||
:tracks="tracks"
|
||||
:type="'playlist'"
|
||||
:id="playlist.id"
|
||||
:extraContextMenuItem="
|
||||
|
|
@ -316,8 +302,6 @@ export default {
|
|||
tracks: [],
|
||||
loadingMore: false,
|
||||
lastLoadedTrackIndex: 9,
|
||||
playlistKeyword: "",
|
||||
inputFocus: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -344,22 +328,6 @@ export default {
|
|||
this.playlist.id !== this.data.likedSongPlaylistID
|
||||
);
|
||||
},
|
||||
filteredTracks() {
|
||||
return this.tracks.filter(
|
||||
(song) =>
|
||||
song.name
|
||||
.toLowerCase()
|
||||
.includes(this.playlistKeyword.toLowerCase()) ||
|
||||
song.al.name
|
||||
.toLowerCase()
|
||||
.includes(this.playlistKeyword.toLowerCase()) ||
|
||||
song.ar.find((artist) =>
|
||||
artist.name
|
||||
.toLowerCase()
|
||||
.includes(this.playlistKeyword.toLowerCase())
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["appendTrackToPlayerList"]),
|
||||
|
|
@ -406,11 +374,6 @@ export default {
|
|||
this.lastLoadedTrackIndex = data.playlist.tracks.length - 1;
|
||||
if (this.playlist.trackCount > this.tracks.length) {
|
||||
window.addEventListener("scroll", this.handleScroll, true);
|
||||
window.addEventListener(
|
||||
"input",
|
||||
this.handleSearch,
|
||||
this.playlistKeyword
|
||||
);
|
||||
}
|
||||
return data;
|
||||
})
|
||||
|
|
@ -421,11 +384,11 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
loadMore(loadNum = 50) {
|
||||
loadMore() {
|
||||
let trackIDs = this.playlist.trackIds.filter((t, index) => {
|
||||
if (
|
||||
index > this.lastLoadedTrackIndex &&
|
||||
index <= this.lastLoadedTrackIndex + loadNum
|
||||
index <= this.lastLoadedTrackIndex + 50
|
||||
)
|
||||
return t;
|
||||
});
|
||||
|
|
@ -452,15 +415,6 @@ export default {
|
|||
this.loadMore();
|
||||
}
|
||||
},
|
||||
handleSearch() {
|
||||
if (
|
||||
this.lastLoadedTrackIndex + 1 === this.playlist.trackIds.length ||
|
||||
this.loadingMore
|
||||
)
|
||||
return;
|
||||
this.loadingMore = true;
|
||||
this.loadMore(this.playlist.trackIds.length - this.lastLoadedTrackIndex);
|
||||
},
|
||||
openMenu(e) {
|
||||
this.$refs.playlistMenu.openMenu(e);
|
||||
},
|
||||
|
|
@ -498,8 +452,7 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.playlist-info {
|
||||
display: flex;
|
||||
margin-bottom: 40px;
|
||||
padding: var(--main-content-padding);
|
||||
margin-bottom: 72px;
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -558,25 +511,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.playlist-info {
|
||||
width: calc(100vw - 2 * var(--main-content-padding-x));
|
||||
display: block;
|
||||
.cover {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.info {
|
||||
margin-top: 24px;
|
||||
margin-left: 0;
|
||||
.title {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.special-playlist {
|
||||
margin-top: 192px;
|
||||
margin-bottom: 128px;
|
||||
|
|
@ -645,54 +579,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 10px;
|
||||
-webkit-app-region: no-drag;
|
||||
padding: var(--main-content-padding);
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
background: var(--color-secondary-bg-for-transparent);
|
||||
border-radius: 8px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
color: var(--color-text);
|
||||
opacity: 0.28;
|
||||
margin: {
|
||||
left: 8px;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
width: 96%;
|
||||
font-weight: 600;
|
||||
margin-top: -1px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--color-primary-bg-for-transparent);
|
||||
input,
|
||||
.svg-icon {
|
||||
opacity: 1;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gradient-test {
|
||||
background-image: linear-gradient(to left, #92fe9d 0%, #00c9ff 100%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
:columnNumber="3"
|
||||
:items="artists.slice(0, 3)"
|
||||
gap="34px 24px"
|
||||
:withoutPadding="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -31,7 +30,6 @@
|
|||
:columnNumber="3"
|
||||
subTextFontSize="14px"
|
||||
gap="34px 24px"
|
||||
:withoutPadding="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,7 +41,7 @@
|
|||
$t("home.seeMore")
|
||||
}}</router-link></div
|
||||
>
|
||||
<TrackList :tracks="tracks" type="tracklist" :withoutPadding="true" />
|
||||
<TrackList :tracks="tracks" type="tracklist" />
|
||||
</div>
|
||||
|
||||
<div class="music-videos" v-show="musicVideos.length > 0">
|
||||
|
|
@ -53,7 +51,7 @@
|
|||
$t("home.seeMore")
|
||||
}}</router-link></div
|
||||
>
|
||||
<MvRow :mvs="musicVideos.slice(0, 5)" :withoutPadding="true" />
|
||||
<MvRow :mvs="musicVideos.slice(0, 5)" />
|
||||
</div>
|
||||
|
||||
<div class="playlists" v-show="playlists.length > 0">
|
||||
|
|
@ -70,7 +68,6 @@
|
|||
:columnNumber="6"
|
||||
subTextFontSize="14px"
|
||||
gap="34px 24px"
|
||||
:withoutPadding="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -218,10 +215,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search {
|
||||
padding: var(--main-content-padding);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
|
|
|
|||
|
|
@ -140,7 +140,6 @@ export default {
|
|||
h1 {
|
||||
margin-top: -10px;
|
||||
margin-bottom: 28px;
|
||||
padding: var(--main-content-padding);
|
||||
color: var(--color-text);
|
||||
span {
|
||||
opacity: 0.58;
|
||||
|
|
|
|||
|
|
@ -460,7 +460,6 @@ export default {
|
|||
.settings {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--main-content-padding);
|
||||
}
|
||||
.container {
|
||||
margin-top: 24px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user