添加评论界面
lyswhut
parent
a25ef6e2a0
commit
aa948b0149
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
|
|
@ -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%);
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
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,11 +863,9 @@ each(@themes, {
|
|||
}
|
||||
}
|
||||
.img {
|
||||
img {
|
||||
box-shadow: 0 0 4px ~'@{color-@{value}-theme-hover}';
|
||||
// border-color: ~'@{color-@{value}-theme-hover}';
|
||||
}
|
||||
}
|
||||
.lrc-active {
|
||||
color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,130 @@
|
|||
<template lang="pug">
|
||||
div(:class="$style.container")
|
||||
ul
|
||||
li(v-for="(item, index) in comments" :key="item.id" :class="$style.listItem")
|
||||
div(:class="$style.content")
|
||||
div(:class="$style.left")
|
||||
img( :class="$style.avatar" :src="item.avatar || commentDefImg" @error="handleUserImg")
|
||||
div(:class="$style.right")
|
||||
div(:class="$style.info")
|
||||
div(:class="$style.name") {{item.userName}}
|
||||
time(:class="$style.time") {{timeFormat(item.time)}}
|
||||
div(:class="$style.likes") {{item.likedCount}}
|
||||
div(:class="$style.comment_text")
|
||||
p(v-for="text in item.text") {{text}}
|
||||
material-comment-floor(v-if="item.reply && item.reply.length" :class="$style.reply_floor" :comments="item.reply")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import commentDefImg from '../../assets/images/defaultUser.jpg'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
comments: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
commentDefImg,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
timeFormat(time) {
|
||||
return time
|
||||
// return formatTime(new Date(time), true)
|
||||
},
|
||||
handleUserImg(event) {
|
||||
event.target.src = this.commentDefImg
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" module>
|
||||
@import '../../assets/styles/layout.less';
|
||||
|
||||
@padding: 15px;
|
||||
|
||||
.container {
|
||||
|
||||
}
|
||||
|
||||
.listItem {
|
||||
border-bottom: 1px dashed @color-theme_2-line;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 12px 0;
|
||||
font-size: 13px;
|
||||
color: @color-theme_2-font;
|
||||
display: flex;
|
||||
}
|
||||
.left {
|
||||
flex: none;
|
||||
}
|
||||
.avatar {
|
||||
width: 40px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, .15);
|
||||
}
|
||||
.right {
|
||||
flex: auto;
|
||||
min-width: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: flex-end;
|
||||
min-width: 0;
|
||||
}
|
||||
.name {
|
||||
flex: auto;
|
||||
min-width: 0;
|
||||
.mixin-ellipsis-1;
|
||||
}
|
||||
.time {
|
||||
flex: none;
|
||||
color: @color-theme_2-font-label;
|
||||
font-size: 11px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.likes {
|
||||
flex: none;
|
||||
margin-left: 10px;
|
||||
color: @color-theme_2-font-label;
|
||||
font-size: 11px;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.comment_text {
|
||||
text-align: justify;
|
||||
font-size: 14px;
|
||||
p {
|
||||
line-height: 1.5;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.reply_floor {
|
||||
padding: 0 0 0 @padding;
|
||||
margin-left: @padding * 2;
|
||||
border-radius: .5rem;
|
||||
&:last-child {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.listItem:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.right {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
background-color: @color-reply-floor;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue