{"html":"

Monthly Revenue

\n \n

\n Avrage monthly sale for every author\n

\n 68.9%\n ▲ 34.5%\n

\n","css":".stat-card {\n background: #232733;\n border-radius: 18px;\n box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.18);\n padding: 2rem 1.5rem 1.5rem 1.5rem;\n width: 340px;\n color: #f3f6fa;\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.stat-card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.stat-card-header h2 {\n font-family: \"Inter\", sans-serif;\n font-size: 1.35rem;\n font-weight: 700;\n color: #f3f6fa;\n letter-spacing: 0.01em;\n margin: 0;\n line-height: 1.2;\n text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n background: linear-gradient(90deg, #fff 0%, #f3f6fa 50%, #e3e8ef 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.stat-card-title {\n font-family: \"Inter\", sans-serif;\n font-size: 1.35rem;\n font-weight: 700;\n color: #f3f6fa;\n letter-spacing: 0.01em;\n margin: 0;\n line-height: 1.2;\n text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n background: linear-gradient(90deg, #fff 0%, #f3f6fa 50%, #e3e8ef 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.stat-card-menu {\n font-size: 1.3rem;\n color: #6c7383;\n cursor: pointer;\n}\n\n.stat-card-chart {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.donut {\n width: 170px;\n height: 170px;\n}\n\n.donut-bg {\n fill: none;\n stroke: #232733;\n stroke-width: 14;\n}\n\n.donut-segment.sales {\n stroke: #3d8bff;\n}\n\n.donut-segment.product {\n stroke: #ff6a3d;\n}\n\n.donut-segment.income {\n stroke: #1ecb6b;\n}\n\n.donut-segment {\n fill: none;\n stroke-width: 14;\n stroke-linecap: round;\n transition: stroke-dasharray 0.3s;\n}\n\n.donut-segment2 {\n fill: none;\n stroke: #1ecb6b;\n stroke-width: 14;\n stroke-linecap: round;\n transition: stroke-dasharray 0.3s;\n}\n\n.donut-segment3 {\n fill: none;\n stroke: #3d8bff;\n stroke-width: 14;\n stroke-linecap: round;\n transition: stroke-dasharray 0.3s;\n}\n\n.donut-text-main {\n font-size: 2.1rem;\n font-weight: 600;\n fill: #f3f6fa;\n}\n\n.donut-text-sub {\n font-size: 1rem;\n fill: #b0b6c3;\n}\n\n.stat-card-legend {\n margin-top: 0.5rem;\n display: flex;\n flex-direction: column;\n gap: 0.6rem;\n}\n\n.legend-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 1rem;\n color: #b0b6c3;\n}\n\n.legend-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n display: inline-block;\n margin-right: 0.5rem;\n}\n\n.legend-dot.sales {\n background: #3d8bff;\n}\n\n.legend-dot.product {\n background: #ff6a3d;\n}\n\n.legend-dot.income {\n background: #1ecb6b;\n}\n\n.legend-value {\n font-size: 2rem;\n color: #3d8bff;\n font-weight: 600;\n margin-left: 0.5rem;\n}\n\n.legend-change {\n color: #1ecb6b;\n font-weight: 600;\n margin-left: 10px;\n}\n\n.linechart {\n width: 100%;\n max-width: 360px;\n height: 120px;\n display: block;\n}\n\n.linechart .x-labels text {\n font-family: \"Inter\", sans-serif;\n font-size: 12px;\n fill: #b0b6c3;\n}\n\n.dot-group .tooltip {\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s;\n}\n\n.dot-group:hover .tooltip {\n opacity: 1;\n}\n\n.dot-group .tooltip rect {\n fill: #232733;\n stroke: #232733;\n stroke-width: 1.2;\n filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.22));\n rx: 8;\n opacity: 0.92;\n}\n\n.dot-group .tooltip text {\n font-family: \"Inter\", sans-serif;\n font-size: 15px;\n font-weight: 500;\n fill: #fff;\n letter-spacing: 0.2px;\n text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n}\n\n.menu-wrapper {\n position: relative;\n display: inline-block;\n margin-right: 4px;\n}\n\n.menu-dots {\n display: flex;\n flex-direction: column;\n gap: 3px;\n cursor: pointer;\n width: 18px;\n align-items: center;\n margin: 0 8px;\n}\n\n.menu-dots span {\n display: block;\n width: 5px;\n height: 5px;\n background: #6c7383;\n border-radius: 50%;\n transition: background 0.2s;\n}\n\n.menu-toggle {\n display: none;\n}\n\n.menu-select {\n display: none;\n position: absolute;\n right: 0;\n top: 30px;\n min-width: 110px;\n z-index: 10;\n padding: 8px 0;\n border-radius: 18px;\n border: 1.5px solid rgba(80, 90, 120, 0.18);\n background: rgba(30, 34, 44, 0.72);\n box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n transition:\n opacity 0.25s cubic-bezier(0.4, 2, 0.6, 1),\n transform 0.25s cubic-bezier(0.4, 2, 0.6, 1);\n opacity: 0;\n transform: scale(0.95) translateY(-8px);\n pointer-events: none;\n}\n\n.menu-toggle:checked + .menu-dots + .menu-select {\n display: block;\n opacity: 1;\n transform: scale(1) translateY(0);\n pointer-events: auto;\n}\n\n.menu-select div {\n padding: 10px 20px 10px 16px;\n color: #f3f6fa;\n cursor: pointer;\n font-size: 15px;\n font-family: \"Inter\", sans-serif;\n border-left: 3px solid transparent;\n margin-bottom: 2px;\n border-radius: 8px;\n transition:\n background 0.18s,\n color 0.18s,\n border-left 0.18s;\n}\n\n.menu-select div:nth-child(1) {\n border-left: 3px solid #3d8bff;\n}\n.menu-select div:nth-child(2) {\n border-left: 3px solid #ff6a3d;\n}\n.menu-select div:nth-child(3) {\n border-left: 3px solid #1ecb6b;\n}\n\n.menu-select div:hover {\n background: rgba(61, 139, 255, 0.08);\n color: #3d8bff;\n border-left: 3px solid #3d8bff;\n}\n.menu-select div:nth-child(2):hover {\n background: rgba(255, 106, 61, 0.08);\n color: #ff6a3d;\n border-left: 3px solid #ff6a3d;\n}\n.menu-select div:nth-child(3):hover {\n background: rgba(30, 203, 107, 0.08);\n color: #1ecb6b;\n border-left: 3px solid #1ecb6b;\n}\n\n.stat-card-legend .legend-item:first-child {\n font-size: 0.95rem;\n color: #b8c0cc;\n font-weight: 400;\n letter-spacing: 0.01em;\n}\n"}

rare-cat-65

👁 实时预览

📝 源代码