.floating-window { position: fixed; top: 8%; /* 距离页面顶部 8% */ right: 1%; /* 距离页面右边 1%,固定在右侧 */ width: 10vw; /* 根据视窗宽度动态调整 */ height: 8vh; /* 根据视窗高度动态调整 */ max-width: 300px; /* 最大宽度 */ max-height: 200px; /* 最大高度 */ min-width: 100px; /* 最小宽度 */ min-height: 50px; /* 最小高度 */ background-color: white; border: 1px solid #ccc; border-radius: 5px; z-index: 999; } .floating-header { background-color: #f0f0f0; cursor: move; height: 10%; /* 让头部高度为浮动窗口高度的10% */ text-align: center; line-height: 20px; } .draggable { display: inline-block; width: 30px; height: 100%; /* 占满头部的高度 */ text-align: center; font-size: 0.8vw; /* 字体大小根据窗口宽度变化 */ font-weight: bold; cursor: pointer; } .entry-content { padding-top: 5%; /* 留出顶部空间,防止内容与头部重叠 */ height: 95%; /* 占剩余空间 */ overflow-y: auto; font-size: 0.8vw; } .entry { display: flex; align-items: center; height: 33%; /* 每个条目的高度占浮动窗口高度的15% */ border-bottom: 1px solid #e0e0e0; padding-left: 2px; white-space: nowrap; overflow: hidden; } .status-dot { text-align: right; /* 文本右对齐 */ width: 0.5vw; /* 根据视窗宽度动态调整 */ height: 0.5vw; /* 根据视窗宽度动态调整 */ border-radius: 50%; margin-right: 5px; background-color: blue; /* 默认蓝色 */ } .node-name { max-width: 30%; flex: 3; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .status-data { flex: 6; color: #666; overflow: hidden; white-space: nowrap; }