web-website/src/layout/government/message.vue

<template>
  <div id="message">
    <el-row>
      <el-col :span="24" class="info">
        <el-col :span="24" class="topInfo">
          <span>{{ columnTitle }}</span>
        </el-col>
        <el-col :span="24" class="infoMess">
          <el-col :span="24" class="title">
            {{ governmentDetail.title }}
          </el-col>
          <el-col :span="24" class="infoDate">
            <p>
              <span>发布人：{{ governmentDetail.publish }}</span>
              <span>来源：{{ governmentDetail.orgin }}</span>
              <span
                >发布时间：
                {{ governmentDetail.meta && governmentDetail.meta.createdAt ? new Date(governmentDetail.meta.createdAt).toLocaleDateString() : '' || '' }}</span
              >
            </p>
          </el-col>
          <el-col v-if="governmentDetail.picture" class="image">
            <el-image style="width:50%" :src="governmentDetail.picture"></el-image>
          </el-col>
          <el-col :span="24" class="content">
            <p v-html="governmentDetail.content"></p>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'message',
  props: {
    columnTitle: null,
    governmentDetail: null,
  },
  components: {},
  data: () => ({}),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.info {
  padding: 0 20px;
}
.topInfo {
  height: 60px;
  line-height: 60px;
  font-size: 22px;
}
.infoMess .title {
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  margin: 0 0 20px 0;
}
.infoDate {
  height: 36px;
  line-height: 36px;
}
.infoDate p {
  width: 700px;
  background: #eeeeee;
  margin: 0 105px;
}
.infoDate p span {
  font-size: 14px;
  color: #000;
  padding: 0 0 0 80px;
}
.infoMess .image {
  text-align: center;
  margin: 20px 0 0 0;
}
.content {
  padding: 0px 0 20px 0;
}
</style>