-
各类型数据田分布情况
-
+
+
+ 全量同步累积次数
+ 1,284
-
-
各数据子集数据田分布
-
+
+ API类数据源同步次数
+ 3,721
+
+
+ 增量同步累积次数
+ 8,547
+
+
+ 视图类数据源同步次数
+ 629
@@ -64,9 +50,27 @@
@@ -82,11 +86,13 @@ export default {
border-radius: 12px;
padding: 15px;
box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
+ height: 100%;
+ box-sizing: border-box;
.warehouse-header {
display: flex;
align-items: center;
- margin-bottom: 10px;
+ margin-bottom: 15px;
i {
font-size: 24px;
@@ -105,116 +111,99 @@ export default {
.warehouse-layers {
display: flex;
- flex-direction: column;
- gap: 10px;
+ gap: 15px;
+ height: calc(100% - 50px);
.layer-item {
- background: rgba(74, 144, 226, 0.1);
- padding: 8px;
+ flex: 1;
+
+ padding: 12px;
border-radius: 8px;
transition: all 0.3s ease;
-
- &:hover {
- background: rgba(74, 144, 226, 0.2);
- box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
- }
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ box-sizing: border-box;
.layer-title {
font-size: 16px;
color: #fff;
- margin-bottom: 8px;
+ margin-bottom: 12px;
text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
+ padding-bottom: 6px;
}
.layer-stats {
+ flex: 1;
display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 8px;
+ gap: 10px;
+ overflow: hidden;
.stat-item {
- background: rgba(74, 144, 226, 0.15);
- padding: 6px;
+ padding: 10px;
border-radius: 6px;
transition: all 0.3s ease;
- &:hover {
- background: rgba(74, 144, 226, 0.25);
- }
-
.stat-label {
- font-size: 12px;
+ font-size: 13px;
color: rgba(255, 255, 255, 0.7);
display: block;
- margin-bottom: 4px;
+ margin-bottom: 6px;
}
.stat-value {
- font-size: 14px;
+ font-size: 16px;
font-weight: bold;
background: linear-gradient(to top, #4a90e2, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
- }
- }
- .layer-charts {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 8px;
+ .subset-list {
+ margin-top: 6px;
+ padding-right: 6px;
- .chart-item {
- background: rgba(74, 144, 226, 0.15);
- padding: 6px;
- border-radius: 6px;
- transition: all 0.3s ease;
-
- &:hover {
- background: rgba(74, 144, 226, 0.25);
- }
-
- .chart-title {
- font-size: 12px;
- color: rgba(255, 255, 255, 0.8);
- margin-bottom: 4px;
- }
-
- .mock-chart {
- width: 100%;
- height: 100px;
- background: rgba(74, 144, 226, 0.1);
- border-radius: 4px;
- position: relative;
- overflow: hidden;
-
- &::before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: linear-gradient(
- 90deg,
- rgba(74, 144, 226, 0.2) 0%,
- rgba(74, 144, 226, 0) 50%,
- rgba(74, 144, 226, 0.2) 100%
- );
- animation: chartShine 3s infinite;
+ &::-webkit-scrollbar {
+ width: 5px;
}
- @keyframes chartShine {
- 0% {
- transform: translateX(-100%);
+ &::-webkit-scrollbar-thumb {
+ border-radius: 3px;
+ }
+
+ .subset-item {
+ font-size: 13px;
+ color: rgba(255, 255, 255, 0.9);
+ padding: 5px 0;
+ border-bottom: 1px dashed rgba(74, 144, 226, 0.2);
+
+ &:last-child {
+ border-bottom: none;
}
- 100% {
- transform: translateX(100%);
+
+ &:hover {
+ color: #4a90e2;
+ transform: translateX(3px);
+ transition: all 0.2s ease;
}
}
}
}
}
}
+
+ // ODS层使用2x2网格布局
+ .ods-layer .layer-stats {
+ grid-template-columns: repeat(2, 1fr);
+ }
}
}
-
\ No newline at end of file
+
+// 响应式调整，在小屏幕上自动切换为上下布局
+@media (max-width: 768px) {
+ .warehouse-layers {
+ flex-direction: column;
+ }
+}
+
+
\ No newline at end of file