Skip to content

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

feat: 优化课程讨论模块

上级 6391f1a1
隐藏空白字符变更
内嵌 并排
正在显示 包含 435 行增加 和 644 行删除
src/modules/discuss/assets/languages/en.json
浏览文件 @ 6a8ce330
......@@ -14,7 +14,8 @@
"send": "Send",
"noAnswer": "No answer",
"deleteSuccess": "Delete success",
"answering": "Answer"
"answering": "Answer",
"sendAnswer": "Send"
}
}
}
\ No newline at end of file
}
src/modules/discuss/assets/languages/zh-CN.json
浏览文件 @ 6a8ce330
......@@ -8,13 +8,14 @@
"DiscussDetail": {
"title": "问题详情",
"like": "点赞",
"discuss": "讨论",
"discuss": "评论",
"reply": "回复",
"delete": "删除",
"send": "发送",
"send": "发布",
"noAnswer": "暂无回答",
"deleteSuccess": "删除成功",
"answering": "回答问题"
"answering": "回答问题",
"sendAnswer": "发布回答"
}
}
}
src/modules/discuss/components/answerItem.vue
浏览文件 @ 6a8ce330
<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="contentHtml"></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: {
......@@ -56,21 +58,45 @@ export default {
}
},
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
浏览文件 @ 6a8ce330
<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
浏览文件 @ 6391f1a1
<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="contentHtml"></div>
</div>
</template>
<script>
import * as api from '../api/index.js'
export default {
props: {
data: { type: Object, default: () => {} },
dataId: { type: String, default: () => {} }
},
data() {
return {}
},
computed: {
contentHtml() {
return this.data.comments.replace(/\n/g, '<br />')
}
},
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
浏览文件 @ 6a8ce330
<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="contentHtml"></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: ''
}
},
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
浏览文件 @ 6a8ce330
<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>
src/pages/learn/discussDetail.vue
浏览文件 @ 6a8ce330
<template>
<div>
<div class="con-title">{{ $t('pages.learn.discussDetail.title') }}</div>
<div class="con-box">
<discuss-detail :paramId='paramId'></discuss-detail>
<!-- <div class='discuss-detail-scroll'>
<div class='ques'>
<div class='title'>{{discussQues.title}}</div>
<div class='text' v-html="discussQues.text"></div>
<div class='user'>
<div class='name'>{{discussQues.user.name}}</div>
<div class='time'>{{discussQues.user.time}}</div>
<template v-if='discussQues.mine'><div class='right-txt' @click='deleteDiscuss'>{{ $t('pages.learn.discussDetail.delete') }}</div></template>
<div class='right-txt' @click='callbackComment' :data-sid='discussQues.sid' :data-qid='discussQues.qid' :data-quesid='discussQues.qid'>{{ $t('pages.learn.discussDetail.reply') }}</div>
<div class='right-txt' @click='openOrcloseDis' data-key='disQus'>{{ $t('pages.learn.discussDetail.discuss') }}({{discussQues.comCnt}})</div>
<div class='right-txt' @click='btnlike' :data-quesid='discussQues.qid' :data-sid='discussQues.sid' :data-tagid='discussQues.tag_id'>
{{ $t('pages.learn.discussDetail.like') }}({{discussQues.likeCnt}})</div>
</div>
<template v-if='disQus.isShowComment'>
<div class='ask'>
<template v-for='(item, index) in discussQues.comments'>
<div v-bind:key="index" class='item-list' :data-id='item.id'>
<div class='user'>
<div class='name'>{{item.user.name}}</div>
<div class='time'>{{item.user.time}}</div>
<template v-if='item.mine'><div class='right-txt' @click='deleteComment' :data-cid='item.cid'>{{ $t('pages.learn.discussDetail.delete') }}</div></template>
<div class='right-txt' @click='callbackComment' :data-sid='discussQues.sid' :data-qid='discussQues.qid' :data-quesid='discussQues.qid' :data-to='item.user.name'>{{ $t('pages.learn.discussDetail.reply') }}</div>
</div>
<div class='text'>{{item.text}}</div>
</div>
</template>
</div>
</template>
</div>
<div class='result'>{{discussQues.askCnt}} {{ $t('pages.learn.discussion.answers') }}<div style='display: inline-block; width: 0.2rem;'></div>{{discussQues.TouCnt}} {{ $t('pages.learn.discussion.votes') }}</div>
<template v-for='(item, index) in answersList'>
<div v-bind:key="index" class='ask'>
<div class='user-1'>
<template v-if="item.user.url">
<img class='img-1' :src='item.user.url' />
</template>
<template v-else>
<img class='img-1' src='../../assets/images/person-default.jpg' />
</template>
<div class='right-1'>
<div class='name-1'>{{item.user.name}}</div>
<div class='time-1'>{{item.user.time}}</div>
</div>
</div>
<div class='text' v-html="item.text"></div>
<div class='user'>
<template v-if='item.mine'><div class='right-txt' @click='deleteAnswer' :data-aid='item.aid'>{{ $t('pages.learn.discussDetail.delete') }}</div></template>
<div class='right-txt' @click='callbackComment' :data-sid='discussQues.sid' :data-qid='discussQues.qid' :data-ansid='item.aid'>{{ $t('pages.learn.discussDetail.reply') }}</div>
<div class='right-txt' @click='openOrcloseDis' :data-key='answers' :data-index='index'>{{ $t('pages.learn.discussDetail.discuss') }}({{item.comCnt}})</div>
<div class='right-txt' @click='btnlike' :data-sid='discussQues.sid' :data-quesid='discussQues.qid' :data-ansid='item.aid' :data-tagid='item.tag_id'>
点赞({{item.likeCnt}})</div>
</div>
<template v-if='answers[index].isShowComment'>
<template v-for='(item1, index) in item.comments'>
<div v-bind:key='index' class='item-list' :data-id='item1.id'>
<div class='user'>
<div class='name'>{{item1.user.name}}</div>
<div class='time'>{{item1.user.time}}</div>
<template v-if='item1.mine'><div class='right-txt' @click='deleteComment' :data-cid='item1.cid'>{{ $t('pages.learn.discussDetail.delete') }}</div></template>
<div class='right-txt' @click='callbackComment' :data-sid='discussQues.sid' :data-qid='discussQues.qid' :data-ansid='item.aid' :data-to='item.user.name'>{{ $t('pages.learn.discussDetail.reply') }}</div>
</div>
<div class='text' v-html="item1.text"></div>
</div>
</template>
</template>
<template v-if='(!item.comments.length || !answers[index].isShowComment)'><div style='width: 100%; height: 0.2rem;'></div></template>
</div>
</template>
<template v-if='!answersList.length'>
<div class='no-data'>{{ $t('pages.learn.discussDetail.noAnswer') }}</div>
</template>
<div style='width: 750rpx; height: 200rpx;'></div>
</div> -->
<div>
<div class="con-title">{{ $t('pages.learn.discussDetail.title') }}</div>
<div class="con-box">
<discuss-detail :paramId="paramId"></discuss-detail>
</div>
</div>
<!-- <div style="width: 100%; height: 1.7rem;"></div>
<div class='input-publish'>
<textarea id="editor"></textarea>
<el-button type="primary" @click="publishContent">{{ $t('pages.learn.discussDetail.send') }}</el-button><em class="send">({{inputStatus.placeholder}})</em>
</div> -->
<!-- <div class='ask'> -->
<!-- <image class='img' src='./icons/ask.png' mode='aspectFill'></image> -->
<!-- <input type='text' class="txt" placeholder='{{inputStatus.placeholder}}' focus='{{inputStatus.canFocus}}' bindblur='blurInput' confirm-type='send' bindconfirm='publishContent' value='{{inputStatus.input}}' cursor-spacing='20'/> -->
<!-- </div> -->
</div>
</template>
<script>
// import cAction from '@action'
// import CKEDITOR from 'CKEDITOR'
export default {
props: {
sid: { type: String, require: false },
cid: { type: String, require: false },
id: { type: String, require: false } // 章节id
},
data () {
data() {
return {
paramId: {},
ckeditor: null,
courseTitle: '课程问题'
// discussQues: {
// qid: '', user: { url: './icons/default.jpg', name: '用户名000', time: '2018-2-12 15:28:47' }, // eslint-disable-line
// title: '这是一个一句话问题这是一个一句话问题这是一个一句话问题标题这是一个一句话问题', // eslint-disable-line
// text: '<p>王家有三兄弟甲、乙、丙，丙幼年时送给胡某作养子，丙结婚时，胡某为其盖了新房，后因失火致使该房屋被烧毁。丙的生父母就将自己<p>', // eslint-disable-line
// askCnt: 20, TouCnt: 100, likeCnt: 100, comCnt: 100, mine: true, isShowComment: false, has_tag: false, tag_id: null, // eslint-disable-line
// comments: [ // eslint-disable-line
// { cid: '', user: { url: '', name: '用户名000', time: '2018-2-12 15:28:47' }, text: '在线学习课程', mine: true }, // eslint-disable-line
// { cid: '', user: { url: '', name: '用户名000', time: '2018-2-12 15:28:47' }, text: '在线学习课程', mine: false } // eslint-disable-line
// ] // eslint-disable-line
// },
// answersList: [
// // {
// // aid: '', user: { url: '', name: '用户名000', time: '2018-2-12 15:28:47' }, // eslint-disable-line
// // text: '<p>王家有三兄弟甲、乙、丙，丙幼年时送给胡某作养子，丙结婚时，胡某为其盖了新房，后因失火致使该房屋被烧毁。丙的生父母就将自己<p>', // eslint-disable-line
// // likeCnt: 100, comCnt: 100, mine: true, isShowComment: false, has_tag: false, tag_id: null, // eslint-disable-line
// // comments: [ // eslint-disable-line
// // { cid: '', user: { url: '', name: '用户名000', time: '2018-2-12 15:28:47' }, text: '在线学习课程', mine: true } // eslint-disable-line
// // ] // eslint-disable-line
// // }
// ],
/* 存储状态值 的对象, 记录上次用户操作 */
// disQus: {
// isShowComment: false
// },
// answers: [ // 数组 跟 上面 answerList数组对应, 存储某些状态值，目前存储讨论打开关闭状态
// { aid: '', isShowComment: false } // eslint-disable-line
// ],
// inputStatus: {
// canFocus: false,
// placeholder: `${this.$t('pages.learn.discussDetail.answering')} ...`,
// input: ''
// },
// qid: '6447416971762860032',
/* 回复内容状态 */
// call: {}
}
},
created() {
this.paramId = {
sid: this.$route.params.sid,
cid: this.$route.params.cid,
id: this.$route.params.id
computed: {
paramId() {
return {
sid: this.$route.params.sid,
cid: this.$route.params.cid,
id: this.$route.params.id
}
}
}
// mounted () {
// this.call = { questionId: this.id, semester_id: '', contents: '', question_id: this.id, answer: true }
// const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
// cAction.Discuss.getDiscussDetail(this.id).then(json => {
// this.discussQues = json.ques
// this.call.semester_id = this.discussQues.sid
// this.disQus.isShowComment = json.ques.isShowComment
// const answers = []
// for (let i = 0; i < json.answer.length; i++) {
// answers.push({
// aid: json.answer[i].aid,
// isShowComment: json.answer[i].isShowComment
// })
// }
// this.answersList = json.answer
// this.answers = answers
// }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
// // this.initckeditor()
// $('#editor').on('blur', () => {
// this.blurInput()
// })
// },
// destroyed () {
// /* 清空 ckeditor 需要调用方法删除 并 在DOM结构中也移除 */
// this.ckeditor && this.ckeditor.destroy(true)
// this.ckeditor = null
// $('#editor').off('blur')
// },
// methods: {
// /**
// * 打开或关闭 讨论
// */
// openOrcloseDis (e) {
// const key = e.currentTarget.dataset.key
// if (key === 'disQus') {
// this.disQus.isShowComment = !this.disQus.isShowComment
// } else {
// const index = e.currentTarget.dataset.index
// this.answers[index].isShowComment = !this.answers[index].isShowComment
// }
// },
// /**
// * 删除评论
// */
// deleteComment (e) {
// const cid = e.currentTarget.dataset.cid
// const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
// cAction.Discuss.deleteComment(cid).then(json => {
// this.updateList()
// this.$message({ type: 'success', message: this.$t('pages.learn.discussDetail.deleteSuccess') })
// }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
// },
// /**
// * 删除回答
// */
// deleteAnswer (e) {
// const aid = e.currentTarget.dataset.aid
// const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
// cAction.Discuss.deleteAnswer(aid).then(json => {
// this.updateList()
// this.$message({ type: 'success', message: this.$t('pages.learn.discussDetail.deleteSuccess') })
// }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
// },
// /**
// * 点赞 或 取消点赞 操作
// */
// btnlike (e) {
// const _data = e.currentTarget.dataset
// const quesid = _data.quesid
// const ansid = _data.ansid
// const tagid = _data.tagid
// const sid = _data.sid
// if (tagid) { // 取消 点赞操作
// // wx.showLoading({ title: '操作中...', mask: true })
// const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
// cAction.Discuss.unlike(tagid).then(json => {
// this.updateList()
// }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
// } else { // 点赞操作
// const param = {}
// if (quesid) { param.question_id = quesid }
// if (ansid) { param.answer_id = ansid }
// if (sid) { param.semester_id = sid }
// // wx.showLoading({ title: '操作中...', mask: true })
// const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
// cAction.Discuss.like(param).then(json => {
// this.updateList()
// }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
// }
// },
// /**
// * 删除问题
// */
// deleteDiscuss () {
// const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
// cAction.Discuss.deleteDiscuss(this.id).then(json => {
// this.$message({ type: 'success', message: this.$t('pages.learn.discussDetail.deleteSuccess') })
// /* 返回上一级 菜单 */
// setTimeout(() => {
// // wx.navigateBack({ delta: 1 })
// this.$router.go(-1)
// }, 1000)
// }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
// },
// /**
// * 点击回复 调起输入框
// */
// callbackComment (e) {
// // /* 如果，输入框中，本身已经存在输入内容，那么再点击其他回复时，不给提示，直接清空 */
// this.inputStatus.input = '' // 这里如果想判断，不能使用 inputStatus.input这个 在blur时存储
// const _data = e.currentTarget.dataset
// const qid = _data.qid
// const quesid = _data.quesid
// const ansid = _data.ansid
// const to = _data.to
// const sid = _data.sid
// const json = {}
// if (qid) { json.questionId = qid }
// if (to) { json.to = to }
// if (quesid) { json.question_id = quesid }
// if (ansid) { json.answer_id = ansid }
// if (sid) { json.semester_id = sid }
// this.call = json
// if (to) {
// this.inputStatus.placeholder = this.$t('pages.learn.discussDetail.reply') + to + '：'
// } else {
// this.inputStatus.placeholder = `${this.$t('pages.learn.discussDetail.reply')}：`
// }
// this.inputStatus.canFocus = true
// $('#editor').focus()
// },
// /**
// * 取消 聚焦状态, 使用 ckeditor 进行 聚焦监听
// */
// blurInput (e) {
// this.inputStatus.canFocus = false
// if ($('#editor').val()) {
// // 输入框中存在内容则不做处理 - 这里不能做任何处理，否则会产生 输入框中内容遗留问题
// } else {
// this.inputStatus.placeholder = `${this.$t('pages.learn.discussDetail.answering')} ...`
// this.inputStatus.input = ''
// // 回答问题 方式
// this.call = {
// questionId: this.discussQues.qid,
// semester_id: this.discussQues.sid,
// contents: '',
// question_id: this.discussQues.qid,
// answer: true
// }
// }
// },
// /**
// * 点击 键盘发送按钮时
// */
// publishContent (e) {
// const val = $('#editor').val()
// if (this.call.to) {
// this.call.comments = this.$t('pages.learn.discussDetail.reply') + this.call.to + '：' + val
// } else {
// this.call.comments = val
// }
// if (this.call.answer) { // 回答问题
// // wx.showLoading({ title: '操作中...', mask: true })
// this.call.contents = this.call.comments
// const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
// cAction.Discuss.answerQues(this.call).then(json => {
// this.updateList()
// // this.ckeditor.setData('')
// $('#editor').val('')
// }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
// } else { // 回复评论
// // wx.showLoading({ title: '操作中...', mask: true })
// const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
// cAction.Discuss.callbackComment(this.call).then(json => {
// this.updateList()
// // this.ckeditor.setData('')
// $('#editor').val('')
// }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
// }
// // this.blurInput()
// },
// /* 刷新页面 全部状态 - 目前没有分页可以这么操作，如果存在分页，可能要重写 */
// updateList () {
// const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
// cAction.Discuss.getDiscussDetail(this.id).then(json => {
// this.discussQues = json.ques
// const _answers = this.answers
// for (let i = 0; i < _answers.length; i++) {
// for (let j = 0; j < json.answer.length; j++) {
// if (_answers[i].aid === json.answer[j].aid) {
// json.answer[j].isShowComment = _answers[i].isShowComment
// break
// }
// }
// }
// const answers = []
// for (let i = 0; i < json.answer.length; i++) {
// answers.push({
// aid: json.answer[i].aid,
// isShowComment: json.answer[i].isShowComment
// })
// }
// this.answersList = json.answer
// this.answers = answers
// }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
// },
// /* 初始化 ckeditor */
// initckeditor () {
// !this.ckeditor && (this.ckeditor = CKEDITOR.replace('editor', {
// height: 100,
// uiColor: '#eeeeee',
// filebrowserImageUploadUrl: '/api/ckeditor/img/upload',
// // resize_enabled: typeof this.props.resizable === 'boolean' ? this.props.resizable : true,
// toolbar: [
// // { name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'Preview' ] },
// { name: 'styles', items: "[ 'Styles', 'Format', 'Font', 'FontSize' ]" },
// { name: 'colors', items: "[ 'TextColor', 'BGColor' ]" },
// { name: 'tools', items: "[ 'Maximize', 'ShowBlocks' ]" },
// // { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
// { name: 'editing', items: "[ 'Find', 'Replace' ]" },
// // { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
// '/',
// { name: 'basicstyles', items: "[ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ]" },
// { name: 'paragraph', items: "[ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ]" },
// { name: 'links', items: "[ 'Link', 'Unlink', 'Anchor' ]" },
// { name: 'insert', items: "[ 'Image', 'Table', 'HorizontalRule' ]" }
// ]
// }))
// }
// }
}
</script>
<style lang="scss" scoped>
// .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; }
.con-box {
padding: 0;
background: transparent;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论