/* 左侧树容器:固定高度,允许滚动,根节点居中 */ .node-tree-area { width: 100%; height: 100%; /* 示例高度,根据需求调整 */ border: 1px solid #ddd; overflow: hidden; /* 超出时出现滚动条 */ background-color: #f8f9fa; text-align: center; /* 内部 inline-block 居中 */ position: relative; } /* 树节点内容区域,不包含刷新按钮 */ .tree-content { height: 100%; overflow: auto; padding-top: 5px; /* 留出顶部刷新按钮位置 */ } /* 顶部刷新按钮 */ .refresh-container { position: absolute; top: 5px; left: 5px; z-index: 100; } .tree-refresh { position: absolute; top: 5px; left: 5px; z-index: 100; cursor: pointer; border: none; background-color: #007bff; /* 蓝色背景 */ color: #fff; /* 白色文字 */ font-size: 20px; padding: 5px 10px; border-radius: 4px; } .tree-refresh:hover { background-color: #0056b3; /* 悬停时深蓝 */ } /* 让树的 ul 使用 inline-block 显示,便于根节点居中 */ .tree-root-ul { display: inline-block; text-align: left; /* 子节点左对齐 */ margin: 20px; padding:0; } .tree-root-ul ul { margin-left: 20px; /* 子节点缩进 */ padding-left: 20px; border-left: 1px dashed #ccc; /* 增加分隔线效果 */ } /* 节点容器:增加立体效果 */ .node-container { display: inline-flex; align-items: center; } /* 切换图标 */ .toggle-icon { margin-right: 5px; font-weight: bold; cursor: pointer; } /* 每个节点样式 */ .tree-node { display: inline-block; padding: 6px 10px; margin: 3px 0; border: 1px solid transparent; border-radius: 4px; background-color: #fff; cursor: pointer; transition: all 0.2s ease; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); } .tree-node:hover { background-color: #e6f7ff; transform: translateY(-1px); } .tree-node.selected { border-color: #1890ff; background-color: #bae7ff; } /* 针对漏洞级别的样式 */ .tree-node.vul-low { border-color: #87d068; background-color: #f6ffed; } .tree-node.vul-medium { border-color: #faad14; background-color: #fff7e6; } .tree-node.vul-high { border-color: #ff4d4f; background-color: #fff1f0; } .tree-node.no-work { border-color: #151515; background-color: #c4c4c4; } /* 收缩/展开时隐藏子节点 ul */ .collapsed { display: none; } /* 右侧信息区域 */ .node-info-area { border: 1px solid #ddd; padding: 10px; min-height: 200px; } /* 按钮区域 */ .node-actions button { margin-right: 10px; margin-bottom: 10px; } /* 限制模态框对话框的最大高度(比如距离屏幕上下各留 20px) */ .modal-dialog { max-height: calc(100vh - 60px); /* 如果模态框尺寸需要自适应宽度,可以考虑设置 width: auto; */ } /* 限制模态框内容区域的最大高度并启用垂直滚动 */ .modal-content { max-height: calc(100vh - 60px); } /* 模态框主体区域启用滚动 */ .modal-body { overflow-y: auto; }