<template>
|
<div class="clap_detail">
|
<div class="head">
|
<div>
|
<div class="title">基层公开详情</div>
|
</div>
|
<el-button @click="$router.go(-1)" size="medium" type="primary"
|
>返回</el-button
|
>
|
</div>
|
<v-tool-scroll ids="clap-detail-scroll" class="content">
|
<div class="fm w_row clearfix">
|
<!-- <p class="w_col_8">事件主键：{{detail.id}}</p> -->
|
<p class="w_col_8">标题：{{ os.title }}</p>
|
<p class="w_col_8">发布时间：{{ os.publishAt }}</p>
|
<p class="w_col_8"></p>
|
<p class="w_col_8">分类：{{ os.typeName }}</p>
|
<p class="w_col_8"></p>
|
<p class="w_col_8"></p>
|
<p class="w_col_8">区域：{{ os.communityName }}</p>
|
|
<p class="w_col_24">详情：</p>
|
<section class="w_col_24">
|
<div class="quill-editor">
|
<div class="ql-container ql-snow">
|
<div class="ql-editor" v-html="os.content"></div>
|
</div>
|
</div>
|
</section>
|
</div>
|
</v-tool-scroll>
|
<div class="foot">
|
<!-- <el-button-->
|
<!-- size="small"-->
|
<!-- @click="$router.go(-1)"-->
|
<!-- >返回</el-button>-->
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import "quill/dist/quill.core.css";
|
import "../../../components/editor/quill.snow.css";
|
// import "quill/dist/quill.snow.css";
|
import "quill/dist/quill.bubble.css";
|
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
id: "",
|
os: {
|
title: "",
|
coverMode: "",
|
typeName: "",
|
isTopping: "",
|
publishAt: "",
|
content: "",
|
cover: "",
|
communityName: "",
|
jumpUrl: "",
|
jumpType: ""
|
}
|
};
|
},
|
watch: {},
|
methods: {
|
getDetail() {
|
if (this.id) {
|
this.$api.get("communityactivity/detaildynamic", { id: this.id }, e => {
|
this.os.title = e.title;
|
this.os.coverMode = e.coverMode;
|
this.os.typeName = e.typeName || "";
|
this.os.isTopping = e.isTopping;
|
this.os.publishAt = e.publishAt;
|
this.os.content = e.content;
|
this.os.cover = e.cover;
|
this.os.communityName = e.communityName;
|
this.os.jumpUrl = e.jumpUrl;
|
this.os.jumpType = e.jumpType;
|
// this.checked1 =
|
// Date.now() < (e.publishAt ? new Date(e.publishAt).getTime() : 0);
|
// this.checked1 =
|
});
|
}
|
}
|
},
|
mounted() {
|
this.id = this.$route.query.id;
|
this.getDetail();
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.clap_detail {
|
.head {
|
font-size: 18px;
|
height: 40px;
|
line-height: 40px;
|
font-weight: bold;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
.head > div:nth-child(1) {
|
display: flex;
|
align-items: center;
|
}
|
.tag {
|
width: 60px;
|
text-align: center;
|
background: rgb(236, 128, 141);
|
border-radius: 3px;
|
height: 24px;
|
line-height: 24px;
|
vertical-align: middle;
|
color: #fff;
|
font-size: 13px;
|
font-weight: 400;
|
margin-left: 15px;
|
}
|
.content {
|
height: calc(~"100% - 90px");
|
}
|
.foot {
|
margin-top: 5px;
|
}
|
.fm {
|
p {
|
font-size: 14px;
|
line-height: 22px;
|
color: #000;
|
padding: 8px 0;
|
min-height: 38px;
|
}
|
section {
|
padding: 8px 0;
|
display: flex;
|
flex-wrap: wrap;
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
margin: 5px;
|
background-color: #eee;
|
display: block;
|
border-radius: 3px;
|
}
|
}
|
section.image {
|
span {
|
width: 175px;
|
height: 155px;
|
overflow: hidden;
|
display: inline-block;
|
}
|
}
|
}
|
.feedback-box {
|
width: 100%;
|
display: flex;
|
margin-bottom: 20px;
|
.label {
|
width: 130px;
|
padding-top: 17px;
|
font-size: 14px;
|
}
|
.feedback-r {
|
flex: 1;
|
|
.feedback-list {
|
width: 500px;
|
.list {
|
margin-top: 10px;
|
}
|
.title-custom {
|
line-height: 20px;
|
font-size: 14px;
|
}
|
.image-list {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
img {
|
margin: 5px;
|
width: 50px;
|
height: 50px;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
