柱状图样式

src/views/pms/qhse/socSummary/index.vue

@@ -691,17 +691,41 @@ onMounted(() => {
   padding: 3px 16px 0px;
   border: 1px solid rgba(143, 168, 211, 0.22);
   border-radius: 10px;
-  background: radial-gradient(circle at top left, rgba(64, 158, 255, 0.18), transparent 0%),
-    radial-gradient(circle at top right, rgba(208, 156, 255, 0.16), transparent 2%),
+  background: radial-gradient(
+      circle at 102% 104%,
+      rgba(142, 164, 255, 0.12) 0,
+      rgba(142, 164, 255, 0.12) 14%,
+      transparent 14.5%
+    ),
+    radial-gradient(
+      circle at 88% 16%,
+      rgba(118, 183, 255, 0.08) 0,
+      rgba(118, 183, 255, 0.08) 7%,
+      transparent 100%
+    ),
     linear-gradient(135deg, #fdfefe 0%, #f3f8ff 68%, #eef4ff 100%);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  box-shadow:
+    0 12px 28px rgba(64, 112, 196, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
 }
 
 .soc-summary-panel::before {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(115deg, rgba(255, 255, 255, 0.22), transparent 42%),
+  background: radial-gradient(
+      circle at 76% -4%,
+      rgba(129, 224, 202, 0.14) 0,
+      rgba(129, 224, 202, 0.14) 12.8%,
+      transparent 13%
+    ),
+    radial-gradient(
+      circle at 101% 101%,
+      rgba(142, 164, 255, 0.1) 0,
+      rgba(142, 164, 255, 0.1) 15.8%,
+      transparent 16%
+    ),
+    linear-gradient(115deg, rgba(255, 255, 255, 0.22), transparent 42%),
     repeating-linear-gradient(
       135deg,
       rgba(255, 255, 255, 0.08) 0,