Skip to content
Snippets Groups Projects
Commit 785dd784 authored by 杭 羽凡's avatar 杭 羽凡
Browse files

增加了收藏歌曲到歌单的列表

parent ec011079
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/MusicAlbumView.vue
+ 496
− 490
View file @ 785dd784
......@@ -10,16 +10,20 @@ import {removePlaylist, removeSongFromPlaylist} from "../api/playlist";
const emit = defineEmits();
const props = defineProps({
albumInfo: { // 类型 ：id, userid, title ,description ,picPath,createTime,updateTime,songNum
type: Object,
required: true,
},
musicList: {// 类型 ：id ,title, artist, album,description, picPath,uploadTime
type: Object,
required: true,
},
playFromLeftBar: null,
currentSongId: Number
albumInfo: { // 类型 ：id, userid, title ,description ,picPath,createTime,updateTime,songNum
type: Object,
required: true,
},
playList:{
type: Array,
required: true,
},
musicList: {// 类型 ：id ,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%)`)
......@@ -47,47 +51,48 @@ 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) => {
......@@ -116,79 +121,59 @@ 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";
}
}
window.onscroll = () => {
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 stickyPlayY = playArea.offsetTop;
const stickyTipY = tipArea.offsetTop;
if (window.scrollY >= stickyPlayY) {
fixedPlayArea.style.opacity = "1";
} else {
fixedPlayArea.style.opacity = "0";
}
if (window.scrollY + fixedPlayArea.scrollHeight >= stickyTipY) {
fixedTipArea.style.display = "flex";
fixedTipArea.style.top = 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";
}
}
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();
})
}
......@@ -211,11 +196,22 @@ const playFromId = (musicId) => {
} else {
musicPlayIndex.value = musicId;
}
emit('switchSongs', props.albumInfo, musicPlayIndex.value);
musicPauseIndex = null;
emit('switchSongs', props.albumInfo, musicPlayIndex.value);
}
const addToFavorite = (musicId) => {
const addToFavorite = (musicId,albumId) => {
//TODO:调用接口添加歌曲到指定歌单，并设置elmessage提示信息
ElMessage({
message: "添加至: " + props.albumInfo.title,
grouping: true,
type: 'info',
offset: 16,
customClass: "reco-message",
duration: 4000,
}
)
}
const removeMusicFromAlbum = (albumId, songId) => {
removeSongFromPlaylist({
......@@ -276,7 +272,7 @@ const addRecommendMusic = (musicId) => {
</div>
</div>
</div>
<div class="content">
<div class="play-area">
<div class="play-button">
......@@ -304,7 +300,7 @@ const addRecommendMusic = (musicId) => {
</ul>
</el-popover>
</div>
<div class="fixed-play-area" :style="{background :`${backgroundColor}`}">
<div class="opacity-wrapper">
<div class="play-button">
......@@ -401,7 +397,7 @@ const addRecommendMusic = (musicId) => {
<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"
......@@ -414,214 +410,221 @@ const addRecommendMusic = (musicId) => {
: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" style="overflow: scroll;max-height: 400px;">
<div style="padding: 6px 0 6px 10px;font-weight: bold;color:darkgrey;font-size:16px">选择歌单收藏</div>
<hr style=" border: 0;padding-top: 1px;background: linear-gradient(to right, transparent, #98989b, transparent);" >
<li class="album-to-add" @click="addToFavorite(music.id,album.id)" v-for="album in playList">
<div style="height:40px;display: flex;align-items: center;font-size: 20px;font-weight:400">
<img :src="album.picPath" style="height: 32px;width:32px;border-radius: 4px" alt=""/>
<div style="margin-left: 30px">{{album.title}} </div>
</div>
</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 {
......@@ -630,189 +633,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 {
......@@ -823,133 +826,136 @@ 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;
}
.album-to-add{
padding: 8px;
}
.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: 10px ;
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 {
......@@ -1020,7 +1026,7 @@ 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;
}
......@@ -1102,7 +1108,7 @@ li:hover {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
&:hover {
opacity: 0;
pointer-events: none;
......
src/router/index.js
+ 1
− 3
View file @ 785dd784
......@@ -40,10 +40,8 @@ const router = createRouter({
meta: {title: 'Manage'}
},
{
path: '/test',
// @ts-ignore
component: () => import('../components/MusicAlbumView.vue'),
meta: {title: 'musicAlbumView'}
}
]
})
......
src/views/HomePage.vue
+ 154
− 150
View file @ 785dd784
/* eslint-disable */
<script setup>
// Vue Basics
import {computed, onMounted, ref} from "vue"
import {onMounted, ref, watch, computed, nextTick} from "vue"
import {router} from "../router";
// Assets
import defaultBg from '../assets/pictures/Eason.png'
......@@ -79,7 +80,7 @@ function updateCurrentLine() {
}
setInterval(() => {
// console.log(progresses.length, controlIcons.length, playModeIcons.length);
// console.log(progresses.length, controlIcons.length, playModeIcons.length);
}, 1000);
......@@ -127,7 +128,7 @@ const registerDOMs = () => {
*/
const navItems = document.querySelectorAll(".nav-item");
const containers = document.querySelectorAll(".containers");
navItems.forEach((navItem) => {
navItem.addEventListener("click", () => {
navItems.forEach((item) => {
......@@ -140,7 +141,7 @@ const registerDOMs = () => {
let isDragging = false;
let startX;
let scrollLeft;
container.addEventListener("mousedown", (e) => {
isDragging = true;
startX = e.pageX - container.offsetLeft;
......@@ -151,7 +152,7 @@ const registerDOMs = () => {
return;
}
e.preventDefault();
const x = e.pageX - container.offsetLeft;
const step = (x - startX) * 0.6;
container.scrollLeft = scrollLeft - step;
......@@ -166,7 +167,7 @@ const registerDOMs = () => {
container.scrollLeft += e.deltaY / 2;
});
});
/*
Songs Related
*/
......@@ -176,11 +177,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]) {
......@@ -199,11 +200,11 @@ const registerDOMs = () => {
console.log("Uncaught Error in updateSongInfo!", e);
}
}
function shareSong() {
console.log("Hello!");
}
function playPause() {
isPaused.value = !isPaused.value;
try {
......@@ -222,7 +223,7 @@ const registerDOMs = () => {
console.log("Uncaught Error in playPause!", e);
}
}
function switchPlayMode() {
playingMode.value = (playingMode.value + 1) % 3
switch (playingMode.value) {
......@@ -245,7 +246,7 @@ const registerDOMs = () => {
break;
}
}
song.addEventListener("loadedmetadata", function () {
progresses.forEach(progress => {
duration.value = song.duration;
......@@ -264,7 +265,7 @@ const registerDOMs = () => {
});
}
});
playPauseButtons.forEach(playPauseButton => {
if (!playPauseButton._hasClickListener) {
playPauseButton.addEventListener("click", playPause);
......@@ -301,7 +302,7 @@ const registerDOMs = () => {
backwardButton._hasClickListener = true;
}
});
progresses.forEach(progress => {
progress.addEventListener("input", function () {
if (!song.paused) {
......@@ -318,7 +319,7 @@ const registerDOMs = () => {
}
});
});
// updateSongInfo();
}
......@@ -330,6 +331,7 @@ const userToken = ref(JSON.parse(sessionStorage.getItem('user-token')));
const currentUserId = ref(userToken.value.id);
/*
SONGS
*/
......@@ -373,10 +375,10 @@ 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;
......@@ -393,12 +395,12 @@ const switchToSong = (index, isDiffPlaylist) => {
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) => {
......@@ -414,7 +416,7 @@ const switchToPlaylist = (playlist, songId) => {
break;
}
}
}).catch(e => {
console.log("Error while switching playlists!");
});
......@@ -429,17 +431,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 +490,7 @@ onMounted(() => {
*/
theme.change(defaultBg);
registerDOMs();
/*
API
*/
......@@ -508,7 +510,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,64 +521,63 @@ 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" :play-list="playlists" :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;
......@@ -617,8 +618,8 @@ let playFromLeftBarAlbum = ref(null);
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="bottom-description bottom-component"
......@@ -649,7 +650,7 @@ let playFromLeftBarAlbum = ref(null);
{{ songs[currentSongIndex].artist }}</p>
</div>
</div>
<el-card class="bottom-controller bottom-component" style="
position: absolute;
left: 50%;
......@@ -681,21 +682,21 @@ 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 }"
......@@ -705,8 +706,8 @@ let playFromLeftBarAlbum = ref(null);
</div>
</footer>
</div>
<!-- PLAYING PAGE -->
<div v-show="isPlayingPage" class="playing-page">
<div v-if="isLyricsDisplaying" class="lyrics-container">
......@@ -716,8 +717,7 @@ 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;
......@@ -726,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">
......@@ -859,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%;
......@@ -880,7 +880,7 @@ h1 {
grid-template-columns: auto 1fr;
grid-template-rows: 10% 80% 10%;
grid-auto-rows: min-content;
column-gap: 8px;
padding: 8px;
overflow: hidden;
......@@ -896,17 +896,17 @@ h1 {
left-side-bar {
grid-area: left-sideBar;
}
.content {
grid-area: main-view;
}
footer {
grid-area: now-playing-bar;
}
/* MAIN MENU */
......@@ -996,25 +996,24 @@ footer {
/* CONTENT 包含中间和右边栏 是grid布局*/
.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;
......@@ -1026,7 +1025,7 @@ footer {
}
.main-view.expanded {
margin: 0;
padding: 0;
width: 100%;
......@@ -1120,7 +1119,7 @@ footer {
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 150px;
@supports (-webkit-line-clamp: 2) {
overflow: hidden;
display: -webkit-box;
......@@ -1147,6 +1146,7 @@ footer {
}
*/
.album-container::-webkit-scrollbar {
height: 10px;
display: none;
......@@ -1353,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%;
}
......@@ -1380,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;
}
......@@ -1403,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;
......@@ -1439,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;
}
......@@ -1525,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) {
......@@ -1549,7 +1549,7 @@ footer {
border-radius: 50%;
padding: 6px 6px 2px;
}
}
/* 动画：专辑列表移到顶部 */
......@@ -1602,7 +1602,6 @@ footer {
transform: translateY(0);
}
}
/**
.share-icon,
.queue-icon,
......@@ -1738,6 +1737,11 @@ footer {
}
/* 没必要 在app中写过了
html, body {
margin: 0;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment