{"html":"

Income

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

\n $12,496↓ 26.5%\n

Compared to $17,006 last month

\n Analyse Data\n More\n

-1.7%

2.3%

-3.8%

6.3%

-2.3%

2.0%

\n \n

\n","css":".theme-light {\n --color-dark-subtle: linear-gradient(to right, #532222, #020202);\n --color-dark: #000000;\n --color-light: #fff7f7;\n --color-white: #ffffff;\n --color-red: #ff7a85d2;\n --color-red-light: #ffa7a7;\n --color-shadow-dark: rgb(31, 53, 31);\n --color-shadow-text: rgb(0 0 0 / 65%);\n --color-accent-bg: #ffa7ad4f;\n --shadow-light: -5px -5px 9px rgb(66, 48, 48);\n --shadow-dark: 5px 5px 9px rgb(128, 97, 97);\n --shadow-bar: -5px -5px 9px rgb(77 45 45 / 45%), 5px 5px 9px rgb(39 39 39);\n}\n\n.theme-light .card {\n border-radius: 16px;\n padding: 10px;\n width: 320px;\n background: var(--color-dark);\n position: relative;\n transition-duration: 0.2s;\n user-select: none;\n}\n\n.card:before,\n.card:after {\n content: \"\";\n position: absolute;\n left: 0px;\n top: 0px;\n border-radius: 16px;\n background: linear-gradient(\n 45deg,\n #fa0a0a,\n #eb021d,\n #f17917,\n #e763dc,\n #b96565,\n #e0d18b,\n #df6a0b,\n #956df3,\n #b15a65,\n #f5d103\n );\n background-size: 400%;\n width: calc(100% + 0px);\n height: calc(100% + 0px);\n z-index: -1;\n animation: steam 40s linear infinite;\n}\n\n@keyframes steam {\n 0% {\n background-position: 0 0;\n }\n\n 50% {\n background-position: 400% 0;\n }\n\n 100% {\n background-position: 0 0;\n }\n}\n\n.card:after {\n filter: blur(20px);\n}\n\n.theme-light .flex {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 18px;\n}\n\n.theme-light .bar-label {\n text-shadow: 1px 1px 3px var(--color-shadow-text);\n font-size: 12px;\n}\n\n.theme-light .flex .tag {\n fill: var(--color-white);\n display: flex;\n align-items: center;\n justify-content: center;\n height: 25px;\n width: 25px;\n box-shadow: 4px 4px 3px var(--color-shadow-dark);\n}\n\n.theme-light .bg-custom {\n background: var(--color-dark-subtle);\n padding: 18px;\n margin-bottom: 10px;\n border-radius: 10px;\n box-shadow:\n inset var(--shadow-light),\n inset var(--shadow-dark);\n}\n\n.theme-light .bg-custom-2 {\n font-weight: 600;\n}\n\n.theme-light .pr-day {\n position: absolute;\n top: -25px;\n font-size: 12px;\n font-weight: 700;\n color: var(--color-white);\n}\n\n.theme-light .text-red {\n color: var(--color-red-light);\n}\n\n.theme-light .text-light {\n color: var(--color-light);\n}\n\n.theme-light .text-green {\n color: var(--color-white);\n}\n\n.theme-light .card .heading {\n margin: 0;\n font-size: 16px;\n font-weight: 500;\n color: var(--color-light);\n text-shadow: 4px 4px 3px var(--color-shadow-dark);\n}\n\n.theme-light .amount {\n font-size: 32px;\n font-weight: bold;\n margin: 10px 0;\n line-height: 1.2;\n text-shadow: 4px 4px 3px var(--color-shadow-dark);\n display: inline-flex;\n align-items: center;\n}\n\n.theme-light .typing {\n overflow: hidden;\n white-space: nowrap;\n border-right: 3px solid var(--color-white);\n display: inline-block;\n animation:\n typing 8s steps(20) infinite,\n blink 1.2s step-end infinite;\n}\n\n@keyframes typing {\n 0% {\n width: 0;\n }\n\n 40% {\n width: 128px;\n }\n\n 60% {\n width: 128px;\n }\n\n 100% {\n width: 0;\n }\n}\n\n@keyframes blink {\n 50% {\n border-color: transparent;\n }\n}\n\n.theme-light .amount .main-pr {\n font-size: 14px;\n color: var(--color-red-light);\n margin-left: 6px;\n font-weight: 500;\n background: var(--color-accent-bg);\n border-radius: 5px;\n padding: 2px 4px;\n}\n\n.theme-light .compare {\n font-size: 12px;\n text-shadow: 4px 4px 3px var(--color-shadow-dark);\n letter-spacing: 1px;\n}\n\n.theme-light .chart {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n width: 300px;\n height: 140px;\n padding: 10px;\n border-radius: 12px;\n}\n\n.theme-light .bar {\n width: 20px;\n font-size: 15px;\n background: var(--color-red);\n color: var(--color-dark);\n border-radius: 4px 4px 0 0;\n display: flex;\n justify-content: center;\n align-items: flex-end;\n position: relative;\n transform: scaleY(0);\n transform-origin: bottom;\n animation: rippleBounce 7.5s ease-in-out infinite;\n box-shadow: var(--shadow-bar);\n}\n\n@keyframes rippleBounce {\n 0%,\n 100% {\n transform: scaleY(0.6);\n }\n\n 25% {\n transform: scaleY(1.1);\n }\n\n 50% {\n transform: scaleY(0.8);\n }\n\n 75% {\n transform: scaleY(1.2);\n }\n}\n\n.theme-light .bar:nth-child(1) {\n height: 30px;\n animation-delay: 0.2s;\n background: var(--color-white);\n}\n\n.theme-light .bar:nth-child(2) {\n height: 80px;\n animation-delay: 0.4s;\n}\n\n.theme-light .bar:nth-child(3) {\n height: 50px;\n animation-delay: 0.6s;\n background: var(--color-white);\n}\n\n.theme-light .bar:nth-child(4) {\n height: 85px;\n animation-delay: 0.8s;\n}\n\n.theme-light .bar:nth-child(5) {\n height: 70px;\n animation-delay: 1s;\n background: var(--color-white);\n}\n\n.theme-light .bar:nth-child(6) {\n height: 80px;\n animation-delay: 1.2s;\n}\n\n.theme-light .bar:nth-child(7) {\n height: 60px;\n animation-delay: 1.4s;\n background: var(--color-white);\n}\n\n.theme-light .card .more-button {\n font-size: 16px;\n padding: 12px;\n border-radius: 10px;\n color: var(--color-dark);\n border: 0;\n width: 100%;\n margin-top: 10px;\n outline: none;\n background-color: var(--color-white);\n box-shadow: var(--shadow-bar);\n transition: ease all 0.3s;\n cursor: pointer;\n}\n\n.theme-light .card .more-button:hover {\n transform: translateY(-3px);\n}\n\n.theme-light .card .more-button:active {\n transform: scale(0.9);\n}\n\n.theme-light .tags {\n display: flex;\n margin-bottom: 8px;\n justify-content: end;\n color: var(--color-light);\n font-size: 12px;\n font-weight: 500;\n gap: 4px;\n text-shadow: 2px 3px 3px var(--color-shadow-dark);\n}\n\n.theme-light .tags span {\n padding: 3px 10px;\n background-color: #4d2c2c73;\n border-radius: 3px;\n}\n"}

lucky-dragon-87

👁 实时预览

📝 源代码