87 lines
4.3 KiB
CSS
87 lines
4.3 KiB
CSS
/* drag 模块样式 */
|
|
.drag-layout { display: flex; height: calc(100vh - 60px); width: 100%; }
|
|
.drag-panel { border: 1px solid #e0e6ed; background: #fff; overflow-y: auto; }
|
|
.drag-panel-left { width: 220px; flex: none; }
|
|
.drag-panel-right { width: 300px; flex: none; }
|
|
.drag-canvas-area {
|
|
flex: 1; position: relative; overflow: hidden;
|
|
background: #f4f6f9 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path d='M 20 0 L 0 0 0 20' fill='none' stroke='%23e3e8ef' stroke-width='1'/></svg>");
|
|
}
|
|
.drag-stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
|
|
|
|
.drag-toolbar {
|
|
display: flex; align-items: center; gap: 8px; padding: 8px 12px;
|
|
background: #fff; border-bottom: 1px solid #e0e6ed;
|
|
}
|
|
.drag-toolbar input { padding: 5px 8px; border: 1px solid #d0d7e2; border-radius: 4px; width: 220px; }
|
|
.drag-btn {
|
|
padding: 6px 14px; border: 1px solid #c9d3e0; border-radius: 4px; background: #fff;
|
|
cursor: pointer; font-size: 13px;
|
|
}
|
|
.drag-btn:hover { background: #f0f4fa; }
|
|
.drag-btn-primary { background: #4a90d9; border-color: #4a90d9; color: #fff; }
|
|
.drag-btn-primary:hover { background: #3a7fc4; }
|
|
.drag-btn-success { background: #4caf50; border-color: #4caf50; color: #fff; }
|
|
.drag-btn-danger { background: #e05050; border-color: #e05050; color: #fff; }
|
|
|
|
.drag-cat { margin-bottom: 6px; }
|
|
.drag-cat-title {
|
|
padding: 6px 10px; font-weight: 600; font-size: 13px; border-left: 4px solid #999;
|
|
background: #fafbfc;
|
|
}
|
|
.drag-cat-blocks { padding: 4px; }
|
|
.drag-block-item {
|
|
display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin: 3px 0;
|
|
border: 1px solid #dde4ec; border-radius: 4px; cursor: grab; background: #fff; font-size: 13px;
|
|
}
|
|
.drag-block-item:hover { border-color: #4a90d9; background: #f0f6fd; }
|
|
.drag-block-item i { width: 16px; color: #4a90d9; }
|
|
|
|
.drag-block {
|
|
position: absolute; min-width: 140px; max-width: 200px; background: #fff;
|
|
border: 1px solid #d0d7e2; border-left: 4px solid #666; border-radius: 6px;
|
|
box-shadow: 0 2px 6px rgba(30, 50, 80, .12); cursor: move; z-index: 2; user-select: none;
|
|
}
|
|
.drag-block.selected { border-color: #4a90d9; box-shadow: 0 0 0 2px rgba(74, 144, 217, .35); }
|
|
.drag-block-head {
|
|
padding: 5px 8px; font-size: 12px; font-weight: 600; color: #333;
|
|
border-bottom: 1px solid #eef1f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
.drag-block-body { padding: 4px 8px; font-size: 11px; color: #667; }
|
|
.drag-param { display: flex; justify-content: space-between; gap: 6px; margin: 2px 0; }
|
|
.drag-param span { color: #889; flex: none; }
|
|
.drag-param b { color: #334; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.drag-ports { position: relative; height: 0; }
|
|
.drag-port {
|
|
position: absolute; width: 12px; height: 12px; border-radius: 50%;
|
|
background: #fff; border: 2px solid #7c8aa0; z-index: 5;
|
|
}
|
|
.drag-port:hover { background: #4a90d9; border-color: #4a90d9; }
|
|
.drag-port-in { left: -7px; top: 0; }
|
|
.drag-out-ports { position: absolute; right: -7px; top: 0; display: flex; gap: 2px; }
|
|
.drag-port-out { position: static; }
|
|
|
|
.drag-param-panel { padding: 10px; }
|
|
.drag-param-empty { color: #99a; font-size: 13px; padding: 20px 10px; text-align: center; }
|
|
.drag-param-title { font-weight: 600; font-size: 14px; margin-bottom: 10px; color: #333; }
|
|
.drag-param-desc { display: block; font-weight: 400; font-size: 11px; color: #99a; margin-top: 4px; }
|
|
.drag-param-form { margin-top: 10px; }
|
|
.drag-param-row { margin-bottom: 10px; }
|
|
.drag-param-row label { display: block; font-size: 12px; color: #556; margin-bottom: 4px; }
|
|
.drag-param-row input, .drag-param-row select {
|
|
width: 100%; padding: 6px 8px; border: 1px solid #d0d7e2; border-radius: 4px; box-sizing: border-box; font-size: 13px;
|
|
}
|
|
.drag-param-form .drag-btn { width: 100%; margin-top: 6px; }
|
|
|
|
.drag-result { padding: 10px; font-size: 13px; }
|
|
.drag-err { color: #c0392b; font-weight: 600; margin-bottom: 6px; }
|
|
.drag-ok { color: #27ae60; font-weight: 600; }
|
|
.drag-result ul { margin: 0; padding-left: 18px; color: #555; }
|
|
.drag-result li { margin: 3px 0; }
|
|
.drag-code {
|
|
background: #26303d; color: #c8e6c9; padding: 12px; border-radius: 6px;
|
|
font-family: 'Courier New', monospace; font-size: 12px; overflow: auto; white-space: pre;
|
|
max-height: 300px;
|
|
}
|
|
.drag-section-title { padding: 8px 10px; font-weight: 600; font-size: 12px; background: #f0f4fa; border-bottom: 1px solid #e0e6ed; }
|