web-website/src/layout/shujulist/policyrightcont.vue

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

<script>
export default {
  name: 'policyrightcont',
  props: {
    columnTitle: null,
    policyInfo: 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>