73 lines
1.2 KiB
CSS
73 lines
1.2 KiB
CSS
/* 提示框容器：固定在右上角 */
|
|
#notificationsContainer {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
max-width: 300px; /* 最大宽度 */
|
|
z-index: 9999;
|
|
}
|
|
|
|
/* 每个提示框样式 */
|
|
.notification {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
width: 100%;
|
|
opacity: 1;
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
/* 提示框的不同颜色 */
|
|
.success {
|
|
background-color: #e7f9e7;
|
|
color: #2d6a3b;
|
|
border-left: 5px solid #2d6a3b;
|
|
}
|
|
|
|
.notification.success .icon {
|
|
background-color: #2d6a3b;
|
|
}
|
|
|
|
.info {
|
|
background-color: #e9ecef;
|
|
color: #007bff;
|
|
border-left: 5px solid #007bff;
|
|
}
|
|
|
|
.notification.info .icon {
|
|
background-color: #007bff;
|
|
}
|
|
|
|
.warning {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
border-left: 5px solid #856404;
|
|
}
|
|
|
|
.notification.warning .icon {
|
|
background-color: #856404;
|
|
}
|
|
|
|
.error {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
border-left: 5px solid #721c24;
|
|
}
|
|
|
|
.notification.error .icon {
|
|
background-color: #721c24;
|
|
}
|
|
|
|
/* 圆形图标 */
|
|
.icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
}
|