<template>
|
<div class="policy_detail">
|
<v-header title="详情"></v-header>
|
<v-tool-scroll ids="police-detail-scroll" class="content">
|
<p class="h2">标题：{{ detail.title }}</p>
|
<div class="w_row clearfix">
|
<p class="h2 w_col_8">阅览量：{{ detail.readingVolume }}人</p>
|
<p class="h2 w_col_8">发布人：{{ detail.createByName }}</p>
|
</div>
|
<p class="h2">发布时间：{{ detail.publishAt }}</p>
|
<!-- <section v-if="detail.cover !== null && detail.cover !== ''">
|
<p class="label">封面：</p>
|
<article>
|
<img :src="detail.cover" @click="onScaleImage" alt="" class="logo" />
|
</article>
|
</section> -->
|
<div class="fl-fw mr-t-10" v-if="detail.cover !== null && detail.cover !== ''">
|
<div class="label-style">封面：</div>
|
<span class="cover-img">
|
<img :src="detail.cover" @click="onScaleImage" alt="" class="logo-img" />
|
</span>
|
</div>
|
<section v-if="detail.jumpType == 2">
|
<p class="label">活动内容：</p>
|
<article>
|
<div class="ql-snow">
|
<div class="ql-editor">
|
<div v-html="detail.content"></div>
|
</div>
|
</div>
|
</article>
|
</section>
|
<section v-if="detail.jumpType == 1">
|
<p class="label">跳转链接：</p>
|
<article>
|
<a :href="detail.jumpUrl" target="_blank">{{detail.jumpUrl}}</a>
|
</article>
|
</section>
|
</v-tool-scroll>
|
<div class="foot">
|
<el-button size="small" @click="$router.go(-1)">返回</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
aid: { type: [String, Number], default: 0 },
|
type: { type: String, default: "2" },
|
},
|
components: {},
|
data() {
|
return {
|
detail: {},
|
};
|
},
|
watch: {
|
aid(n) {
|
if (n) {
|
this.init(n);
|
}
|
},
|
},
|
methods: {
|
// 查看大图
|
onScaleImage() {
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
title: this.detail.title,
|
pic: this.detail.cover,
|
tool: true,
|
});
|
},
|
init(id) {
|
this.$api.get("communitypartybuilding/infodynamic", { id }, (e) => {
|
this.detail = demo.copy(e);
|
});
|
},
|
},
|
mounted() {},
|
};
|
</script>
|
<style lang='less' scoped>
|
.policy_detail {
|
font-size: 14px;
|
overflow-y: auto;
|
.cover-img {
|
width: 150px;
|
height: 100px;
|
overflow: hidden;
|
img {
|
width: 100%;
|
}
|
}
|
.img-cover {
|
width: 150px !important;
|
height: 80px;
|
overflow: hidden;
|
img {
|
width: 100%;
|
}
|
}
|
.content {
|
height: calc(~"100% - 90px");
|
.h2,
|
.label {
|
height: 35px;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
line-height: 35px;
|
}
|
section {
|
display: flex;
|
margin: 5px 0;
|
.label {
|
width: 70px;
|
}
|
.logo {
|
max-width: 40%;
|
height: auto;
|
display: block;
|
border-radius: 8px;
|
}
|
article {
|
width: calc(~"100% - 70px");
|
line-height: 28px;
|
padding-top: 5px;
|
}
|
}
|
}
|
.foot {
|
margin-top: 4px;
|
}
|
}
|
|
.label-style {
|
height: 35px;
|
}
|
</style>
|
