:host { ::ng-deep { page-grid { background-color: #f0f3f7; div.container { width: 80%; margin: 0 auto; padding: 30px 1rem 1rem; } } .ant-steps-item-process .ant-steps-item-icon { background-color: #3370ff; border-color: #3370ff; } .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-icon { background: #3370ff; } .ant-steps-dot .ant-steps-item-icon, .ant-steps-dot.ant-steps-small .ant-steps-item-icon { width: 32px; height: 32px; margin-left: 55px; line-height: 32px; border: 1px solid rgba(0, 0, 0, 0.25); } // 文本 .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon { color: #000; } // 连接线 .ant-steps-dot .ant-steps-item-tail, .ant-steps-dot.ant-steps-small .ant-steps-item-tail { top: 12px; margin: 0 0 0 90px; } .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-tail::after { background-color: rgba(0, 0, 0, 0.25); } .ant-steps-dot .ant-steps-item-process .ant-steps-item-icon, .ant-steps-dot.ant-steps-small .ant-steps-item-process .ant-steps-item-icon { width: 32px; height: 32px; line-height: 32px; } .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-tail::after { background-color: rgba(0, 0, 0, 0.25); } .ant-steps-dot .ant-steps-item-tail::after, .ant-steps-dot.ant-steps-small .ant-steps-item-tail::after { width: calc(100% - 62px); height: 1.5px; margin-left: 12px; } } } .success-card { text-align: center; .card-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: auto; background-color: #52c41a; border-radius: 50%; } .card-title { margin: 14px 0 0; font-weight: bold; font-size: 16px; text-align: center; } .card-descr { margin: 8px 0 0; font-size: 14px; text-align: center; } }