iot-front-ui/src/components/dashboard/message/dashboardMsgList.vue

<script>
export default {
  data() {
    return {
      contentWidth: '60%'
    }
  },
  props: {
    data: Array
  },
  mounted() {
    let width = this.$refs.dashboardMsgList.$el.clientWidth
    this.contentWidth = width * 0.7 + 'px'
  },
  methods: {}
}
</script>

<template>
  <a-list class="dashboardMsgList" item-layout="horizontal" :data-source="data" :split="false" ref="dashboardMsgList">
    <a-list-item slot="renderItem" slot-scope="item, index">
      <a-row style="width: 100%" justify="start">
        <div style="width: 100%">
          <span v-if="item.isRead">【已阅】</span>
          <span v-else>【待阅】</span>

          <span class="msg-warn" v-if="item.type==1" style="color: #5495F1">①</span>
          <span class="msg-warn" v-else-if="item.type==2" style="color: #3BC5B0">②</span>
          <span class="msg-warn" v-else-if="item.type==3" style="color: #F1934E">③</span>
          <span class="msg-warn" v-else ></span>

          <span class="msg-content-span" >{{ item.msg }}</span>
        </div>

        <!--<a-col :span="6">-->
        <!--  <span v-if="item.isRead">【已阅】</span>-->
        <!--  <span v-else>【待阅】</span>-->

        <!--  <span v-if="item.type==1" style="color: #5495F1">①</span>-->
        <!--  <span v-else-if="item.type==2" style="color: #3BC5B0">②</span>-->
        <!--  <span v-else-if="item.type==3" style="color: #F1934E">③</span>-->
        <!--</a-col>-->
        <!--&lt;!&ndash;<a-col :span="1">&ndash;&gt;-->
        <!--&lt;!&ndash;  <span v-if="item.type==1" style="color: #5495F1">①</span>&ndash;&gt;-->
        <!--&lt;!&ndash;  <span v-else-if="item.type==2" style="color: #3BC5B0">②</span>&ndash;&gt;-->
        <!--&lt;!&ndash;  <span v-else-if="item.type==3" style="color: #F1934E">③</span>&ndash;&gt;-->
        <!--&lt;!&ndash;</a-col>&ndash;&gt;-->
        <!--<a-col :span="17">-->
        <!--  <div class="msg-content" :style="{width: contentWidth}">-->

        <!--</div>-->
        <!--</a-col>-->
      </a-row>
      <!--<div class="msg-read">-->
      <!--  -->
      <!--</div>-->
      <!--<div class="msg-type">-->
      <!--  <span v-if="item.type==1" style="color: #5495F1">①</span>-->
      <!--  <span v-else-if="item.type==2" style="color: #3BC5B0">②</span>-->
      <!--  <span v-else-if="item.type==3" style="color: #F1934E">③</span>-->
      <!--</div>-->

    </a-list-item>
  </a-list>
</template>

<style lang="less" scoped>
.dashboardMsgList {
  .ant-list-item {
    padding: 0 !important;
    line-height: 30px;
    width: 100%;
  }

  .msg-read {
    display: inline-block;
    width: 120px !important;
    flex-direction: row;
  }

  .msg-type {
    display: inline-block;
    width: 20px;
    flex-direction: row;
    text-align: left;
  }

  .msg-warn {
    display: inline-block;
    width: 20px;
    text-align: left;
  }

  .msg-content-span {
    display: inline-block;
    width: 70%;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>