.main{ padding: 7px; padding-top: 87px; // 标题栏80px + 间距7px background-color: #F8F8F8; min-height: 100vh; .toptitle{ position: fixed; top: 0; left: 0; right: 0; width: 100%; background-color: #0052D8; display: flex; height: 80px; justify-content: center; align-items: center; z-index: 200; .toptitle_left{ padding-top: 20px; position: absolute; left: 10px; z-index: 1000; } .toptitle_title{ color: #fff; font-size: 14px; padding-top: 20px; } } .box{ padding: 10px; background-color: #fff; border-radius: 5px; margin-bottom: 10px; .top{ display: flex; justify-content: space-between; margin-bottom: 10px; .name{ font-size: 18px; color: #0052D8; font-weight: bold; } } .row{ display: flex; align-items: center; margin-bottom: 10px; .label{ color:#7A797A; margin-right: 10px; font-size: 16px; width: 90px; text-align: left; } .value{ color:#333; font-size: 16px; flex: 1; white-space: normal; word-break: break-all; } .multiline{ line-height: 22px; } } .divider{ border-bottom: 1px dashed #BCBCBC; margin-bottom: 10px; } } } .status-pill { padding: 6px 16px; border-radius: 999rpx; font-size: 12px; font-weight: 600; color: #fff; line-height: 1; } .status-running { background-color: #52C41A; } .status-repair { background-color: #FAAD14; } .status-stop { background-color: #C9C9C9; } .status-scrap { background-color: #FF4D4F; } .status-unknown { background-color: #999999; }