{"html":"\n","css":".ui-btc-card {\n --bg0: #060607;\n --bg1: #0b0b10;\n --text: rgba(255, 255, 255, 0.88);\n --muted: rgba(255, 255, 255, 0.46);\n --btcOrange: #f7931a;\n\n appearance: none;\n position: relative;\n display: block;\n width: 36em;\n max-width: 100%;\n border: 0;\n padding: 0;\n border-radius: 1.55em;\n background: transparent;\n cursor: pointer;\n text-align: left;\n outline: none;\n transition:\n transform 0.18s ease,\n filter 0.18s ease;\n font:\n 600 1rem/1.2 ui-sans-serif,\n system-ui,\n -apple-system,\n Segoe UI,\n Roboto,\n Arial,\n sans-serif;\n}\n\n.ui-btc-card__bg,\n.ui-btc-card__inner,\n.ui-btc-card__top,\n.ui-btc-card__icon,\n.ui-btc-card__titles,\n.ui-btc-card__pair,\n.ui-btc-card__sub,\n.ui-btc-card__badge,\n.ui-btc-card__mid,\n.ui-btc-card__price,\n.ui-btc-card__sym,\n.ui-btc-card__num,\n.ui-btc-card__chg,\n.ui-btc-card__meta,\n.ui-btc-card__pill,\n.ui-btc-card__ticker,\n.ui-btc-card__marquee {\n box-sizing: border-box;\n}\n\n.ui-btc-card__bg {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n background: radial-gradient(\n 28em 18em at 18% 18%,\n rgba(247, 147, 26, 0.24),\n transparent 62%\n ),\n radial-gradient(\n 24em 16em at 82% 78%,\n rgba(255, 207, 139, 0.11),\n transparent 62%\n ),\n radial-gradient(\n 1.2em 1.2em at 0.9em 0.9em,\n rgba(247, 147, 26, 0.06) 0 2px,\n transparent 2px\n ),\n radial-gradient(\n 1.2em 1.2em at 2em 2em,\n rgba(255, 207, 139, 0.04) 0 2px,\n transparent 2px\n ),\n repeating-linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.018) 0 1px,\n transparent 1px 7px\n ),\n linear-gradient(135deg, var(--bg0), var(--bg1));\n background-size:\n auto,\n auto,\n 3.8em 3.8em,\n 3.8em 3.8em,\n auto,\n auto;\n border: 1px solid rgba(255, 255, 255, 0.07);\n box-shadow:\n 0 1.45em 3.6em rgba(0, 0, 0, 0.58),\n inset 0 1px 0 rgba(255, 255, 255, 0.06);\n transition:\n box-shadow 0.22s ease,\n border-color 0.22s ease;\n}\n\n.ui-btc-card__inner {\n position: relative;\n display: block;\n padding: 1.55em;\n color: var(--text);\n}\n\n.ui-btc-card__top {\n display: flex;\n align-items: center;\n gap: 1.05em;\n padding-bottom: 1.15em;\n border-bottom: 1px solid rgba(255, 255, 255, 0.085);\n}\n\n.ui-btc-card__icon {\n width: 3.35em;\n height: 3.35em;\n border-radius: 1.18em;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--btcOrange);\n box-shadow:\n 0 0.85em 2.1em rgba(247, 147, 26, 0.2),\n inset 0 1px 0 rgba(255, 255, 255, 0.34);\n border: 1px solid rgba(255, 255, 255, 0.22);\n position: relative;\n overflow: hidden;\n transition:\n box-shadow 0.22s ease,\n transform 0.22s ease;\n}\n\n.ui-btc-card__icon::after {\n content: \"\";\n position: absolute;\n inset: -30%;\n background: radial-gradient(\n circle at 30% 25%,\n rgba(255, 255, 255, 0.28),\n transparent 45%\n );\n opacity: 0.55;\n pointer-events: none;\n}\n\n.ui-btc-card__svg {\n width: 2.55em;\n height: 2.55em;\n display: block;\n transform: rotate(-12deg);\n filter: drop-shadow(0 0.35em 0.85em rgba(0, 0, 0, 0.28));\n}\n\n.ui-btc-card__titles {\n display: block;\n flex: 1;\n min-width: 0;\n}\n\n.ui-btc-card__pair {\n display: block;\n font:\n 800 1rem/1.1 ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n \"Liberation Mono\",\n \"Courier New\",\n monospace;\n letter-spacing: 0.22em;\n text-transform: uppercase;\n color: rgba(255, 215, 170, 0.86);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.ui-btc-card__sub {\n display: block;\n margin-top: 0.45em;\n font:\n 650 0.84rem/1.1 ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n \"Liberation Mono\",\n \"Courier New\",\n monospace;\n letter-spacing: 0.14em;\n text-transform: lowercase;\n color: var(--muted);\n}\n\n.ui-btc-card__badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font:\n 850 0.76rem/1 ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n \"Liberation Mono\",\n \"Courier New\",\n monospace;\n letter-spacing: 0.22em;\n text-transform: uppercase;\n padding: 0.65em 0.95em;\n border-radius: 999em;\n color: rgba(255, 225, 190, 0.84);\n background: rgba(247, 147, 26, 0.12);\n border: 1px solid rgba(255, 255, 255, 0.11);\n}\n\n.ui-btc-card__mid {\n display: block;\n padding-top: 1.25em;\n padding-bottom: 1.15em;\n}\n\n.ui-btc-card__price {\n display: flex;\n align-items: baseline;\n gap: 0.8em;\n font:\n 850 1.55rem/1 ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n \"Liberation Mono\",\n \"Courier New\",\n monospace;\n}\n\n.ui-btc-card__sym {\n font-size: 1.08rem;\n color: rgba(255, 207, 139, 0.76);\n}\n\n.ui-btc-card__num {\n font-size: 2.25rem;\n letter-spacing: 0.06em;\n color: rgba(255, 177, 74, 0.92);\n text-shadow: 0 0 1.2em rgba(247, 147, 26, 0.12);\n}\n\n.ui-btc-card__chg {\n font-size: 0.8rem;\n letter-spacing: 0.16em;\n padding: 0.65em 0.95em;\n border-radius: 999em;\n color: rgba(255, 215, 170, 0.64);\n background: rgba(255, 255, 255, 0.04);\n border: 1px solid rgba(255, 255, 255, 0.08);\n}\n\n.ui-btc-card__meta {\n display: flex;\n gap: 0.7em;\n flex-wrap: wrap;\n margin-top: 1.15em;\n}\n\n.ui-btc-card__pill {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font:\n 700 0.78rem/1 ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n \"Liberation Mono\",\n \"Courier New\",\n monospace;\n letter-spacing: 0.12em;\n text-transform: lowercase;\n color: rgba(255, 255, 255, 0.44);\n padding: 0.7em 1em;\n border-radius: 1.1em;\n background: rgba(0, 0, 0, 0.28);\n border: 1px solid rgba(255, 255, 255, 0.085);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);\n}\n\n.ui-btc-card__ticker {\n display: block;\n overflow: hidden;\n border-radius: 1.1em;\n background: rgba(0, 0, 0, 0.28);\n border: 1px solid rgba(255, 255, 255, 0.085);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);\n}\n\n.ui-btc-card__marquee {\n display: flex;\n gap: 1.25em;\n width: max-content;\n padding: 0.95em 1.1em;\n font:\n 800 0.78rem/1 ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n \"Liberation Mono\",\n \"Courier New\",\n monospace;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: rgba(255, 177, 74, 0.46);\n animation: ui_btc_crawl 22s linear infinite;\n}\n\n.ui-btc-card__marquee span {\n display: inline-block;\n white-space: nowrap;\n}\n\n.ui-btc-card:hover {\n transform: translateY(-0.12em);\n}\n\n.ui-btc-card:hover .ui-btc-card__bg {\n box-shadow:\n 0 1.65em 3.9em rgba(0, 0, 0, 0.62),\n inset 0 1px 0 rgba(255, 255, 255, 0.07);\n border-color: rgba(255, 255, 255, 0.09);\n}\n\n.ui-btc-card:hover .ui-btc-card__icon {\n box-shadow:\n 0 1.05em 2.4em rgba(247, 147, 26, 0.24),\n inset 0 1px 0 rgba(255, 255, 255, 0.36);\n}\n\n.ui-btc-card:active {\n transform: translateY(0);\n filter: brightness(1.02);\n}\n\n.ui-btc-card:active .ui-btc-card__bg {\n box-shadow:\n 0 1.25em 3.1em rgba(0, 0, 0, 0.58),\n inset 0 1px 0 rgba(255, 255, 255, 0.06);\n}\n\n.ui-btc-card:focus-visible .ui-btc-card__bg {\n outline: 0.18em solid rgba(247, 147, 26, 0.42);\n outline-offset: 0.18em;\n}\n\n@keyframes ui_btc_crawl {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-50%);\n }\n}\n\n@media (max-width: 46em) {\n .ui-btc-card {\n width: 100%;\n }\n .ui-btc-card__inner {\n padding: 1.25em;\n }\n .ui-btc-card__num {\n font-size: 2.05rem;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ui-btc-card__marquee {\n animation: none;\n }\n .ui-btc-card {\n transition: none;\n transform: none;\n }\n .ui-btc-card__bg,\n .ui-btc-card__icon {\n transition: none;\n }\n}\n"}

orange-fly-14

👁 实时预览

📝 源代码