{"html":"

\n \n\n \n

\n","css":".container * {\n padding: 0;\n margin: 0;\n}\n\n.card {\n width: 363px;\n height: 130px;\n background-color: #1e293b;\n border-radius: 10px;\n display: grid;\n grid-template-rows: 40px 1fr;\n}\n\n.card .header {\n display: flex;\n align-items: center;\n position: relative;\n}\n\n.card .header .title {\n color: #7dd3fc;\n font-size: 13px;\n padding: 2px 12px;\n}\n\n.card .header .copy {\n position: absolute;\n background: transparent;\n border: none;\n top: 61%;\n right: 1px;\n transform: translate(-50%, -50%);\n color: rgb(100, 116, 139);\n cursor: pointer;\n transition: all 0.3s ease;\n z-index: 100;\n}\n\n.card .header .copy:hover {\n color: rgb(148, 163, 184);\n}\n\n.card .header::before {\n content: \"\";\n position: absolute;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n border: 1px solid #64748b4d;\n right: 1px;\n bottom: 0;\n background-color: #33415580;\n width: 282px;\n height: 33px;\n z-index: 100;\n}\n\n.card .header::after {\n content: \"\";\n position: absolute;\n width: 22%;\n height: 1px;\n background-color: #7dd3fc;\n bottom: 0;\n}\n\n.card .footer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 5px;\n padding-left: 10px;\n}\n\n.card .footer .code {\n display: flex;\n align-items: center;\n}\n\n.card .footer .code .icon {\n color: rgb(244, 114, 182);\n padding-top: 3px;\n}\n\n.card .footer .code .text {\n padding-left: 3px;\n color: #f8fafc;\n}\n"}

curvy-bird-92

👁 实时预览

📝 源代码