Skip to content

L
learn-online-pc
提交 57b2b9ee authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

feat: 优化课程讨论模块

上级 7ed84a84
隐藏空白字符变更
内嵌 并排
正在显示 包含 418 行增加 和 234 行删除
src/modules/discuss/components/answerItem.vue
浏览文件 @ 57b2b9ee
<template>
<div>
<div class="ask">
<div class="user-1">
<img class="img-1" :src="avatar" />
<div class="right-1">
<div class="name-1">{{ data.replier.nickname }}</div>
<div class="time-1">{{ data.created_time }}</div>
</div>
<div class="answer-item">
<div class="user">
<img class="user-avatar" :src="avatar" />
<div class="user-content">
<div class="user-name">{{ data.replier.nickname }}</div>
<div class="user-publishtime">{{ data.created_time }}</div>
</div>
<div class="text" v-html="data.contents"></div>
<div class="user">
<template v-if="data.mine">
<div class="right-txt" @click="deleteAnswer(data.id)">{{ $t('pages.learn.discussDetail.delete') }}</div>
</template>
<div class="right-txt" @click="$emit('reply', { answer_id: data.id })">
{{ $t('pages.learn.discussDetail.reply') }}
</div>
<div class="right-txt" @click="commentVisible = !commentVisible">
{{ $t('pages.learn.discussDetail.discuss') }}({{ data.comments.length }})
</div>
<div class="right-txt" @click="$emit('btnlike', { tagId: data.tag ? data.tag.id : null, ansId: data.id })">
{{ $t('pages.learn.discussDetail.like') }}({{ data.tag_count }})
</div>
</div>
<div class="answer-content" v-html="contentHtml"></div>
<div class="tools">
<div class="right-txt" @click="toggleLike">
<i class="el-icon-thumb"></i>
{{ $t('DiscussModule.DiscussDetail.like') }}({{ data.tag_count }})
</div>
<div class="right-txt" @click="toggleComment">
<i class="el-icon-chat-round"></i>
{{ $t('DiscussModule.DiscussDetail.discuss') }}({{ data.comments.length }})
</div>
<div class="right-txt" @click="handleDelete(data.id)" v-if="data.mine">
<i class="el-icon-delete"></i>
{{ $t('DiscussModule.DiscussDetail.delete') }}
</div>
<template v-if="commentVisible">
<!-- 评论列表 -->
<template v-for="item in data.comments">
<reply-item v-on="$listeners" :data="item" :dataId="data.id" :key="item.id"></reply-item>
</template>
</template>
</div>
<!-- 评论列表 -->
<comment-list
:detail="detail"
:list="data.comments"
:data="data"
v-on="$listeners"
v-if="commentVisible"
></comment-list>
</div>
</template>
<script>
import * as api from '../api/index.js'
import replyItem from './replyItem.vue'
import commentList from './commentList.vue'
import defaultAvatar from '../assets/images/person-default.jpg'
export default {
components: { replyItem },
components: { commentList },
props: {
data: { type: Object, default: () => {} }
data: { type: Object, default: () => {} },
detail: { type: Object, default: () => {} }
},
data() {
return {
commentVisible: false
commentVisible: false,
publishText: ''
}
},
computed: {
avatar() {
return this.data.replier.avatar || defaultAvatar
},
contentHtml() {
return this.data.contents.replace(/\n/g, '<br />')
}
},
methods: {
deleteAnswer(id) {
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
api
.deleteAnswer(id)
.then(json => {
this.$emit('updateList')
this.$message({ type: 'success', message: this.$t('pages.learn.discussDetail.deleteSuccess') })
// 点赞
toggleLike() {
const params = {
answer_id: this.data.id,
question_id: this.detail.id,
semester_id: this.detail.semester_id
}
if (this.data.tag) {
// 取消点赞
api.unlike(this.data.tag.id).then(json => {
this.$emit('update')
})
.finally(() => {
loading.close()
} else {
// 点赞
api.like(params).then(res => {
this.$emit('update')
})
}
},
// 评论
toggleComment() {
this.commentVisible = !this.commentVisible
},
// 删除回答
handleDelete(id) {
api.deleteAnswer(id).then(json => {
this.$message({ type: 'success', message: this.$t('DiscussModule.DiscussDetail.deleteSuccess') })
this.$emit('update')
})
}
}
}
</script>
<style lang="sass" scoped>
<style lang="scss" scoped>
.answer-item + .answer-item {
border-top: 1px solid #f6f6f6;
}
.answer-item {
padding-bottom: 20px;
}
</style>
src/modules/discuss/components/commentList.vue 0 → 100644
浏览文件 @ 57b2b9ee
<template>
<div class="comment-list">
<reply-item
v-for="item in list"
:isAnswer="isAnswer"
:detail="detail"
:data="item"
:key="item.id"
v-on="$listeners"
></reply-item>
<!-- 评论框 -->
<div class="comments-publish">
<div class="discuss-publish">
<el-input
class="discuss-publish-textarea"
resize="none"
placeholder="写下你的评论……"
v-model="publishText"
></el-input>
<el-button type="primary" @click="handlePublish">{{ $t('DiscussModule.DiscussDetail.send') }}</el-button>
</div>
</div>
</div>
</template>
<script>
import * as api from '../api/index.js'
import replyItem from './replyItem.vue'
export default {
components: { replyItem },
props: {
list: { type: Array, default: () => [] }, // 评论列表
data: { type: Object, default: () => ({}) }, // 回答数据
detail: { type: Object, default: () => ({}) } // 详情数据
},
data() {
return {
publishText: ''
}
},
computed: {
isAnswer() {
return !!this.data.id
}
},
methods: {
// 发布评论
handlePublish() {
if (!this.publishText) {
return this.$message.error('请输入内容')
}
const params = {
answer_id: this.data.id,
semester_id: this.detail.semester_id,
comments: this.publishText
}
if (this.isAnswer) {
params.questionId = this.detail.id
} else {
params.question_id = this.detail.id
}
api.callbackComment(params).then(res => {
this.publishText = ''
this.$emit('update')
})
}
}
}
</script>
<style lang="scss" scoped>
.comment-list {
margin-top: 20px;
border-radius: 4px;
border: 1px solid #ebebeb;
box-shadow: 0 1px 3px rgb(18 18 18 / 10%);
}
.comments-publish {
border-top: 1px solid #f6f6f6;
padding: 20px;
}
</style>
src/modules/discuss/components/replyDetailItem.vue deleted 100644 → 0
浏览文件 @ 7ed84a84
<template>
<div class="item-list">
<div class="user">
<div class="name">{{data.observer.nickname}}</div>
<div class="time">{{data.created_time}}</div>
<template v-if="data.mine">
<div
class="right-txt"
@click="deleteComment(data.id)"
>{{ $t('pages.learn.discussDetail.delete') }}</div>
</template>
<div class="right-txt" @click="$emit('reply', {to: data.observer.nickname, question_id: dataId})">{{ $t('pages.learn.discussDetail.reply') }}</div>
</div>
<div class="text" v-html="data.comments"></div>
</div>
</template>
<script>
import * as api from '../api/index.js'
export default {
props: {
data: { type: Object, default: () => {} },
dataId: { type: String, default: () => {} }
},
data() {
return {}
},
methods: {
deleteComment (id) {
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
api.deleteComment(id).then(json => {
this.$emit('updateList')
this.$message({ type: 'success', message: this.$t('pages.learn.discussDetail.deleteSuccess') })
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
}
}
}
</script>
src/modules/discuss/components/replyItem.vue
浏览文件 @ 57b2b9ee
<template>
<div class="item-list">
<div class="reply-item">
<div class="user">
<div class="name">{{data.observer.nickname}}</div>
<div class="time">{{data.created_time}}</div>
<template v-if="data.mine">
<div
class="right-txt"
@click="deleteComment(data.id)"
>{{ $t('pages.learn.discussDetail.delete') }}</div>
</template>
<div class="right-txt" @click="$emit('reply', {answer_id: dataId, to: data.observer.nickname})">{{ $t('pages.learn.discussDetail.reply') }}</div>
<img class="user-avatar" :src="avatar" />
<div class="user-content">
<div class="user-name">{{ data.observer.nickname }}</div>
<div class="user-publishtime">{{ data.created_time }}</div>
</div>
</div>
<div class="reply-content" v-html="contentHtml"></div>
<div class="tools">
<div class="right-txt" @click="toggleReply">
<i class="el-icon-edit"></i> {{ $t('DiscussModule.DiscussDetail.reply') }}
</div>
<div class="right-txt" v-if="data.mine" @click="handleDelete(data.id)">
<i class="el-icon-delete"></i> {{ $t('DiscussModule.DiscussDetail.delete') }}
</div>
</div>
<div class="discuss-publish" v-if="visible">
<el-input
class="discuss-publish-textarea"
resize="none"
:placeholder="publishPholder"
v-model="publishText"
ref="input"
></el-input>
<el-button type="primary" @click="handlePublish">{{ $t('DiscussModule.DiscussDetail.send') }}</el-button>
</div>
<div class="text" v-html="data.comments"></div>
</div>
</template>
<script>
import * as api from '../api/index.js'
import defaultAvatar from '../assets/images/person-default.jpg'
export default {
props: {
isAnswer: { type: Boolean, default: false },
data: { type: Object, default: () => {} },
dataId: { type: String, default: () => {} }
detail: { type: Object, default: () => {} }
},
data() {
return {}
return {
visible: false,
publishText: ''
}
},
mounted() {
computed: {
avatar() {
return this.data.observer.avatar || defaultAvatar
},
contentHtml() {
return this.data.comments.replace(/\n/g, '<br />')
},
publishPholder() {
return this.data.mine ? '回复' + this.data.observer.nickname + '：' : '评论'
}
},
methods: {
deleteComment (id) {
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
// 删除评论
handleDelete(id) {
api.deleteComment(id).then(json => {
this.$emit('updateList')
this.$message({ type: 'success', message: this.$t('pages.learn.discussDetail.deleteSuccess') })
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
this.$emit('update')
this.$message({ type: 'success', message: this.$t('DiscussModule.DiscussDetail.deleteSuccess') })
})
},
// 回复
toggleReply() {
this.visible = !this.visible
this.$nextTick(() => {
this.visible && this.$refs.input.focus()
})
},
// 发布
handlePublish() {
if (!this.publishText) {
return this.$message.error('请输入内容')
}
const comments = `回复${this.data.observer.nickname}：${this.publishText}`
const params = {
semester_id: this.detail.semester_id,
comments,
to: this.data.observer.nickname
}
if (this.isAnswer) {
params.answer_id = this.data.relate_id
params.questionId = this.detail.id
} else {
params.question_id = this.detail.id
}
api.callbackComment(params).then(res => {
this.visible = false
this.publishText = ''
this.$emit('update')
})
}
}
}
</script>
<style lang="scss" scoped>
.reply-item + .reply-item {
border-top: 1px solid #f6f6f6;
}
.reply-item {
margin: 20px;
}
.discuss-publish {
margin-top: 10px;
}
</style>
src/modules/discuss/src/discussDetail.vue
浏览文件 @ 57b2b9ee
<template>
<div>
<div class='discuss-detail-scroll'>
<div class='ques'>
<div class='title'>{{detail.title}}</div>
<div class='text' v-html="detail.contents"></div>
<div class='user'>
<div class='name'>{{user.nickname}}</div>
<div class='time'>{{detail.created_time}}</div>
<template v-if='detail.mine'><div class='right-txt' @click='deleteDiscuss'>{{ $t('DiscussModule.DiscussDetail.delete') }}</div></template>
<div class='right-txt' @click='replyComposeParam({question_id: detail.id})'>{{ $t('DiscussModule.DiscussDetail.reply') }}</div>
<div class='right-txt' @click='commentVisible = !commentVisible'>{{ $t('DiscussModule.DiscussDetail.discuss') }}({{detail.comments ? detail.comments.length : 0}})</div>
<div class='right-txt' @click='btnlike({tagId: detail.tag ? detail.tag.id : null})'>
{{ $t('DiscussModule.DiscussDetail.like') }}({{detail.tag_count}})</div>
<div class="discuss-detail">
<div class="discuss-question">
<div class="title">{{ detail.title }}</div>
<div class="text" v-html="detail.contents"></div>
<div class="user">
<img class="user-avatar" :src="avatar" />
<div class="user-content">
<div class="name">{{ user.nickname }}</div>
<div class="time">{{ detail.created_time }}</div>
</div>
<div v-show='commentVisible'>
<template v-for="item in detail.comments">
<reply-item :data="item" :key="item.id" :dataId="detail.id" @reply="replyComposeParam" @updateList="updateList"></reply-item>
</template>
<div class="tools">
<div class="right-txt" @click="toggleLike">
<i class="el-icon-thumb"></i>
{{ $t('DiscussModule.DiscussDetail.like') }}({{ detail.tag_count }})
</div>
<div class="right-txt" @click="commentVisible = !commentVisible">
<i class="el-icon-chat-round"></i>
{{ $t('DiscussModule.DiscussDetail.discuss') }}({{ detail.comments ? detail.comments.length : 0 }})
</div>
<div class="right-txt" @click="handleRemove" v-if="detail.mine">
<i class="el-icon-delete"></i>
{{ $t('DiscussModule.DiscussDetail.delete') }}
</div>
</div>
</div>
<div class='result'>{{detail.answer_count}} {{ $t('DiscussModule.DiscussList.answers') }}<div style='display: inline-block; width: 0.2rem;'></div>{{detail.tag_total_count || 0}} {{ $t('DiscussModule.DiscussList.votes') }}</div>
<comment-list :detail="detail" :list="detail.comments" @update="updateList" v-if="commentVisible"></comment-list>
</div>
<div class="discuss-answer">
<div class="discuss-answer-hd">{{ detail.answer_count }} {{ $t('DiscussModule.DiscussList.answers') }}</div>
<!-- 回答列表 -->
<template v-for="item in detail.answers">
<answer-item :data="item" :key="item.id" @btnlike="btnlike" @updateList="updateList" @reply="replyComposeParam"></answer-item>
<answer-item :detail="detail" :data="item" :key="item.id" @update="updateList"></answer-item>
</template>
<template v-if='!answersLength'>
<div class='no-data'>{{ $t('DiscussModule.DiscussDetail.noAnswer') }}</div>
<template v-if="!answersLength">
<div class="no-data">{{ $t('DiscussModule.DiscussDetail.noAnswer') }}</div>
</template>
<div style='width: 750rpx; height: 200rpx;'></div>
</div>
<div style="width: 100%; height: 1.7rem;"></div>
<div class='input-publish'>
<textarea id="editor" v-model="replyText" ref="focusTextarea"></textarea>
<el-button type="primary" @click="publishContent">{{ $t('DiscussModule.DiscussDetail.send') }}</el-button><em class="send">({{inputStatus.placeholder}})</em>
<div class="discuss-publish-fixed" :style="style">
<div class="discuss-publish">
<el-input type="textarea" class="discuss-publish-textarea" resize="none" v-model="publishText"></el-input>
<el-button type="primary" @click="handlePublis">{{ $t('DiscussModule.DiscussDetail.sendAnswer') }}</el-button>
</div>
</div>
</div>
</template>
<script>
import replyItem from '../components/replyDetailItem.vue'
import AnswerItem from '../components/answerItem.vue'
import commentList from '../components/commentList.vue'
import answerItem from '../components/answerItem.vue'
import * as api from '../api/index.js'
import defaultAvatar from '../assets/images/person-default.jpg'
export default {
components: { AnswerItem, replyItem },
components: { answerItem, commentList },
name: 'DiscussDetail',
props: {
paramId: { type: Object, require: false }
// sid: { type: String, require: false },
// cid: { type: String, require: false },
// id: { type: String, require: false } // 章节id
},
data () {
data() {
return {
replyText: '',
publishText: '',
commentVisible: false,
detail: {},
/* 回复内容状态 */
call: {},
/* 存储状态值 的对象, 记录上次用户操作 */
disQus: {
isShowComment: false
},
inputStatus: {
canFocus: false,
placeholder: `${this.$t('DiscussModule.DiscussDetail.answering')} ...`,
input: ''
},
answer: true,
replyParam: {}
width: 0
}
},
created() {
this.updateList()
},
computed: {
user() {
return this.detail.questioner || {}
},
avatar() {
return this.user.avatar || defaultAvatar
},
answersLength() {
return this.detail.answers ? this.detail.answers.length : false
},
style() {
return { width: this.width + 'px' }
}
},
created() {
this.updateList()
},
mounted() {
const resizeObserver = new window.ResizeObserver(entries => {
for (const entry of entries) {
this.width = entry.contentRect.width
}
})
resizeObserver.observe(document.querySelector('.discuss-detail'))
},
methods: {
// 点赞
btnlike (e) {
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
if (e.tagId) {
api.unlike(e.tagId).then(json => {
toggleLike() {
const params = {
question_id: this.detail.id,
semester_id: this.detail.semester_id
}
if (this.detail.tag && this.detail.tag.id) {
// 取消点赞
api.unlike(this.detail.tag.id).then(json => {
this.updateList()
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
})
} else {
const param = {}
if (this.detail.id) { param.question_id = this.detail.id }
if (e.ansId) { param.answer_id = e.ansId }
if (this.detail.semester_id) { param.semester_id = this.detail.semester_id }
api.like(param).then(json => {
// 点赞
api.like(params).then(res => {
this.updateList()
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
})
}
},
// 更新列表
updateList() {
api.getDiscussDetail(this.paramId.id).then(data => {
this.detail = data
})
},
// 删除问题
deleteDiscuss () {
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
handleRemove() {
api.deleteDiscuss(this.paramId.id).then(json => {
this.$message({ type: 'success', message: this.$t('DiscussModule.DiscussDetail.deleteSuccess') })
/* 返回上一级 菜单 */
setTimeout(() => {
this.$router.go(-1)
}, 1000)
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
},
// 更新列表
updateList () {
api.getDiscussDetail(this.paramId.id).then(data => {
this.detail = data
})
},
/**
* 点击 键盘发送按钮时
*/
publishContent () {
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
this.replyParam.comments = this.replyParam.to ? `${this.$t('DiscussModule.DiscussDetail.reply')}${this.replyParam.to}:${this.replyText}` : this.replyText
if (this.answer) {
this.replyComposeParam({
answer: true,
contents: this.replyText,
question_id: this.detail.id
}, true)
api.answerQues(this.replyParam).then(json => {
this.updateList()
this.replyText = ''
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
} else {
api.callbackComment(this.replyParam).then(json => {
this.updateList()
this.replyText = ''
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
// 发布回答
handlePublis() {
if (!this.publishText) {
return this.$message.error('请输入内容')
}
this.$refs.focusTextarea.focus()
},
// 通过点击不同的回复按钮 拼成所要提交不同的参数
replyComposeParam (obj, answer) {
this.$refs.focusTextarea.focus()
this.inputStatus.placeholder = obj.to !== undefined ? `${this.$t('DiscussModule.DiscussDetail.reply')}${obj.to}:` : `${this.$t('DiscussModule.DiscussDetail.reply')}:`
this.answer = answer || false
const commonParam = {
questionId: this.detail.id,
semester_id: this.detail.semester_id
const params = {
question_id: this.detail.id,
semester_id: this.detail.semester_id,
contents: this.publishText
}
this.replyParam = Object.assign(commonParam, obj)
api.answerQues(params).then(res => {
this.updateList()
this.publishText = ''
})
}
}
}
</script>
<style lang="scss">
// .discuss-detail-scroll { }
.discuss-detail-scroll .ques { padding: 0.3rem 0.26rem; padding-top: 0; margin-bottom: 0.2rem; background: #fff; box-shadow: 0 2px 4px rgba(10, 4, 6, 0.1); overflow: hidden; }
/* 显示标题、描述、讨论、人等 */
.discuss-detail-scroll .user { margin-top: 0.15rem; overflow: hidden; }
.discuss-detail-scroll .user .name { float: left; font-size: 0.16rem; color: #313131; line-height: 0.2rem; }
.discuss-detail-scroll .user .time { float: left; margin-left: 0.4rem; font-size: 0.14rem; color: #a0a0a0; line-height: 0.2rem; }
.discuss-detail-scroll .user .right-txt { float: right; margin-left: 0.2rem; font-size: 0.14rem; color: #a27c1b; cursor: pointer; }
.discuss-detail-scroll .user .right-txt .img { display: inline-block; margin-top: 1px; width: 0.22rem; height: 0.2rem; }
.discuss-detail-scroll .title { margin: 0.15rem 0; font-size: 0.24rem; color: #313131; line-height: 1.5; text-align: justify; }
.discuss-detail-scroll .text { font-size: 0.18rem; color: #535353; line-height: 1.5; text-align: justify; }
/* 显示回答和投票 */
.discuss-detail-scroll .result { margin-left: 0.26rem; margin-top: 0.15rem; font-size: 0.14rem; color: #313131; }
.discuss-detail-scroll .ask { position: relative; margin-top: 0.2rem; padding: 0 0.26rem; background: #fff; overflow: hidden; }
/* 显示回答 和 讨论 */
.discuss-detail-scroll .ask .user-1 { position: relative; overflow: hidden; margin-top: 0.25rem; margin-bottom: 0.15rem; }
.discuss-detail-scroll .ask .user-1 .img-1 { float: left; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.discuss-detail-scroll .ask .user-1 .right-1 { position: absolute; left: 0.72rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.discuss-detail-scroll .ask .user-1 .right-1 .name-1 { font-size: 0.14rem; color: #313131; text-overflow: ellipsis; overflow: hidden; word-break:break-all; }
.discuss-detail-scroll .ask .user-1 .right-1 .time-1 { margin-top: 5px; font-size: 0.14rem; color: #a0a0a0; }
.discuss-detail-scroll .item-list { position: relative; padding: 0.3rem 0; border-bottom: 1px solid #c9c9c9; }
.discuss-detail-scroll .item-list:last-child { border-bottom: none; }
.discuss-detail-scroll .item-list .user { margin-top: 0; overflow: hidden; }
.discuss-detail-scroll .item-list .user .name { float: left; font-size: 0.16rem; color: #313131; line-height: 0.2rem; }
.discuss-detail-scroll .item-list .user .time { float: left; margin-left: 0.4rem; font-size: 0.14rem; color: #a0a0a0; line-height: 0.2rem; }
.discuss-detail-scroll .item-list .user .right-txt { float: right; margin-left: 0.2rem; font-size: 0.14rem; color: #a27c1b; }
.discuss-detail-scroll .item-list .text { margin-top: 0.15rem; font-size: 0.16rem; color: #535353; }
.discuss-detail-scroll .item-list .text.on { color: #2263d9; }
.discuss-detail-scroll .no-data { padding: 1rem 0; font-size: 0.24rem; color: #c9c9c9; text-align: center; }
.input-publish { position: fixed; z-index: 2; height: 1.5rem; left: 295px; right: 30px; bottom: 0; padding: 0.2rem; background: #fff; box-sizing: border-box; }
.input-publish #editor { width: 100%; height: 0.7rem; font-size: 18px; line-height: 1.5; outline: none; }
.input-publish .send { font-size: 14px; color: #ddd; margin-left: 10px; }
.input-publish .ask { position: relative; margin: 12px auto; width: 90%; height: 56px; border: 1px solid #dcdcdc; box-sizing: border-box; -webkit-box-sizing: border-box; }
.input-publish .ask .img { position: absolute; left: 24px; top: 13px; width: 28px; height: 0.26rem; }
.input-publish .ask .txt { position: absolute; left: 63px; top: 0; height: 54px; width: 100%; border: none; line-height: 2; font-size: 0.18rem; color: #313131; }
.discuss-detail {
padding-bottom: 100px;
.user {
display: flex;
align-items: center;
padding: 10px 0;
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
object-fit: cover;
}
.user-content {
flex: 1;
.user-name {
font-size: 14px;
color: #333;
margin-bottom: 5px;
}
.user-publishtime {
font-size: 12px;
color: #999;
}
}
}
.tools {
display: flex;
padding-top: 10px;
.right-txt {
color: #a27c1b;
cursor: pointer;
}
.right-txt + .right-txt {
margin-left: 24px;
}
}
}
.discuss-question {
padding: 20px;
background-color: #fff;
.title {
margin-top: 12px;
margin-bottom: 10px;
font-size: 22px;
font-weight: 600;
line-height: 32px;
color: #121212;
}
}
.discuss-answer {
margin-top: 20px;
padding: 20px;
background-color: #fff;
.no-data {
padding: 1rem 0;
font-size: 0.24rem;
color: #c9c9c9;
text-align: center;
}
}
.discuss-answer-hd {
margin-bottom: 10px;
padding-bottom: 10px;
font-size: 16px;
border-bottom: 1px solid #f6f6f6;
}
.discuss-publish-fixed {
position: fixed;
bottom: 0;
padding: 20px;
background: #fff;
z-index: 2;
box-sizing: border-box;
box-shadow: 0 -1px 8px rgb(18 18 18 / 10%);
}
.discuss-publish {
display: flex;
}
.discuss-publish-textarea {
width: 100%;
outline: none;
margin-right: 20px;
flex: 1;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论