aa

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

@@ -4,7 +4,7 @@
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
 
     <el-col :span="isLeftContentCollapsed ? 24 : 20" :xs="24">
-      <div style="border: none; background-color: #fff" class="p-2">
+      <div class="soc-summary-panel">
         <div class="soc-summary-chart">
           <div class="soc-summary-chart__header">
             <div class="soc-summary-chart__title">
@@ -617,20 +617,67 @@ onMounted(() => {
   transform: scale(0.9);
 }
 
+.soc-summary-panel {
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 5px;
+  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%),
+    linear-gradient(135deg, #fdfefe 0%, #f3f8ff 68%, #eef4ff 100%);
+  box-shadow: 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%),
+    repeating-linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.08) 0,
+      rgba(255, 255, 255, 0.08) 1px,
+      transparent 1px,
+      transparent 14px
+    );
+  pointer-events: none;
+}
+
 .soc-summary-chart {
+  position: relative;
+  z-index: 1;
   width: 100%;
+  padding: 4px;
 }
 
 .soc-summary-chart__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  // margin-bottom: 12px;
+  margin-bottom: 6px;
 }
 
 .soc-summary-chart__title {
+  position: relative;
+  padding-left: 14px;
   font-size: 16px;
-  font-weight: 600;
-  color: #303133;
+  font-weight: 700;
+  color: #1f2a44;
+  letter-spacing: 0.5px;
+}
+
+.soc-summary-chart__title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 6px;
+  height: 18px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #409eff 0%, #9b8cff 100%);
+  transform: translateY(-50%);
+  box-shadow: 0 4px 10px rgba(64, 158, 255, 0.35);
 }
 </style>