.floating-window { position: fixed; top: 10%; /* 距离页面顶部 10% */ right: 5%; /* 距离页面右边 5%,固定在右侧 */ width: 10vw; /* 根据视窗宽度动态调整 */ height: 7vh; /* 根据视窗高度动态调整 */ 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; } .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: 1.2vw; /* 字体大小根据窗口宽度变化 */ font-weight: bold; cursor: pointer; } .content { padding-top: 10%; /* 留出顶部空间,防止内容与头部重叠 */ height: 90%; /* 占剩余空间 */ overflow-y: auto; } .entry { display: flex; align-items: center; height: 15%; /* 每个条目的高度占浮动窗口高度的15% */ border-bottom: 1px solid #e0e0e0; padding: 2px 5px; } .status-dot { width: 2vw; /* 根据视窗宽度动态调整 */ height: 2vw; /* 根据视窗宽度动态调整 */ border-radius: 50%; margin-right: 5px; background-color: blue; /* 默认蓝色 */ } .node-name { flex: 3; font-size: 2vw; /* 根据浮动窗口宽度调整字体大小 */ color: #333; } .status-data { flex: 6; font-size: 1.8vw; /* 根据浮动窗口宽度调整字体大小 */ color: #666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }