pvb3xqpfw
/
YepMusic
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: enhance UI compatibility

Browse Source
master
qier222 5 years ago
parent 3c3e5e7569
commit acf3d768f8
14 changed files with 254 additions and 320 deletions
Show Stats Download Patch File Download Diff File

10
src/App.vue
Unescape View File

@ -108,11 +108,11 @@ body {
html { html {
overflow-y: overlay; overflow-y: overlay;
min-width: 1000px; min-width: 768px;
} }
main { main {
margin-top: 96px; margin-top: 84px;
margin-bottom: 96px; margin-bottom: 96px;
padding: { padding: {
right: 10vw; right: 10vw;
@ -120,6 +120,12 @@ main {
} }
} }
@media (max-width: 1336px) {
main {
padding: 0 5vw;
}
}
select, select,
button { button {
font-family: inherit; font-family: inherit;

2
src/background.js
Unescape View File

@ -89,6 +89,8 @@ class Background {
this.window = new BrowserWindow({ this.window = new BrowserWindow({
width: this.store.get("window.width") | 1440, width: this.store.get("window.width") | 1440,
height: this.store.get("window.height") | 840, height: this.store.get("window.height") | 840,
minWidth: 768,
minHeight: 608,
titleBarStyle: "hiddenInset", titleBarStyle: "hiddenInset",
webPreferences: { webPreferences: {
webSecurity: false, webSecurity: false,

220
src/components/Cover.vue
Unescape View File

@ -1,35 +1,30 @@
<template> <template>
<div style="position: relative">
<div <div
class="cover" class="cover"
@mouseover="focus = true" @mouseover="focus = true"
@mouseleave="focus = false" @mouseleave="focus = false"
:style="coverStyle" :class="{ 'cover-hover': coverHover }"
:class="{ @click="clickCoverToPlay ? play() : goTo()"
'hover-float': hoverEffect,
'hover-play-button': showPlayButton,
}"
@click="clickToPlay ? play() : goTo()"
> >
<div class="cover-container">
<div class="shade">
<button <button
v-show="focus"
class="play-button" class="play-button"
v-if="showPlayButton" @click.stop="play()"
:style="playButtonStyle" :style="playButtonStyles"
@click.stop="playButtonClicked" ><svg-icon icon-class="play" />
>
<svg-icon icon-class="play" />
</button> </button>
</div> </div>
<img :src="imageUrl" :style="imageStyles" />
<transition name="fade" v-if="hoverEffect"> <transition name="fade" v-if="coverHover || alwaysShowShadow">
<img class="shadow" v-show="focus" :src="url" :style="shadowStyle" <div
/></transition>
<img
class="shadow" class="shadow"
v-if="alwaysShowShadow" v-show="focus || alwaysShowShadow"
:src="url" :style="shadowStyles"
:style="shadowStyle" ></div>
/> </transition>
</div>
</div> </div>
</template> </template>
@ -37,83 +32,54 @@
import { playAlbumByID, playPlaylistByID, playArtistByID } from "@/utils/play"; import { playAlbumByID, playPlaylistByID, playArtistByID } from "@/utils/play";
export default { export default {
name: "Cover",
props: { props: {
id: Number, id: { type: Number, required: true },
type: String, type: { type: String, required: true },
url: String, imageUrl: { type: String, required: true },
hoverEffect: Boolean, fixedSize: { type: Number, default: 0 },
showPlayButton: Boolean, playButtonSize: { type: Number, default: 22 },
alwaysShowShadow: Boolean, coverHover: { type: Boolean, default: true },
showBlackShadow: Boolean, alwaysShowPlayButton: { type: Boolean, default: true },
clickToPlay: Boolean, alwaysShowShadow: { type: Boolean, default: false },
size: { clickCoverToPlay: { type: Boolean, default: false },
type: Number, shadowMargin: { type: Number, default: 12 },
default: 208, radius: { type: Number, default: 12 },
},
shadowMargin: {
type: Number,
default: 12,
},
radius: {
type: Number,
default: 12,
},
playButtonSize: {
type: Number,
default: 48,
},
}, },
data() { data() {
return { return {
focus: false, focus: false,
shadowStyle: {},
playButtonStyle: {},
};
},
created() {
this.shadowStyle = {
height: `${this.size}px`,
width: `${~~(this.size * 0.96)}px`,
top: `${this.shadowMargin}px`,
right: `${~~(this.size * 0.02)}px`,
borderRadius: `${this.radius}px`,
};
this.playButtonStyle = {
height: `${this.playButtonSize}px`,
width: `${this.playButtonSize}px`,
}; };
}, },
computed: { computed: {
coverStyle() { imageStyles() {
return { let styles = {};
backgroundImage: `url('${this.url}')`, if (this.fixedSize !== 0) {
boxShadow: this.showBlackShadow styles.width = this.fixedSize + "px";
? "0 12px 16px -8px rgba(0, 0, 0, 0.2)" }
: "", if (this.type === "artist") styles.borderRadius = "50%";
height: `${this.size}px`, return styles;
width: `${this.size}px`, },
borderRadius: `${this.radius}px`, playButtonStyles() {
cursor: this.clickToPlay ? "default" : "pointer", let styles = {};
}; styles.width = this.playButtonSize + "%";
styles.height = this.playButtonSize + "%";
return styles;
},
shadowStyles() {
let styles = {};
styles.backgroundImage = `url(${this.imageUrl})`;
if (this.type === "artist") styles.borderRadius = "50%";
return styles;
}, },
}, },
methods: { methods: {
play() { play() {
if (this.type === "album") { const playActions = {
playAlbumByID(this.id); album: playAlbumByID,
} else if (this.type === "playlist") { playlist: playPlaylistByID,
playPlaylistByID(this.id); artist: playArtistByID,
} };
}, playActions[this.type](this.id);
playButtonClicked() {
if (this.type === "album") {
playAlbumByID(this.id);
} else if (this.type === "playlist") {
playPlaylistByID(this.id);
} else if (this.type === "artist") {
playArtistByID(this.id);
}
}, },
goTo() { goTo() {
this.$router.push({ name: this.type, params: { id: this.id } }); this.$router.push({ name: this.type, params: { id: this.id } });
@ -125,72 +91,70 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.cover { .cover {
position: relative; position: relative;
padding: 0;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s; transition: transform 0.3s;
} }
.cover-container {
.hover-float { position: relative;
&:hover {
transform: scale(1.02);
box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.05);
} }
img {
border-radius: 0.75em;
width: 100%;
user-select: none;
} }
.hover-play-button { .cover-hover {
&:hover {
.play-button {
opacity: 1;
transform: unset;
}
}
.play-button {
&:hover { &:hover {
transform: scale(1.06); cursor: pointer;
} transform: scale(1.02);
&:active {
transform: scale(0.94);
}
} }
} }
.shadow { .shade {
position: absolute; position: absolute;
filter: blur(16px) opacity(0.6); top: 0;
z-index: -1; height: calc(100% - 3px);
height: 208px; width: 100%;
transform: scale(0.98); background: transparent;
} display: flex;
[data-theme="dark"] { justify-content: center;
.shadow { align-items: center;
filter: blur(16px) brightness(68%);
transform: scale(0.96);
}
} }
.play-button { .play-button {
opacity: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
// right: 72px; color: white;
// top: 72px;
border: none;
backdrop-filter: blur(12px) brightness(96%); backdrop-filter: blur(12px) brightness(96%);
background: transparent; background: transparent;
color: white; height: 22%;
width: 22%;
border-radius: 50%; border-radius: 50%;
cursor: default; cursor: default;
transition: 0.2s; transition: 0.2s;
.svg-icon { .svg-icon {
height: 50%; height: 44%;
margin: { margin: {
left: 3px; left: 4px;
}
}
&:hover {
transform: scale(1.06);
}
&:active {
transform: scale(0.94);
} }
} }
.shadow {
position: absolute;
top: 12px;
height: 100%;
width: 100%;
filter: blur(16px) opacity(0.6);
transform: scale(0.92, 0.96);
z-index: -1;
background-size: cover;
border-radius: 0.75em;
} }
.fade-enter-active, .fade-enter-active,

95
src/components/CoverRow.vue
Unescape View File

@ -2,23 +2,15 @@
<div class="cover-row"> <div class="cover-row">
<div <div
class="item" class="item"
:class="{ artist: type === 'artist' }"
v-for="item in items" v-for="item in items"
:key="item.id" :key="item.id"
:style="{ marginBottom: subText === 'none' ? '32px' : '24px' }" :class="{ artist: type === 'artist' }"
> >
<Cover <Cover
class="cover" :imageUrl="item.img1v1Url || item.picUrl || item.coverImgUrl"
:type="type"
:id="item.id" :id="item.id"
:type="type === 'chart' ? 'playlist' : type"
:url="getUrl(item) | resizeImage(imageSize)"
:hoverEffect="true"
:showBlackShadow="true"
:showPlayButton="showPlayButton"
:radius="type === 'artist' ? 100 : 12"
:size="type === 'artist' ? 192 : 208"
/> />
<div class="text"> <div class="text">
<div class="info" v-if="showPlayCount"> <div class="info" v-if="showPlayCount">
<span class="play-count" <span class="play-count"
@ -27,22 +19,14 @@
}} }}
</span> </span>
</div> </div>
<div class="name"> <div class="title">
<span <span class="explicit-symbol" v-if="isExplicit(item)"
class="explicit-symbol"
v-if="type === 'album' && item.mark === 1056768"
><ExplicitSymbol ><ExplicitSymbol
/></span> /></span>
<span <span class="lock-icon" v-if="isPrivacy(item)">
class="lock-icon"
v-if="type === 'playlist' && item.privacy === 10"
>
<svg-icon icon-class="lock" <svg-icon icon-class="lock"
/></span> /></span>
<router-link <router-link :to="getTitleLink(item)">{{ item.name }}</router-link>
:to="`/${type === 'chart' ? 'playlist' : type}/${item.id}`"
>{{ item.name }}</router-link
>
</div> </div>
<div class="info" v-if="type !== 'artist' && subText !== 'none'"> <div class="info" v-if="type !== 'artist' && subText !== 'none'">
<span v-html="getSubText(item)"></span> <span v-html="getSubText(item)"></span>
@ -53,8 +37,8 @@
</template> </template>
<script> <script>
import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
import Cover from "@/components/Cover.vue"; import Cover from "@/components/Cover.vue";
import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
export default { export default {
name: "CoverRow", name: "CoverRow",
@ -63,31 +47,12 @@ export default {
ExplicitSymbol, ExplicitSymbol,
}, },
props: { props: {
items: Array, items: { type: Array, required: true },
type: String, type: { type: String, required: true },
subText: { subText: { type: String, default: "null" },
type: String, showPlayCount: { type: Boolean, default: false },
default: "none",
},
imageSize: {
type: Number,
default: 512,
},
showPlayButton: {
type: Boolean,
default: false,
},
showPlayCount: {
type: Boolean,
default: false,
},
}, },
methods: { methods: {
getUrl(item) {
if (item.picUrl !== undefined) return item.picUrl;
if (item.coverImgUrl !== undefined) return item.coverImgUrl;
if (item.img1v1Url !== undefined) return item.img1v1Url;
},
getSubText(item) { getSubText(item) {
if (this.subText === "copywriter") return item.copywriter; if (this.subText === "copywriter") return item.copywriter;
if (this.subText === "description") return item.description; if (this.subText === "description") return item.description;
@ -114,34 +79,35 @@ export default {
} }
if (this.subText === "appleMusic") return "by Apple Music"; if (this.subText === "appleMusic") return "by Apple Music";
}, },
isPrivacy(item) {
return this.type === "playlist" && item.privacy === 10;
},
isExplicit(item) {
return this.type === "album" && item.mark === 1056768;
},
getTitleLink(item) {
let type = this.type === "chart" ? "playlist" : this.type;
return `/${type}/${item.id}`;
},
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.cover-row { .cover-row {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(5, 1fr);
margin: { gap: 44px 24px;
right: -12px;
left: -12px;
}
.index-playlist {
margin: 12px 12px 24px 12px;
}
} }
.item { .item {
margin: 12px 12px 24px 12px;
color: var(--color-text); color: var(--color-text);
.text { .text {
width: 208px;
margin-top: 8px; margin-top: 8px;
.name { .title {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
line-height: 20px; line-height: 20px;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
@ -155,7 +121,6 @@ export default {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
// margin-top: 4px;
} }
} }
} }
@ -168,11 +133,17 @@ export default {
.cover { .cover {
display: flex; display: flex;
} }
.name { .title {
margin-top: 4px; margin-top: 4px;
} }
} }
@media (max-width: 834px) {
.item .text .title {
font-size: 14px;
}
}
.explicit-symbol { .explicit-symbol {
opacity: 0.28; opacity: 0.28;
color: var(--color-text); color: var(--color-text);

50
src/components/MvRow.vue
Unescape View File

@ -1,20 +1,19 @@
<template> <template>
<div class="mv-row"> <div class="mv-row">
<div class="mv" v-for="mv in mvs" :key="getID(mv)"> <div class="mv" v-for="mv in mvs" :key="getID(mv)">
<div class="cover-container"> <div
<img
class="cover" class="cover"
:src="getUrl(mv)"
@mouseover="hoverVideoID = getID(mv)" @mouseover="hoverVideoID = getID(mv)"
@mouseleave="hoverVideoID = 0" @mouseleave="hoverVideoID = 0"
@click="goToMv(getID(mv))" @click="goToMv(getID(mv))"
/> >
<img :src="getUrl(mv)" />
<transition name="fade"> <transition name="fade">
<img <div
class="shadow" class="shadow"
v-show="hoverVideoID === getID(mv)" v-show="hoverVideoID === getID(mv)"
:src="getUrl(mv)" :style="{ background: 'url(' + getUrl(mv) + ')' }"
/> ></div>
</transition> </transition>
</div> </div>
<div class="info"> <div class="info">
@ -87,14 +86,12 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.mv-row { .mv-row {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(5, 1fr);
margin-left: -12px; gap: 36px 24px;
} }
.mv { .mv {
margin: 12px 12px 24px 12px;
width: 204px;
color: var(--color-text); color: var(--color-text);
.title { .title {
@ -116,31 +113,30 @@ export default {
} }
} }
.cover-container {
position: relative;
.cover { .cover {
position: relative; position: relative;
padding: 0; transition: transform 0.3s;
background-size: cover;
transition: 0.3s;
width: 200px;
border-radius: 10px;
cursor: pointer;
&:hover { &:hover {
cursor: pointer;
transform: scale(1.02); transform: scale(1.02);
box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.05);
} }
} }
img {
border-radius: 0.75em;
width: 100%;
user-select: none;
}
.shadow { .shadow {
position: absolute; position: absolute;
filter: blur(16px) opacity(0.6);
z-index: -1;
width: 200px;
top: 6px; top: 6px;
left: 0; height: 100%;
border-radius: 10px; width: 100%;
} filter: blur(16px) opacity(0.4);
transform: scale(0.9, 0.9);
z-index: -1;
background-size: cover;
border-radius: 0.75em;
} }
.fade-enter-active, .fade-enter-active,

14
src/components/Navbar.vue
Unescape View File

@ -105,13 +105,17 @@ nav {
} }
backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
// background: var(--color-body-bg);
// background-color: rgba(255, 255, 255, 0.86);
background-color: var(--color-navbar-bg); background-color: var(--color-navbar-bg);
z-index: 100; z-index: 100;
-webkit-app-region: drag; -webkit-app-region: drag;
} }
@media (max-width: 1336px) {
nav {
padding: 0 5vw;
}
}
.navigation-buttons { .navigation-buttons {
flex: 1; flex: 1;
display: flex; display: flex;
@ -124,6 +128,12 @@ nav {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
} }
@media (max-width: 970px) {
.navigation-buttons {
flex: unset;
}
}
.navigation-links { .navigation-links {
flex: 1; flex: 1;
display: flex; display: flex;

6
src/components/Player.vue
Unescape View File

@ -335,6 +335,12 @@ export default {
} }
} }
@media (max-width: 1336px) {
.controls {
padding: 0 5vw;
}
}
.playing { .playing {
flex: 1; flex: 1;
display: flex; display: flex;

21
src/components/TrackList.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<div class="track-list" :style="listStyles"> <div class="track-list">
<ContextMenu ref="menu"> <ContextMenu ref="menu">
<div class="item-info"> <div class="item-info">
<img :src="rightClickedTrack.al.picUrl | resizeImage(224)" /> <img :src="rightClickedTrack.al.picUrl | resizeImage(224)" />
@ -26,6 +26,7 @@
> >
<div class="item" @click="addTrackToPlaylist">添加到歌单</div> <div class="item" @click="addTrackToPlaylist">添加到歌单</div>
</ContextMenu> </ContextMenu>
<div :style="listStyles">
<TrackListItem <TrackListItem
v-for="track in tracks" v-for="track in tracks"
:track="track" :track="track"
@ -34,6 +35,7 @@
@click.right.native="openMenu($event, track)" @click.right.native="openMenu($event, track)"
/> />
</div> </div>
</div>
</template> </template>
<script> <script>
@ -61,10 +63,6 @@ export default {
tracks: Array, tracks: Array,
type: String, type: String,
id: Number, id: Number,
itemWidth: {
type: Number,
default: -1,
},
dbclickTrackFunc: { dbclickTrackFunc: {
type: String, type: String,
default: "default", default: "default",
@ -85,6 +83,10 @@ export default {
return []; // 'removeTrackFromPlaylist' return []; // 'removeTrackFromPlaylist'
}, },
}, },
columnNumber: {
type: Number,
default: 4,
},
}, },
data() { data() {
return { return {
@ -98,8 +100,13 @@ export default {
}; };
}, },
created() { created() {
if (this.type === "tracklist") if (this.type === "tracklist") {
this.listStyles = { display: "flex", flexWrap: "wrap" }; this.listStyles = {
display: "grid",
gap: "4px",
gridTemplateColumns: `repeat(${this.columnNumber}, 1fr)`,
};
}
}, },
computed: { computed: {
...mapState(["liked"]), ...mapState(["liked"]),

5
src/components/TrackListItem.vue
Unescape View File

@ -152,10 +152,6 @@ export default {
this.$parent.likeASong(this.track.id); this.$parent.likeASong(this.track.id);
}, },
}, },
created() {
if (this.$parent.itemWidth !== -1)
this.trackStyle = { width: this.$parent.itemWidth + "px" };
},
}; };
</script> </script>
@ -323,7 +319,6 @@ button {
} }
.track.tracklist { .track.tracklist {
width: 256px;
img { img {
height: 36px; height: 36px;
width: 36px; width: 36px;

13
src/views/album.vue
Unescape View File

@ -2,13 +2,15 @@
<div class="album" v-show="show"> <div class="album" v-show="show">
<div class="playlist-info"> <div class="playlist-info">
<Cover <Cover
:url="album.picUrl | resizeImage(1024)" :imageUrl="album.picUrl | resizeImage(1024)"
:showPlayButton="true" :showPlayButton="true"
:alwaysShowShadow="true" :alwaysShowShadow="true"
:clickToPlay="true" :clickCoverToPlay="true"
:size="288" :fixedSize="288"
:type="'album'" type="album"
:id="album.id" :id="album.id"
:coverHover="false"
:playButtonSize="18"
@click.right.native="openMenu" @click.right.native="openMenu"
/> />
<div class="info"> <div class="info">
@ -97,7 +99,6 @@
type="album" type="album"
:items="filteredMoreAlbums" :items="filteredMoreAlbums"
subText="albumType+releaseYear" subText="albumType+releaseYear"
:showPlayButton="true"
/> />
</div> </div>
</div> </div>
@ -361,7 +362,7 @@ export default {
font-weight: 600; font-weight: 600;
opacity: 0.88; opacity: 0.88;
color: var(--color-text); color: var(--color-text);
margin-bottom: 8px; margin-bottom: 20px;
} }
} }
</style> </style>

13
src/views/artist.vue
Unescape View File

@ -36,16 +36,11 @@
<div class="release"> <div class="release">
<div class="container"> <div class="container">
<Cover <Cover
:url="latestRelease.picUrl | resizeImage" :imageUrl="latestRelease.picUrl | resizeImage"
:showPlayButton="true" type="album"
:showBlackShadow="true"
:type="`album`"
:id="latestRelease.id" :id="latestRelease.id"
:hoverEffect="true" :fixedSize="128"
:size="128" :playButtonSize="30"
:playButtonSize="36"
:shadowMargin="8"
:radius="8"
/> />
<div class="info"> <div class="info">
<div class="name"> <div class="name">

9
src/views/library.vue
Unescape View File

@ -33,9 +33,9 @@
<TrackList <TrackList
:tracks="likedSongs" :tracks="likedSongs"
:type="'tracklist'" :type="'tracklist'"
:itemWidth="220"
:id="likedSongsPlaylist.id" :id="likedSongsPlaylist.id"
dbclickTrackFunc="playPlaylistByID" dbclickTrackFunc="playPlaylistByID"
:columnNumber="3"
/> />
</div> </div>
</div> </div>
@ -245,7 +245,7 @@ export default {
getLikedSongs(getLyric = true) { getLikedSongs(getLyric = true) {
getPlaylistDetail(this.data.likedSongPlaylistID, true).then((data) => { getPlaylistDetail(this.data.likedSongPlaylistID, true).then((data) => {
this.likedSongsPlaylist = data.playlist; this.likedSongsPlaylist = data.playlist;
let TrackIDs = data.playlist.trackIds.slice(0, 20).map((t) => t.id); let TrackIDs = data.playlist.trackIds.slice(0, 12).map((t) => t.id);
this.likedSongIDs = TrackIDs; this.likedSongIDs = TrackIDs;
getTrackDetail(this.likedSongIDs.join(",")).then((data) => { getTrackDetail(this.likedSongIDs.join(",")).then((data) => {
this.likedSongs = data.songs; this.likedSongs = data.songs;
@ -323,7 +323,6 @@ h1 {
flex: 7; flex: 7;
margin-top: 8px; margin-top: 8px;
margin-left: 36px; margin-left: 36px;
height: 216px;
overflow: hidden; overflow: hidden;
} }
} }
@ -332,8 +331,6 @@ h1 {
flex: 3; flex: 3;
margin-top: 8px; margin-top: 8px;
cursor: pointer; cursor: pointer;
height: 216px;
width: 300px;
border-radius: 16px; border-radius: 16px;
padding: 18px 24px; padding: 18px 24px;
display: flex; display: flex;
@ -442,7 +439,7 @@ h1 {
button.add-playlist { button.add-playlist {
color: var(--color-text); color: var(--color-text);
border-radius: 8px; border-radius: 8px;
padding: 0 12px; padding: 0 14px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

11
src/views/playlist.vue
Unescape View File

@ -5,11 +5,15 @@
v-if="specialPlaylistInfo === undefined && !isLikeSongsPage" v-if="specialPlaylistInfo === undefined && !isLikeSongsPage"
> >
<Cover <Cover
:url="playlist.coverImgUrl | resizeImage(1024)" :imageUrl="playlist.coverImgUrl | resizeImage(1024)"
:showPlayButton="true" :showPlayButton="true"
:alwaysShowShadow="true" :alwaysShowShadow="true"
:clickToPlay="true" :clickCoverToPlay="true"
:size="288" :fixedSize="288"
type="playlist"
:id="playlist.id"
:coverHover="false"
:playButtonSize="18"
@click.right.native="openMenu" @click.right.native="openMenu"
/> />
<div class="info"> <div class="info">
@ -288,6 +292,7 @@ export default {
return { return {
show: false, show: false,
playlist: { playlist: {
id: 0,
coverImgUrl: "", coverImgUrl: "",
creator: { creator: {
userId: "", userId: "",

51
src/views/search.vue
Unescape View File

@ -14,16 +14,11 @@
:key="artist.id" :key="artist.id"
> >
<Cover <Cover
:url="artist.img1v1Url | resizeImage" :imageUrl="artist.img1v1Url | resizeImage"
:showBlackShadow="true" type="artist"
:hoverEffect="true"
:showPlayButton="true"
:type="`artist`"
:id="artist.id" :id="artist.id"
:size="128" :fixedSize="128"
:playButtonSize="36" :playButtonSize="30"
:shadowMargin="8"
:radius="100"
/> />
<div class="name"> <div class="name">
<router-link :to="`/artist/${artist.id}`">{{ <router-link :to="`/artist/${artist.id}`">{{
@ -43,16 +38,11 @@
> >
<div> <div>
<Cover <Cover
:url="album.picUrl | resizeImage" :imageUrl="album.picUrl | resizeImage"
:showBlackShadow="true" type="album"
:hoverEffect="true"
:showPlayButton="true"
:type="`album`"
:id="album.id" :id="album.id"
:size="128" :fixedSize="128"
:playButtonSize="36" :playButtonSize="30"
:shadowMargin="8"
:radius="8"
/> />
</div> </div>
<div class="name"> <div class="name">
@ -72,12 +62,12 @@
<div class="tracks" v-if="result.hasOwnProperty('song')"> <div class="tracks" v-if="result.hasOwnProperty('song')">
<div class="section-title">{{ $t("search.song") }}</div> <div class="section-title">{{ $t("search.song") }}</div>
<TrackList :tracks="tracks" :type="'tracklist'" /> <TrackList :tracks="tracks" type="tracklist" />
</div> </div>
<div class="mvs" v-if="mvs !== null && mvs.length > 0"> <div class="mvs" v-if="mvs !== null && mvs.length > 0">
<div class="section-title">{{ $t("search.mv") }}</div> <div class="section-title">{{ $t("search.mv") }}</div>
<MvRow class="mv-row" :mvs="mvs.slice(0, 5)" /> <MvRow :mvs="mvs.slice(0, 5)" />
</div> </div>
<div class="playlists" v-if="result.hasOwnProperty('playList')"> <div class="playlists" v-if="result.hasOwnProperty('playList')">
@ -90,16 +80,11 @@
> >
<div> <div>
<Cover <Cover
:url="playlist.coverImgUrl | resizeImage" :imageUrl="playlist.coverImgUrl | resizeImage"
:showBlackShadow="true" type="playlist"
:hoverEffect="true"
:showPlayButton="true"
:type="`playlist`"
:id="playlist.id" :id="playlist.id"
:size="128" :fixedSize="128"
:playButtonSize="36" :playButtonSize="30"
:shadowMargin="8"
:radius="8"
/> />
</div> </div>
<div class="name"> <div class="name">
@ -209,6 +194,7 @@ h1 {
.row { .row {
display: flex; display: flex;
flex-wrap: wrap;
} }
.artists, .artists,
@ -271,11 +257,4 @@ h1 {
margin-top: 24px; margin-top: 24px;
font-size: 24px; font-size: 24px;
} }
.mvs {
.mv-row {
margin-top: -12px;
margin-bottom: -24px;
}
}
</style> </style>

Write Preview
Loading…
Cancel
Save