.audit-analysiss-search-content { display: flex; align-items: center; & > * { margin-right: 10px; } } .audit-analysiss-card-content { display: flex; margin: 40px 0 40px; .audit-analysiss-card-item { flex: 1; margin: 0 10px; background-color: #fafafa; border-radius: 6px; padding: 10px; font-size: 12px; &:first-child { margin-left: 0; } &:last-child { margin-right: 0; } .audit-analysiss-card-item-title { padding-left: 14px; position: relative; font-size: 16px; &:before { content: ''; position: absolute; width: 4px; height: 100%; top: 0; left: 0; border-radius: 10px; background-color: #1890ff; } } .audit-analysiss-card-item-rate { .audit-analysiss-card-item-rate-label { margin: 4px 0; display: flex; justify-content: space-between; align-items: end; & > span:last-child { color: #1890ff; font-size: 16px; } } } .audit-analysiss-card-item-number { display: flex; //justify-content: space-between; margin-top: 4px; .audit-analysiss-card-item-number-total, .audit-analysiss-card-item-number-count { display: flex; flex-direction: column; flex: 1; & > span:last-child { color: #1890ff; font-size: 20px; } } } &:nth-child(2) { .audit-analysiss-card-item-title:before { background-color: #52c41a; } .audit-analysiss-card-item-rate .audit-analysiss-card-item-rate-label > span:last-child { color: #52c41a !important; } } &:nth-child(3) { .audit-analysiss-card-item-title:before { background-color: #fa8c16; } .audit-analysiss-card-item-rate .audit-analysiss-card-item-rate-label > span:last-child { color: #fa8c16 !important; } } &:nth-child(5) { .audit-analysiss-card-item-title:before { background-color: #722ed1; } .audit-analysiss-card-item-rate .audit-analysiss-card-item-rate-label > span:last-child { color: #722ed1 !important; } } } }