记录使用element Notification 通知窗

const wtypeStateList = ['', '紧急', '重要', '一般', '故障恢复']

              const wtypeStateColorList = ['', '#FF026A', '#FFFF90', '#DEF4FF', '#58FA5B']

              that.$notify({

                // duration: 0,

                offset: 50,

                position: 'top-right',

                message: `<div class="notify-content" style="display: flex; justify-content: space-around;"><span style="color: ${wtypeStateColorList[data.mesRecord.wtypeState]};">${wtypeStateList[data.mesRecord.wtypeState]}</span> <span class="notify-content-span">${data.mesRecord.wname}</span> <span class="notify-content-span">${data.mesRecord.wtypeName}</span> <span class="notify-content-span">${data.mesRecord.lastTime}</span></div>`,

                dangerouslyUseHTMLString: true,

                customClass: 'websocket-notify'

              });

主要用css控制样式

.el-notification.websocket-notify {

  // top: 60px !important;

  right: 200px !important;

  box-shadow: none;

  border: none;

  min-width: 500px !important;

  height: 80px !important;

  // background: url(../notification-bg.png) no-repeat 0 0 !important;

  background: url('../../assets/new/tsqipao.png');

  background-size: 100% 100%;

  // background: url(../notification-bg.png) center center no-repeat !important;

  .el-notification__group {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    .notify-content span {

      padding: 0 5px;

      font-weight: 400;

      font-size: 16px;

    }

    .notify-content .notify-content-span {

      color: #DEF4FF;

    }

    .el-notification__closeBtn.el-icon-close {

      top: 50%;

      transform: translateY(-50%);

      right: 5%;

      color: #7BDEFE;

    }

  }

}

最终效果