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

✨ feat(financial-dashboard): add property background image and overlay

- add new background image asset: background-property1.png
- update BackgroundOverlay component to use new background image
- add semi-transparent dark gray overlay for better content readability
- add accessibility attributes (aria-hidden="true")
- add data attribute for property identification
- remove previous gradient background and decorative light effects
yourname 2 месяцев назад
Родитель
Сommit
7a47664af9

BIN
public/financial-dashboard/background-property1.png


+ 13 - 7
src/client/home/pages/FinancialDashboard/components/BackgroundOverlay.tsx

@@ -2,13 +2,19 @@ import React from 'react';
 
 const BackgroundOverlay: React.FC = () => {
   return (
-    <div className="absolute inset-0">
-      {/* 背景图片遮罩 */}
-      <div className="absolute inset-0 bg-gradient-to-br from-blue-900/30 via-purple-900/20 to-indigo-900/30" />
-
-      {/* 装饰性光效 */}
-      <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl" />
-      <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl" />
+    <div className="absolute inset-0" data-name="Property 1=常规界面">
+      <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
+        {/* 背景图片 */}
+        <img
+          alt=""
+          className="absolute max-w-none object-center object-cover w-full h-full"
+          src="/financial-dashboard/background-property1.png"
+        />
+        {/* 深灰色半透明遮罩 */}
+        <div className="absolute bg-[rgba(33,33,33,0.6)] inset-0" />
+      </div>
+      {/* 装饰元素层 */}
+      <div className="absolute contents left-0 top-0" />
     </div>
   );
 };