diff --git a/src/renderer/assets/images/defaultUser.jpg b/src/renderer/assets/images/defaultUser.jpg new file mode 100644 index 00000000..51d5929d Binary files /dev/null and b/src/renderer/assets/images/defaultUser.jpg differ 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 @@ + + + + +