{"html":"\r\n

\n \n \n \n

\n Sales\n

\n 20%\n

\n 1,500 €\n

\n \n

\n","css":".card {\n padding: 1rem;\n background-color: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n max-width: 320px;\n border-radius: 20px;\n width: 250px;\n}\n\n.title {\n display: flex;\n align-items: center;\n}\n\n.title span {\n position: relative;\n padding: 0.5rem;\n background-color: #B9101E;\n width: 1.5rem;\n height: 1.5rem;\n border-radius: 9999px;\n}\n\n.title span svg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #ffffff;\n height: 1rem;\n}\n\n.title-text {\n margin-left: 0.5rem;\n color: #374151;\n font-size: 18px;\n}\n\n.percent {\n margin-left: 0.5rem;\n color: #B9101E;\n font-weight: 600;\n display: flex;\n}\n\n.data {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n}\n\n.data p {\n margin-top: 1rem;\n margin-bottom: 1rem;\n color: #1F2937;\n font-size: 2.25rem;\n line-height: 2.5rem;\n font-weight: 700;\n text-align: left;\n}\n\n.data .range {\n position: relative;\n background-color: #E5E7EB;\n width: 100%;\n height: 0.5rem;\n border-radius: 0.25rem;\n}\n\n.data .range .fill {\n position: absolute;\n top: 0;\n left: 0;\n background-color: #B9101E;\n width: 36%;\n height: 100%;\n border-radius: 0.25rem;\n transition: .5s all;\n}"}

tall-lizard-70

👁 实时预览

📝 源代码