From a504fa57872cb4515c1973073c908a77be7e0eff Mon Sep 17 00:00:00 2001
From: CosineSky <11737516+cosinesky@user.noreply.gitee.com>
Date: Thu, 19 Dec 2024 22:37:16 +0800
Subject: [PATCH] - CSS Changes.
---
src/components/Header.vue | 8 ++++-
src/components/LeftSideBar.vue | 2 +-
src/components/MusicAlbumView.vue | 23 +++++++++----
src/components/SearchView.vue | 26 +++++++++++---
src/utils/formatTime.js | 10 +++++-
src/views/HomePage.vue | 3 +-
src/views/ProfilePage.vue | 57 +++++++++++++++++++++++++++----
7 files changed, 107 insertions(+), 22 deletions(-)
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 396fed1..8c63318 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -6,6 +6,12 @@ import {searchSongByKeyword, searchPlaylistByKeyword} from "../api/search";
const router = useRouter();
const emit = defineEmits(['headData']);
+const props = defineProps({
+ allowSearch: {
+ type: Boolean,
+ },
+});
+
/*
* Search
*/
@@ -81,7 +87,7 @@ function callSearch() {
<div style="display: flex; flex-direction: row"></div>
- <div class="search-box">
+ <div v-if="allowSearch" class="search-box">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-search"
diff --git a/src/components/LeftSideBar.vue b/src/components/LeftSideBar.vue
index b66880f..8461d0f 100644
--- a/src/components/LeftSideBar.vue
+++ b/src/components/LeftSideBar.vue
@@ -153,7 +153,7 @@ defineProps({
<div class="musicAlbum-description">
<p style="padding-bottom: 5px;font-size: 18px">{{ album.title }}</p>
- <p v-if="album.title !== '鎴戝枩娆㈢殑姝屾洸'" style="color: #b2b2b2;font-size: 13px">姝屽崟 鈥� {{ user }}</p>
+ <p v-if="album.title !== '鎴戝枩娆㈢殑姝屾洸'" style="color: #b2b2b2;font-size: 13px">姝屽崟 鈥� {{ userToken.username }}</p>
<p v-else style="color: #b2b2b2;font-size: 13px">榛樿鏀惰棌澶�</p>
</div>
</div>
diff --git a/src/components/MusicAlbumView.vue b/src/components/MusicAlbumView.vue
index 8c5a91e..214b87c 100644
--- a/src/components/MusicAlbumView.vue
+++ b/src/components/MusicAlbumView.vue
@@ -189,9 +189,12 @@ const pauseMusic = (musicId) => {
<p class="header-album-name" style="font-weight: bolder;font-size:100px;margin:10px 0 35px 10px;">
{{ albumInfo.title }}</p>
<div class="header-content-detail">
+ <p style="margin-left:6px">{{ musicList.length }} 棣栨瓕鏇�</p>
+ <p style="margin: 0 9px 0 6px"> 鈥� </p>
+ <p v-if="albumInfo.updateTime !== undefined">
+ {{ albumInfo.updateTime.substring(0, 10) }} </p>
+ <p style="margin: 0 6px 0 9px"> 鈥� </p>
<p class="header-creator" @click="enterPersonalSpace">{{ albumInfo.description }}</p>
- <p>鈥�</p>
- <p style="margin-left:6px">姝屾洸鏁伴噺: {{ musicList.length }}</p>
</div>
</div>
</div>
@@ -237,7 +240,7 @@ const pauseMusic = (musicId) => {
<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>
+ <p style="margin-left: auto; margin-right:100px">鏃堕棿</p>
</div>
<div class="fixed-tips">
<p style="position:absolute; left:45px">#</p>
@@ -261,9 +264,7 @@ const pauseMusic = (musicId) => {
<div
:style="{visibility: musicHoveredIndex === music.id||musicPlayIndex === music.id ? 'hidden' : 'visible' }">
- {{
- music.number
- }}
+ {{music.number}}
</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"
@@ -293,10 +294,12 @@ const pauseMusic = (musicId) => {
{{ music.artist }}</p>
</div>
</div>
-
<div class="music-album-info" :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
{{ music.album }}
</div>
+ <div class="music-time-info" :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
+<!-- {{ music.uploadTime.substring(0, 10) }}-->
+ </div>
<div class="music-right-info">
<el-popover class="music-dropdown-options"
:width="400"
@@ -670,6 +673,12 @@ p {
text-decoration: underline;
}
+.music-time-info {
+ position: absolute;
+ left: 85%;
+ color: #b2b2b2;
+}
+
/*鍙充晶淇℃伅*/
.music-right-info {
margin-left: auto;
diff --git a/src/components/SearchView.vue b/src/components/SearchView.vue
index fedbab8..48b585c 100644
--- a/src/components/SearchView.vue
+++ b/src/components/SearchView.vue
@@ -33,8 +33,8 @@ const handleTabClick = (tab) => {
<li v-for="(song, index) in songResult" :key="song.id">
<div class="song-item">
<span class="song-index">{{ index + 1 }}</span>
- <img :src="song.picPath" class="song-pic" alt=""/>
- <div class="song-info">
+ <img :src="song.picPath" class="song-pic pic" alt=""/>
+ <div class="song-info info">
<h3 class="song-title">{{ song.title }}</h3>
<p class="song-artist">{{ song.artist }}</p>
<p class="song-album">{{ song.album }}</p>
@@ -47,10 +47,10 @@ const handleTabClick = (tab) => {
<li v-for="(playlist, index) in playlistResult" :key="playlist.id">
<div class="playlist-item">
<span class="song-index">{{ index + 1 }}</span>
- <img :src="playlist.picPath" class="playlist-pic" alt=""/>
- <div class="playlist-info">
+ <img :src="playlist.picPath" class="playlist-pic pic" alt=""/>
+ <div class="playlist-info info">
<h3 class="playlist-title">{{ playlist.title }}</h3>
- <p class="playlist-username">{{ playlist.username }}</p>
+ <p class="playlist-username">姝屾洸鏁�: {{ playlist.songNum }} 鈥� {{ playlist.description }}</p>
</div>
</div>
</li>
@@ -100,6 +100,22 @@ const handleTabClick = (tab) => {
padding: 0;
}
+.info h3 {
+ font-size: 18px;
+ color: #e7e7e7;
+}
+
+.info p {
+ font-size: 14px;
+ color: #a9a9a9;
+}
+
+.pic:hover {
+ filter: brightness(1.05);
+ border-color: #ddc323;
+ box-shadow: 0 0 10px rgba(221, 195, 35, 0.5);
+ transform: scale(1.03);
+}
.song-item {
display: flex;
diff --git a/src/utils/formatTime.js b/src/utils/formatTime.js
index a43c0fa..8b3b6dc 100644
--- a/src/utils/formatTime.js
+++ b/src/utils/formatTime.js
@@ -2,4 +2,12 @@ export function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes}:${remainingSeconds < 10 ? '0' + remainingSeconds : remainingSeconds}`;
-}
\ No newline at end of file
+}
+
+export function calculateDaysDifference(startTimestamp) {
+ const startDate = new Date(startTimestamp);
+ const endDate = Date.now();
+ const diffInMilliseconds = endDate - startDate;
+ const diffInDays = diffInMilliseconds / (1000 * 60 * 60 * 24);
+ return Math.floor(diffInDays);
+}
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 222ab13..53367fe 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -439,6 +439,7 @@ const receivePlaylistId = (value) => {
});
};
const receiveDisplayingPlaylist = (value) => {
+ setMidComponents(1);
displayingPlaylist.value = value;
getSongsByPlaylist({
playlist_id: value.id,
@@ -523,7 +524,7 @@ onMounted(() => {
<div class="body" v-show="!isPlayingPage" @click="unSelectAlbum">
<!-- MAIN & RIGHT CONTENT -->
- <Header class="header" @headData="receiveDataFromHeader"/>
+ <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" @setCurrentPlaylist="receiveDisplayingPlaylist"/>
<div class="content" :class="{ 'full-width': !showRightContent }">
diff --git a/src/views/ProfilePage.vue b/src/views/ProfilePage.vue
index f85a051..4140621 100644
--- a/src/views/ProfilePage.vue
+++ b/src/views/ProfilePage.vue
@@ -1,8 +1,16 @@
<script setup>
import {useTheme} from "../store/theme";
import {onMounted, ref} from "vue";
+import Header from "../components/Header.vue";
+import {calculateDaysDifference} from "../utils/formatTime";
const theme = useTheme()
+/*
+ USER
+ */
+const userToken = ref(JSON.parse(sessionStorage.getItem('user-token')));
+const currentUserId = ref(userToken.value.id);
+
onMounted(() => {
theme.reset();
})
@@ -49,6 +57,8 @@ onMounted(() => {
<template>
<body>
+ <Header class="header" @headData="receiveDataFromHeader"/>
+ <img class="logo" src="../assets/pictures/logos/logo3.png" alt="">
<video autoplay muted loop id="video-background">
<source src="../assets/videos/2.mp4" type="video/mp4">
Your browser does not support the video tag.
@@ -65,12 +75,30 @@ onMounted(() => {
</div>
<div class="description-profile">Country | Rock | Jazz</div>
<ul class="data-user">
- <li><a><strong>11</strong><span>Posts</span></a></li>
- <li><a><strong>45</strong><span>Followers</span></a></li>
- <li><a><strong>14</strong><span>Following</span></a></li>
+ <li>
+ <a>
+ <strong>11</strong>
+ <span class="large">鎬诲惉姝屾暟</span>
+ </a>
+ </li>
+ <li>
+ <a>
+ <strong>4.5</strong>
+ <span class="large">鎬诲惉姝屾椂闀�</span>
+ <span class="small">/灏忔椂</span>
+ </a>
+ </li>
+ <li>
+ <a>
+ <strong>{{calculateDaysDifference(userToken.createTime)}}</strong>
+ <span class="large">鎬绘椿璺�</span>
+ <span class="small">/澶�</span>
+ </a>
+ </li>
</ul>
</div>
</div>
+ <h1></h1>
<!-- <div class="album-container">-->
<!-- <img-->
<!-- v-for="(album, index) in albums"-->
@@ -88,12 +116,24 @@ onMounted(() => {
body {
font-family: "Open sans", sans-serif;
display: flex;
+ flex-direction: column;
align-items: center;
- justify-content: center;
+ justify-content: space-between;
min-height: 100vh;
background-image: url("../assets/videos/2.mp4");
background-repeat: no-repeat;
background-size: cover;
+ height: 100%;
+ overflow: hidden;
+}
+
+.logo {
+ position: absolute;
+ top: 0px;
+ left: -10px;
+ width: 8%;
+ height: 8%;
+ z-index: 114514;
}
#video-background {
@@ -219,15 +259,20 @@ a {
padding: .93em 0;
color: #46494c;
}
-.profile-user-page .data-user li a strong, .profile-user-page .data-user li a span {
+.profile-user-page .data-user li a strong,
+.profile-user-page .data-user li a span {
font-weight: 600;
line-height: 1;
}
.profile-user-page .data-user li a strong {
font-size: 2em;
}
-.profile-user-page .data-user li a span {
+.profile-user-page .data-user li a .large {
+ color: #717a7e;
+}
+.profile-user-page .data-user li a .small {
color: #717a7e;
+ font-size: 10px;
}
.profile-user-page .data-user li a:hover {
background: rgba(0, 0, 0, 0.05);
--
GitLab