添加评论界面
This commit is contained in:
lyswhut
@@ -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) {
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -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}';
|
||||
|
||||
Reference in New Issue
Block a user