chinese-medicine/src/views/MeetingPreview/MeetingPreview.vue

<template>
  <div>
    <div class="fill-width">
      <a-card :bordered="false" title="会议记录预览">
        <div slot="extra">
          <a-button @click="$router.push('/meeting')" type="primary">返回</a-button>
        </div>
        <a-list bordered class="metting">
          <a-list-item>
            <span class="font-bold mb-2">会议时间：</span>
            {{ startTime }}至{{ endTime }}
          </a-list-item>
          <a-list-item>
            <span class="font-bold mb-2">会议地点：</span>
            {{ place }}
          </a-list-item>
          <a-list-item>
            <span class="font-bold mb-2">主持人：</span>
            {{ host }}
          </a-list-item>
          <a-list-item class="d-flex flex-column align-left">
            <span class="font-bold mb-2">参会人员：</span>
            <div class="fill-width">
              <span v-dompurify-html="participants"></span>
            </div>
          </a-list-item>
          <a-list-item class="d-flex flex-column align-left">
            <span class="font-bold mb-2">研讨内容：</span>
            <div class="fill-width">
              <span v-dompurify-html="content"></span>
            </div>
          </a-list-item>
          <a-list-item class="d-flex flex-column align-left">
            <span class="font-bold mb-2">会议纪要：</span>
            <div class="fill-width">
              <span v-dompurify-html="meetingMinutes"></span>
            </div>
          </a-list-item>
        </a-list>
      </a-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MeetingPreview',
  data() {
    return {
      startTime: '2021-01-29 08:00',
      endTime: '2021-01-29 10:00',
      place: 'ccsens', // 会议地点
      host: '武慧娟', // 主持人
      participants: `<div>张野，后台工程师</div>
            <div>王臣伟，后台工程师</div>
            <div>宋瑞芳，前端工程师</div>
            <div>张斌，前端工程师</div>`, // 参会人员
      content: '中医药课题数据库系统的开发', // 研讨内容
      meetingMinutes: '中医药课题数据库系统的开发分工及进度', // 会议纪要
    };
  },

  methods: {},
};
</script>

<style lang="stylus" scoped>
.metting {
  width: 80%;
  margin: 30px 10%;
  // font-size: 16px;
}

.metting >>> .ant-list-item {
  padding-left: 16px;
  padding-right: 16px;
}
</style>