Просмотр исходного кода

💄 style(financial-dashboard): 优化收入柱状图视觉效果

- 用内嵌SVG替代外部图片资源,提高加载性能和渲染一致性
- 调整渐变色参数,增强收入柱状图的视觉层次感和立体感
- 优化图形路径设计,使柱状图边缘更加平滑自然
yourname 2 месяцев назад
Родитель
Сommit
e232e7566b
1 измененных файлов с 40 добавлено и 15 удалено
  1. 40 15
      src/client/home/pages/FinancialDashboard/components/BarElement.tsx

+ 40 - 15
src/client/home/pages/FinancialDashboard/components/BarElement.tsx

@@ -192,21 +192,46 @@ export default function BarElement({ className, variant = "profit-total", style
   if (variant === "income") {
     return (
       <div className={className} style={style} data-name="Property 1=柱形元素, Property 2=1-1">
-        <div className="flex flex-[1_0_0] items-center justify-center mb-[-3px] min-h-px min-w-px relative shrink-0 w-full">
-          <div className="flex-none rotate-[180deg] size-full">
-            <div className="bg-gradient-to-b box-border content-stretch flex flex-col from-[rgba(162,190,255,0.808)] items-start pb-[3px] pt-0 px-0 relative size-full to-[rgba(162,190,255,0)]">
-              <div className="h-[4px] mb-[-3px] relative shrink-0 w-full" data-name="Vector">
-                <img alt="" className="block max-w-none size-full" src="/financial-dashboard/vector4.svg" />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="flex items-center justify-center mb-[-3px] relative shrink-0 w-full">
-          <div className="flex-none rotate-[180deg] w-full">
-            <div className="h-[6px] relative w-full">
-              <img alt="" className="block max-w-none size-full" src="/financial-dashboard/frame10908.svg" />
-            </div>
-          </div>
+        <div className="flex-none rotate-[180deg] size-full">
+          <svg width="15" height="25" viewBox="0 0 15 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8 2H15L15 22H8L8 2Z" fill="url(#paint0_linear_1977_58555)"/>
+            <rect x="8" y="22" width="1" height="20" transform="rotate(180 8 22)" fill="url(#paint1_linear_1977_58555)"/>
+            <path d="M0 2H7L7 22H0L0 2Z" fill="url(#paint2_linear_1977_58555)"/>
+            <path d="M15 2.0021L7.5 -0.000314236L0 2.00212L7.5 4.33301L15 2.0021Z" fill="url(#paint3_linear_1977_58555)" fillOpacity="0.6"/>
+            <path d="M7.5 5.5H6.5L6.5 0.5H7.5L7.5 5.5Z" fill="url(#paint4_linear_1977_58555)"/>
+            <path d="M7.5 25L15 22.0036L7.5 19L0 22.0036L7.5 25Z" fill="url(#paint5_linear_1977_58555)"/>
+            <path d="M15 22C13.7194 21.6325 12.4575 21.2183 11.1956 20.7973C10.5615 20.5969 9.93991 20.363 9.31206 20.1425L7.42851 19.4744H7.57149L5.68794 20.1425C5.06009 20.363 4.43846 20.5969 3.80439 20.7973C2.54248 21.2183 1.28056 21.6325 9.53674e-07 22C1.2184 21.4521 2.45545 20.951 3.6925 20.4566C4.30792 20.2027 4.93577 19.9755 5.5574 19.7416L7.42851 19.0334L7.50311 19L7.57149 19.0267L9.4426 19.735C10.0642 19.9755 10.6921 20.196 11.3075 20.4566C12.5446 20.951 13.7816 21.4521 15 22Z" fill="url(#paint6_linear_1977_58555)"/>
+            <defs>
+              <linearGradient id="paint0_linear_1977_58555" x1="11.5016" y1="2.04354" x2="11.5016" y2="21.9993" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#FF8A00" stopOpacity="0.2"/>
+                <stop offset="1" stopColor="#FFD600"/>
+              </linearGradient>
+              <linearGradient id="paint1_linear_1977_58555" x1="8.5" y1="22" x2="8.5" y2="42" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#FEFFC2"/>
+                <stop offset="1" stopColor="#FF9900" stopOpacity="0.3"/>
+              </linearGradient>
+              <linearGradient id="paint2_linear_1977_58555" x1="3.50158" y1="2.07477" x2="3.50158" y2="21.9993" gradientUnits="userSpaceOnUse">
+                <stop offset="0.00462963" stopColor="#FF8A00" stopOpacity="0.2"/>
+                <stop offset="1" stopColor="#FFB800"/>
+              </linearGradient>
+              <linearGradient id="paint3_linear_1977_58555" x1="7.5" y1="4.33301" x2="7.5" y2="-0.000326117" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#58370F"/>
+                <stop offset="1" stopColor="#A9600F"/>
+              </linearGradient>
+              <linearGradient id="paint4_linear_1977_58555" x1="6.5" y1="5.11538" x2="6.5" y2="0.115385" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#715120"/>
+                <stop offset="1" stopColor="#8D7340" stopOpacity="0"/>
+              </linearGradient>
+              <linearGradient id="paint5_linear_1977_58555" x1="7.49882" y1="19.0035" x2="7.49882" y2="25" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#FCFF6C"/>
+                <stop offset="1" stopColor="#FF8A00"/>
+              </linearGradient>
+              <linearGradient id="paint6_linear_1977_58555" x1="7.50193" y1="19.0028" x2="7.50193" y2="22.5" gradientUnits="userSpaceOnUse">
+                <stop stopColor="white"/>
+                <stop offset="1" stopColor="white" stopOpacity="0.3"/>
+              </linearGradient>
+            </defs>
+          </svg>
         </div>
       </div>
     );