记录使用element Notification 通知窗

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

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

              that.$notify({

                // duration: 0,

                offset: 50,

                position: 'top-right',

                message: `

${wtypeStateList[data.mesRecord.wtypeState]} ${data.mesRecord.wname} ${data.mesRecord.wtypeName} ${data.mesRecord.lastTime}

`,

                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;

    }

  }

}

最终效果