You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
1.7 KiB
104 lines
1.7 KiB
/**
|
|
* 审批通知样式
|
|
* 优化 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;
|
|
}
|
|
}
|