yxk-electronic-archives/src/views/system/notifyManage/module/detail.vue

<template>
  <!-- 选择发送对象 -->
  <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="detailVisible" title="通知详情" @close="handleClose">
    <span class="dialog-right-top" />
    <span class="dialog-left-bottom" />
    <div class="setting-dialog">
      <span class="message-type-title type-title1">系统通知</span>
      <div class="notify-item">
        <p>标题：{{ rowData.noticeTitle }}</p>
      </div>
      <div class="notify-item">
        <span class="notify-title">内容：</span>
        <div class="notify-cont">
          {{ rowData.noticeContext }}
        </div>
      </div>
      <div class="notify-item">
        <span class="notify-title">发送对象：</span>
        <div class="notify-cont">
          <p v-if="rowData.noticeDevices && rowData.noticeDevices !== ''">{{ rowData.noticeDevices }}</p>
          <p v-if="rowData.noticeUsers && rowData.noticeUsers !== ''">{{ rowData.noticeUsers }}</p>
        </div>
      </div>
      <div class="notify-create">
        <span>创建人：{{ rowData.createBy }}</span>
        <span>创建时间：{{ rowData.createTime | parseTime }}</span>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="detailVisible=false">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      detailVisible: false,
      rowData: {}
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleClose() {
      this.detailVisible = false
    }
  }
}
</script>
<style lang='scss' scoped>
::v-deep .el-dialog .el-dialog__body{
  padding: 20px 0;
}
.dialog-footer, .el-message-box__btns{
  margin-top: 20px;
}
.message-type-title{
  display: block;
  padding-left: 33px;
  height: 33px;
  line-height: 33px;
  margin-bottom: 15px;
  &.type-title1{
    background: url('~@/assets/images/icon/xttz.png') no-repeat left center;
    background-size: 23px 23px;
  }
  &.type-title2{
    background: url('~@/assets/images/icon/lcdd.png') no-repeat left center;
    background-size: 23px 23px;
  }
  &.type-title3{
    background: url('~@/assets/images/icon/lcwc.png') no-repeat left center;
    background-size: 23px 23px;
  }
  &.type-title4{
    background: url('~@/assets/images/icon/fqdq.png') no-repeat left center;
    background-size: 23px 23px;
  }
}

.notify-item{
  margin-bottom: 10px;
  color: #0C0E1E;
  .notify-title{
    line-height: 30px;
  }
  .notify-cont{
    padding: 10px;
    height: 120px;
    overflow: hidden;
    overflow-y: scroll;
    border-radius: 3px;
    color: #545B65;
    border: 1px solid #E6E8ED;
  }
}

.notify-create{
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 0 10px;
  font-size: 12px;
  color: #A6ADB6;
}
</style>