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">
      <a-row style="width: 100%" justify="start">
        <div style="width: 100%">
          <span v-if="item.isRead" style="color: rgba(153,153,153,0.58);">【已阅】</span>
          <span v-else>【待阅】</span>

          <span class="msg-warn" v-if="item.type == 1" style="color: #2ea8e6"
            >①</span
          >
          <span
            class="msg-warn"
            v-else-if="item.type == 2"
            style="color: #39bae6"
            >②</span
          >
          <span
            class="msg-warn"
            v-else-if="item.type == 3"
            style="color: #7ed4e6"
            >③</span
          >
          <span class="msg-warn" v-else></span>

          <span :class="{isReadClass:item.isRead===true}" class="msg-content-span">{{ item.msg }}</span>
        </div>
      </a-row>
    </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;
    &.isReadClass{
      color: rgba(153,153,153,0.58);
    }
  }
}
</style>