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.
134 lines
3.1 KiB
134 lines
3.1 KiB
/* 左侧树容器：固定高度，允许滚动，根节点居中 */
|
|
.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;
|
|
}
|
|
|