From ec011079ba865a1abd5560c29a9210dbdab10331 Mon Sep 17 00:00:00 2001
From: CosineSky <11737516+cosinesky@user.noreply.gitee.com>
Date: Sat, 21 Dec 2024 12:43:21 +0800
Subject: [PATCH] - Fixing
---
src/components/MainView.vue | 151 ++--
src/components/MusicAlbumView.vue | 1271 +++++++++++++++--------------
src/views/HomePage.vue | 488 ++++++-----
3 files changed, 977 insertions(+), 933 deletions(-)
diff --git a/src/components/MainView.vue b/src/components/MainView.vue
index 7816b14..107046c 100644
--- a/src/components/MainView.vue
+++ b/src/components/MainView.vue
@@ -7,120 +7,123 @@ const songs = ref([]);
const currentTab = ref('all')
const handleTabClick = (tab) => {
- currentTab.value = tab
+ currentTab.value = tab
}
getSongsByPlaylist({
- playlist_id: 3,
+ playlist_id: 3,
}).then((res) => {
- songs.value = res.data.result.slice(0, 4);
+ songs.value = res.data.result.slice(0, 4);
});
</script>
<template>
- <div class="main-view">
- <div class="tabs">
- <button
- class="tab-button"
- :class="{ 'active': currentTab === 'all' }"
- @click="handleTabClick('all')"
- >鍏ㄩ儴</button>
- <button
- class="tab-button"
- :class="{ 'active': currentTab === 'songs' }"
- @click="handleTabClick('songs')"
- >闊充箰</button>
- </div>
-
- <div class="recommendations">
- <h1>鏍规嵁鎮ㄧ殑鍠滃ソ鎺ㄨ崘鐨勯煶涔�</h1>
- <div class="recommend-songs">
- <div v-for="song in songs"
- :key="song.id"
- class="song">
- <img :src="song.picPath" alt="">
- <h2>{{ song.title }}</h2>
- <p>{{ song.artist }}</p>
- </div>
- </div>
- </div>
- </div>
+ <div class="main-view">
+ <div class="tabs">
+ <button
+ class="tab-button"
+ :class="{ 'active': currentTab === 'all' }"
+ @click="handleTabClick('all')"
+ >鍏ㄩ儴
+ </button>
+ <button
+ class="tab-button"
+ :class="{ 'active': currentTab === 'songs' }"
+ @click="handleTabClick('songs')"
+ >闊充箰
+ </button>
+ </div>
+
+ <div class="recommendations">
+ <h1>鏍规嵁鎮ㄧ殑鍠滃ソ鎺ㄨ崘鐨勯煶涔�</h1>
+ <div class="recommend-songs">
+ <div v-for="song in songs"
+ :key="song.id"
+ class="song">
+ <img :src="song.picPath" alt="">
+ <h2>{{ song.title }}</h2>
+ <p>{{ song.artist }}</p>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<style scoped>
.main-view {
- padding: 20px;
+ padding: 20px;
}
.tabs {
- margin-bottom: 20px;
- display: flex;
- flex-direction: row;
+ margin-bottom: 20px;
+ display: flex;
+ flex-direction: row;
}
.tab-button {
- background-color: transparent;
- color: #eaeaea;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- z-index: 999;
- transition: background-color 0.3s ease;
- border: 1px solid #fff;
- margin: 0 10px;
- border-radius: 12px;
- font-size: 18px;
- padding: 5px 10px;
+ background-color: transparent;
+ color: #eaeaea;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ z-index: 999;
+ transition: background-color 0.3s ease;
+ border: 1px solid #fff;
+ margin: 0 10px;
+ border-radius: 12px;
+ font-size: 18px;
+ padding: 5px 10px;
}
.tab-button:hover {
- background: rgba(255, 255, 255, 0.2);
+ background: rgba(255, 255, 255, 0.2);
}
.recommendations h1 {
- font-size: 24px;
- margin-bottom: 15px;
- margin-left: 10px;
- color: #fff;
- text-align: left;
+ font-size: 24px;
+ margin-bottom: 15px;
+ margin-left: 10px;
+ color: #fff;
+ text-align: left;
}
.recommend-songs {
- display: flex;
- flex-direction: row;
+ display: flex;
+ flex-direction: row;
}
.recommend-songs img {
- width: 200px;
- height: 200px;
- margin-top: 10px
+ width: 200px;
+ height: 200px;
+ margin-top: 10px
}
.recommend-songs h2 {
- font-size: 20px;
- margin-bottom: 5px;
- color: #fff;
- text-align: left;
- margin-left: 15px;
+ font-size: 20px;
+ margin-bottom: 5px;
+ color: #fff;
+ text-align: left;
+ margin-left: 15px;
}
.recommend-songs p {
- font-size: 14px;
- color: #f0f0f0;
- text-align: left;
- margin-left: 15px;
+ font-size: 14px;
+ color: #f0f0f0;
+ text-align: left;
+ margin-left: 15px;
}
.song {
- border: 1px solid #fff;
- width: 240px;
- border-radius: 20px;
- margin-right: 20px;
+ border: 1px solid #fff;
+ width: 240px;
+ border-radius: 20px;
+ margin-right: 20px;
}
+
.active {
- background-color: #fff;
- color: #000;
+ background-color: #fff;
+ color: #000;
}
</style>
\ No newline at end of file
diff --git a/src/components/MusicAlbumView.vue b/src/components/MusicAlbumView.vue
index b4bc873..9d4ccd8 100644
--- a/src/components/MusicAlbumView.vue
+++ b/src/components/MusicAlbumView.vue
@@ -10,15 +10,16 @@ import {removePlaylist, removeSongFromPlaylist} from "../api/playlist";
const emit = defineEmits();
const props = defineProps({
- albumInfo: { // 绫诲瀷 锛歩d, userid, title ,description ,picPath,createTime,updateTime,songNum
- type: Object,
- required: true,
- },
- musicList: {// 绫诲瀷 锛歩d ,title, artist, album,description, picPath,uploadTime
- type: Object,
- required: true,
- },
- playFromLeftBar: null
+ albumInfo: { // 绫诲瀷 锛歩d, userid, title ,description ,picPath,createTime,updateTime,songNum
+ type: Object,
+ required: true,
+ },
+ musicList: {// 绫诲瀷 锛歩d ,title, artist, album,description, picPath,uploadTime
+ type: Object,
+ required: true,
+ },
+ playFromLeftBar: null,
+ currentSongId: Number
});
const gradientColor = computed(() => `linear-gradient(to bottom, ${backgroundColor.value} , #1F1F1F 50%)`)
@@ -46,47 +47,47 @@ const resizeObserver = ref(null)
// 鏀剧缉鏃剁殑缁勪欢澶勭悊
const handleResize = () => {
- const albums = document.querySelectorAll(".music-album-info");
- const albumText = document.querySelectorAll(".album-text");
- const albumContent = document.querySelector(".album-content");
- // if (window.innerWidth > 0)
- // 涓撹緫闅愯棌
- console.log(albumContent.clientWidth);
- if (albumContent.clientWidth < 605) {
- albums.forEach(album => {
- album.style.visibility = "hidden";
- });
- albumText.forEach(album => {
- album.style.visibility = "hidden";
- });
-
- } else {
- albums.forEach(album => {
- album.style.visibility = "visible";
- });
- albumText.forEach(album => {
- album.style.visibility = "visible";
- });
- }
- const albumImage = document.querySelector(".album-image");
- const headerAlbumName = document.querySelector(".header-album-name");
- // 姝屽崟鍥剧墖鍜屾枃瀛楃缉鏀�
- if (albumContent.clientWidth < 420) {
- albumImage.style.width = "120px";
- albumImage.style.height = "120px";
- headerAlbumName.style.fontSize = "40px";
- headerAlbumName.style.marginBottom = "20px";
- } else {
- albumImage.style.width = "160px";
- albumImage.style.height = "160px";
- headerAlbumName.style.fontSize = "80px";
- headerAlbumName.style.marginBottom = "35px";
- }
- //馃檹
- const fixedTipArea = document.querySelector(".fixed-tips");
- const fixedPlayArea = document.querySelector(".fixed-play-area");
- fixedPlayArea.style.width = (albumContent.clientWidth - 20) + "px";
- fixedTipArea.style.width = (albumContent.clientWidth - 16) + "px";
+ const albums = document.querySelectorAll(".music-album-info");
+ const albumText = document.querySelectorAll(".album-text");
+ const albumContent = document.querySelector(".album-content");
+ // if (window.innerWidth > 0)
+ // 涓撹緫闅愯棌
+ console.log(albumContent.clientWidth);
+ if (albumContent.clientWidth < 605) {
+ albums.forEach(album => {
+ album.style.visibility = "hidden";
+ });
+ albumText.forEach(album => {
+ album.style.visibility = "hidden";
+ });
+
+ } else {
+ albums.forEach(album => {
+ album.style.visibility = "visible";
+ });
+ albumText.forEach(album => {
+ album.style.visibility = "visible";
+ });
+ }
+ const albumImage = document.querySelector(".album-image");
+ const headerAlbumName = document.querySelector(".header-album-name");
+ // 姝屽崟鍥剧墖鍜屾枃瀛楃缉鏀�
+ if (albumContent.clientWidth < 420) {
+ albumImage.style.width = "120px";
+ albumImage.style.height = "120px";
+ headerAlbumName.style.fontSize = "40px";
+ headerAlbumName.style.marginBottom = "20px";
+ } else {
+ albumImage.style.width = "160px";
+ albumImage.style.height = "160px";
+ headerAlbumName.style.fontSize = "80px";
+ headerAlbumName.style.marginBottom = "35px";
+ }
+ //馃檹
+ const fixedTipArea = document.querySelector(".fixed-tips");
+ const fixedPlayArea = document.querySelector(".fixed-play-area");
+ fixedPlayArea.style.width = (albumContent.clientWidth - 20) + "px";
+ fixedTipArea.style.width = (albumContent.clientWidth - 16) + "px";
}
const debounce = (fn, delay) => {
@@ -115,41 +116,41 @@ onMounted(() => {
onUnmounted(() => {
if (resizeObserver.value) {
- resizeObserver.value.disconnect();
- }
- popovers.value=null;
+ resizeObserver.value.disconnect();
+ }
+ popovers.value = null;
})
const handelScroll = (event) => {
-
- const playArea = document.querySelector(".play-area");
- const fixedPlayArea = document.querySelector(".fixed-play-area");
- const tipArea = document.querySelector(".tips");
- const fixedTipArea = document.querySelector(".fixed-tips");
- const albumContent = document.querySelector(".album-content");
-
- const offsetHeight =albumContent.offsetTop;
- const stickyPlayY = playArea.offsetTop - offsetHeight;
- const stickyTipY = tipArea.offsetTop - offsetHeight;
- const curOffset =offsetHeight-albumContent.getBoundingClientRect().top;
-
- console.log(stickyPlayY,stickyTipY);
- if (curOffset >= stickyPlayY) {
- fixedPlayArea.style.opacity = "1";
- fixedPlayArea.style.top =offsetHeight + "px";
-
-
- fixedPlayArea.style.width = (albumContent.clientWidth - 20) + "px";
- } else {
- fixedPlayArea.style.opacity = "0";
- }
- if (curOffset + fixedPlayArea.scrollHeight >= stickyTipY) {
- fixedTipArea.style.display = "flex";
- fixedTipArea.style.top = offsetHeight+ fixedPlayArea.scrollHeight + 'px';
-
- } else {
- fixedTipArea.style.display = "none";
- }
+
+ const playArea = document.querySelector(".play-area");
+ const fixedPlayArea = document.querySelector(".fixed-play-area");
+ const tipArea = document.querySelector(".tips");
+ const fixedTipArea = document.querySelector(".fixed-tips");
+ const albumContent = document.querySelector(".album-content");
+
+ const offsetHeight = albumContent.offsetTop;
+ const stickyPlayY = playArea.offsetTop - offsetHeight;
+ const stickyTipY = tipArea.offsetTop - offsetHeight;
+ const curOffset = offsetHeight - albumContent.getBoundingClientRect().top;
+
+ console.log(stickyPlayY, stickyTipY);
+ if (curOffset >= stickyPlayY) {
+ fixedPlayArea.style.opacity = "1";
+ fixedPlayArea.style.top = offsetHeight + "px";
+
+
+ fixedPlayArea.style.width = (albumContent.clientWidth - 20) + "px";
+ } else {
+ fixedPlayArea.style.opacity = "0";
+ }
+ if (curOffset + fixedPlayArea.scrollHeight >= stickyTipY) {
+ fixedTipArea.style.display = "flex";
+ fixedTipArea.style.top = offsetHeight + fixedPlayArea.scrollHeight + 'px';
+
+ } else {
+ fixedTipArea.style.display = "none";
+ }
}
window.onscroll = () => {
@@ -159,7 +160,7 @@ window.onscroll = () => {
const fixedTipArea = document.querySelector(".fixed-tips");
const stickyPlayY = playArea.offsetTop;
const stickyTipY = tipArea.offsetTop;
-
+
if (window.scrollY >= stickyPlayY) {
fixedPlayArea.style.opacity = "1";
} else {
@@ -174,20 +175,20 @@ window.onscroll = () => {
}
watch(props.playFromLeftBar, () => {
- playFromId(props.playFromLeftBar)
+ playFromId(props.playFromLeftBar)
})
const popovers = ref([])
-const getPopoverIndex= (popover) => {
- if (popover) {
- popovers.value.push(popover);
- }
+const getPopoverIndex = (popover) => {
+ if (popover) {
+ popovers.value.push(popover);
+ }
}
const closePopover = (e) => {
- popovers.value.forEach((item) => {
- item.hide();
- })
+ popovers.value.forEach((item) => {
+ item.hide();
+ })
}
@@ -206,12 +207,13 @@ const removeAlbum = (albumId) => {
const playFromId = (musicId) => {
if (musicId === null) {
// 浠庡ご寮€濮嬫挱鏀�
- musicPlayIndex = props.musicList[0].id;
+ musicPlayIndex.value = props.musicList[0].id;
} else {
- musicPlayIndex = musicId;
+ musicPlayIndex.value = musicId;
}
- musicPauseIndex = null;
+
emit('switchSongs', props.albumInfo, musicPlayIndex.value);
+ musicPauseIndex = null;
}
const addToFavorite = (musicId) => {
}
@@ -240,373 +242,386 @@ const quitEdit = () => {
editDesc.style.visibility = "hidden";
}
const addRecommendMusic = (musicId) => {
- console.log(musicId);
- //TODO:娣诲姞姝屾洸鍒版寚瀹氱殑姝屽崟
- ElMessage({
- message: "娣诲姞鑷�: " + props.albumInfo.title,
- grouping: true,
- type: 'info',
- offset: 16,
- customClass: "reco-message",
- duration: 4000,
- })
+ console.log(musicId);
+ //TODO:娣诲姞姝屾洸鍒版寚瀹氱殑姝屽崟
+ ElMessage({
+ message: "娣诲姞鑷�: " + props.albumInfo.title,
+ grouping: true,
+ type: 'info',
+ offset: 16,
+ customClass: "reco-message",
+ duration: 4000,
+ })
}
</script>
<template>
- <div class="album-content" :style="{backgroundImage: gradientColor}" @mousewheel="handelScroll">
- <div class="header" >
- <!-- .<img src="../assets/pictures/songs/2.jpg" alt="" class="album-image" @load="updateBackground"/>-->
- <img :src="albumInfo.picPath" alt="" class="album-image" @load="updateBackground(albumInfo.picPath)"/>
- <div class="header-content">
- <p style="text-align: left;margin:20px 0 0 15px">姝屽崟</p>
- <p class="header-album-name" style="font-weight: bolder;font-size:80px;margin:10px 0 35px 10px;">
- {{ albumInfo.title }}</p>
- <div class="header-content-detail">
- <p class="header-creator" @click="enterPersonalSpace">{{ albumInfo.description }}</p>
- <p style="padding-right: 6px ">鈥�</p>
- <p v-if="albumInfo.updateTime !== undefined">
- {{ albumInfo.updateTime.substring(0, 10) }} </p>
- <p style="padding: 0 2px 0 6px">鈥�</p>
- <p style="margin-left:6px">{{ musicList.length }} 棣栨瓕鏇�</p>
- </div>
- </div>
- </div>
-
- <div class="content">
- <div class="play-area">
- <div class="play-button">
- <play-button v-if="musicPlayIndex===null||musicPauseIndex!==null" @click="playFromId(musicPauseIndex)"
- style="position: absolute; top:20%;left:24%;color: #000000"/>
- <pause-button v-if="musicPlayIndex!==null&&musicPauseIndex===null" @click="pauseMusic(musicPlayIndex)"
- style="position: absolute; top:24%;left:25%;color: #000000"/>
- </div>
-<!-- 锛歳ef涓嚱鏁版墽琛屾椂锛岀粍浠跺凡缁忔覆鏌撳ソ锛屽苟灏嗘湰缁勪欢浣滀负鍙傛暟浼犲叆鍑芥暟-->
- <el-popover
- style="border-radius: 10px"
- :width="400"
- trigger="click"
- popper-class="my-popover"
- :ref="getPopoverIndex"
- :hide-after=0>
- <template #reference>
- <dots class="more-info"/>
- </template>
- <ul @click="closePopover">
- <li @click="()=>{editAlbumDescription(albumInfo.id)}">缂栬緫姝屽崟璇︽儏</li>
- <li @click="">鍒犻櫎姝屽崟</li>
- </ul>
- </el-popover>
- </div>
-
- <div class="fixed-play-area" :style="{background :`${backgroundColor}`}">
- <div class="opacity-wrapper">
- <div class="play-button">
- <play-button v-if="musicPlayIndex===null||musicPauseIndex!==null" @click="playFromId(musicPauseIndex)"
- style="position: absolute; top:20%;left:24%;color: #000000"/>
- <pause-button v-if="musicPlayIndex!==null&&musicPauseIndex===null" @click="pauseMusic(musicPlayIndex)"
- style="position: absolute; top:24%;left:25%;color: #000000"/>
- </div>
- <p style="padding-left: 10px;font-weight: bold;font-size: 26px">{{ albumInfo.title }}</p>
- </div>
- </div>
- <div class="tips">
- <p style="position:absolute; left:45px">#</p>
- <p style="position:absolute; left:140px">鏍囬</p>
- <p class="album-text" style="position:absolute; left:62%">涓撹緫</p>
- <p style="margin-left: auto; margin-right:55px">鏃堕棿</p>
- </div>
- <div class="edit-desc" @blur="quitEdit">
- <div data-testid="playlist-edit-details-modal" class="main-edit-desc">
- <div class="edit-desc-header">
- <h1 class="encore-text encore-text-title-small" data-encore-id="text">缂栬緫璇︽儏</h1>
- <button class="edit-desc-header-button" @click="quitEdit">
- <svg data-encore-id="icon" role="img" aria-label="鍏抽棴" aria-hidden="false" viewBox="0 0 16 16"
- class="small-svg">
- <path
- d="M2.47 2.47a.75.75 0 0 1 1.06 0L8 6.94l4.47-4.47a.75.75 0 1 1 1.06 1.06L9.06 8l4.47 4.47a.75.75 0 1 1-1.06 1.06L8 9.06l-4.47 4.47a.75.75 0 0 1-1.06-1.06L6.94 8 2.47 3.53a.75.75 0 0 1 0-1.06Z"></path>
- </svg>
- </button>
- </div>
- <div class="edit-desc-text">
- <!-- <input accept="image/.jpg, image/.jpeg, image/.png" type="file" data-testid="image-file-picker" class="wcftliF4QjZKB1CYgEON">-->
- <div class="edit-desc-img">
- <div class="edit-desc-img-1" draggable="false">
- <div class="edit-desc-img-1-1 edit-desc-img-1">
- <svg data-encore-id="icon" role="img" aria-hidden="true" data-testid="playlist" viewBox="0 0 24 24"
- class="large-svg">
- <path
- d="M6 3h15v15.167a3.5 3.5 0 1 1-3.5-3.5H19V5H8v13.167a3.5 3.5 0 1 1-3.5-3.5H6V3zm0 13.667H4.5a1.5 1.5 0 1 0 1.5 1.5v-1.5zm13 0h-1.5a1.5 1.5 0 1 0 1.5 1.5v-1.5z"></path>
- </svg>
- </div>
- </div>
- <div class="edit-desc-img-2">
- <div class="edit-desc-img-2-1">
- <button data-testid="edit-image-button" class="edit-desc-img-2-button" aria-haspopup="true"
- type="button">
- <div class="edit-desc-img-2-1-1 icon">
- <svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 24 24" class="large-svg">
- <path
- d="M17.318 1.975a3.329 3.329 0 1 1 4.707 4.707L8.451 20.256c-.49.49-1.082.867-1.735 1.103L2.34 22.94a1 1 0 0 1-1.28-1.28l1.581-4.376a4.726 4.726 0 0 1 1.103-1.735L17.318 1.975zm3.293 1.414a1.329 1.329 0 0 0-1.88 0L5.159 16.963c-.283.283-.5.624-.636 1l-.857 2.372 2.371-.857a2.726 2.726 0 0 0 1.001-.636L20.611 5.268a1.329 1.329 0 0 0 0-1.879z"></path>
- </svg>
- <span class="encore-text encore-text-body-medium" data-encore-id="text">閫夋嫨鐓х墖</span></div>
- </button>
- </div>
- </div>
- <div class="edit-desc-img-3">
- <button class="edit-desc-img-3-button" type="button">
- <svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="small-svg">
- <path
- d="M3 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm6.5 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zM16 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path>
- </svg>
- <span class="hidden-visually">缂栬緫鐓х墖</span></button>
- </div>
- </div>
- <div class="edit-desc-input-name">
- <input data-testid="playlist-edit-details-name-input" id="text-input-c673a65959365e7f" type="text"
- class="edit-desc-input-name-1" placeholder="娣诲姞鍚嶇О" value="鎴戠殑 #9 姝屽崟">
- </div>
- <div class="edit-desc-input-desc">
+ <div class="album-content" :style="{backgroundImage: gradientColor}" @mousewheel="handelScroll">
+ <div class="header">
+ <!-- .<img src="../assets/pictures/songs/2.jpg" alt="" class="album-image" @load="updateBackground"/>-->
+ <img :src="albumInfo.picPath" alt="" class="album-image" @load="updateBackground(albumInfo.picPath)"/>
+ <div class="header-content">
+ <p style="text-align: left;margin:20px 0 0 15px">姝屽崟</p>
+ <p class="header-album-name" style="font-weight: bolder;font-size:80px;margin:10px 0 35px 10px;">
+ {{ albumInfo.title }}</p>
+ <div class="header-content-detail">
+ <p class="header-creator" @click="enterPersonalSpace">{{ albumInfo.description }}</p>
+ <p style="padding-right: 6px ">鈥�</p>
+ <p v-if="albumInfo.updateTime !== undefined">
+ {{ albumInfo.updateTime.substring(0, 10) }} </p>
+ <p style="padding: 0 2px 0 6px">鈥�</p>
+ <p style="margin-left:6px">{{ musicList.length }} 棣栨瓕鏇�</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="content">
+ <div class="play-area">
+ <div class="play-button">
+ <play-button v-if="musicPlayIndex===null||musicPauseIndex!==null"
+ @click="playFromId(musicPauseIndex)"
+ style="position: absolute; top:20%;left:24%;color: #000000"/>
+ <pause-button v-if="musicPlayIndex!==null&&musicPauseIndex===null"
+ @click="pauseMusic(musicPlayIndex)"
+ style="position: absolute; top:24%;left:25%;color: #000000"/>
+ </div>
+ <!-- 锛歳ef涓嚱鏁版墽琛屾椂锛岀粍浠跺凡缁忔覆鏌撳ソ锛屽苟灏嗘湰缁勪欢浣滀负鍙傛暟浼犲叆鍑芥暟-->
+ <el-popover
+ style="border-radius: 10px"
+ :width="400"
+ trigger="click"
+ popper-class="my-popover"
+ :ref="getPopoverIndex"
+ :hide-after=0>
+ <template #reference>
+ <dots class="more-info"/>
+ </template>
+ <ul @click="closePopover">
+ <li @click="()=>{editAlbumDescription(albumInfo.id)}">缂栬緫姝屽崟璇︽儏</li>
+ <li @click="">鍒犻櫎姝屽崟</li>
+ </ul>
+ </el-popover>
+ </div>
+
+ <div class="fixed-play-area" :style="{background :`${backgroundColor}`}">
+ <div class="opacity-wrapper">
+ <div class="play-button">
+ <play-button v-if="musicPlayIndex===null||musicPauseIndex!==null"
+ @click="playFromId(musicPauseIndex)"
+ style="position: absolute; top:20%;left:24%;color: #000000"/>
+ <pause-button v-if="musicPlayIndex!==null&&musicPauseIndex===null"
+ @click="pauseMusic(musicPlayIndex)"
+ style="position: absolute; top:24%;left:25%;color: #000000"/>
+ </div>
+ <p style="padding-left: 10px;font-weight: bold;font-size: 26px">{{ albumInfo.title }}</p>
+ </div>
+ </div>
+ <div class="tips">
+ <p style="position:absolute; left:45px">#</p>
+ <p style="position:absolute; left:140px">鏍囬</p>
+ <p class="album-text" style="position:absolute; left:62%">涓撹緫</p>
+ <p style="margin-left: auto; margin-right:55px">鏃堕棿</p>
+ </div>
+ <div class="edit-desc" @blur="quitEdit">
+ <div data-testid="playlist-edit-details-modal" class="main-edit-desc">
+ <div class="edit-desc-header">
+ <h1 class="encore-text encore-text-title-small" data-encore-id="text">缂栬緫璇︽儏</h1>
+ <button class="edit-desc-header-button" @click="quitEdit">
+ <svg data-encore-id="icon" role="img" aria-label="鍏抽棴" aria-hidden="false"
+ viewBox="0 0 16 16"
+ class="small-svg">
+ <path
+ d="M2.47 2.47a.75.75 0 0 1 1.06 0L8 6.94l4.47-4.47a.75.75 0 1 1 1.06 1.06L9.06 8l4.47 4.47a.75.75 0 1 1-1.06 1.06L8 9.06l-4.47 4.47a.75.75 0 0 1-1.06-1.06L6.94 8 2.47 3.53a.75.75 0 0 1 0-1.06Z"></path>
+ </svg>
+ </button>
+ </div>
+ <div class="edit-desc-text">
+ <!-- <input accept="image/.jpg, image/.jpeg, image/.png" type="file" data-testid="image-file-picker" class="wcftliF4QjZKB1CYgEON">-->
+ <div class="edit-desc-img">
+ <div class="edit-desc-img-1" draggable="false">
+ <div class="edit-desc-img-1-1 edit-desc-img-1">
+ <svg data-encore-id="icon" role="img" aria-hidden="true" data-testid="playlist"
+ viewBox="0 0 24 24"
+ class="large-svg">
+ <path
+ d="M6 3h15v15.167a3.5 3.5 0 1 1-3.5-3.5H19V5H8v13.167a3.5 3.5 0 1 1-3.5-3.5H6V3zm0 13.667H4.5a1.5 1.5 0 1 0 1.5 1.5v-1.5zm13 0h-1.5a1.5 1.5 0 1 0 1.5 1.5v-1.5z"></path>
+ </svg>
+ </div>
+ </div>
+ <div class="edit-desc-img-2">
+ <div class="edit-desc-img-2-1">
+ <button data-testid="edit-image-button" class="edit-desc-img-2-button"
+ aria-haspopup="true"
+ type="button">
+ <div class="edit-desc-img-2-1-1 icon">
+ <svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 24 24"
+ class="large-svg">
+ <path
+ d="M17.318 1.975a3.329 3.329 0 1 1 4.707 4.707L8.451 20.256c-.49.49-1.082.867-1.735 1.103L2.34 22.94a1 1 0 0 1-1.28-1.28l1.581-4.376a4.726 4.726 0 0 1 1.103-1.735L17.318 1.975zm3.293 1.414a1.329 1.329 0 0 0-1.88 0L5.159 16.963c-.283.283-.5.624-.636 1l-.857 2.372 2.371-.857a2.726 2.726 0 0 0 1.001-.636L20.611 5.268a1.329 1.329 0 0 0 0-1.879z"></path>
+ </svg>
+ <span class="encore-text encore-text-body-medium"
+ data-encore-id="text">閫夋嫨鐓х墖</span></div>
+ </button>
+ </div>
+ </div>
+ <div class="edit-desc-img-3">
+ <button class="edit-desc-img-3-button" type="button">
+ <svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16"
+ class="small-svg">
+ <path
+ d="M3 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm6.5 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zM16 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path>
+ </svg>
+ <span class="hidden-visually">缂栬緫鐓х墖</span></button>
+ </div>
+ </div>
+ <div class="edit-desc-input-name">
+ <input data-testid="playlist-edit-details-name-input" id="text-input-c673a65959365e7f"
+ type="text"
+ class="edit-desc-input-name-1" placeholder="娣诲姞鍚嶇О" value="鎴戠殑 #9 姝屽崟">
+ </div>
+ <div class="edit-desc-input-desc">
<textarea data-testid="playlist-edit-details-description-input" class="edit-desc-input-desc-1"
placeholder="娣诲姞绠€浠�"></textarea>
- </div>
- <div class="edit-desc-button">
- <button data-testid="playlist-edit-details-save-button" data-encore-id="buttonPrimary"
- class="edit-desc-button-1 encore-text-body-medium-bold"><span
- class="edit-desc-button-1-1">鏀惰棌</span></button>
- </div>
- <p class="encore-text encore-text-marginal-bold final-tip" data-encore-id="text">缁х画涓嬩竴姝ワ紝鍒欒〃绀轰綘宸插悓鎰�
- Spotify 鑾峰彇浣犻€夋嫨涓婁紶鐨勫浘鍍忋€傝纭繚浣犳湁涓婁紶姝ゅ浘鍍忕殑鏉冨埄銆�</p>
- </div>
- </div>
- </div>
- <div class="fixed-tips">
- <p style="position:absolute; left:45px">#</p>
- <p style="position:absolute; left:140px">鏍囬</p>
- <p class="album-text" style="position:absolute; left:62%">涓撹緫</p>
- <p style="margin-left: auto; margin-right:75px">鏃堕棿</p>
- </div>
-
- <div class="musicList">
- <div class="music-item"
- v-for="music in musicList"
- :key="music.id"
- :aria-selected="musicClickedIndex === music.id ? 'True':'False'"
- @mouseenter="()=>{musicHoveredIndex = music.id;}"
- @mouseleave="()=>{musicHoveredIndex = -1}"
- @click="musicClickedIndex=music.id"
- @dblclick="playFromId(music.id)"
- :style="{backgroundColor: musicClickedIndex===music.id? '#404040':
+ </div>
+ <div class="edit-desc-button">
+ <button data-testid="playlist-edit-details-save-button" data-encore-id="buttonPrimary"
+ class="edit-desc-button-1 encore-text-body-medium-bold"><span
+ class="edit-desc-button-1-1">鏀惰棌</span></button>
+ </div>
+ <p class="encore-text encore-text-marginal-bold final-tip" data-encore-id="text">缁х画涓嬩竴姝ワ紝鍒欒〃绀轰綘宸插悓鎰�
+ Spotify 鑾峰彇浣犻€夋嫨涓婁紶鐨勫浘鍍忋€傝纭繚浣犳湁涓婁紶姝ゅ浘鍍忕殑鏉冨埄銆�</p>
+ </div>
+ </div>
+ </div>
+ <div class="fixed-tips">
+ <p style="position:absolute; left:45px">#</p>
+ <p style="position:absolute; left:140px">鏍囬</p>
+ <p class="album-text" style="position:absolute; left:62%">涓撹緫</p>
+ <p style="margin-left: auto; margin-right:75px">鏃堕棿</p>
+ </div>
+
+ <div class="musicList">
+ <div class="music-item"
+ v-for="music in musicList"
+ :key="music.id"
+ :aria-selected="musicClickedIndex === music.id ? 'True':'False'"
+ @mouseenter="()=>{musicHoveredIndex = music.id;}"
+ @mouseleave="()=>{musicHoveredIndex = -1}"
+ @click="musicClickedIndex=music.id"
+ @dblclick="playFromId(music.id)"
+ :style="{backgroundColor: musicClickedIndex===music.id? '#404040':
musicHoveredIndex === music.id ? 'rgba(54,54,54,0.7)' :'rgba(0,0,0,0)',
}"> <!--@click浜嬩欢鍐欏湪script涓殑鍑芥暟閲� 鏃犳硶鍙婃椂瑙﹀彂:style涓殑鏍峰紡!!!-->
-
- <div
- :style="{visibility: musicHoveredIndex === music.id||musicPlayIndex === music.id ? 'hidden' : 'visible' }">
- {{
- musicList.indexOf(music) + 1
- }}
- </div>
- <play-button @click="playFromId(music.id)" style="position: absolute;left: 14px;cursor: pointer"
- v-if="(musicHoveredIndex === music.id&&musicPlayIndex!==music.id)||musicPauseIndex===music.id"
- :style="{color: musicPauseIndex===music.id ? '#1ed660' : 'white'}"/>
-
- <pause-button @click="pauseMusic(music.id)"
- style="color:#1ed660 ;position: absolute;left: 17px;cursor: pointer"
- v-if="musicPlayIndex===music.id&&musicHoveredIndex === music.id&&musicPauseIndex!==music.id"/>
- <img width="17" height="17" alt=""
- style="position: absolute;left: 24px;"
- v-if="musicPlayIndex===music.id&&musicHoveredIndex !== music.id&&musicPauseIndex!==music.id"
- src="https://open.spotifycdn.com/cdn/images/equaliser-animated-green.f5eb96f2.gif">
-
- <div class="music-detailed-info">
- <img class="music-image"
- :src="music.picPath"
- alt="姝屾洸鍥剧墖"/>
- <div class="music-name-author" style="padding-left: 5px;">
- <p @click="enterMusicDescription(music.id)" class="music-name"
- :style="{color : musicPlayIndex ===music.id? '#1ED660':''}"
- :class="[musicPlayIndex === music.id ? 'music-after-click' : '']"
- >{{ music.title }}</p>
-
- <p @click="enterAuthorDescription(music.artist)" class="music-author"
- :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
- {{ music.artist }}</p>
- </div>
- </div>
-
- <div class="music-album-info" :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
- {{ music.album }}
- </div>
- <div class="music-right-info">
- <el-popover
- :ref="getPopoverIndex"
- class="music-dropdown-options"
- popper-class="my-popover"
- :width="400"
- trigger="click"
- :hide-after=0
-
- >
- <template #reference>
- <check-mark class="check-mark"
- :style="{visibility: musicHoveredIndex === music.id ? 'visible' : 'hidden'}"/>
- </template>
- <ul @click="closePopover">
- <!-- TODO: 杩欓噷闇€瑕佹墍鏈夌殑姝屽崟-->
- <li @click="addToFavorite(music.id)"></li>
- </ul>
- </el-popover>
-
- <div style="margin-left: auto;margin-right: 15px; color: #b2b2b2"
- :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">{{ music.upload_time }}
- <!--TODO: 瑙ｅ喅鎾斁鏃堕棿闂-->
- </div>
- <el-popover
- :ref="getPopoverIndex"
- class="music-dropdown-options"
- popper-class="my-popover"
- :width="400"
- trigger="click"
- :hide-after=0
- >
- <template #reference>
- <dots class="music-more-info"/>
- </template>
- <ul @click="closePopover">
- <li @click="removeMusicFromAlbum(music.id)">鍒犻櫎姝屾洸</li>
- </ul>
- </el-popover>
-
- </div>
-
- </div>
-
- </div>
-
- <!--TODO:鎺ㄨ崘姝屾洸鐨勭粏鑺傚鐞�-->
- <div class="other-info">
- <div style="margin-left:20px;margin-bottom:20px;">
- <div style="display: flex;text-align: left;justify-content: center;flex-direction: column">
- <span style="color:white;font-size: 30px;font-weight: bolder">鎺ㄨ崘</span>
- <span style="color:grey;font-size: 20px">鏍规嵁姝ゆ瓕鍗曞寘鍚殑鍐呭鎺ㄨ崘
+
+ <div
+ :style="{visibility: musicHoveredIndex === music.id||musicPlayIndex === music.id ? 'hidden' : 'visible' }">
+ {{
+ musicList.indexOf(music) + 1
+ }}
+ </div>
+ <play-button @click="playFromId(music.id)" style="position: absolute;left: 14px;cursor: pointer"
+ v-if="(musicHoveredIndex === music.id&&musicPlayIndex!==music.id)||musicPauseIndex===music.id"
+ :style="{color: musicPauseIndex===music.id ? '#1ed660' : 'white'}"/>
+
+ <pause-button @click="pauseMusic(music.id)"
+ style="color:#1ed660 ;position: absolute;left: 17px;cursor: pointer"
+ v-if="musicPlayIndex===music.id&&musicHoveredIndex === music.id&&musicPauseIndex!==music.id"/>
+ <img width="17" height="17" alt=""
+ style="position: absolute;left: 24px;"
+ v-if="musicPlayIndex===music.id&&musicHoveredIndex !== music.id&&musicPauseIndex!==music.id"
+ src="https://open.spotifycdn.com/cdn/images/equaliser-animated-green.f5eb96f2.gif">
+
+ <div class="music-detailed-info">
+ <img class="music-image"
+ :src="music.picPath"
+ alt="姝屾洸鍥剧墖"/>
+ <div class="music-name-author" style="padding-left: 5px;">
+ <p @click="enterMusicDescription(music.id)" class="music-name"
+ :style="{color : musicPlayIndex ===music.id? '#1ED660':''}"
+ :class="[musicPlayIndex === music.id ? 'music-after-click' : '']"
+ >{{ music.title }}</p>
+
+ <p @click="enterAuthorDescription(music.artist)" class="music-author"
+ :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
+ {{ music.artist }}</p>
+ </div>
+ </div>
+
+ <div class="music-album-info" :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
+ {{ music.album }}
+ </div>
+ <div class="music-right-info">
+ <el-popover
+ :ref="getPopoverIndex"
+ class="music-dropdown-options"
+ popper-class="my-popover"
+ :width="400"
+ trigger="click"
+ :hide-after=0
+
+ >
+ <template #reference>
+ <check-mark class="check-mark"
+ :style="{visibility: musicHoveredIndex === music.id ? 'visible' : 'hidden'}"/>
+ </template>
+ <ul @click="closePopover">
+ <!-- TODO: 杩欓噷闇€瑕佹墍鏈夌殑姝屽崟-->
+ <li @click="addToFavorite(music.id)"></li>
+ </ul>
+ </el-popover>
+
+ <div style="margin-left: auto;margin-right: 15px; color: #b2b2b2"
+ :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">{{
+ music.upload_time
+ }}
+ <!--TODO: 瑙ｅ喅鎾斁鏃堕棿闂-->
+ </div>
+ <el-popover
+ :ref="getPopoverIndex"
+ class="music-dropdown-options"
+ popper-class="my-popover"
+ :width="400"
+ trigger="click"
+ :hide-after=0
+ >
+ <template #reference>
+ <dots class="music-more-info"/>
+ </template>
+ <ul @click="closePopover">
+ <li @click="removeMusicFromAlbum(music.id)">鍒犻櫎姝屾洸</li>
+ </ul>
+ </el-popover>
+
+ </div>
+
+ </div>
+
+ </div>
+
+ <!--TODO:鎺ㄨ崘姝屾洸鐨勭粏鑺傚鐞�-->
+ <div class="other-info">
+ <div style="margin-left:20px;margin-bottom:20px;">
+ <div style="display: flex;text-align: left;justify-content: center;flex-direction: column">
+ <span style="color:white;font-size: 30px;font-weight: bolder">鎺ㄨ崘</span>
+ <span style="color:grey;font-size: 20px">鏍规嵁姝ゆ瓕鍗曞寘鍚殑鍐呭鎺ㄨ崘
</span>
- </div>
- </div>
-
- <div class="recMusicList">
- <div class="music-item"
- v-for="music in recMusicList"
- :key="music.id"
- :aria-selected="musicClickedIndex === music.id ? 'True':'False'"
- @mouseenter="()=>{musicHoveredIndex = music.id;}"
- @mouseleave="()=>{musicHoveredIndex = null}"
- @click="musicClickedIndex=music.id"
- @dblclick="playFromId(music.id)"
- :style="{backgroundColor: musicClickedIndex===music.id? '#404040':
+ </div>
+ </div>
+
+ <div class="recMusicList">
+ <div class="music-item"
+ v-for="music in recMusicList"
+ :key="music.id"
+ :aria-selected="musicClickedIndex === music.id ? 'True':'False'"
+ @mouseenter="()=>{musicHoveredIndex = music.id;}"
+ @mouseleave="()=>{musicHoveredIndex = null}"
+ @click="musicClickedIndex=music.id"
+ @dblclick="playFromId(music.id)"
+ :style="{backgroundColor: musicClickedIndex===music.id? '#404040':
musicHoveredIndex === music.id ? 'rgba(54,54,54,0.7)' :'rgba(0,0,0,0)',
}">
-
- <div
- :style="{visibility: musicHoveredIndex === music.id||musicPlayIndex === music.id ? 'hidden' : 'visible' }">
- {{
- recMusicList.indexOf(music) + 1
- }}
- </div>
- <play-button @click="playFromId(music.id)" style="position: absolute;left: 33px;cursor: pointer"
- v-if="(musicHoveredIndex === music.id&&musicPlayIndex!==music.id)||musicPauseIndex===music.id"
- :style="{color: musicPauseIndex===music.id ? '#1ed660' : 'white'}"/>
- <pause-button @click="pauseMusic(music.id)"
- style="color:#1ed660 ;position: absolute;left: 37px;cursor: pointer"
- v-if="musicPlayIndex===music.id&&musicHoveredIndex === music.id&&musicPauseIndex!==music.id"/>
- <img width="17" height="17" alt=""
- style="position: absolute;left: 42px;"
- v-if="musicPlayIndex===music.id&&musicHoveredIndex !== music.id&&musicPauseIndex!==music.id"
- src="https://open.spotifycdn.com/cdn/images/equaliser-animated-green.f5eb96f2.gif">
-
- <div class="music-detailed-info">
- <!--TODO: img src to be changed-->
- <img class="music-image"
- :src="music.picPath"
- alt="姝屾洸鍥剧墖"/>
- <div class="music-name-author" style="padding-left: 5px;">
- <p @click="enterMusicDescription(music.id)" class="music-name"
- :style="{color : musicPlayIndex ===music.id? '#1ED660':''}"
- :class="[musicPlayIndex === music.id ? 'music-after-click' : '']"
- >{{ music.title }}</p>
-
- <p @click="enterAuthorDescription(music.artist)" class="music-author"
- :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
- {{ music.artist }}</p>
- </div>
- </div>
-
- <div class="music-album-info" :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
- {{ music.album }}
- </div>
- <div class="music-right-info">
- <button class="reco-add-button" @click="addRecommendMusic(music.id)">娣诲姞</button>
-
- </div>
-
- </div>
-
- </div>
- </div>
-
- </div>
-
- </div>
+
+ <div
+ :style="{visibility: musicHoveredIndex === music.id||musicPlayIndex === music.id ? 'hidden' : 'visible' }">
+ {{
+ recMusicList.indexOf(music) + 1
+ }}
+ </div>
+ <play-button @click="playFromId(music.id)" style="position: absolute;left: 33px;cursor: pointer"
+ v-if="(musicHoveredIndex === music.id&&musicPlayIndex!==music.id)||musicPauseIndex===music.id"
+ :style="{color: musicPauseIndex===music.id ? '#1ed660' : 'white'}"/>
+ <pause-button @click="pauseMusic(music.id)"
+ style="color:#1ed660 ;position: absolute;left: 37px;cursor: pointer"
+ v-if="musicPlayIndex===music.id&&musicHoveredIndex === music.id&&musicPauseIndex!==music.id"/>
+ <img width="17" height="17" alt=""
+ style="position: absolute;left: 42px;"
+ v-if="musicPlayIndex===music.id&&musicHoveredIndex !== music.id&&musicPauseIndex!==music.id"
+ src="https://open.spotifycdn.com/cdn/images/equaliser-animated-green.f5eb96f2.gif">
+
+ <div class="music-detailed-info">
+ <!--TODO: img src to be changed-->
+ <img class="music-image"
+ :src="music.picPath"
+ alt="姝屾洸鍥剧墖"/>
+ <div class="music-name-author" style="padding-left: 5px;">
+ <p @click="enterMusicDescription(music.id)" class="music-name"
+ :style="{color : musicPlayIndex ===music.id? '#1ED660':''}"
+ :class="[musicPlayIndex === music.id ? 'music-after-click' : '']"
+ >{{ music.title }}</p>
+
+ <p @click="enterAuthorDescription(music.artist)" class="music-author"
+ :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
+ {{ music.artist }}</p>
+ </div>
+ </div>
+
+ <div class="music-album-info"
+ :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
+ {{ music.album }}
+ </div>
+ <div class="music-right-info">
+ <button class="reco-add-button" @click="addRecommendMusic(music.id)">娣诲姞</button>
+
+ </div>
+
+ </div>
+
+ </div>
+ </div>
+
+ </div>
+
+ </div>
</template>
<style scoped>
li {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
}
li:hover {
- background-color: #363636;
- border-radius: 12px;
+ background-color: #363636;
+ border-radius: 12px;
}
-
p {
- text-align: left;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- margin: 0;
+ text-align: left;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 0;
}
.header, .play-area, .tips, .musicList, .other-info {
- z-index: 0;
- padding: 20px;
- width: 100%;
- box-sizing: border-box;
- user-select:none;
+ z-index: 0;
+ padding: 20px;
+ width: 100%;
+ box-sizing: border-box;
+ user-select: none;
}
.album-content {
- margin: 0;
- padding: 0;
- color: white;
- background-color: rgb(31, 31, 31);
- transition: background-color ease 0.6s;
- display: flex;
- flex-direction: column;
- width: 100%;
- overflow-x: auto; /*鍗冧竾涓嶈兘鍒狅紝涓嶇劧鑳屾櫙榛戜竴鍗�*/
+ margin: 0;
+ padding: 0;
+ color: white;
+ background-color: rgb(31, 31, 31);
+ transition: background-color ease 0.6s;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ overflow-x: auto; /*鍗冧竾涓嶈兘鍒狅紝涓嶇劧鑳屾櫙榛戜竴鍗�*/
}
.header {
- display: flex;
- flex-direction: row;
+ display: flex;
+ flex-direction: row;
}
.content {
@@ -615,189 +630,189 @@ p {
}
.album-image {
- border-radius: 6%;
- width: 160px;
- height: 160px;
- margin-top: 30px;
- margin-left: 15px;
- margin-right: 20px;
+ border-radius: 6%;
+ width: 160px;
+ height: 160px;
+ margin-top: 30px;
+ margin-left: 15px;
+ margin-right: 20px;
}
.header-content {
- display: flex;
- flex-direction: column;
- height: 100%;
- position: relative;
- flex-grow: 1;
- min-width: 0;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ position: relative;
+ flex-grow: 1;
+ min-width: 0;
}
.header-content-detail {
- padding: 10px;
- align-items: center;
- display: flex;
- flex-direction: row;
+ padding: 10px;
+ align-items: center;
+ display: flex;
+ flex-direction: row;
}
.header-creator {
- margin: 0 6px;
- cursor: pointer;
- font-weight: bolder
+ margin: 0 6px;
+ cursor: pointer;
+ font-weight: bolder
}
.header-creator:hover {
- text-decoration: underline;
+ text-decoration: underline;
}
.play-area {
- position: relative;
+ position: relative;
}
.more-info {
- font-size: 35px;
- position: absolute;
- z-index: 13;
- top: 33px;
- left: 160px;
- transition: width 0.1s ease-in-out;
+ font-size: 35px;
+ position: absolute;
+ z-index: 13;
+ top: 33px;
+ left: 160px;
+ transition: width 0.1s ease-in-out;
}
.more-info:focus {
- outline: none;
-
+ outline: none;
+
}
.more-info:hover {
- cursor: pointer;
- transform: scale(1.15);
+ cursor: pointer;
+ transform: scale(1.15);
}
.fixed-play-area {
- top: 0;
- z-index: 11;
- opacity: 0;
- transition: opacity 0.2s ease-out;
- border-radius: 12px 12px 0 0;
- position: fixed; /**/
- display: flex;
- padding: 10px 0 10px 20px;
- width: inherit;
-
+ top: 0;
+ z-index: 11;
+ opacity: 0;
+ transition: opacity 0.2s ease-out;
+ border-radius: 12px 12px 0 0;
+ position: fixed; /**/
+ display: flex;
+ padding: 10px 0 10px 20px;
+ width: inherit;
+
}
.opacity-wrapper {
- display: flex;
- align-items: center;
- width: 100%;
- height: 100%;
- margin: -10px 0 -10px -20px;
- padding: 10px 0 10px 20px;
- background-color: rgba(0, 0, 0, 0.50);
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ margin: -10px 0 -10px -20px;
+ padding: 10px 0 10px 20px;
+ background-color: rgba(0, 0, 0, 0.50);
}
.play-button {
- margin-left: 40px;
- background-color: #1ed660;
- border-radius: 50%;
- width: 60px;
- height: 60px;
- position: relative;
- align-items: center;
- justify-content: center;
- transition: all 0.1s;
+ margin-left: 40px;
+ background-color: #1ed660;
+ border-radius: 50%;
+ width: 60px;
+ height: 60px;
+ position: relative;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.1s;
}
.play-button:hover {
- cursor: pointer;
- transform: scale(1.05);
- background-color: #1ed683;
+ cursor: pointer;
+ transform: scale(1.05);
+ background-color: #1ed683;
}
.tips {
- z-index: 0;
- display: flex;
- position: relative;
- padding: 5px 8px 5px 8px;
+ z-index: 0;
+ display: flex;
+ position: relative;
+ padding: 5px 8px 5px 8px;
}
.fixed-tips {
-
- z-index: 11;
- width: 100%;
- justify-content: space-between;
- display: none;
- padding: 10px 8px 10px 8px;
- position: fixed;
- background-color: #1f1f1f;
- border-bottom: 1px solid #363636;
+
+ z-index: 11;
+ width: 100%;
+ justify-content: space-between;
+ display: none;
+ padding: 10px 8px 10px 8px;
+ position: fixed;
+ background-color: #1f1f1f;
+ border-bottom: 1px solid #363636;
}
.musicList, .other-info {
- border-top: 1px solid #363636;
- margin-top: 10px;
+ border-top: 1px solid #363636;
+ margin-top: 10px;
}
/*姣忚闊充箰鐨勬牱寮�*/
.music-item {
- position: relative;
- border-radius: 10px;
- display: flex;
- align-items: center;
- padding: 10px 0 10px 25px;
- flex-grow: 1;
- min-width: 0;
+ position: relative;
+ border-radius: 10px;
+ display: flex;
+ align-items: center;
+ padding: 10px 0 10px 25px;
+ flex-grow: 1;
+ min-width: 0;
}
/*闊充箰琚偣鍑诲悗鐨勬牱寮�*/
.music-after-click {
- color: #1ed660;
+ color: #1ed660;
}
/*宸︿晶淇℃伅*/
.music-detailed-info {
- display: flex;
- flex-direction: row;
+ display: flex;
+ flex-direction: row;
}
.music-image {
- padding-left: 30px;
- height: 50px;
- width: 50px; /* Adjust as needed */
- border-radius: 10px;
+ padding-left: 30px;
+ height: 50px;
+ width: 50px; /* Adjust as needed */
+ border-radius: 10px;
}
.music-name {
- padding-bottom: 5px;
- font-size: 18px
+ padding-bottom: 5px;
+ font-size: 18px
}
.music-name:hover {
- cursor: pointer;
- text-decoration: underline;
+ cursor: pointer;
+ text-decoration: underline;
}
.music-author {
- color: #b2b2b2;
- font-size: 15px
+ color: #b2b2b2;
+ font-size: 15px
}
.music-author:hover {
- cursor: pointer;
- text-decoration: underline;
+ cursor: pointer;
+ text-decoration: underline;
}
/*涓撹緫淇℃伅*/
.music-album-info {
- position: absolute;
- left: 60%;
- color: #b2b2b2;
- text-overflow: ellipsis;
+ position: absolute;
+ left: 60%;
+ color: #b2b2b2;
+ text-overflow: ellipsis;
}
.music-album-info:hover {
- cursor: pointer;
- text-decoration: underline;
+ cursor: pointer;
+ text-decoration: underline;
}
.music-time-info {
@@ -808,134 +823,135 @@ p {
/*鍙充晶淇℃伅*/
.music-right-info {
- margin-left: auto;
- display: flex;
- align-items: center;
- flex-direction: row;
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ flex-direction: row;
}
.check-mark {
- width: 20px;
- height: auto;
- margin-right: 40px;
- color: black;
- font-weight: bolder;
- border-radius: 50%;
+ width: 20px;
+ height: auto;
+ margin-right: 40px;
+ color: black;
+ font-weight: bolder;
+ border-radius: 50%;
}
.check-mark:hover {
- cursor: pointer;
+ cursor: pointer;
}
.check-mark:focus {
- outline: none;
+ outline: none;
}
.music-more-info {
- margin-right: 14px;
- font-size: 22px;
- transition: width 0.1s ease-in-out;
+ margin-right: 14px;
+ font-size: 22px;
+ transition: width 0.1s ease-in-out;
}
.music-more-info:focus {
- outline: none;
- transform: scale(1.05);
+ outline: none;
+ transform: scale(1.05);
}
.music-more-info:hover {
- cursor: pointer;
+ cursor: pointer;
}
.music-dropdown-options {
- border-radius: 6px;
+ border-radius: 6px;
}
ul {
- background-color: #282828;
- list-style-type: none;
- padding: 0;
- margin: 0;
- border-radius: 10px;
+ background-color: #282828;
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ border-radius: 10px;
}
li {
- color: white;
- padding: 15px 12px;
+ color: white;
+ padding: 15px 12px;
}
li:hover {
- cursor: pointer;
- text-decoration: underline;
+ cursor: pointer;
+ text-decoration: underline;
}
.other-info {
- margin-top: 20px;
+ margin-top: 20px;
}
.reco-add-button {
- color: white;
- margin-right: 16px;
- box-sizing: border-box;
- background-color: transparent;
- border-radius: 9999px;
- cursor: pointer;
- position: relative;
- text-align: center;
- transition-duration: 33ms;
- transition-property: background-color, border-color, color, box-shadow, filter, transform;
- user-select: none;
- vertical-align: middle;
- transform: translate3d(0px, 0px, 0px);
- padding-block: 3px;
- padding-inline: 15px;
- border: 1px solid #818181;
- min-inline-size: 0;
- min-block-size: 32px;
- display: inline-flex;
- align-items: center;
-
- &:hover {
- border: 1px solid #f5f5f5;
- scale: 1.1;
- }
+ color: white;
+ margin-right: 16px;
+ box-sizing: border-box;
+ background-color: transparent;
+ border-radius: 9999px;
+ cursor: pointer;
+ position: relative;
+ text-align: center;
+ transition-duration: 33ms;
+ transition-property: background-color, border-color, color, box-shadow, filter, transform;
+ user-select: none;
+ vertical-align: middle;
+ transform: translate3d(0px, 0px, 0px);
+ padding-block: 3px;
+ padding-inline: 15px;
+ border: 1px solid #818181;
+ min-inline-size: 0;
+ min-block-size: 32px;
+ display: inline-flex;
+ align-items: center;
+
+ &:hover {
+ border: 1px solid #f5f5f5;
+ scale: 1.1;
+ }
}
/* new-elements */
.edit-desc {
- visibility: hidden;
- z-index: 1000;
- background-color: rgba(0, 0, 0, .7);
- bottom: 0;
- display: flex;
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- overflow: hidden;
+ visibility: hidden;
+ z-index: 1000;
+ background-color: rgba(0, 0, 0, .7);
+ bottom: 0;
+ display: flex;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ overflow: hidden;
}
.main-edit-desc {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- background-color: #282828;
- border-radius: 8px;
- -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, .3);
- box-shadow: 0 4px 4px rgba(0, 0, 0, .3);
- color: #fff;
- -ms-flex-direction: column;
- flex-direction: column;
- min-height: 384px;
- width: 524px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ background-color: #282828;
+ border-radius: 8px;
+ -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, .3);
+ box-shadow: 0 4px 4px rgba(0, 0, 0, .3);
+ color: #fff;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 384px;
+ width: 524px;
}
+
.edit-desc-header {
display: flex;
-webkit-box-pack: justify;
@@ -943,6 +959,7 @@ li:hover {
justify-content: space-between;
padding: 24px;
}
+
.edit-desc-header-button {
align-self: end;
background-color: transparent;
@@ -962,6 +979,7 @@ li:hover {
-ms-flex-align: center;
align-items: center;
}
+
.edit-desc-text {
display: grid;
grid-template: 32px 132px 32px auto / 180px 1fr;
@@ -973,6 +991,7 @@ li:hover {
grid-gap: 16px;
padding: 0 24px 24px;
}
+
.edit-desc-img {
grid-area: album-image;
height: 180px;
@@ -980,11 +999,13 @@ li:hover {
position: relative;
/* width: 180px; */
}
+
.edit-desc-img-1 {
border-radius: 4px;
height: 100%;
width: 100%;
}
+
.edit-desc-img-1-1 {
display: -webkit-box;
display: -ms-flexbox;
@@ -999,15 +1020,18 @@ li:hover {
justify-content: center;
-webkit-box-shadow: 0 4px 60px rgba(0, 0, 0, .5);
box-shadow: 0 4px 60px rgba(0, 0, 0, .5);
+
&:hover {
display: none;
}
}
+
.large-svg {
fill: currentcolor;
width: 48px;
height: 48px;
}
+
.edit-desc-img-2 {
bottom: 0;
left: 0;
@@ -1015,10 +1039,12 @@ li:hover {
right: 0;
top: 0;
}
+
.edit-desc-img-2-1 {
height: 100%;
width: 100%;
}
+
.edit-desc-img-2-button {
background-color: #282828;
color: #fff;
@@ -1037,11 +1063,13 @@ li:hover {
opacity: 0;
padding: 0;
}
+
.edit-desc-img-2-1-1 {
margin-top: 16px;
-webkit-transition: opacity .2s;
transition: opacity .2s;
}
+
.edit-desc-img-3 {
right: 8px;
height: 32px;
@@ -1049,6 +1077,7 @@ li:hover {
top: 8px;
width: 32px;
}
+
@media (hover: hover) {
.edit-desc-img-3-button:not([data-context-menu-open=true]) {
opacity: 0;
@@ -1056,6 +1085,7 @@ li:hover {
position: unset;
}
}
+
.edit-desc-img-3-button {
background-color: rgba(0, 0, 0, .3);
border: none;
@@ -1072,21 +1102,25 @@ li:hover {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
+
&:hover {
opacity: 0;
pointer-events: none;
position: unset;
}
}
+
.small-svg {
height: 16px;
width: 16px;
}
+
.edit-desc-input-name {
grid-area: title;
position: relative;
margin-right: 8px;
}
+
.edit-desc-input-name-1 {
background: hsla(0, 0%, 100%, .1);
border: 1px solid transparent;
@@ -1100,11 +1134,13 @@ li:hover {
-webkit-box-shadow: inset 0 -2px #343030;
box-shadow: inset 0 -2px 0 0 #343030;
}
+
.edit-desc-input-desc {
grid-area: description;
margin-top: 8px;
position: relative;
}
+
.edit-desc-input-desc-1 {
background: hsla(0, 0%, 100%, .1);
border: 1px solid transparent;
@@ -1117,6 +1153,7 @@ li:hover {
width: 100%;
height: 70%;
}
+
.edit-desc-button {
display: -webkit-box;
display: -ms-flexbox;
@@ -1127,6 +1164,7 @@ li:hover {
-ms-flex-align: center;
align-items: center;
}
+
.edit-desc-button-1 {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -1149,6 +1187,7 @@ li:hover {
min-inline-size: 0px;
align-self: center;
}
+
.edit-desc-button-1-1 {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -1168,6 +1207,7 @@ li:hover {
transition-property: background-color, transform;
transition-duration: 33ms;
}
+
.encore-text {
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -1177,12 +1217,15 @@ li:hover {
font-size: 13px;
white-space: normal;
}
+
.encore-text-title-small {
font-size: 1.5rem;
}
+
.final-tip {
grid-area: disclaimer;
}
+
.encore-text-marginal-bold {
font-weight: 700;
}
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index fe1c06a..4c006d0 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -1,8 +1,7 @@
/* eslint-disable */
<script setup>
// Vue Basics
-import {onMounted, ref, watch, computed, nextTick} from "vue"
-import {router} from "../router";
+import {computed, onMounted, ref} from "vue"
// Assets
import defaultBg from '../assets/pictures/Eason.png'
@@ -53,34 +52,34 @@ const currentLineIndex = ref(0); // 褰撳墠姝岃瘝琛岀殑绱㈠紩
const isLyricsDisplaying = ref(true);
function toggleLyrics() {
- isLyricsDisplaying.value = !isLyricsDisplaying.value;
+ isLyricsDisplaying.value = !isLyricsDisplaying.value;
}
function formatTime(time) {
- const minutes = Math.floor(time / 60);
- const seconds = Math.floor(time % 60);
- return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+ const minutes = Math.floor(time / 60);
+ const seconds = Math.floor(time % 60);
+ return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}
function updateCurrentTime(event) {
- currentTime.value = event.target.currentTime;
- updateCurrentLine();
+ currentTime.value = event.target.currentTime;
+ updateCurrentLine();
}
function updateCurrentLine() {
- for (let i = 0; i < lyrics.value.length; i++) {
- if (
- currentTime.value >= lyrics.value[i].time &&
- (!lyrics.value[i + 1] || currentTime.value < lyrics.value[i + 1].time)
- ) {
- currentLineIndex.value = i;
- break;
- }
- }
+ for (let i = 0; i < lyrics.value.length; i++) {
+ if (
+ currentTime.value >= lyrics.value[i].time &&
+ (!lyrics.value[i + 1] || currentTime.value < lyrics.value[i + 1].time)
+ ) {
+ currentLineIndex.value = i;
+ break;
+ }
+ }
}
setInterval(() => {
- // console.log(progresses.length, controlIcons.length, playModeIcons.length);
+ // console.log(progresses.length, controlIcons.length, playModeIcons.length);
}, 1000);
@@ -128,7 +127,7 @@ const registerDOMs = () => {
*/
const navItems = document.querySelectorAll(".nav-item");
const containers = document.querySelectorAll(".containers");
-
+
navItems.forEach((navItem) => {
navItem.addEventListener("click", () => {
navItems.forEach((item) => {
@@ -141,7 +140,7 @@ const registerDOMs = () => {
let isDragging = false;
let startX;
let scrollLeft;
-
+
container.addEventListener("mousedown", (e) => {
isDragging = true;
startX = e.pageX - container.offsetLeft;
@@ -152,7 +151,7 @@ const registerDOMs = () => {
return;
}
e.preventDefault();
-
+
const x = e.pageX - container.offsetLeft;
const step = (x - startX) * 0.6;
container.scrollLeft = scrollLeft - step;
@@ -167,7 +166,7 @@ const registerDOMs = () => {
container.scrollLeft += e.deltaY / 2;
});
});
-
+
/*
Songs Related
*/
@@ -177,11 +176,11 @@ const registerDOMs = () => {
backwardButtons = document.querySelectorAll(".controls button.backward");
playModeButtons = document.querySelectorAll(".play-mode-btn");
shareButtons = document.querySelectorAll(".share-btn");
-
+
progresses = document.querySelectorAll('.idProgress');
controlIcons = document.querySelectorAll('.idControlIcon');
playModeIcons = document.querySelectorAll('.idPlayModeIcon');
-
+
function updateSongInfo() {
try {
if (songs.value[currentSongIndex.value]) {
@@ -200,11 +199,11 @@ const registerDOMs = () => {
console.log("Uncaught Error in updateSongInfo!", e);
}
}
-
+
function shareSong() {
console.log("Hello!");
}
-
+
function playPause() {
isPaused.value = !isPaused.value;
try {
@@ -223,7 +222,7 @@ const registerDOMs = () => {
console.log("Uncaught Error in playPause!", e);
}
}
-
+
function switchPlayMode() {
playingMode.value = (playingMode.value + 1) % 3
switch (playingMode.value) {
@@ -246,7 +245,7 @@ const registerDOMs = () => {
break;
}
}
-
+
song.addEventListener("loadedmetadata", function () {
progresses.forEach(progress => {
duration.value = song.duration;
@@ -265,7 +264,7 @@ const registerDOMs = () => {
});
}
});
-
+
playPauseButtons.forEach(playPauseButton => {
if (!playPauseButton._hasClickListener) {
playPauseButton.addEventListener("click", playPause);
@@ -302,7 +301,7 @@ const registerDOMs = () => {
backwardButton._hasClickListener = true;
}
});
-
+
progresses.forEach(progress => {
progress.addEventListener("input", function () {
if (!song.paused) {
@@ -319,7 +318,7 @@ const registerDOMs = () => {
}
});
});
-
+
// updateSongInfo();
}
@@ -331,7 +330,6 @@ const userToken = ref(JSON.parse(sessionStorage.getItem('user-token')));
const currentUserId = ref(userToken.value.id);
-
/*
SONGS
*/
@@ -371,14 +369,14 @@ const switchSongs = (del) => {
currentSongId.value = songs.value[currentSongIndex.value].id;
}
-const switchToSong = (index) => {
- if (index === currentSongIndex.value) {
+const switchToSong = (index, isDiffPlaylist) => {
+ if (index === currentSongIndex.value && !isDiffPlaylist) {
return;
}
-
+
currentSongIndex.value = index;
currentSongId.value = songs.value[index].id;
-
+
if (song) {
controlIcons.forEach(controlIcon => {
controlIcon.src = PLAY;
@@ -394,11 +392,13 @@ const switchToSong = (index) => {
}
const switchToPlaylist = (playlist, songId) => {
+ console.log(playlist, songId)
+
currentPlaylist.value = playlist;
displayingPlaylist.value = playlist;
currentPlaylistId.value = playlist.id;
theme.change(currentPlaylist.value.picPath);
-
+
getSongsByPlaylist({
playlist_id: currentPlaylistId.value,
}).then((res) => {
@@ -407,14 +407,14 @@ const switchToPlaylist = (playlist, songId) => {
currentSongId.value = songId;
for (let i = 0; i < songs.value.length; i++) {
if (songs.value[i].id === songId) {
- switchToSong(i);
+ switchToSong(i, true);
parseLrc(songs.value[i].lyricsPath).then(res => {
lyrics.value = res;
});
break;
}
}
-
+
}).catch(e => {
console.log("Error while switching playlists!");
});
@@ -429,17 +429,17 @@ const currentPlaylist = ref(2);
const currentPlaylistId = ref(2);
const displayingPlaylist = ref(2);
const receivePlaylistId = (value) => {
- console.log(value)
- currentPlaylist.value = value;
- currentPlaylistId.value = value.id;
- console.log("Current Playlist Id:", currentPlaylistId.value)
- getSongsByPlaylist({
- playlist_id: currentPlaylistId.value,
- }).then((res) => {
- songs.value = res.data.result;
- }).catch(e => {
- console.log("Failed to get songs!");
- });
+ console.log(value)
+ currentPlaylist.value = value;
+ currentPlaylistId.value = value.id;
+ console.log("Current Playlist Id:", currentPlaylistId.value)
+ getSongsByPlaylist({
+ playlist_id: currentPlaylistId.value,
+ }).then((res) => {
+ songs.value = res.data.result;
+ }).catch(e => {
+ console.log("Failed to get songs!");
+ });
};
const receiveDisplayingPlaylist = (value) => {
setMidComponents(1);
@@ -488,7 +488,7 @@ onMounted(() => {
*/
theme.change(defaultBg);
registerDOMs();
-
+
/*
API
*/
@@ -508,7 +508,7 @@ onMounted(() => {
songs.value = res.data.result;
displayingSongs.value = res.data.result;
currentSongId.value = songs.value[0].id;
-
+
// TODO: currentSongIndex != currentSongId ?
parseLrc(songs.value[currentSongIndex.value].lyricsPath).then(res => {
lyrics.value = res;
@@ -519,63 +519,64 @@ onMounted(() => {
}).catch(e => {
console.log("Failed to get playlists!");
});
-
+
})
let playFromLeftBarAlbum = ref(null);
</script>
<template>
<div class="body" v-show="!isPlayingPage" @click="unSelectAlbum">
-
- <!-- MAIN & RIGHT CONTENT -->
- <Header class="header" @headData="receiveDataFromHeader" allow-search></Header>
- <img class="logo" src="../assets/pictures/logos/logo3.png" alt="">
- <left-side-bar class="left-side-bar" @playFromLeftBar="(id)=>{playFromLeftBarAlbum = id }" @setCurrentPlaylist="receiveDisplayingPlaylist"/>
- <div class="content" :class="{ 'full-width': !showRightContent }">
- <div class="main-view" :class="{ 'expanded': !showRightContent }">
- <el-container v-if="midComponents == 0" class="playlist-container"
- style="overflow: auto; height: 730px ;border-radius: 12px">
- <MainView/>
- </el-container>
- <!--height: 730px -->
- <div v-if="midComponents == 1" class="playlist-container"
- style="overflow: scroll; border-radius: 12px">
- <MusicAlbumView :album-info="displayingPlaylist" :music-list="displayingSongs"
- @switchSongs="switchToPlaylist" :playFromLeftBar="playFromLeftBarAlbum"/>
- </div>
- <el-container v-if="midComponents == 2" class="playlist-container"
- style="overflow: auto; height: 730px ;border-radius: 12px" >
- <el-button class="exit-search"
- data-tooltip="閫€鍑�"
- :class="{ 'adjusted-position': showRightContent }"
- @click="setMidComponents(0)"></el-button>
- <Comment :song-id=currentSongId :user-id=currentUserId></Comment>
- </el-container>
- <el-container v-if="midComponents == 3" class="playlist-container"
- style="overflow: auto; height: 730px ;border-radius: 12px">
- <el-button class="exit-search"
- data-tooltip="閫€鍑�"
- :class="{ 'adjusted-position': showRightContent }"
- @click="setMidComponents(0)"></el-button>
- <SearchView :songResult="songResult" :playlistResult="playlistResult"/>
- </el-container>
- </div>
- <div v-if="showRightContent" class="right-content">
- <div v-if="songs[currentSongIndex] !== undefined" class="music-player music-info">
- <div class="album-cover" @click="togglePlayingPage">
- <img :src="songs[currentSongIndex].picPath" style="margin-top: 10px" id="rotatingImage" alt=""/>
- <span class="point"></span>
- </div>
- <h2>{{ songs[currentSongIndex].title }}</h2>
- <p>{{ songs[currentSongIndex].artist }}</p>
- </div>
-
- <div class="current-playlist" style="margin-top: 20px">
- <el-container class="playlist-container" style="height: 64px">
- <div class="playlist-item" style="display: flex; flex-direction: row">
- <img src="../assets/icons/add.png" alt="" style=""/>
- <div style="display: flex; flex-direction: column; align-items: center; margin-left: 10px">
- <p class="playlist-container-desc" style="
+
+ <!-- MAIN & RIGHT CONTENT -->
+ <Header class="header" @headData="receiveDataFromHeader" allow-search></Header>
+ <img class="logo" src="../assets/pictures/logos/logo3.png" alt="">
+ <left-side-bar class="left-side-bar" @playFromLeftBar="(id)=>{playFromLeftBarAlbum = id }"
+ @setCurrentPlaylist="receiveDisplayingPlaylist"/>
+ <div class="content" :class="{ 'full-width': !showRightContent }">
+ <div class="main-view" :class="{ 'expanded': !showRightContent }">
+ <el-container v-if="midComponents == 0" class="playlist-container"
+ style="overflow: auto; height: 730px ;border-radius: 12px">
+ <MainView/>
+ </el-container>
+ <!--height: 730px -->
+ <div v-if="midComponents == 1" class="playlist-container"
+ style="overflow: scroll; border-radius: 12px">
+ <MusicAlbumView :album-info="displayingPlaylist" :music-list="displayingSongs"
+ @switchSongs="switchToPlaylist" :playFromLeftBar="playFromLeftBarAlbum"/>
+ </div>
+ <el-container v-if="midComponents == 2" class="playlist-container"
+ style="overflow: auto; height: 730px ;border-radius: 12px">
+ <el-button class="exit-search"
+ data-tooltip="閫€鍑�"
+ :class="{ 'adjusted-position': showRightContent }"
+ @click="setMidComponents(0)"></el-button>
+ <Comment :song-id=currentSongId :user-id=currentUserId></Comment>
+ </el-container>
+ <el-container v-if="midComponents == 3" class="playlist-container"
+ style="overflow: auto; height: 730px ;border-radius: 12px">
+ <el-button class="exit-search"
+ data-tooltip="閫€鍑�"
+ :class="{ 'adjusted-position': showRightContent }"
+ @click="setMidComponents(0)"></el-button>
+ <SearchView :songResult="songResult" :playlistResult="playlistResult"/>
+ </el-container>
+ </div>
+ <div v-if="showRightContent" class="right-content">
+ <div v-if="songs[currentSongIndex] !== undefined" class="music-player music-info">
+ <div class="album-cover" @click="togglePlayingPage">
+ <img :src="songs[currentSongIndex].picPath" style="margin-top: 10px" id="rotatingImage" alt=""/>
+ <span class="point"></span>
+ </div>
+ <h2>{{ songs[currentSongIndex].title }}</h2>
+ <p>{{ songs[currentSongIndex].artist }}</p>
+ </div>
+
+ <div class="current-playlist" style="margin-top: 20px">
+ <el-container class="playlist-container" style="height: 64px">
+ <div class="playlist-item" style="display: flex; flex-direction: row">
+ <img src="../assets/icons/add.png" alt="" style=""/>
+ <div style="display: flex; flex-direction: column; align-items: center; margin-left: 10px">
+ <p class="playlist-container-desc" style="
color: white;
font-size: 16px;
text-align: left;
@@ -584,10 +585,10 @@ let playFromLeftBarAlbum = ref(null);
</div>
</div>
</el-container>
- <el-container class="playlist-container" style="overflow: auto; height: 384px">
+ <el-container class="playlist-container" style="overflow: auto; height: 384px; display: flex; flex-direction: column">
<div v-for="(song, index) in songs" class="playlist-item"
style="display: flex; flex-direction: row">
- <div @click="switchToSong(index)" style="cursor: pointer">
+ <div @click="switchToSong(index, false)" style="cursor: pointer">
<img :src="song.picPath" alt=""
:class="{ 'playing': index === currentSongIndex }"
/>
@@ -616,8 +617,8 @@ let playFromLeftBarAlbum = ref(null);
</div>
</div>
</div>
-
-
+
+
<!-- FOOTER -->
<footer>
<div class="bottom-description bottom-component"
@@ -633,22 +634,22 @@ let playFromLeftBarAlbum = ref(null);
max-width: 120px;
box-shadow: 0 10px 60px rgba(200, 187, 255);
"/>
- <audio id="song" @timeupdate="updateCurrentTime">
- <source
- v-if="songs[currentSongIndex] !== undefined"
- :src="songs[currentSongIndex].filePath"
- type="audio/mpeg"/>
- </audio>
- </div>
- <div v-if="songs[currentSongIndex] !== undefined"
- style="display: flex; flex-direction: column; justify-content: center;">
- <p style="font-family: Consolas, serif; color: white; font-size: 16px; text-align: left; margin-left: 5px">
- {{ songs[currentSongIndex].title }}</p>
- <p style="font-family: Consolas, serif; color: white; font-size: 16px; text-align: left; margin-left: 5px">
- {{ songs[currentSongIndex].artist }}</p>
- </div>
- </div>
-
+ <audio id="song" @timeupdate="updateCurrentTime">
+ <source
+ v-if="songs[currentSongIndex] !== undefined"
+ :src="songs[currentSongIndex].filePath"
+ type="audio/mpeg"/>
+ </audio>
+ </div>
+ <div v-if="songs[currentSongIndex] !== undefined"
+ style="display: flex; flex-direction: column; justify-content: center;">
+ <p style="font-family: Consolas, serif; color: white; font-size: 16px; text-align: left; margin-left: 5px">
+ {{ songs[currentSongIndex].title }}</p>
+ <p style="font-family: Consolas, serif; color: white; font-size: 16px; text-align: left; margin-left: 5px">
+ {{ songs[currentSongIndex].artist }}</p>
+ </div>
+ </div>
+
<el-card class="bottom-controller bottom-component" style="
position: absolute;
left: 50%;
@@ -680,32 +681,32 @@ let playFromLeftBarAlbum = ref(null);
<p style="margin-left: 10px; padding-bottom: 40px; color: white">{{ formatTime(duration) }}</p>
</div>
</el-card>
-
+
<div class="right-controls">
- <div class="feature-icon"
- data-tooltip="鍒嗕韩"
- :class="{ active: isSharing }">
- <img src="../assets/icons/comment/share.png" alt="鍒嗕韩">
- </div>
-
- <div class="feature-icon"
- data-tooltip="璇勮"
- :class="{ active: midComponents === 2 }"
- @click="setMidComponents(2)">
- <img src="../assets/icons/comment/comment.png" alt="璇勮">
- </div>
-
- <div class="feature-icon"
- data-tooltip="鎾斁闃熷垪"
- :class="{ active: showRightContent }"
- @click="showRightContent = !showRightContent">
- <img src="../assets/icons/queue.png" alt="鎾斁闃熷垪">
- </div>
- </div>
+ <div class="feature-icon"
+ data-tooltip="鍒嗕韩"
+ :class="{ active: isSharing }">
+ <img src="../assets/icons/comment/share.png" alt="鍒嗕韩">
+ </div>
+
+ <div class="feature-icon"
+ data-tooltip="璇勮"
+ :class="{ active: midComponents === 2 }"
+ @click="setMidComponents(2)">
+ <img src="../assets/icons/comment/comment.png" alt="璇勮">
+ </div>
+
+ <div class="feature-icon"
+ data-tooltip="鎾斁闃熷垪"
+ :class="{ active: showRightContent }"
+ @click="showRightContent = !showRightContent">
+ <img src="../assets/icons/queue.png" alt="鎾斁闃熷垪">
+ </div>
+ </div>
</footer>
</div>
-
-
+
+
<!-- PLAYING PAGE -->
<div v-show="isPlayingPage" class="playing-page">
<div v-if="isLyricsDisplaying" class="lyrics-container">
@@ -715,7 +716,8 @@ let playFromLeftBarAlbum = ref(null);
:key="index"
:class="{ active: index === currentLineIndex }"
class="lyrics-line"
- >{{ line.text }}</div>
+ >{{ line.text }}
+ </div>
<h1 v-if="lyrics.length === 0" style="
font-size: 24px;
color: #9d9d9d;
@@ -724,8 +726,8 @@ let playFromLeftBarAlbum = ref(null);
">Ouch锛佽姝屾洸鏆傛棤姝岃瘝锛�</h1>
</div>
</div>
-
-<!-- <div class="player" :style="{ backgroundImage: gradientColor }">-->
+
+ <!-- <div class="player" :style="{ backgroundImage: gradientColor }">-->
<div class="player">
<div class="background"></div>
<div class="player-content">
@@ -857,7 +859,7 @@ h1 {
background-color: rgb(19, 19, 19); /* rgba(0, 0, 0, 1); */
background-repeat: no-repeat;
background-size: cover;
-
+
/* 鍘熷厛main涓殑鍐呭
height: 700px;
width: 95%;
@@ -877,8 +879,8 @@ h1 {
"now-playing-bar now-playing-bar now-playing-bar";
grid-template-columns: auto 1fr;
grid-template-rows: 10% 80% 10%;
- grid-auto-rows: min-content;
-
+ grid-auto-rows: min-content;
+
column-gap: 8px;
padding: 8px;
overflow: hidden;
@@ -894,17 +896,17 @@ h1 {
left-side-bar {
grid-area: left-sideBar;
-
+
}
.content {
grid-area: main-view;
-
+
}
footer {
grid-area: now-playing-bar;
-
+
}
/* MAIN MENU */
@@ -994,24 +996,25 @@ footer {
/* CONTENT 鍖呭惈涓棿鍜屽彸杈规爮 鏄痝rid甯冨眬*/
.content {
- height: 100%;
+ height: 100%;
display: grid;
grid-template-columns: 1fr auto;
- grid-template-rows: 100%;
+ grid-template-rows: 100%;
transition: all 0.3s ease;
column-gap: 8px;
-
+
}
.content.full-width {
grid-template-columns: 100% !important;
-
+
}
/* LEFT CONTENT */
-.main-view{
- overflow: scroll;
+.main-view {
+ overflow: scroll;
}
+
.main-view > {
display: flex;
flex-direction: column;
@@ -1023,7 +1026,7 @@ footer {
}
.main-view.expanded {
-
+
margin: 0;
padding: 0;
width: 100%;
@@ -1117,7 +1120,7 @@ footer {
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 150px;
-
+
@supports (-webkit-line-clamp: 2) {
overflow: hidden;
display: -webkit-box;
@@ -1144,7 +1147,6 @@ footer {
}
*/
-
.album-container::-webkit-scrollbar {
height: 10px;
display: none;
@@ -1351,17 +1353,17 @@ footer {
main {
grid-template-columns: 15% 85%;
}
-
+
.user-info img {
border-radius: 50%;
padding: 12px 12px 6px;
}
-
+
.nav-icon {
text-align: center;
transform: translateY(2px);
}
-
+
.content {
grid-template-columns: 70% 30%;
}
@@ -1378,20 +1380,20 @@ footer {
.swiper-slide {
width: 500px;
}
-
+
.swiper-slide img {
border-radius: 16px;
height: 280px;
}
-
+
.album-frame {
width: 160px;
}
-
+
.song {
grid-template-columns: 29% auto 10%;
}
-
+
.controls button {
margin: 15px;
}
@@ -1401,31 +1403,31 @@ footer {
.content:not(.full-width) {
grid-template-columns: 60% 40%;
}
-
+
.main-view {
-
+
}
-
+
.swiper-slide {
width: 410px;
}
-
+
.swiper-slide img {
height: 220px;
}
-
+
.album {
grid-template-rows: 4fr 2fr;
}
-
+
.album-frame {
width: 130px;
}
-
+
.song {
grid-template-columns: 26% auto 10%;
}
-
+
.song:nth-child(8),
.song:nth-child(9) {
display: none;
@@ -1437,83 +1439,83 @@ footer {
grid-template-columns: 10% 90%;
margin: 20px;
}
-
+
.main-view {
/*padding: 30px 20px 20px;*/
}
-
+
.swiper-slide img {
height: 180px;
}
-
+
.album {
grid-template-rows: 3fr 2fr;
}
-
+
.album-frame {
width: 100px;
}
-
+
.right-content {
grid-template-rows: 55% 45%;
}
-
+
}
@media (max-width: 825px) {
.content:not(.full-width) {
grid-template-columns: 52% 48%;
}
-
+
.swiper-slide {
width: 280px;
}
-
+
.swiper-slide img {
height: 200px;
}
-
+
.slide-overlay button {
padding: 8px 12px;
}
-
+
}
@media (max-width: 750px) {
main {
grid-template-columns: 15% 85%;
}
-
+
.content:not(.full-width) {
grid-template-columns: 100%;
grid-template-areas:
"leftContent"
"rightContent";
}
-
+
.main-view {
grid-area: leftContent;
}
-
+
.album {
grid-template-rows: 3fr 2fr;
}
-
+
.album-frame {
width: 140px;
}
-
+
.right-content {
grid-area: rightContent;
border-left: unset;
grid-template-rows: 60% 40%;
row-gap: 16px;
}
-
+
#progress {
width: 60%;
}
-
+
.controls button {
margin: 20px;
}
@@ -1523,23 +1525,23 @@ footer {
.swiper-slide {
width: 290px;
}
-
+
.swiper-slide img {
height: 180px;
}
-
+
.artist img {
width: 80px;
}
-
+
.album {
grid-template-rows: 3fr 2fr;
}
-
+
.album-frame {
width: 100px;
}
-
+
}
@media (max-width: 450px) {
@@ -1547,7 +1549,7 @@ footer {
border-radius: 50%;
padding: 6px 6px 2px;
}
-
+
}
/* 鍔ㄧ敾锛氫笓杈戝垪琛ㄧЩ鍒伴《閮� */
@@ -1600,6 +1602,7 @@ footer {
transform: translateY(0);
}
}
+
/**
.share-icon,
.queue-icon,
@@ -1623,66 +1626,66 @@ footer {
*/
.right-controls {
- display: flex;
- align-items: center;
- gap: 16px;
- position: absolute;
- right: 80px;
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ position: absolute;
+ right: 80px;
}
.feature-icon {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 32px;
- height: 32px;
- border-radius: 50%;
- background: rgba(255, 255, 255, 0.1);
- transition: all 0.2s ease;
- position: relative;
- cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.1);
+ transition: all 0.2s ease;
+ position: relative;
+ cursor: pointer;
}
.feature-icon:hover {
- background: rgba(255, 255, 255, 0.2);
- transform: translateY(-2px);
+ background: rgba(255, 255, 255, 0.2);
+ transform: translateY(-2px);
}
.feature-icon img {
- width: 16px;
- height: 16px;
- transition: all 0.2s ease;
+ width: 16px;
+ height: 16px;
+ transition: all 0.2s ease;
}
.feature-icon:hover img {
- filter: brightness(1.2);
+ filter: brightness(1.2);
}
.feature-icon[data-tooltip]:hover::after {
- content: attr(data-tooltip);
- position: absolute;
- top: -25px;
- left: 50%;
- transform: translateX(-50%);
- background-color: #282828;
- color: white;
- padding: 4px 8px;
- border-radius: 4px;
- font-size: 12px;
- white-space: nowrap;
- z-index: 1000;
+ content: attr(data-tooltip);
+ position: absolute;
+ top: -25px;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: #282828;
+ color: white;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ white-space: nowrap;
+ z-index: 1000;
}
.feature-icon.active {
- background: #1db954;
+ background: #1db954;
}
.feature-icon.active img {
- filter: brightness(0) invert(1);
+ filter: brightness(0) invert(1);
}
.feature-icon.active:hover {
- background: #1ed760;
+ background: #1ed760;
}
/* 閫€鍑烘悳绱㈠浘鏍� */
@@ -1735,11 +1738,6 @@ footer {
}
-
-
-
-
-
/* 娌″繀瑕� 鍦╝pp涓啓杩囦簡
html, body {
margin: 0;
@@ -1872,8 +1870,8 @@ html, body {
}
.comment-container {
- position: relative;
- background: transparent;
+ position: relative;
+ background: transparent;
}
</style>
--
GitLab