数据仓库优化

src/views/component/DataWarehouse.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="data-warehouse">
-    <div class="warehouse-header">
-      <i class="el-icon-data-line"></i>
+    <!-- 主标题区域 - 单独放左边 -->
+    <div class="main-title-section">
+      <img src="@/assets/33.png" alt="" class="title-image" />
       <span>数据仓库</span>
     </div>
+
+    <!-- 内容区域 - 放右边，与标题区域左右布局 -->
+    <div class="warehouse-container">
       <div class="warehouse-layers">
         <!-- DWD(数据明细层) - 左侧 -->
         <div class="layer-item dwd-layer">
@@ -23,6 +27,9 @@
           </div>
         </div>
 
+        <!-- 分隔线 -->
+        <div class="layer-divider"></div>
+
         <!-- ODS(数据存储层) - 右侧 -->
         <div class="layer-item ods-layer">
           <div class="layer-title">ODS(数据存储层)</div>
@@ -47,6 +54,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -77,6 +85,17 @@ export default {
 
 <style scoped lang="scss">
 .data-warehouse {
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex; /* 主容器变为flex，让标题和内容区域左右布局 */
+  gap: 20px;
+  padding: 0;
+  margin: 0;
+}
+
+.main-title-section,
+.warehouse-container {
   background: linear-gradient(
     to bottom,
     rgba(30, 60, 100, 0.8),
@@ -86,37 +105,61 @@ export default {
   border-radius: 12px;
   padding: 15px;
   box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
-  height: 100%;
+}
+
+// 主标题区域 - 单独放左边
+.main-title-section {
+  flex: 0 0 100px; // 固定宽度
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   box-sizing: border-box;
 
-  .warehouse-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
-
-    i {
-      font-size: 24px;
-      color: #4a90e2;
-      margin-right: 8px;
-      filter: drop-shadow(0 2px 2px rgba(74, 144, 226, 0.3));
+  .title-image {
+    width: 60%;
+    margin-bottom: 10px;
   }
 
   span {
-      font-size: 18px;
+    font-size: 24px;
     color: #fff;
-      font-weight: 500;
+    font-weight: 600;
+    text-align: center;
     text-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
   }
-  }
+}
 
-  .warehouse-layers {
+// 内容区域容器 - 放右边
+.warehouse-container {
+  flex: 1; // 占满剩余空间
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.warehouse-layers {
   display: flex;
   gap: 15px;
-    height: calc(100% - 50px);
+  height: 100%;
+  box-sizing: border-box;
+  align-items: stretch; // 确保所有子元素高度一致
+}
 
-    .layer-item {
+// 层之间的分隔线
+.layer-divider {
+  width: 1px;
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    rgba(74, 144, 226, 0.5),
+    transparent
+  );
+  align-self: center;
+  height: 80%; // 分隔线高度为容器的80%，视觉上更和谐
+}
+
+.layer-item {
   flex: 1;
-
   padding: 12px;
   border-radius: 8px;
   transition: all 0.3s ease;
@@ -190,20 +233,44 @@ export default {
       }
     }
   }
-    }
-
-    // ODS层使用2x2网格布局
-    .ods-layer .layer-stats {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
 }
 
-// 响应式调整，在小屏幕上自动切换为上下布局
-@media (max-width: 768px) {
+// ODS层使用2x2网格布局
+.ods-layer .layer-stats {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+// 响应式调整
+@media (max-width: 1200px) {
+  .data-warehouse {
+    flex-direction: column;
+  }
+
+  .main-title-section {
+    flex: none;
+    border-right: none;
+    border-bottom: 1px solid rgba(74, 144, 226, 0.2);
+    padding-right: 0;
+    padding-bottom: 15px;
+    margin-bottom: 15px;
+    width: 100%;
+  }
+
   .warehouse-layers {
     flex-direction: column;
   }
+
+  // 在小屏幕上，分隔线改为水平方向
+  .layer-divider {
+    width: 80%;
+    height: 1px;
+    margin: 10px auto;
+    background: linear-gradient(
+      to right,
+      transparent,
+      rgba(74, 144, 226, 0.5),
+      transparent
+    );
+  }
 }
 </style>
-