diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index d2dc7dc81d0ec65bb5e4530f341ea0b4da2d814a..0f6760f9e2ebc22d991d7dd01fabe95836b5af92 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -1,5 +1,5 @@
<script setup>
-import {nextTick, onMounted, reactive, ref, watch} from 'vue'
+import {computed, nextTick, onMounted, reactive, ref, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {parseTime, toggleImg} from '../utils'
import {commentSong, getSongComments, getSongCommentsCount, likeComment} from "../api/comment"
@@ -9,29 +9,30 @@ import defaultBg from '../assets/pictures/jj.png'
import likeIcon from '../assets/icons/comment/like.png'
import {useTheme} from "../store/theme";
import Pagination from "../components/Pagination.vue";
+import {getDominantColor} from "../utils/getBackgroundColor";
const theme = useTheme()
const state = reactive({
- comments: [],
- commenters: [],
- song: null,
- total: 0,
- pageSize: 20,
- currentPage: 1
+ comments: [],
+ commenters: [],
+ song: null,
+ total: 0,
+ pageSize: 20,
+ currentPage: 1
})
const router = useRouter()
const route = useRoute()
const {songId, userId} = defineProps({
- songId: {
- type: String,
- required: true
- },
- userId: {
- type: String,
- required: true
- }
- }
+ songId: {
+ type: String,
+ required: true
+ },
+ userId: {
+ type: String,
+ required: true
+ }
+ }
)
const page = ref(1)
const imgEl = ref()
@@ -42,83 +43,89 @@ const showDetail = ref(false)
const sortBy = ref('Time') // 榛樿鎸夋椂闂存帓搴�
+const backgroundColor = ref("#ffffff");
+const gradientColor = computed(() => `linear-gradient(to bottom, ${backgroundColor.value} , #1F1F1F 50%)`)
+
onMounted(() => {
- watch(bg, (val) => {
- toggleImg(val).then((img) => {
- if (imgEl.value) {
- imgEl.value.style.backgroundImage = `url(${img.src})`
- }
- })
- })
-
- // 鍒濆鍖栨墍鏈塻tate鏁版嵁
- state.comments = [
- // {
- // userId: 1,
- // comment: "杩欓姝岀湡鐨勫お妫掍簡锛佹灄淇婃澃鐨勫０闊冲お鏈夋劅鏌撳姏浜�",
- // createTime: "2024-03-15 14:30",
- // likedCount: 156,
- // isLiked: false
- // },
- // {
- // userId: 2,
- // comment: "姝岃瘝鍐欏緱澶繁鍒讳簡锛屾瘡娆″惉閮芥湁鏂扮殑鎰熸偀",
- // createTime: "2024-03-14 18:45",
- // likedCount: 89,
- // isLiked: false
- // },
- // {
- // userId: 3,
- // comment: "缂栨洸闈炲父绮惧锛屽眰娆℃劅寰堝己",
- // createTime: "2024-03-13 20:15",
- // likedCount: 67,
- // isLiked: false
- // }
- ]
-
- state.commenters = [
- // {
- // userId: 1,
- // username: "闊充箰鐖卞ソ鑰�",
- // avatarUrl: "https://example.com/avatar1.jpg"
- // },
- // {
- // userId: 2,
- // username: "JJ绮変笣",
- // avatarUrl: "https://example.com/avatar2.jpg"
- // },
- // {
- // userId: 3,
- // username: "涔愯瘎浜�",
- // avatarUrl: "https://example.com/avatar3.jpg"
- // }
- ]
-
- state.song = {
- // title: '杈惧皵鏂�',
- // artist: '鏋椾繆鏉�',
- // singer: [
- // {
- // name: '鏋椾繆鏉�'
- // }
- // ],
- // songDetail: {
- // lyricist: '鏋楀彲閭�',
- // composer: '钄″仴闆�',
- // arranger: '鏋椾繆鏉� JJ Lin',
- // language: '鍥借',
- // genre: 'Pop',
- // originalArtist: '杈惧皵鏂� - 钄″仴闆�',
- // recordCompany: '灏辨槸淇婃澃闊充箰鑲′唤鏈夐檺鍏徃',
- // description: '銆婅揪灏旀枃銆嬫槸鏋椾繆鏉扮殑涓€棣栫粡鍏镐箣浣滐紝浠ヨ繘鍖栬涔嬬埗Charles Darwin涓哄悕锛屽瘬鎰忕敓鍛界殑杩涘寲涓庢紨鍙樸€傝繖棣栨瓕涓嶄粎鏃嬪緥鎮犳壃锛屾洿鍦ㄦ瓕璇嶄腑钑村惈浜嗘繁鍒荤殑鍝茬悊锛屽紩浜烘繁鎬濄€傚綋鏋椾繆鏉扮殑姝屽０鍝嶈捣锛屼豢浣涘甫棰嗘垜浠┛瓒婃椂绌猴紝瑙佽瘉鐢熷懡浠庣畝鍗曞埌澶嶆潅鐨勮湑鍙樿繃绋嬨€傛瘡涓€涓煶绗﹂兘濡傚悓鑷劧鐨勫瘑鐮侊紝璇犻噴鐫€鐢熷懡鐨勫ゥ绉樸€傜敤蹇冭亞鍚紝浣犱細鍙戠幇锛岃繖棣栨瓕涓嶄粎浠呮槸涓€棣栨瓕锛屾洿鏄竴閮ㄥ叧浜庣敓鍛借繘鍖栫殑澹附鍙茶瘲銆�'
- // }
- }
-
- state.total = 0
- state.pageSize = 20
- state.currentPage = 1
+ watch(bg, (val) => {
+ toggleImg(val).then((img) => {
+ if (imgEl.value) {
+ imgEl.value.style.backgroundImage = `url(${img.src})`
+ }
+ })
+ getDominantColor(bg.value, (color) => {
+ backgroundColor.value = color;
+ });
+ })
+
+ // 鍒濆鍖栨墍鏈塻tate鏁版嵁
+ state.comments = [
+ // {
+ // userId: 1,
+ // comment: "杩欓姝岀湡鐨勫お妫掍簡锛佹灄淇婃澃鐨勫０闊冲お鏈夋劅鏌撳姏浜�",
+ // createTime: "2024-03-15 14:30",
+ // likedCount: 156,
+ // isLiked: false
+ // },
+ // {
+ // userId: 2,
+ // comment: "姝岃瘝鍐欏緱澶繁鍒讳簡锛屾瘡娆″惉閮芥湁鏂扮殑鎰熸偀",
+ // createTime: "2024-03-14 18:45",
+ // likedCount: 89,
+ // isLiked: false
+ // },
+ // {
+ // userId: 3,
+ // comment: "缂栨洸闈炲父绮惧锛屽眰娆℃劅寰堝己",
+ // createTime: "2024-03-13 20:15",
+ // likedCount: 67,
+ // isLiked: false
+ // }
+ ]
+
+ state.commenters = [
+ // {
+ // userId: 1,
+ // username: "闊充箰鐖卞ソ鑰�",
+ // avatarUrl: "https://example.com/avatar1.jpg"
+ // },
+ // {
+ // userId: 2,
+ // username: "JJ绮変笣",
+ // avatarUrl: "https://example.com/avatar2.jpg"
+ // },
+ // {
+ // userId: 3,
+ // username: "涔愯瘎浜�",
+ // avatarUrl: "https://example.com/avatar3.jpg"
+ // }
+ ]
+
+ state.song = {
+ // title: '杈惧皵鏂�',
+ // artist: '鏋椾繆鏉�',
+ // singer: [
+ // {
+ // name: '鏋椾繆鏉�'
+ // }
+ // ],
+ // songDetail: {
+ // lyricist: '鏋楀彲閭�',
+ // composer: '钄″仴闆�',
+ // arranger: '鏋椾繆鏉� JJ Lin',
+ // language: '鍥借',
+ // genre: 'Pop',
+ // originalArtist: '杈惧皵鏂� - 钄″仴闆�',
+ // recordCompany: '灏辨槸淇婃澃闊充箰鑲′唤鏈夐檺鍏徃',
+ // description: '銆婅揪灏旀枃銆嬫槸鏋椾繆鏉扮殑涓€棣栫粡鍏镐箣浣滐紝浠ヨ繘鍖栬涔嬬埗Charles Darwin涓哄悕锛屽瘬鎰忕敓鍛界殑杩涘寲涓庢紨鍙樸€傝繖棣栨瓕涓嶄粎鏃嬪緥鎮犳壃锛屾洿鍦ㄦ瓕璇嶄腑钑村惈浜嗘繁鍒荤殑鍝茬悊锛屽紩浜烘繁鎬濄€傚綋鏋椾繆鏉扮殑姝屽０鍝嶈捣锛屼豢浣涘甫棰嗘垜浠┛瓒婃椂绌猴紝瑙佽瘉鐢熷懡浠庣畝鍗曞埌澶嶆潅鐨勮湑鍙樿繃绋嬨€傛瘡涓€涓煶绗﹂兘濡傚悓鑷劧鐨勫瘑鐮侊紝璇犻噴鐫€鐢熷懡鐨勫ゥ绉樸€傜敤蹇冭亞鍚紝浣犱細鍙戠幇锛岃繖棣栨瓕涓嶄粎浠呮槸涓€棣栨瓕锛屾洿鏄竴閮ㄥ叧浜庣敓鍛借繘鍖栫殑澹附鍙茶瘲銆�'
+ // }
+ }
+
+ state.total = 0
+ state.pageSize = 20
+ state.currentPage = 1
getCommentCount(parseInt(songId))
- getCommentMusicFn(parseInt(songId), page.value)
+ getCommentMusicFn(parseInt(songId), page.value)
})
const getCommentCount = (id) => {
@@ -130,120 +137,120 @@ const getCommentCount = (id) => {
}
const getCommentMusicFn = async (id, page) => {
- getSongComments({
- song_id: id,
- page: page,
+ getSongComments({
+ song_id: id,
+ page: page,
pageSize: state.pageSize,
sort: sortBy.value
- }).then(res => {
- state.comments = res.data.result.map(comment => ({
- ...comment,
- isLiked: comment.likedUserIds ? comment.likedUserIds.includes(parseInt(userId)) : false
- }));
-
- console.log("Processed comments:", state.comments);
-
- for (let i = 0; i < state.comments.length; i++) {
- getUserById({
- user_id: state.comments[i].userId
- }).then(res => {
- console.log("COMMENTER FOUND")
- state.commenters.push(res.data.result)
- })
- }
- getSongById({
- song_id: songId,
- }).then(res => {
- state.song = res.data.result
- bg.value = res.data.result.picPath
- theme.change(bg.value)
- })
- })
+ }).then(res => {
+ state.comments = res.data.result.map(comment => ({
+ ...comment,
+ isLiked: comment.likedUserIds ? comment.likedUserIds.includes(parseInt(userId)) : false
+ }));
+
+ console.log("Processed comments:", state.comments);
+
+ for (let i = 0; i < state.comments.length; i++) {
+ getUserById({
+ user_id: state.comments[i].userId
+ }).then(res => {
+ console.log("COMMENTER FOUND")
+ state.commenters.push(res.data.result)
+ })
+ }
+ getSongById({
+ song_id: songId,
+ }).then(res => {
+ state.song = res.data.result
+ bg.value = res.data.result.picPath
+ theme.change(bg.value)
+ })
+ })
}
const currentChange = (page) => {
- state.currentPage = page
- getCommentMusicFn(parseInt(songId), page)
+ state.currentPage = page
+ getCommentMusicFn(parseInt(songId), page)
}
const gotoUserDetail = (userId) => {
- router.push({
- path: '/userDetail',
- query: {
- userId
- }
- })
+ router.push({
+ path: '/userDetail',
+ query: {
+ userId
+ }
+ })
}
const resetComments = () => {
- comment.value = "";
- ElMessage.info("宸叉竻绌烘偍鐨勮瘎璁猴紒");
+ comment.value = "";
+ ElMessage.info("宸叉竻绌烘偍鐨勮瘎璁猴紒");
}
const handleSubmit = () => {
- if (!comment.value.replace(/(^\s*$) | (\s*$)/g, '')) {
- ElMessage.warning("璇勮鍐呭涓嶈兘涓虹┖锛�");
- return;
- }
-
- commentSong({
- userId: parseInt(userId),
- songId: parseInt(songId),
- comment: comment.value,
- }).then(() => {
- ElMessage.success("璇勮鎴愬姛锛�");
-
- comment.value = "";
- getCommentCount(parseInt(songId));
- state.currentPage = 1;
+ if (!comment.value.replace(/(^\s*$) | (\s*$)/g, '')) {
+ ElMessage.warning("璇勮鍐呭涓嶈兘涓虹┖锛�");
+ return;
+ }
+
+ commentSong({
+ userId: parseInt(userId),
+ songId: parseInt(songId),
+ comment: comment.value,
+ }).then(() => {
+ ElMessage.success("璇勮鎴愬姛锛�");
+
+ comment.value = "";
+ getCommentCount(parseInt(songId));
+ state.currentPage = 1;
sortBy.value = 'Time'
- getCommentMusicFn(parseInt(songId), 1);
- }).catch(error => {
- ElMessage.error("鍙戝竷璇勮澶辫触锛岃绋嶅悗閲嶈瘯");
- console.error("Submit comment failed:", error);
- });
+ getCommentMusicFn(parseInt(songId), 1);
+ }).catch(error => {
+ ElMessage.error("鍙戝竷璇勮澶辫触锛岃绋嶅悗閲嶈瘯");
+ console.error("Submit comment failed:", error);
+ });
}
const showComments = () => {
- showComment.value = true
- showDetail.value = false
- const navLeft = document.querySelector('.nav-left')
- const navRight = document.querySelector('.nav-right')
- navLeft.classList.add('active')
- navRight.classList.remove('active')
+ showComment.value = true
+ showDetail.value = false
+ const navLeft = document.querySelector('.nav-left')
+ const navRight = document.querySelector('.nav-right')
+ navLeft.classList.add('active')
+ navRight.classList.remove('active')
}
const showDetails = () => {
- showComment.value = false
- showDetail.value = true
- const navLeft = document.querySelector('.nav-left')
- const navRight = document.querySelector('.nav-right')
- navLeft.classList.remove('active')
- navRight.classList.add('active')
+ showComment.value = false
+ showDetail.value = true
+ const navLeft = document.querySelector('.nav-left')
+ const navRight = document.querySelector('.nav-right')
+ navLeft.classList.remove('active')
+ navRight.classList.add('active')
}
function adjustHeight(event) {
- nextTick(() => {
- event.target.style.height = 'auto'
- event.target.style.height = event.target.scrollHeight + 26 + 'px'
- })
+ nextTick(() => {
+ event.target.style.height = 'auto'
+ event.target.style.height = event.target.scrollHeight + 26 + 'px'
+ })
}
const handleLike = (index) => {
- const comment = state.comments[index];
- const newIsLiked = !comment.isLiked;
-
- likeComment({
- userId: parseInt(userId),
- commentId: comment.id,
- isLike: newIsLiked
- }).then(() => {
- state.comments[index].isLiked = newIsLiked;
- state.comments[index].likeCount = newIsLiked
- ? comment.likeCount + 1
- : comment.likeCount - 1;
- }).catch(error => {
- ElMessage.error("鐐硅禐澶辫触锛岃绋嶅悗閲嶈瘯");
- console.error("Like failed:", error);
- });
+ const comment = state.comments[index];
+ const newIsLiked = !comment.isLiked;
+
+ likeComment({
+ userId: parseInt(userId),
+ commentId: comment.id,
+ isLike: newIsLiked
+ }).then(() => {
+ state.comments[index].isLiked = newIsLiked;
+ state.comments[index].likeCount = newIsLiked
+ ? comment.likeCount + 1
+ : comment.likeCount - 1;
+ }).catch(error => {
+ ElMessage.error("鐐硅禐澶辫触锛岃绋嶅悗閲嶈瘯");
+ console.error("Like failed:", error);
+ });
}
const changeSortBy = (type) => {
@@ -253,264 +260,270 @@ const changeSortBy = (type) => {
</script>
<template>
- <div class="comment">
- <div v-if="state.song !== null" class="comment-box">
- <div class="info">
- <div ref="imgEl" class="bg-img"></div>
- <div class="song-info">
- <div class="song-name">{{ state.song.title }}</div>
- <div class="singers">
- <div class="singer-info">
- <span>姝屾墜:{{ state.song.artist }}</span>
- <!--<span v-for="(item, index) in state.song.singer">-->
- <!--姝屾墜:{{item.name + (index < state.song.singer.length - 1 ? '/' : '') }}-->
- <!--</span>-->
- </div>
- </div>
- </div>
- </div>
- <div class="navigation">
- <div class="nav-left active" @click="showComments">璇勮{{ state.total }}</div>
- <div class="nav-right" @click="showDetails">璇︽儏</div>
- </div>
- <div v-if="showComment" class="user-comment">
- <textarea placeholder="璇疯緭鍏ユ偍鐨勮瘎璁�..." v-model="comment" @input="adjustHeight"></textarea>
- <span
- class="custom-button"
- style="color: white; font-size: 20px; position: absolute; bottom: 8px; right: 2%"
- @click.stop="handleSubmit"
- >鍙戝竷</span>
- </div>
- <div v-if="showComment" class="comment-content">
- <div class="comment-content-box">
- <div class="title-container">
- <div class="title">绮惧僵璇勮</div>
- <div class="sort-options">
- <span
- :class="{ active: sortBy === 'Time' }"
- @click="changeSortBy('Time')"
- >鏈€鏂�</span>
- <div class="divider"></div>
- <span
- :class="{ active: sortBy === 'Hot' }"
- @click="changeSortBy('Hot')"
- >鏈€鐑�</span>
- </div>
- </div>
- <div class="content" @wheel.stop>
- <div v-for="i in state.comments.length" class="content-line">
-<!-- :style="{ backgroundImage: `url(${state.commenters[i - 1].avatarUrl})` }"-->
- <div
- @click="gotoUserDetail(state.commenters[i - 1].userId)"
- :style="{ backgroundImage: '../assets/pictures/avatar.png' }"
- class="photo"
- ></div>
- <div v-if="state.commenters[i - 1] !== undefined" class="right-box">
- <div class="comment-text">
- <div @click="gotoUserDetail(state.comments[i - 1].id)" class="name">
- {{ state.commenters[i - 1].username }}:
- </div>
- <div class="text">{{ state.comments[i - 1].comment }}</div>
- </div>
- <div class="handle-box">
- <div class="time">{{ parseTime(state.comments[i - 1].createdAt) }}</div>
- <div class="operation">
- <img
- :src="likeIcon"
- class="like-icon"
- :class="{ 'liked': state.comments[i-1].isLiked }"
- alt="like"
- @click="handleLike(i-1)"
- />
- <span
- :class="{ 'liked-count': state.comments[i-1].isLiked }"
- style="font-size: 12px;color: white"
- >{{ state.comments[i - 1].likeCount }}
+ <div class="comment-wrapper" :style="{backgroundImage: gradientColor}">
+ <div class="comment">
+ <div v-if="state.song !== null" class="comment-box">
+ <div class="info">
+ <div ref="imgEl" class="bg-img"></div>
+ <div class="song-info">
+ <div class="song-name">{{ state.song.title }}</div>
+ <div class="singers">
+ <div class="singer-info">
+ <span>姝屾墜:{{ state.song.artist }}</span>
+ <!--<span v-for="(item, index) in state.song.singer">-->
+ <!--姝屾墜:{{item.name + (index < state.song.singer.length - 1 ? '/' : '') }}-->
+ <!--</span>-->
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="navigation">
+ <div class="nav-left active" @click="showComments">璇勮{{ state.total }}</div>
+ <div class="nav-right" @click="showDetails">璇︽儏</div>
+ </div>
+ <div v-if="showComment" class="user-comment">
+ <textarea placeholder="璇疯緭鍏ユ偍鐨勮瘎璁�..." v-model="comment" @input="adjustHeight"></textarea>
+ <span
+ class="custom-button"
+ style="color: white; font-size: 20px; position: absolute; bottom: 8px; right: 2%"
+ @click.stop="handleSubmit"
+ >鍙戝竷</span>
+ </div>
+ <div v-if="showComment" class="comment-content">
+ <div class="comment-content-box">
+ <div class="title-container">
+ <div class="title">绮惧僵璇勮</div>
+ <div class="sort-options">
+ <span
+ :class="{ active: sortBy === 'Time' }"
+ @click="changeSortBy('Time')"
+ >鏈€鏂�</span>
+ <div class="divider"></div>
+ <span
+ :class="{ active: sortBy === 'Hot' }"
+ @click="changeSortBy('Hot')"
+ >鏈€鐑�</span>
+ </div>
+ </div>
+ <div class="content" @wheel.stop>
+ <div v-for="i in state.comments.length" class="content-line">
+ <!-- :style="{ backgroundImage: `url(${state.commenters[i - 1].avatarUrl})` }"-->
+ <div
+ @click="gotoUserDetail(state.commenters[i - 1].userId)"
+ :style="{ backgroundImage: '../assets/pictures/avatar.png' }"
+ class="photo"
+ ></div>
+ <div v-if="state.commenters[i - 1] !== undefined" class="right-box">
+ <div class="comment-text">
+ <div @click="gotoUserDetail(state.comments[i - 1].id)" class="name">
+ {{ state.commenters[i - 1].username }}:
+ </div>
+ <div class="text">{{ state.comments[i - 1].comment }}</div>
+ </div>
+ <div class="handle-box">
+ <div class="time">{{ parseTime(state.comments[i - 1].createdAt) }}</div>
+ <div class="operation">
+ <img
+ :src="likeIcon"
+ class="like-icon"
+ :class="{ 'liked': state.comments[i-1].isLiked }"
+ alt="like"
+ @click="handleLike(i-1)"
+ />
+ <span
+ :class="{ 'liked-count': state.comments[i-1].isLiked }"
+ style="font-size: 12px;color: white"
+ >{{ state.comments[i - 1].likeCount }}
</span>
- <div class="operator-line"></div>
- </div>
- </div>
- </div>
- <div class="line"></div>
- </div>
- </div>
- <pagination
- class="pagination"
- @current-change="currentChange"
- :total="state.total"
- :pageSize="state.pageSize"
- :currentPage="state.currentPage"
- :background="true"
- layout="prev, pager, next"
- />
- </div>
- </div>
- <div v-if="showDetail" class="song-info-container">
- <div class="song-info-row">
- <div class="song-info-label">姝屾洸:</div>
- <div class="song-info-value">{{ state.song.title }}</div>
- </div>
- <div class="song-info-row">
- <div class="song-info-label">鑹轰汉:</div>
- <div class="song-info-value">{{ state.song.artist }}</div>
- </div>
- <div class="song-info-row">
- <div class="song-info-label">涓撹緫:</div>
- <div class="song-info-value">{{ state.song.album }}</div>
- </div>
- <div class="song-info-row">
- <div class="song-info-label">浣滆瘝:</div>
- <div class="song-info-value">鏈彁渚�</div>
- </div>
- <div class="song-info-row">
- <div class="song-info-label">浣滄洸:</div>
- <div class="song-info-value">鏈彁渚�</div>
- </div>
- <div class="song-info-row">
- <div class="song-info-label">姝屾洸璇:</div>
- <div class="song-info-value">鏈彁渚�</div>
- </div>
- <div class="song-info-row">
- <div class="song-info-label">姝屾洸娴佹淳:</div>
- <div class="song-info-value">鏈彁渚�</div>
- </div>
- <div class="song-info-row">
- <div class="song-info-label">鍘熷敱:</div>
- <div class="song-info-value">鏈彁渚�</div>
- </div>
- <div class="song-info-row">
- <div class="song-info-label">鍞辩墖鍏徃:</div>
- <div class="song-info-value">鏈彁渚�</div>
- </div>
- <div class="song-info-row">
- <div class="song-info-label">璇︾粏浠嬬粛:</div>
- <div class="song-info-value">{{ state.song.description }}</div>
- </div>
- </div>
- </div>
- </div>
+ <div class="operator-line"></div>
+ </div>
+ </div>
+ </div>
+ <div class="line"></div>
+ </div>
+ </div>
+ <pagination
+ class="pagination"
+ @current-change="currentChange"
+ :total="state.total"
+ :pageSize="state.pageSize"
+ :currentPage="state.currentPage"
+ :background="true"
+ layout="prev, pager, next"
+ />
+ </div>
+ </div>
+ <div v-if="showDetail" class="song-info-container">
+ <div class="song-info-row">
+ <div class="song-info-label">姝屾洸:</div>
+ <div class="song-info-value">{{ state.song.title }}</div>
+ </div>
+ <div class="song-info-row">
+ <div class="song-info-label">鑹轰汉:</div>
+ <div class="song-info-value">{{ state.song.artist }}</div>
+ </div>
+ <div class="song-info-row">
+ <div class="song-info-label">涓撹緫:</div>
+ <div class="song-info-value">{{ state.song.album }}</div>
+ </div>
+ <div class="song-info-row">
+ <div class="song-info-label">浣滆瘝:</div>
+ <div class="song-info-value">鏈彁渚�</div>
+ </div>
+ <div class="song-info-row">
+ <div class="song-info-label">浣滄洸:</div>
+ <div class="song-info-value">鏈彁渚�</div>
+ </div>
+ <div class="song-info-row">
+ <div class="song-info-label">姝屾洸璇:</div>
+ <div class="song-info-value">鏈彁渚�</div>
+ </div>
+ <div class="song-info-row">
+ <div class="song-info-label">姝屾洸娴佹淳:</div>
+ <div class="song-info-value">鏈彁渚�</div>
+ </div>
+ <div class="song-info-row">
+ <div class="song-info-label">鍘熷敱:</div>
+ <div class="song-info-value">鏈彁渚�</div>
+ </div>
+ <div class="song-info-row">
+ <div class="song-info-label">鍞辩墖鍏徃:</div>
+ <div class="song-info-value">鏈彁渚�</div>
+ </div>
+ <div class="song-info-row">
+ <div class="song-info-label">璇︾粏浠嬬粛:</div>
+ <div class="song-info-value">{{ state.song.description }}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<style scoped lang="less">
:deep(.el-tab-pane),
:deep(.el-tabs__content),
:deep(.el-tabs) {
- height: 100%;
+ height: 100%;
+}
+.comment-wrapper {
+ background-attachment: fixed; /* 鍥哄畾鑳屾櫙 */
+ padding: 10px;
}
-
.comment {
- height: 100%;
- width: 95%;
- margin: 40px 0 0 0;
- //position: fixed;
- //transform: translateY(100%);
- //background-color: @bgColor;
- .comment-box {
- padding: 0 0 0 35px;
- display: flex;
- flex-wrap: wrap;
- flex-direction: column;
- flex-flow: column;
- height: 50%;
-
- .info {
- display: flex;
- margin-bottom: 30px;
-
- .song-info {
- display: flex;
- flex-direction: column;
- font-size: 13px;
-
- .song-name {
- font-size: 30px;
- margin-bottom: 20px;
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ transition: background-color ease 0.6s;
+ //position: fixed;
+ //transform: translateY(100%);
+ //background-color: @bgColor;
+ .comment-box {
+ padding: 30px;
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ flex-flow: column;
+ height: 50%;
+
+ .info {
+ display: flex;
+ margin-bottom: 30px;
+
+ .song-info {
+ display: flex;
+ flex-direction: column;
+ font-size: 13px;
+
+ .song-name {
+ font-size: 30px;
+ margin-bottom: 20px;
color: white;
- //margin-top: 10px;
- }
-
- .singers {
- display: flex;
- align-items: center;
-
- .singer-info {
- display: flex;
- align-items: center;
- margin-right: 20px;
+ //margin-top: 10px;
+ }
+
+ .singers {
+ display: flex;
+ align-items: center;
+
+ .singer-info {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
color: white;
- }
- }
- }
-
- .bg-img {
- transition: 1s background;
- width: 130px;
- height: 130px;
- border-radius: 10px;
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- margin-right: 20px;
- }
- }
-
- .navigation {
- display: flex;
- justify-content: flex-start;
- padding: 10px 0;
- //background-color: rgba(0, 0, 0, 0.1);
- .nav-left {
- cursor: pointer;
- padding: 10px 10px;
- font-size: 16px;
- color: #fff;
- margin-right: 30px;
- }
-
- .nav-left:hover {
- color: #ddc323;
- cursor: pointer;
- }
-
- .nav-left.active {
- color: #ddc323;
- font-weight: bold;
- transition: color 0.2s ease;
- }
-
- .nav-right {
- cursor: pointer;
- padding: 10px 10px;
- font-size: 16px;
- color: #fff;
- margin-left: 30px;
- }
-
- .nav-right:hover {
- color: #ddc323;
- cursor: pointer;
- }
-
- .nav-right.active {
- color: #ddc323;
- font-weight: bold;
- transition: color 0.2s ease;
- }
- }
-
- .user-comment {
- margin-bottom: 20px;
- position: relative;
-
- textarea {
- width: 100%;
- height: 80px;
- padding: 10px;
- font-size: 15px;
- border: 1px solid rgba(255, 255, 255, 0.1);
- background-color: rgba(0, 0, 0, 0.3);
- color: #fff;
- resize: none;
+ }
+ }
+ }
+
+ .bg-img {
+ transition: 1s background;
+ width: 130px;
+ height: 130px;
+ border-radius: 10px;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ margin-right: 20px;
+ }
+ }
+
+ .navigation {
+ display: flex;
+ justify-content: flex-start;
+ padding: 10px 0;
+ //background-color: rgba(0, 0, 0, 0.1);
+ .nav-left {
+ cursor: pointer;
+ padding: 10px 10px;
+ font-size: 16px;
+ color: #fff;
+ margin-right: 30px;
+ }
+
+ .nav-left:hover {
+ color: #ddc323;
+ cursor: pointer;
+ }
+
+ .nav-left.active {
+ color: #ddc323;
+ font-weight: bold;
+ transition: color 0.2s ease;
+ }
+
+ .nav-right {
+ cursor: pointer;
+ padding: 10px 10px;
+ font-size: 16px;
+ color: #fff;
+ margin-left: 30px;
+ }
+
+ .nav-right:hover {
+ color: #ddc323;
+ cursor: pointer;
+ }
+
+ .nav-right.active {
+ color: #ddc323;
+ font-weight: bold;
+ transition: color 0.2s ease;
+ }
+ }
+
+ .user-comment {
+ margin-bottom: 20px;
+ position: relative;
+
+ textarea {
+ width: 100%;
+ height: 80px;
+ padding: 10px;
+ font-size: 15px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ background-color: rgba(0, 0, 0, 0.3);
+ color: #fff;
+ resize: none;
outline: none;
&:focus {
@@ -521,239 +534,239 @@ const changeSortBy = (type) => {
&::placeholder {
color: rgba(255, 255, 255, 0.5);
}
- }
-
- .custom-button:focus,
- .custom-button.active,
- .custom-button:hover {
- cursor: pointer; /* 榛樿鏄剧ず鎵嬪瀷鍏夋爣 */
- background-color: inherit !important; /* 淇濇寔鑳屾櫙鑹� */
- border-color: inherit !important; /* 淇濇寔杈规鑹� */
- color: #ddc323 !important;
- box-shadow: none !important;
- transition: color 0.2s ease;
- }
- }
-
- .comment-content {
- :deep(.el-tabs__item) {
- margin-right: 30px;
- }
-
- .comment-content-box {
- height: 100%;
- margin-bottom: 150px;
-
- .title {
+ }
+
+ .custom-button:focus,
+ .custom-button.active,
+ .custom-button:hover {
+ cursor: pointer; /* 榛樿鏄剧ず鎵嬪瀷鍏夋爣 */
+ background-color: inherit !important; /* 淇濇寔鑳屾櫙鑹� */
+ border-color: inherit !important; /* 淇濇寔杈规鑹� */
+ color: #ddc323 !important;
+ box-shadow: none !important;
+ transition: color 0.2s ease;
+ }
+ }
+
+ .comment-content {
+ :deep(.el-tabs__item) {
+ margin-right: 30px;
+ }
+
+ .comment-content-box {
+ height: 100%;
+ margin-bottom: 150px;
+
+ .title {
color: white;
- display: flex;
- font-size: 18px;
- margin-bottom: 5px;
- }
-
- .content {
- padding-right: 35px;
-
- .content-line {
- display: flex;
- align-items: center;
- position: relative;
- padding-bottom: 25px;
- width: 100%;
- padding-top: 25px;
-
- .line {
- position: absolute;
- bottom: 0;
- left: 0;
- height: 1px;
- width: 100%;
- background-color: rgba(255, 255, 255, 0.08);
- }
-
- .photo {
- cursor: pointer;
- width: 40px;
- height: 40px;
- min-width: 40px;
- min-height: 40px;
- border-radius: 50%;
- background-color: #42b983;
- margin-right: 20px;
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- }
-
- .right-box {
- display: flex;
- flex-direction: column;
- align-content: space-around;
- width: 100%;
-
- .comment-text {
- display: flex;
- font-size: 13px;
- margin-bottom: 6px;
-
- .name {
- color: #0086b3;
- cursor: pointer;
- margin-right: 5px;
- }
-
- .text {
+ display: flex;
+ font-size: 18px;
+ margin-bottom: 5px;
+ }
+
+ .content {
+ padding-right: 35px;
+
+ .content-line {
+ display: flex;
+ align-items: center;
+ position: relative;
+ padding-bottom: 25px;
+ width: 100%;
+ padding-top: 25px;
+
+ .line {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 1px;
+ width: 100%;
+ background-color: rgba(255, 255, 255, 0.08);
+ }
+
+ .photo {
+ cursor: pointer;
+ width: 40px;
+ height: 40px;
+ min-width: 40px;
+ min-height: 40px;
+ border-radius: 50%;
+ background-color: #42b983;
+ margin-right: 20px;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ }
+
+ .right-box {
+ display: flex;
+ flex-direction: column;
+ align-content: space-around;
+ width: 100%;
+
+ .comment-text {
+ display: flex;
+ font-size: 13px;
+ margin-bottom: 6px;
+
+ .name {
+ color: #0086b3;
+ cursor: pointer;
+ margin-right: 5px;
+ }
+
+ .text {
color: white;
- }
- }
-
- .handle-box {
- display: flex;
- justify-content: space-between;
-
- .time {
+ }
+ }
+
+ .handle-box {
+ display: flex;
+ justify-content: space-between;
+
+ .time {
color: white;
- font-size: 13px;
- }
-
- .operation {
- position: relative;
- top: 4px;
- display: flex;
- align-items: center;
- gap: 4px;
-
- .like-icon {
- width: 16px;
- height: 16px;
- cursor: pointer;
- transition: all 0.3s ease;
-
- &.liked {
- filter: drop-shadow(0 0 2px #ddc323) drop-shadow(0 0 2px #ddc323);
- }
- }
-
- .liked-count {
- color: #ddc323 !important;
- text-shadow: 0 0 2px #ddc323;
- margin-left: 4px;
- }
-
- .operator-line {
- width: 1.5px;
- height: 15px;
- background-color: rgba(255, 255, 255, 0.05);
- margin: 0 10px;
- }
-
- .el-icon {
- cursor: pointer;
- }
- }
- }
- }
- }
- }
-
- .pagination {
- display: flex;
- justify-content: center;
- align-items: center;
- margin-top: 20px;
- }
-
- :deep(.el-pagination) {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- white-space: nowrap;
- }
-
- :deep(.el-pagination .el-pager) {
- display: flex;
- flex-direction: row;
- }
-
- :deep(.el-pagination .el-pager li) {
- margin: 0 4px;
- }
- }
- }
-
- .song-info-container {
- :deep(.el-tabs__item) {
- margin-right: 30px;
- }
-
- margin-bottom: 150px;
- width: 100%;
- padding: 20px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-
-
- .song-info-row {
+ font-size: 13px;
+ }
+
+ .operation {
+ position: relative;
+ top: 4px;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+
+ .like-icon {
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ &.liked {
+ filter: drop-shadow(0 0 2px #ddc323) drop-shadow(0 0 2px #ddc323);
+ }
+ }
+
+ .liked-count {
+ color: #ddc323 !important;
+ text-shadow: 0 0 2px #ddc323;
+ margin-left: 4px;
+ }
+
+ .operator-line {
+ width: 1.5px;
+ height: 15px;
+ background-color: rgba(255, 255, 255, 0.05);
+ margin: 0 10px;
+ }
+
+ .el-icon {
+ cursor: pointer;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .pagination {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 20px;
+ }
+
+ :deep(.el-pagination) {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ white-space: nowrap;
+ }
+
+ :deep(.el-pagination .el-pager) {
+ display: flex;
+ flex-direction: row;
+ }
+
+ :deep(.el-pagination .el-pager li) {
+ margin: 0 4px;
+ }
+ }
+ }
+
+ .song-info-container {
+ :deep(.el-tabs__item) {
+ margin-right: 30px;
+ }
+
+ margin-bottom: 150px;
+ width: 100%;
+ padding: 20px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+
+ .song-info-row {
color: white;
- display: flex;
- justify-content: flex-start;
- margin-bottom: 20px;
-
-
- .song-info-label {
- font-weight: bold;
- width: 80px; /* 鍥哄畾鏍囩瀹藉害 */
- flex-shrink: 0; /* 闃叉鏍囩琚帇缂� */
- text-align: left;
- margin-right: 100px;
- }
-
- .song-info-value {
- flex: 1; /* 璁╁唴瀹瑰尯鍩熷崰鎹墿浣欑┖闂� */
- text-align: left;
- word-wrap: break-word; /* 鍏佽闀挎枃鏈崲琛� */
- word-break: break-all; /* 鍦ㄤ换鎰忓瓧绗﹂棿鎹㈣ */
- padding-right: 20px; /* 鍙充晶鐣欏嚭涓€浜涚┖闂达紝闃叉鏂囧瓧璐磋竟 */
- max-width: calc(100% - 120px); /* 纭繚涓嶄細瓒呭嚭瀹瑰櫒瀹藉害 */
- }
- }
- }
- }
+ display: flex;
+ justify-content: flex-start;
+ margin-bottom: 20px;
+
+
+ .song-info-label {
+ font-weight: bold;
+ width: 80px; /* 鍥哄畾鏍囩瀹藉害 */
+ flex-shrink: 0; /* 闃叉鏍囩琚帇缂� */
+ text-align: left;
+ margin-right: 100px;
+ }
+
+ .song-info-value {
+ flex: 1; /* 璁╁唴瀹瑰尯鍩熷崰鎹墿浣欑┖闂� */
+ text-align: left;
+ word-wrap: break-word; /* 鍏佽闀挎枃鏈崲琛� */
+ word-break: break-all; /* 鍦ㄤ换鎰忓瓧绗﹂棿鎹㈣ */
+ padding-right: 20px; /* 鍙充晶鐣欏嚭涓€浜涚┖闂达紝闃叉鏂囧瓧璐磋竟 */
+ max-width: calc(100% - 120px); /* 纭繚涓嶄細瓒呭嚭瀹瑰櫒瀹藉害 */
+ }
+ }
+ }
+ }
}
.title-container {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 5px;
-
- .sort-options {
- display: flex;
- align-items: center;
- gap: 10px;
- margin-right: 35px;
-
- span {
- color: #999;
- font-size: 14px;
- cursor: pointer;
- transition: color 0.2s ease;
-
- &:hover {
- color: #ddc323;
- }
-
- &.active {
- color: #ddc323;
- font-weight: bold;
- }
- }
-
- .divider {
- width: 1px;
- height: 12px;
- background-color: rgba(255, 255, 255, 0.2);
- }
- }
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 5px;
+
+ .sort-options {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-right: 35px;
+
+ span {
+ color: #999;
+ font-size: 14px;
+ cursor: pointer;
+ transition: color 0.2s ease;
+
+ &:hover {
+ color: #ddc323;
+ }
+
+ &.active {
+ color: #ddc323;
+ font-weight: bold;
+ }
+ }
+
+ .divider {
+ width: 1px;
+ height: 12px;
+ background-color: rgba(255, 255, 255, 0.2);
+ }
+ }
}
</style>
\ No newline at end of file
diff --git a/src/utils/getBackgroundColor.js b/src/utils/getBackgroundColor.js
index 326498ac15ce26242db9589981fe34abc47a0ab9..81eb657f6dee965d95790dc9a73424fa65d4e729 100644
--- a/src/utils/getBackgroundColor.js
+++ b/src/utils/getBackgroundColor.js
@@ -39,7 +39,7 @@ function updateBackground (event) {
}
-export {updateBackground, backgroundColor}
+export {getDominantColor, updateBackground, backgroundColor}
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index e4c5caf91fc2853e1cfa35f42eb421008ccab81d..a92c775848323091de205fab10d13c3facdcdf0d 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -481,16 +481,16 @@ onMounted(() => {
<left-side-bar class="left-side-bar" @setCurrentPlaylist="receivePlaylistId"/>
<div class="content" :class="{ 'full-width': !showRightContent }">
<div class="main-view" :class="{ 'expanded': !showRightContent }">
- <el-container v-if="midComponents == 1" class="playlist-container" style="overflow: auto; height: 698px ;border-radius: 12px">
+ <el-container v-if="midComponents == 1" class="playlist-container" style="overflow: auto; height: 730px ;border-radius: 12px">
<MusicAlbumView :album-info="currentPlaylist" :music-list="songs"/>
</el-container>
- <el-container v-if="midComponents == 2" class="playlist-container" style="overflow: auto; height: 668px">
+ <el-container v-if="midComponents == 2" class="playlist-container" style="overflow: auto; height: 730px ;border-radius: 12px" >
<el-button class="exit-search"
:class="{ 'adjusted-position': showRightContent }"
@click="setMidComponents(1)"></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: 698px">
+ <el-container v-if="midComponents == 3" class="playlist-container" style="overflow: auto; height: 730px ;border-radius: 12px">
<el-button class="exit-search"
:class="{ 'adjusted-position': showRightContent }"
@click="setMidComponents(1)"></el-button>
@@ -521,7 +521,7 @@ onMounted(() => {
</div>
</div>
</el-container>
- <el-container class="playlist-container" style="overflow: auto; height: 320px">
+ <el-container class="playlist-container" style="overflow: auto; height: 384px">
<div v-for="(song, index) in songs" class="playlist-item" style="display: flex; flex-direction: row">
<div @click="switchToSong(index)" style="cursor: pointer">
<img :src="song.picPath" alt=""
@@ -1071,7 +1071,7 @@ footer {
display: flex;
flex-direction: column;
border-radius: 12px;
- padding: 30px 20px;
+ padding: 10px 20px 30px;
color: #e5e5e5;
}
@@ -1774,4 +1774,9 @@ html, body {
border-color: rgba(255, 255, 255, 0.8);
}
+.comment-container {
+ position: relative;
+ background: transparent;
+}
+
</style>