案例 问答 文章 详情

This commit is contained in:
lmj
2022-09-19 18:51:36 +08:00
parent c79bf06fe0
commit 19eef03a85
6 changed files with 166 additions and 55 deletions

View File

@@ -1,6 +1,8 @@
<template>
<div id="answer-detail">
<div class="qa-banner">
<portal-header current="qa" :goSearch="4"></portal-header>
</div>
<div class="portal-content xcontent">
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-nav">
<el-breadcrumb-item :to="{ path: '/qa' }">问答列表</el-breadcrumb-item>
@@ -9,21 +11,19 @@
<div class="xrow" style="display: flex;justify-content: space-between;">
<div style="flex: 1;" class="xcol content-div">
<el-row v-if="noData">
<el-card :body-style="{ padding: '0px' }" class="detail">
<div class="title">
<!-- <el-card :body-style="{ padding: '0px' }" class="detail">
<div class="label"
style="display: flex;margin: 9px 0 14px 0;justify-content: space-between;align-items: center;font-size: 12px;">
{{ detailData.sysCreateBy }}提问了问题
<time-show :time="detailData.sysCreateTime"></time-show>
</div>
<div class="title">
<span class="qa-basic" :class="detailData.isResolve ? 'qa-solve' : 'qa-unSolve'">
{{ detailData.isResolve === true ? '【已解决】' : detailData.isResolve === false ? '【待解决】' : '' }}
</span>
{{ detailData.title }}
</div>
<div class="label"
style="display: flex;margin: 9px 0 14px 0;justify-content: space-between;align-items: center;font-size: 12px;">
<!-- <img :src="detailData.avatar || '/temp/index/male.jpg'" /> -->
<author width="24px" height="24px" :avatar="detailData.avatar" :name="detailData.name"
:sex="detailData.sex"></author>
<!-- <author :avatar="detailData.avatar" :info="detailData.orgInfo" :name="detailData.name"></author> -->
<time-show :time="detailData.sysCreateTime"></time-show>
</div>
<div class="content">
<div style="word-break:break-all;">{{ detailData.content }}</div>
<div v-if="detailData.images" style="margin: 10px 0px;">
@@ -39,22 +39,45 @@
<interactBar v-if="detailData.id" :type="4" :comments="false" :data="detailData" :views="false">
</interactBar>
</div>
</el-card>
<div v-if="answerShow">
<el-card :body-style="{ padding: '0px' }" style="padding: 20px;">
</el-card> -->
<div class="qust-detail">
<div class="qust-hear">
{{ detailData.sysCreateBy }}提问了问题
<time-show :time="detailData.sysCreateTime"></time-show>
</div>
<div class="qust-title">
<span :class="detailData.isResolve ? 'qa-solve' : 'qa-unSolve'">
{{ detailData.isResolve === true ? '【已解决】' : detailData.isResolve === false ? '【待解决】' : '' }}
</span>
{{ detailData.title }}
</div>
<div class="qust-content">
<div class="content-text">
<div style="word-break:break-all;">{{ detailData.content }}</div>
<div v-if="detailData.images" style="margin: 10px 0px;">
<el-image :src="fileUrl + detailData.images" fit="scaleDown" />
</div>
</div>
<div class="content-inter">
<interactBar v-if="detailData.id" :type="4" :comments="false" :data="detailData" :views="false"> </interactBar>
</div>
</div>
</div>
<!-- <div> -->
<!-- <el-card :body-style="{ padding: '0px' }" style="padding: 20px;">
<div>
<el-input type="textarea" rows="5" placeholder="写下您的答案(800字以内),可以@提问者哦~" minlength="1" maxlength="800"
v-model="content"></el-input>
</div>
<div style="padding-top: 10px;">
<el-button type="primary" :disabled="!checked" class="dian-btn" @click="publishAnswer">发布</el-button>
<!-- <el-checkbox style="margin-left:20px" v-model="checked"></el-checkbox><span style="margin-left:10px" @click="qaFormCheckedShow = true">我已阅读并遵守平台内容发布要求</span> -->
<el-checkbox style="margin-left:20px" v-model="checked"></el-checkbox><span
style="font-size:14px;color:#787878;margin-left:10px">我已阅读并遵守<span
style="color:#588afc;cursor: pointer;" @click="qaFormCheckedShow = true">平台内容发布要求</span></span>
</div>
</el-card>
</div>
</el-card> -->
<!-- </div> -->
<el-card class="box-card" v-if="answerList.length == 0 && !answerShow" :body-style="{ padding: '0px' }">
<div>
<div style="height:50px;margin-top: 50px;">
@@ -72,7 +95,19 @@
<el-input placeholder="写回答...1-1000个字" minlength="1" maxlength="255" v-model="content"></el-input>
<el-button type="primary" class="dian-btn" @click="publishAnswer">发布</el-button>
</el-card> -->
<el-card :body-style="{ padding: '0px' }" class="answer-reply-box">
<div class="wrt-answer">
<div class="answer-tit">
写回答
</div>
<div class="answer-content">
<input minlength="1" maxlength="800" v-model="content" placeholder="写下你的回答吧~" type="text">
<el-button type="primary" @click="publishAnswer">发布</el-button>
</div>
</div>
<div class="answer" v-for="(item, index) of answerList" :key="item.id"
:style="index === answerList.length - 1 ? 'border-bottom:none;' : ''">
<div class="answer-top">
@@ -95,10 +130,10 @@
}}</span>
</div>
<div class="answer-time">
<div>回答于 <time-show :time="item.sysCreateTime"></time-show>
<div>
</div>
<div style="margin-right: 10px;">
<interactBar :type="5" :comments="false" :favorites="false" :data="item" :shares="false"
<interactBar :type="5" :data="item" :shares="false"
:views="false"></interactBar>
</div>
</div>
@@ -141,7 +176,7 @@
<span style="margin-left: 10px; font-size:14px">{{ con.replayName }}</span>
</div>
<div class="comment-time">
<time-show :time="con.sysCreateTime"></time-show>
<!-- <time-show :time="con.sysCreateTime"></time-show> -->
</div>
</div>
<div class="comment-body">
@@ -854,6 +889,72 @@ export default {
</script>
<style scoped lang="scss">
.wrt-answer{
.answer-tit{
font-size: 18px;
font-weight: 600;
color: #333333;
}
.answer-content{
margin-top: 27px;
display: flex;
input{
flex: 1;
height: 81px;
border-radius: 4px;
opacity: 0.5;
border: 1px solid #999999;
margin-right: 35px;
padding-left: 34px;
}
button{
width: 80px;
height: 35px;
margin-top: 42px;
}
}
}
.qust-detail{
width: 100%;
min-height: 200px;
box-sizing: border-box;
padding: 45px 65px 70px 55px;
background: #FFFFFF;
border-radius: 8px;
.qust-content{
font-size: 14px;
font-weight: 400;
color: #666666;
margin-top: 18px;
display: flex;
.content-text{
flex: 1;
margin-right: 70px;
margin-left: 0 !important;
}
.content-inter{
width: 200px;
}
}
.qust-hear{
display: flex;justify-content: space-between;
align-items: center;
font-size: 14px;
color: #666666;
font-weight: 400;
margin-bottom: 20px;
}
.qust-title{
font-size: 16px;
font-weight: 500;
color: #333333;
}
}
.qa-banner{
height: 240px;
background: url('/images/qa-banner.png');
}
.course-resources{
width: 410px;
margin-top: 26px;
@@ -919,9 +1020,10 @@ export default {
padding: 5px 20px 10px 20px;
.title {
margin-top: 20px;
font-size: 22px;
// margin-top: 20px;
font-size: 16px;
line-height: 30px;
font-weight: 500;
word-break: break-all;
.resolve {
@@ -945,7 +1047,7 @@ export default {
.content {
line-height: 21px;
margin: 14px 0 16px 0;
font-size: 15px;
font-size: 14px;
color: #666666;
}
@@ -973,7 +1075,7 @@ export default {
.answer {
margin-top: 14px;
background-color: #fff;
border-bottom: 1px solid #dddddd;
// border-bottom: 1px solid #dddddd;
// padding: 5px 20px 20px 20px;
.answer-top {
@@ -1010,7 +1112,7 @@ export default {
padding-left: 40px;
.answer-text {
margin: 20px 0 15px;
margin: 6px 0 15px;
line-height: 24px;
white-space: pre-wrap;
word-break: break-all;
@@ -1068,7 +1170,7 @@ export default {
.comment {
margin-top: 10px;
background-color: #FFFFFF;
border-bottom: 1px solid #dddddd;
// border-bottom: 1px solid #dddddd;
.comment-top {
display: flex;
@@ -1149,7 +1251,7 @@ export default {
.answer-reply-box {
margin-top: 10px;
background-color: #fff;
padding: 5px 20px 10px 20px;
padding: 58px 67px;
}
// ::v-deep .publishAnswer {