.step-card { width: calc((100% - 28.5px * 2) / 3); margin: 0 0 36px; padding-bottom: 40px; min-width: 580px; @media screen and (max-width: 1400px) { min-width: 640px; } .step-card-title { line-height: 24px; font-size: 18px; font-family: Proxima Nova, sans-serif; color: #000; } .card-sub-title { font-size: 18px; font-family: Proxima Nova, sans-serif; font-weight: bold; color: #000; margin-bottom: 14px; } :deep(.el-form-item__label) { font-size: 14px; font-family: Proxima Nova, sans-serif; color: #000; } .form-item-label { font-size: 14px; font-family: Proxima Nova, sans-serif; color: #000; margin: 6px 0 8px; } .divider { height: 2px; border-top: 1px dashed #eee; margin-bottom: 4px; } $commonColor: #898989; $activeColor: #409eff; .custom-checkbox-wrap { min-height: 40px; display: flex; align-content: flex-start; align-items: center; flex-wrap: wrap; } .custom-checkbox { cursor: pointer; height: 32px; line-height: 32px; display: inline-flex; color: $commonColor; padding: 0 16px; border: 1px solid $commonColor; border-radius: 2px; margin-bottom: 6px; margin-right: 8px; &.active { color: $activeColor; border-color: $activeColor; } &.disable { border-style: dashed; border-color: $commonColor; color: $commonColor; background-color: #dbdbdb; } } }