zfsafe/web/main/static/resources/css/node_tree.css

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