.statusBox { width: 100%; .statusHeader { display: flex; } .statusContent { width: 100%; margin: 20px 0; border: 1px solid #ececec; border-bottom: none; .statusItem { display: flex; justify-content: space-between; padding: 20px; border-bottom: 1px solid #ececec; .statusLeft { display: flex; .statusImg { width: 32px; height: 32px; margin: 15px 20px 0 0; } .statusContext { .statusTitle { color: rgba(0, 0, 0, 0.8); font-weight: 700; font-size: 18px; } .statusDesc { color: rgba(0, 0, 0, 0.65); font-size: 14px; } .info { margin-top: 10px; color: #646464; font-size: 14px; .infoItem { width: 100%; } } } } .statusRight { margin-top: 10px; font-weight: 700; font-size: 18px; } } } } .loading { animation: loading 2s linear infinite; } @keyframes loading { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } .alert { height: 40px; padding-left: 10px; color: rgba(0, 0, 0, 0.55); line-height: 40px; background-color: #f6f6f6; }