{"html":"

\n \n \n \n

Order Placed

Completed

May 28, 10:24 AM

\n\n

Processing

In Progress

May 29, 02:15 PM

\n\n

Shipping

Pending

Estimated: May 30

\n\n

\n \n \n

\n","css":".stepper-box {\n background-color: white;\n border-radius: 12px;\n padding: 32px;\n width: 400px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n}\n\n.stepper-step {\n display: flex;\n margin-bottom: 32px;\n position: relative;\n}\n\n.stepper-step:last-child {\n margin-bottom: 0;\n}\n\n.stepper-line {\n position: absolute;\n left: 19px;\n top: 40px;\n bottom: -32px;\n width: 2px;\n background-color: #e2e8f0;\n z-index: 1;\n}\n\n.stepper-step:last-child .stepper-line {\n display: none;\n}\n\n.stepper-circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 16px;\n z-index: 2;\n}\n\n.stepper-completed .stepper-circle {\n background-color: #0f172a;\n color: white;\n}\n\n.stepper-active .stepper-circle {\n border: 2px solid #0f172a;\n color: #0f172a;\n}\n\n.stepper-pending .stepper-circle {\n border: 2px solid #e2e8f0;\n color: #94a3b8;\n}\n\n.stepper-content {\n flex: 1;\n}\n\n.stepper-title {\n font-weight: 600;\n margin-bottom: 4px;\n}\n\n.stepper-completed .stepper-title {\n color: #0f172a;\n}\n\n.stepper-active .stepper-title {\n color: #0f172a;\n}\n\n.stepper-pending .stepper-title {\n color: #94a3b8;\n}\n\n.stepper-status {\n font-size: 13px;\n display: inline-block;\n padding: 2px 8px;\n border-radius: 12px;\n margin-top: 4px;\n}\n\n.stepper-completed .stepper-status {\n background-color: #dcfce7;\n color: #166534;\n}\n\n.stepper-active .stepper-status {\n background-color: #dbeafe;\n color: #1d4ed8;\n}\n\n.stepper-pending .stepper-status {\n background-color: #f1f5f9;\n color: #64748b;\n}\n\n.stepper-time {\n font-size: 12px;\n color: #94a3b8;\n margin-top: 4px;\n}\n\n.stepper-controls {\n display: flex;\n justify-content: space-between;\n margin-top: 32px;\n}\n\n.stepper-button {\n padding: 8px 16px;\n border-radius: 6px;\n border: 1px solid #e2e8f0;\n background-color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.stepper-button-primary {\n background-color: #0f172a;\n color: white;\n border-color: #0f172a;\n}\n"}

orange-newt-23

👁 实时预览

📝 源代码