{"html":"

\n \n \n \n \n \n

\n Music Name\n

Music Singer

\n \n \n \n \n \n \n

00:033:35

\n","css":".music-card {\n cursor: pointer;\n width: 100%;\n max-width: 340px;\n margin: 0 auto;\n background-color: #f7f7f7;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n border-radius: 10px;\n overflow: hidden;\n transition: transform 0.3s ease;\n}\n\n.music-card:hover {\n transform: translateY(-5px);\n}\n\n.card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px;\n background-color: #fff;\n}\n\n.track-info {\n display: flex;\n align-items: center;\n}\n\n.track-icon {\n height: 24px;\n width: 24px;\n color: #f59e0b;\n}\n\n.track-details {\n margin-left: 12px;\n}\n\n.track-title {\n font-size: 1.2rem;\n font-weight: 600;\n color: #333;\n}\n\n.track-artist {\n font-size: 0.9rem;\n color: #666;\n}\n\n.card-icons {\n display: flex;\n align-items: center;\n}\n\n.icon-heart {\n height: 24px;\n width: 24px;\n color: #ef4444;\n cursor: pointer;\n}\n\n.icon-star {\n height: 24px;\n width: 24px;\n color: #9ca3af;\n margin-left: 16px;\n cursor: pointer;\n}\n\n.icon-star:hover {\n color: #fbbf24;\n}\n\n.progress-container {\n position: relative;\n margin: 16px 16px 8px 16px;\n height: 6px;\n background-color: #e5e7eb;\n border-radius: 3px;\n overflow: hidden;\n}\n\n.progress-bar {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 60%;\n background-color: #f59e0b;\n border-radius: 3px;\n}\n\n.progress-time {\n display: flex;\n justify-content: space-between;\n padding: 0 16px 16px 16px;\n font-size: 0.85rem;\n color: #6b7280;\n}\n"}

tasty-tiger-60

👁 实时预览

📝 源代码