160 lines
3.8 KiB
Vue
160 lines
3.8 KiB
Vue
<template>
|
||
<div class="hotDetail">
|
||
<ai-detail>
|
||
<template slot="title">
|
||
<ai-title title="热点话题详情" :isShowBack="true" :isShowBottomBorder="true"
|
||
@onBackClick="$emit('goBack')"></ai-title>
|
||
</template>
|
||
<template slot="content">
|
||
<ai-card title="标题信息">
|
||
<template slot="content">
|
||
<ai-wrapper label-width="70px" :columnsNumber="1">
|
||
<ai-info-item label="话题标题">{{detailObj.title}}</ai-info-item>
|
||
<ai-info-item label="关键字" v-if="detailObj.keyWords">
|
||
<el-tag
|
||
v-for="tag in detailObj.keyWords.split(',')"
|
||
:key="tag"
|
||
effect="plain">
|
||
{{tag}}
|
||
</el-tag>
|
||
</ai-info-item>
|
||
<ai-info-item label="封面图片">
|
||
<img :src="detailObj.thumbUrl" v-viewer
|
||
alt="">
|
||
</ai-info-item>
|
||
</ai-wrapper>
|
||
</template>
|
||
</ai-card>
|
||
<ai-card class="card" v-for="(item,index) in detailObj.contents" :key="index">
|
||
<template slot="title">{{item.question}}</template>
|
||
<template slot="right">话题来源：{{item.questionSource}}</template>
|
||
<template slot="content">
|
||
<div class="wrap">
|
||
<header>
|
||
<b>{{item.answerSource}}</b> 回复
|
||
</header>
|
||
<p>{{item.answer}}</p>
|
||
<div v-viewer>
|
||
<img :src="p.url"
|
||
v-for="(p,q) in item.files" :key="q" alt="">
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</ai-card>
|
||
</template>
|
||
</ai-detail>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Viewer from 'v-viewer' ;
|
||
import Vue from 'vue' ;
|
||
|
||
Vue.use(Viewer);
|
||
export default {
|
||
name: "hotDetail",
|
||
label: "热点详情",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function,
|
||
areaId: String,
|
||
detail: Object
|
||
},
|
||
data() {
|
||
return {
|
||
detailObj: {},
|
||
}
|
||
},
|
||
methods: {
|
||
getDetail() {
|
||
this.instance.post(`/app/apphotsubject/detail`, null, {
|
||
params: {id: this.detail.id}
|
||
}).then(res => {
|
||
if (res && res.data) {
|
||
this.detailObj = res.data
|
||
}
|
||
})
|
||
},
|
||
},
|
||
created() {
|
||
this.getDetail()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.hotDetail {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
|
||
.card {
|
||
:deep( .aibar ){
|
||
height: 94px !important;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
margin-bottom: 0px !important;
|
||
padding: 16px !important;
|
||
|
||
& > div {
|
||
line-height: 24px;
|
||
|
||
&:last-child {
|
||
font-size: 14px;
|
||
color: #888888;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
:deep( .ai-card__body ){
|
||
padding: 12px 20px 22px !important;
|
||
}
|
||
|
||
.wrap {
|
||
background-color: #F5F6F9;
|
||
box-sizing: border-box;
|
||
padding: 16px;
|
||
|
||
header {
|
||
height: 40px;
|
||
font-size: 16px;
|
||
color: #222222;
|
||
line-height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
|
||
b {
|
||
color: #2266FF;
|
||
}
|
||
}
|
||
|
||
p {
|
||
margin-top: 16px;
|
||
font-size: 16px;
|
||
color: #222222;
|
||
line-height: 32px;
|
||
text-indent: 2em;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep( .el-tag){
|
||
background: #F3F4F7;
|
||
border-radius: 2px;
|
||
color: #222222;
|
||
border: 1px solid #D0D4DC;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
img {
|
||
width: 160px;
|
||
height: 160px;
|
||
border-radius: 2px;
|
||
margin-top: 16px;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
</style>
|