From aa948b0149b5d8f9d3e4577524ae1a89a48fb85c Mon Sep 17 00:00:00 2001 From: lyswhut Date: Fri, 23 Oct 2020 22:40:23 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AF=84=E8=AE=BA=E7=95=8C?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderer/assets/images/defaultUser.jpg | Bin 0 -> 4394 bytes src/renderer/assets/styles/variables.less | 15 ++ src/renderer/components/core/PlayerDetail.vue | 248 +++++++++++++++--- .../components/material/CommentFloor.vue | 130 +++++++++ 4 files changed, 355 insertions(+), 38 deletions(-) create mode 100644 src/renderer/assets/images/defaultUser.jpg create mode 100644 src/renderer/components/material/CommentFloor.vue diff --git a/src/renderer/assets/images/defaultUser.jpg b/src/renderer/assets/images/defaultUser.jpg new file mode 100644 index 0000000000000000000000000000000000000000..51d5929d296467f607d4622404bfc8be76e236ea GIT binary patch literal 4394 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 Kt{BMZ)BgayX^m6> literal 0 HcmV?d00001 diff --git a/src/renderer/assets/styles/variables.less b/src/renderer/assets/styles/variables.less index 225eaab4..ba2a8e4f 100644 --- a/src/renderer/assets/styles/variables.less +++ b/src/renderer/assets/styles/variables.less @@ -23,6 +23,7 @@ @color-theme_2-font-label: fadeout(@color-theme_2-font, 50%); // @color-theme_2-line: transparent; @color-theme_2-line: lighten(@color-theme, 35%); +@color-reply-floor: fadeout(@color-theme, 95%); @color-theme-sidebar: @color-theme; @color-btn: lighten(@color-theme, 5%); @color-btn-background: fadeout(lighten(@color-theme, 35%), 70%); @@ -91,6 +92,7 @@ @color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 50%); // @color-green-theme_2-line: transparent; @color-green-theme_2-line: lighten(@color-green-theme, 45%); +@color-green-reply-floor: lighten(@color-green-theme, 45%); @color-green-theme-sidebar: @color-green-theme; @color-green-btn: lighten(@color-green-theme, 5%); @color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%); @@ -148,6 +150,7 @@ @color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 50%); // @color-yellow-theme_2-line: transparent; @color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%); +@color-yellow-reply-floor: lighten(@color-yellow-theme, 28%); @color-yellow-theme-sidebar: @color-yellow-theme; @color-yellow-btn: darken(@color-yellow-theme, 5%); @color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 60%); @@ -204,6 +207,7 @@ @color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 50%); // @color-orange-theme_2-line: transparent; @color-orange-theme_2-line: lighten(@color-orange-theme, 36%); +@color-orange-reply-floor: lighten(@color-orange-theme, 36%); @color-orange-theme-sidebar: @color-orange-theme; @color-orange-btn: lighten(@color-orange-theme, 5%); @color-orange-btn-background: fadeout(lighten(@color-orange-theme, 25%), 60%); @@ -260,6 +264,7 @@ @color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 50%); // @color-blue-theme_2-line: transparent; @color-blue-theme_2-line: lighten(@color-blue-theme, 42%); +@color-blue-reply-floor: lighten(@color-blue-theme, 42%); @color-blue-theme-sidebar: @color-blue-theme; @color-blue-btn: lighten(@color-blue-theme, 5%); @color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 50%); @@ -316,6 +321,7 @@ @color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 50%); // @color-red-theme_2-line: transparent; @color-red-theme_2-line: lighten(@color-red-theme, 42%); +@color-red-reply-floor: lighten(@color-red-theme, 42%); @color-red-theme-sidebar: @color-red-theme; @color-red-btn: lighten(@color-red-theme, 5%); @color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%); @@ -374,6 +380,7 @@ @color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 50%); // @color-pink-theme_2-line: transparent; @color-pink-theme_2-line: lighten(@color-pink-theme, 25%); +@color-pink-reply-floor: lighten(@color-pink-theme, 25%); @color-pink-theme-sidebar: @color-pink-theme; @color-pink-btn: darken(@color-pink-theme, 3%); @color-pink-btn-background: fadeout(lighten(@color-pink-theme, 20%), 50%); @@ -430,6 +437,7 @@ @color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 50%); // @color-purple-theme_2-line: transparent; @color-purple-theme_2-line: lighten(@color-purple-theme, 43%); +@color-purple-reply-floor: lighten(@color-purple-theme, 43%); @color-purple-theme-sidebar: @color-purple-theme; @color-purple-btn: lighten(@color-purple-theme, 5%); @color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%); @@ -486,6 +494,7 @@ @color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 50%); // @color-grey-theme_2-line: transparent; @color-grey-theme_2-line: lighten(@color-grey-theme, 47%); +@color-grey-reply-floor: lighten(@color-grey-theme, 47%); @color-grey-theme-sidebar: @color-grey-theme; @color-grey-btn: lighten(@color-grey-theme, 5%); @color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%); @@ -543,6 +552,7 @@ @color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 50%); // @color-ming-theme_2-line: transparent; @color-ming-theme_2-line: lighten(@color-ming-theme, 60%); +@color-ming-reply-floor: lighten(@color-ming-theme, 60%); @color-ming-theme-sidebar: @color-ming-theme; @color-ming-btn: lighten(@color-ming-theme, 5%); @color-ming-btn-background: fadeout(lighten(@color-ming-theme, 35%), 75%); @@ -602,6 +612,7 @@ @color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 50%); // @color-blue2-theme_2-line: transparent; @color-blue2-theme_2-line: lighten(@color-blue2-theme, 41%); +@color-blue2-reply-floor: lighten(@color-blue2-theme, 41%); @color-blue2-theme-sidebar: @color-blue2-theme; @color-blue2-btn: lighten(@color-blue2-theme, 5%); @color-blue2-btn-background: fadeout(lighten(@color-blue2-theme, 30%), 70%); @@ -659,6 +670,7 @@ @color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%); // @color-mid_autumn-theme_2-line: transparent; @color-mid_autumn-theme_2-line: lighten(@color-mid_autumn-theme, 61%); +@color-mid_autumn-reply-floor: lighten(@color-mid_autumn-theme, 61%); @color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0); @color-mid_autumn-btn: lighten(@color-mid_autumn-theme, 10%); @color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%); @@ -716,6 +728,7 @@ @color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%); // @color-mid_autumn-theme_2-line: transparent; @color-mid_autumn-theme_2-line: darken(@color-mid_autumn-theme, 18%); +@color-mid_autumn-reply-floor: darken(@color-mid_autumn-theme, 18%); @color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0); @color-mid_autumn-btn: darken(@color-mid_autumn-theme, 10%); @color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%); @@ -772,6 +785,7 @@ @color-naruto-theme_2-font-label: desaturate(lighten(@color-naruto-theme, 10%), 45%); // @color-naruto-theme_2-line: transparent; @color-naruto-theme_2-line: fadeout(lighten(@color-naruto-theme, 36%), 70%); +@color-naruto-reply-floor: fadeout(lighten(@color-naruto-theme, 36%), 70%); @color-naruto-theme-sidebar: rgba(255, 255, 255, .3); @color-naruto-btn: lighten(@color-naruto-theme, 2%); @color-naruto-btn-background: fadeout(lighten(@color-naruto-theme, 35%), 70%); @@ -828,6 +842,7 @@ @color-happy_new_year-theme_2-font-label: desaturate(darken(@color-happy_new_year-theme, 5%), 50%); // @color-happy_new_year-theme_2-line: transparent; @color-happy_new_year-theme_2-line: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%); +@color-happy_new_year-reply-floor: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%); @color-happy_new_year-theme-sidebar: rgba(119, 37, 18, 0.1); @color-happy_new_year-btn: desaturate(@color-happy_new_year-theme, 10%); @color-happy_new_year-btn-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 60%); diff --git a/src/renderer/components/core/PlayerDetail.vue b/src/renderer/components/core/PlayerDetail.vue index 3004125b..d018c9d8 100644 --- a/src/renderer/components/core/PlayerDetail.vue +++ b/src/renderer/components/core/PlayerDetail.vue @@ -16,23 +16,35 @@ svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve') use(xlink:href='#icon-window-close') - div(:class="$style.main") + div(:class="[$style.main, isShowComment ? $style.showComment : null]") div(:class="$style.left") + //- div(:class="$style.info") div(:class="$style.info") - div(:class="$style.img") - img(:src="musicInfo.img" v-if="musicInfo.img") - div(:class="$style.description") + img(:class="$style.img" :src="musicInfo.img" v-if="musicInfo.img") + div(:class="$style.description" @click="isShowComment = true") p {{$t('core.player.name')}}{{musicInfo.name}} p {{$t('core.player.singer')}}{{musicInfo.singer}} p(v-if="musicInfo.album") {{$t('core.player.album')}}{{musicInfo.album}} - //- div(:class="$style.list") - ul div(:class="$style.right") div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric") div(:class="$style.lyricSpace") p(v-for="(info, index) in lyricLines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}} div(:class="$style.lyricSpace") + + div(:class="$style.comment") + div(:class="$style.commentHeader" @click="isShowComment = false") + h3 {{title}} + div.scroll(:class="$style.commentMain") + div + h2(:class="$style.commentType") 热门评论 + material-comment-floor(v-if="comment.hotComments.length" :class="$style.reply_floor" :comments="comment.hotComments") + div + h2(:class="$style.commentType") 最新评论 + material-comment-floor(v-if="comment.comments.length" :class="$style.reply_floor" :comments="comment.comments") + div(:class="$style.pagination") + material-pagination(:count="comment.total" :limit="comment.limit" :page="comment.page" @btn-click="handleToggleCommentPage") + div(:class="$style.footer") div(:class="$style.left") div(:class="$style.progressContainer") @@ -205,6 +217,109 @@ export default { _lyricLines: [], lyricLines: [], isSetedLines: false, + isShowComment: false, + comment: { + page: 1, + total: 10, + maxPage: 1, + limit: 5, + comments: [{ + text: ['123123hhh'], + userName: 'dsads', + avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', + time: '2020-10-22 22:14:17', + likedCount: 100, + reply: [ + { + text: ['123123hhh'], + userName: 'dsads', + avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', + time: '2020-10-22 22:14:17', + likedCount: 100, + }, + ], + }, { + text: ['123123hhh'], + userName: 'dsads', + avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', + time: '2020-10-22 22:14:17', + likedCount: 100, + reply: [ + { + text: ['123123hhh'], + userName: 'dsads', + avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', + time: '2020-10-22 22:14:17', + likedCount: 100, + }, + { + text: ['123123hhh'], + userName: 'dsads', + avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', + time: '2020-10-22 22:14:17', + likedCount: 100, + }, + ], + }, { + text: ['123123hhh'], + userName: 'dsads', + avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', + time: '2020-10-22 22:14:17', + likedCount: 100, + reply: [], + }, { + text: ['123123hhh'], + userName: 'dsads', + avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', + time: '2020-10-22 22:14:17', + likedCount: 100, + reply: [], + }, { + text: ['123123hhh'], + userName: 'dsads', + avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', + time: '2020-10-22 22:14:17', + likedCount: 100, + reply: [], + }, { + text: ['123123hhh'], + userName: 'dsads', + avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', + time: '2020-10-22 22:14:17', + likedCount: 100, + reply: [], + }, { + text: ['123123hhh'], + userName: 'dsads', + avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', + time: '2020-10-22 22:14:17', + likedCount: 100, + reply: [], + }, { + text: ['123123hhh'], + userName: 'dsads', + avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', + time: '2020-10-22 22:14:17', + likedCount: 100, + reply: [], + }], + hotComments: [{ + text: ['123123hhh'], + userName: 'dsads', + avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', + time: '2020-10-22 22:14:17', + likedCount: 100, + reply: [ + { + text: ['123123hhh'], + userName: 'dsads', + avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', + time: '2020-10-22 22:14:17', + likedCount: 100, + }, + ], + }], + }, } }, mounted() { @@ -224,6 +339,11 @@ export default { computed: { ...mapGetters(['setting']), ...mapGetters('player', ['isShowPlayerDetail']), + title() { + return this.musicInfo.name + ? this.setting.download.fileName.replace('歌名', this.musicInfo.name).replace('歌手', this.musicInfo.singer) + : '^-^' + }, }, methods: { ...mapMutations('player', [ @@ -325,6 +445,9 @@ export default { close() { window.eventHub.$emit(eventBaseName.close) }, + handleToggleCommentPage(page) { + + }, }, } @@ -452,36 +575,56 @@ export default { overflow: hidden; display: flex; padding: 0 30px; + + &.showComment { + .left { + flex-basis: 18%; + .description p { + font-size: 12px; + } + } + .right { + flex-basis: 30%; + .lyric { + font-size: 13px; + } + } + .comment { + flex-basis: 50%; + opacity: 1; + } + } } .left { - flex: 0 0 40%; - overflow: hidden; -} -.info { + flex: auto; display: flex; flex-flow: column nowrap; align-items: center; + padding: 13px; + overflow: hidden; + transition: flex-basis @transition-theme; +} + +.info { + display: flex; + flex-flow: column nowrap; + justify-content: flex-start; + max-width: 300px; + } .img { - width: 300px; - height: 300px; - display: flex; - justify-content: flex-start; - align-items: center; - - img { - max-width: 100%; - max-height: 100%; - box-shadow: 0 0 4px @color-theme-hover; - border-radius: 6px; - opacity: .8; - // border: 5px solid @color-theme-hover; - // border-radius: @radius-border; - // border: 5px solid #fff; - } + max-width: 100%; + max-height: 100%; + min-width: 100%; + box-shadow: 0 0 4px @color-theme-hover; + border-radius: 6px; + opacity: .8; + // border: 5px solid @color-theme-hover; + // border-radius: @radius-border; + // border: 5px solid #fff; } .description { - width: 300px; + max-width: 300px; padding: 15px 0; overflow: hidden; p { @@ -495,6 +638,8 @@ export default { flex: 0 0 60%; // padding: 0 30px; position: relative; + transition: flex-basis @transition-theme; + &:before { position: absolute; top: 0; @@ -540,19 +685,48 @@ export default { color: @color-theme; font-size: 1.2em; } + +.comment { + flex: 0 0 0; + display: flex; + flex-flow: column nowrap; + transition: @transition-theme; + transition-property: flex-basis opacity; + overflow: hidden; + opacity: 0; + +} +.commentHeader { + flex: none; + padding-bottom: 10px; + // border-bottom: 1px solid #eee; + h3 { + font-size: 14px; + } +} +.commentMain { + flex: auto; + padding-left: 15px; + padding-right: 10px; + background-color: @color-reply-floor; + border-radius: 4px; +} +.commentType { + padding: 10px 0; + font-size: 13px; + color: @color-theme_2-font; +} +.pagination { + padding: 10px 0; +} + .footer { flex: 0 0 100px; overflow: hidden; display: flex; align-items: center; } -.left { - flex: auto; - display: flex; - flex-flow: column nowrap; - align-items: center; - padding-top: 13px; -} + .progress-container { width: 100%; position: relative; @@ -689,10 +863,8 @@ each(@themes, { } } .img { - img { - box-shadow: 0 0 4px ~'@{color-@{value}-theme-hover}'; - // border-color: ~'@{color-@{value}-theme-hover}'; - } + box-shadow: 0 0 4px ~'@{color-@{value}-theme-hover}'; + // border-color: ~'@{color-@{value}-theme-hover}'; } .lrc-active { color: ~'@{color-@{value}-theme}'; diff --git a/src/renderer/components/material/CommentFloor.vue b/src/renderer/components/material/CommentFloor.vue new file mode 100644 index 00000000..5cda949c --- /dev/null +++ b/src/renderer/components/material/CommentFloor.vue @@ -0,0 +1,130 @@ + + + + +