增加尖峰平谷找平功能,修改消息提示
This commit is contained in:
@@ -1106,6 +1106,118 @@ color: #666;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ============== Toast 消息提示 ============== */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
pointer-events: none;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
border-left: 4px solid #909399;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
pointer-events: auto;
|
||||
animation: toast-slide-in 0.3s ease;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.toast.toast-success {
|
||||
border-left-color: #67c23a;
|
||||
background: #f0f9eb;
|
||||
}
|
||||
|
||||
.toast.toast-error {
|
||||
border-left-color: #f56c6c;
|
||||
background: #fef0f0;
|
||||
}
|
||||
|
||||
.toast.toast-warning {
|
||||
border-left-color: #e6a23c;
|
||||
background: #fdf6ec;
|
||||
}
|
||||
|
||||
.toast.toast-info {
|
||||
border-left-color: #409eff;
|
||||
background: #ecf5ff;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toast.toast-success .toast-icon { color: #67c23a; }
|
||||
.toast.toast-error .toast-icon { color: #f56c6c; }
|
||||
.toast.toast-warning .toast-icon { color: #e6a23c; }
|
||||
.toast.toast-info .toast-icon { color: #409eff; }
|
||||
|
||||
.toast-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #c0c4cc;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.toast-close:hover {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.toast.toast-fade-out {
|
||||
animation: toast-slide-out 0.3s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes toast-slide-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes toast-slide-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.generate-item.running .generate-item-status {
|
||||
color: #17a2b8;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user