mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-11 11:56:44 +08:00
案例 问答 文章 详情
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user