.dashboard-container { width: 20rem; height: 10rem; margin-top: -3rem; margin-bottom: -2rem; } .sys-status-title { font-size: 18px; font-weight: 600; color: #94DDF3; text-align: center; } .ag-theme-datav { --ag-border-color: #74FAFB; --ag-foreground-color: #74FAFB; --ag-background-color: #0A1632; --ag-header-foreground-color: #74FAFB; --ag-header-background-color: #0A1632; --ag-odd-row-background-color: #0A1632; --ag-header-column-resize-handle-color: rgb(126 46 132); --ag-font-size: 17px; --ag-font-family: monospace; height: 5rem; } .centered-element { display: flex; align-items: center; justify-content: center; height: 100%; } .status-container { display: flex; align-items: center; padding: 0.5rem; } .status-circle { width: 18px; height: 18px; border-radius: 50%; &.red { background-color: red; } &.green { background-color: green; } } .progress-container { display: flex; color: white; .status-text { width: 8rem; margin-left: 6px; /* 调整文字与圆形之间的间距 */ font-size: 16px; font-weight: 600; color: #74FAFB; } .status-ext-text { margin-top: 3px; /* 将文本转换为行内块元素 */ font-size: 12px; } } .progress-display { color: white; text-align: right; } .statistic-item-container { display: flex; padding: 1rem 0; color: white; } .white-color-theme { color: #74FAFB; }