|
|
@@ -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>
|
