dvcp_v2_wxcp_app/src/apps/AppPartyHistoryEducation/detail.vue

<template>
  <section class="home">
    <div class="page">
      <div class="header">
        <p class="title">{{info.title}}</p>
        <div class="info mar-b16"><span class="label">发布单位：</span><span class="value">{{info.organizationName}}</span></div>
        <div class="info">发布时间：{{info.publishDate || info.createDate}}</div>

      </div>
      <div class="content">
        <u-parse :html="info.content"></u-parse>
      </div>
      <AiTransSpeech :src="info.speech" v-if="info.speech"/>
    </div>
  </section>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "home",
  computed: {
    ...mapState(["user", "token"]),
  },
  data() {
    return {
      id: '',
      info: {},
      content: ''
    };
  },
  onLoad(options) {
    this.id = options.id
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.$http.post(`/app/apppartyhistory/queryDetailByIdWeChat?id=${this.id}`).then((res) => {
        if (res.code == 0) {
          if(res.data.publishDate) {
            res.data.publishDate = res.data.publishDate.substring(0, 10)
          }
          if(res.data.createDate) {
            res.data.createDate = res.data.createDate.substring(0, 10)
          }
          this.info = res.data
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "../../common/common.css";
.home {
  width: 100%;
  height: 100%;
}
.page {
  width: 100%;
  overflow-x: hidden;
  background-color: #fff;
  .header{
    width: 100%;
    padding: 24px 32px 32px;
    box-sizing: border-box;
    background: #D03A28;
    .title{
      width: 100%;
      font-size: 40px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFF;
      line-height: 64px;
      letter-spacing: 1px;
      word-break: break-all;
      margin-bottom: 16px;
    }
    .info{
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFF;
      line-height: 40px;
      .label{
        width: 140px;
      }
      .value{
        width: calc(100% - 140px);
        word-break: break-all;
      }
    }
    .mar-b16{
      margin-bottom: 16px;
    }
  }
  .content{
    padding: 32px;
  }
}
</style>