diff --git a/src/views/artist.vue b/src/views/artist.vue
index b6e504b..33e75a3 100644
--- a/src/views/artist.vue
+++ b/src/views/artist.vue
@@ -57,7 +57,36 @@
-
+
+
+
+
+
+
+
+
+
+ {{
+ latestMV.name
+ }}
+
+
+ {{ latestMV.publishTime | formatDate }}
+
+
最新MV
+
+
@@ -162,6 +191,7 @@ export default {
mvs: [],
hasMoreMV: false,
similarArtists: [],
+ mvHover: false,
};
},
computed: {
@@ -174,6 +204,15 @@ export default {
['EP/Single', 'EP', 'Single'].includes(a.type)
);
},
+ latestMV() {
+ const mv = this.mvs[0];
+ return {
+ id: mv.id || mv.vid,
+ name: mv.name || mv.title,
+ coverUrl: `${mv.imgurl16v9 || mv.cover || mv.coverUrl}?param=464y260`,
+ publishTime: mv.publishTime,
+ };
+ },
},
created() {
this.loadData(this.$route.params.id);
@@ -216,6 +255,9 @@ export default {
params: { id },
});
},
+ goToMv(id) {
+ this.$router.push({ path: '/mv/' + id });
+ },
playPopularSongs(trackID = 'first') {
let trackIDs = this.popularTracks.map(t => t.id);
this.$store.state.player.replacePlaylist(
@@ -314,6 +356,7 @@ export default {
}
.container {
display: flex;
+ flex: 1;
align-items: center;
border-radius: 12px;
}
@@ -364,4 +407,40 @@ export default {
margin-bottom: 24px;
}
}
+
+.latest-mv {
+ .cover {
+ position: relative;
+ transition: transform 0.3s;
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ img {
+ border-radius: 0.75em;
+ height: 128px;
+ object-fit: cover;
+ user-select: none;
+ }
+
+ .shadow {
+ position: absolute;
+ top: 6px;
+ height: 100%;
+ 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-leave-active {
+ transition: opacity 0.3s;
+ }
+ .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+ opacity: 0;
+ }
+}