From 7f30445cd9ccde700cf7b8dd63b83e749e0803e5 Mon Sep 17 00:00:00 2001
From: zhangda <221830074@smail.nju.edu.cn>
Date: Wed, 18 Dec 2024 14:25:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=AF=84=E8=AE=BA=E8=BE=93?=
=?UTF-8?q?=E5=85=A5=E6=A1=86=E6=A0=B7=E5=BC=8F=20=E4=BF=AE=E6=94=B9?=
=?UTF-8?q?=E5=8F=B3=E4=B8=8B=E8=A7=92=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
=?UTF-8?q?=20=E4=B8=BAMusicAlbumView=E6=B7=BB=E5=8A=A0=E9=9D=9E=E7=A9=BA?=
=?UTF-8?q?=E6=A3=80=E6=9F=A5=EF=BC=8C=E9=81=BF=E5=85=8D=E4=B8=AD=E9=97=B4?=
=?UTF-8?q?=E5=88=87=E6=8D=A2=E7=BB=84=E4=BB=B6=E6=97=B6=E6=8A=A5=E7=A9=BA?=
=?UTF-8?q?=E6=8C=87=E9=92=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Comment.vue | 10 +++
src/components/MusicAlbumView.vue | 47 ++++++++----
src/views/HomePage.vue | 117 ++++++++++++++++++++++--------
3 files changed, 127 insertions(+), 47 deletions(-)
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index d3ee97e..d2dc7dc 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -511,6 +511,16 @@ const changeSortBy = (type) => {
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
resize: none;
+ outline: none;
+
+ &:focus {
+ border-color: rgba(255, 255, 255, 0.2); /* 杈撳叆鏃惰竟妗嗛鑹茬◢寰彉浜� */
+ box-shadow: none; /* 绉婚櫎榛樿鐨勭劍鐐归槾褰� */
+ }
+
+ &::placeholder {
+ color: rgba(255, 255, 255, 0.5);
+ }
}
.custom-button:focus,
diff --git a/src/components/MusicAlbumView.vue b/src/components/MusicAlbumView.vue
index bd8c8a6..502dfcb 100644
--- a/src/components/MusicAlbumView.vue
+++ b/src/components/MusicAlbumView.vue
@@ -1,5 +1,5 @@
<script setup>
-import {computed, nextTick, onMounted, ref, watch} from "vue";
+import {computed, nextTick, onMounted, ref, watch, onUnmounted} from "vue";
import playButton from "../icon/playButton.vue";
import dots from "../icon/dots.vue";
import checkMark from "../icon/checkMark.vue";
@@ -89,23 +89,26 @@ let musicClickedIndex = ref(null);
let musicPlayIndex = ref(null);
let musicPauseIndex = ref(null);
+const resizeObserver = ref(null)
// 鏀剧缉鏃剁殑缁勪欢澶勭悊
const handleResize = () => {
+ const albumContent = document.querySelector(".album-content");
+ if (!albumContent) return;
+
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) {
+ 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";
@@ -114,19 +117,22 @@ const handleResize = () => {
album.style.visibility = "visible";
});
}
+
const albumImage = document.querySelector(".album-image");
const headerAlbumName = document.querySelector(".header-album-name");
// 姝屽崟鍥剧墖鍜屾枃瀛楃缉鏀�
- if (albumContent.clientWidth < 420) {
- albumImage.style.width = "140px";
- albumImage.style.height = "140px";
- headerAlbumName.style.fontSize = "60px";
- headerAlbumName.style.marginBottom = "20px";
- } else {
- albumImage.style.width = "220px";
- albumImage.style.height = "220px";
- headerAlbumName.style.fontSize = "100px";
- headerAlbumName.style.marginBottom = "35px";
+ if (albumImage && headerAlbumName) {
+ if (albumContent.clientWidth < 420) {
+ albumImage.style.width = "140px";
+ albumImage.style.height = "140px";
+ headerAlbumName.style.fontSize = "60px";
+ headerAlbumName.style.marginBottom = "20px";
+ } else {
+ albumImage.style.width = "220px";
+ albumImage.style.height = "220px";
+ headerAlbumName.style.fontSize = "100px";
+ headerAlbumName.style.marginBottom = "35px";
+ }
}
}
@@ -146,13 +152,22 @@ const debounce = (fn, delay) => {
onMounted(()=>{
- const resizeObserver = new ResizeObserver(debounce(handleResize,50));
+ resizeObserver.value = new ResizeObserver(debounce(handleResize,50));
+ console.log(resizeObserver.value)
nextTick(()=>{
const albumContent = document.querySelector(".album-content");
- resizeObserver.observe(albumContent);
+ if (albumContent) {
+ resizeObserver.value.observe(albumContent);
+ }
})
})
+onUnmounted(() => {
+ if (resizeObserver.value) {
+ resizeObserver.value.disconnect();
+ }
+})
+
window.onscroll = () => {
const playArea = document.querySelector(".play-area");
const fixedPlayArea = document.querySelector(".fixed-play-area");
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index ee770a5..e4c5caf 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -615,36 +615,27 @@ onMounted(() => {
</div>
</el-card>
- <div class="share-icon bottom-component" style="
- position: absolute;
- left: 92%;
- transform: translateX(-50%);
- color: white;
- cursor: pointer;
- ">
- <img src="../assets/icons/comment/share.png" alt="" style="width: 24px; height: 24px;"
- @click="">
- </div>
- <div class="comment-icon bottom-component" style="
- position: absolute;
- left: 95%;
- transform: translateX(-50%);
- color: white;
- cursor: pointer;
- ">
- <img src="../assets/icons/comment/comment.png" alt="" style="width: 24px; height: 24px;"
- @click="setMidComponents(2)">
- </div>
- <div class="queue-icon bottom-component" style="
- position: absolute;
- left: 98%;
- transform: translateX(-50%);
- color: white;
- cursor: pointer;
- ">
- <img src="../assets/icons/queue.png" alt="" style="width: 24px; height: 24px;"
- @click="showRightContent = !showRightContent">
- </div>
+ <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>
</footer>
</div>
@@ -1510,7 +1501,7 @@ footer {
transform: translateY(0);
}
}
-
+/**
.share-icon,
.queue-icon,
.comment-icon {
@@ -1530,6 +1521,70 @@ footer {
background: rgba(255, 255, 255, 0.2);
transform: translateX(-50%) scale(1.1);
}
+ */
+
+.right-controls {
+ 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;
+}
+
+.feature-icon:hover {
+ background: rgba(255, 255, 255, 0.2);
+ transform: translateY(-2px);
+}
+
+.feature-icon img {
+ width: 16px;
+ height: 16px;
+ transition: all 0.2s ease;
+}
+
+.feature-icon:hover img {
+ 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;
+}
+
+.feature-icon.active {
+ background: #1db954;
+}
+
+.feature-icon.active img {
+ filter: brightness(0) invert(1);
+}
+
+.feature-icon.active:hover {
+ background: #1ed760;
+}
/* 閫€鍑烘悳绱㈠浘鏍� */
.exit-search {
--
GitLab