xujiecloud-vue/src/assets/scss/approval-notification.scss

/**
 * 审批通知样式
 * 优化 Element UI Notification 组件的显示效果
 */

/* 审批通知容器 */
.el-notification.approval-notification {
  width: 380px;
  padding: 20px;
  border-left: 3px solid #E6A23C;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  &:hover {
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    transform: translateX(-5px);
    transition: all 0.3s ease;
  }

  /* 标题样式 */
  .el-notification__title {
    font-size: 16px;
    font-weight: bold;
    color: #E6A23C;
    margin-bottom: 10px;
  }

  /* 内容样式 */
  .el-notification__content {
    font-size: 14px;
    line-height: 1.8;
    color: #303133;

    p {
      margin: 5px 0;
    }

    strong {
      color: #303133;
      font-weight: 600;
    }
  }

  /* 关闭按钮 */
  .el-notification__closeBtn {
    color: #909399;
    font-size: 18px;

    &:hover {
      color: #E6A23C;
    }
  }
}

/* 新申请单通知 */
.el-notification.new-approval-notification {
  border-left-color: #409EFF;

  .el-notification__title {
    color: #409EFF;
  }
}

/* 汇总通知 */
.el-notification.summary-notification {
  border-left-color: #E6A23C;

  .el-notification__title {
    color: #E6A23C;
  }

  /* 数字高亮 */
  .count-highlight {
    color: #E6A23C;
    font-size: 18px;
    font-weight: bold;
    padding: 0 5px;
  }
}

/* 通知动画 */
@keyframes notification-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

.el-notification.shake-animation {
  animation: notification-shake 0.5s ease;
}

/* 响应式适配 */
@media screen and (max-width: 768px) {
  .el-notification.approval-notification {
    width: 320px;
    padding: 15px;
  }
}