From e7f464c3ef7dedd242a04b09745d4883d8dcade1 Mon Sep 17 00:00:00 2001
From: JenniferW <1627055433@qq.com>
Date: Mon, 8 Sep 2025 16:59:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E4=BB=93=E5=BA=93=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/component/DataWarehouse.vue | 329 ++++++++++++++++----------
 1 file changed, 198 insertions(+), 131 deletions(-)

diff --git a/src/views/component/DataWarehouse.vue b/src/views/component/DataWarehouse.vue
index 96ac50fc..84159f81 100644
--- a/src/views/component/DataWarehouse.vue
+++ b/src/views/component/DataWarehouse.vue
@@ -1,47 +1,55 @@
 <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-layers">
-      <!-- DWD(数据明细层) - 左侧 -->
-      <div class="layer-item dwd-layer">
-        <div class="layer-title">DWD(数据明细层)</div>
-        <div class="layer-stats">
-          <div class="stat-item">
-            <span class="stat-label">数据子集数量</span>
-            <div class="subset-list">
-              <!-- 使用滚动排名组件 -->
-              <scroll-ranking
-                :list="top20Apis"
-                :visible-count="4"
-                :interval="2000"
-              />
+
+    <!-- 内容区域 - 放右边，与标题区域左右布局 -->
+    <div class="warehouse-container">
+      <div class="warehouse-layers">
+        <!-- DWD(数据明细层) - 左侧 -->
+        <div class="layer-item dwd-layer">
+          <div class="layer-title">DWD(数据明细层)</div>
+          <div class="layer-stats">
+            <div class="stat-item">
+              <span class="stat-label">数据子集数量</span>
+              <div class="subset-list">
+                <!-- 使用滚动排名组件 -->
+                <scroll-ranking
+                  :list="top20Apis"
+                  :visible-count="4"
+                  :interval="2000"
+                />
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- ODS(数据存储层) - 右侧 -->
-      <div class="layer-item ods-layer">
-        <div class="layer-title">ODS(数据存储层)</div>
-        <div class="layer-stats">
-          <div class="stat-item">
-            <span class="stat-label">全量同步累积次数</span>
-            <span class="stat-value">1,284</span>
-          </div>
-          <div class="stat-item">
-            <span class="stat-label">API类数据源同步次数</span>
-            <span class="stat-value">3,721</span>
-          </div>
-          <div class="stat-item">
-            <span class="stat-label">增量同步累积次数</span>
-            <span class="stat-value">8,547</span>
-          </div>
-          <div class="stat-item">
-            <span class="stat-label">视图类数据源同步次数</span>
-            <span class="stat-value">629</span>
+        <!-- 分隔线 -->
+        <div class="layer-divider"></div>
+
+        <!-- ODS(数据存储层) - 右侧 -->
+        <div class="layer-item ods-layer">
+          <div class="layer-title">ODS(数据存储层)</div>
+          <div class="layer-stats">
+            <div class="stat-item">
+              <span class="stat-label">全量同步累积次数</span>
+              <span class="stat-value">1,284</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-label">API类数据源同步次数</span>
+              <span class="stat-value">3,721</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-label">增量同步累积次数</span>
+              <span class="stat-value">8,547</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-label">视图类数据源同步次数</span>
+              <span class="stat-value">629</span>
+            </div>
           </div>
         </div>
       </div>
@@ -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,124 +105,172 @@ export default {
   border-radius: 12px;
   padding: 15px;
   box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
+}
+
+// 主标题区域 - 单独放左边
+.main-title-section {
+  flex: 0 0 100px; // 固定宽度
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  .title-image {
+    width: 60%;
+    margin-bottom: 10px;
+  }
+
+  span {
+    font-size: 24px;
+    color: #fff;
+    font-weight: 600;
+    text-align: center;
+    text-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
+  }
+}
+
+// 内容区域容器 - 放右边
+.warehouse-container {
+  flex: 1; // 占满剩余空间
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.warehouse-layers {
+  display: flex;
+  gap: 15px;
+  height: 100%;
+  box-sizing: border-box;
+  align-items: stretch; // 确保所有子元素高度一致
+}
+
+// 层之间的分隔线
+.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;
+  display: flex;
+  flex-direction: column;
   height: 100%;
   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));
-    }
-
-    span {
-      font-size: 18px;
-      color: #fff;
-      font-weight: 500;
-      text-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
-    }
+  .layer-title {
+    font-size: 16px;
+    color: #fff;
+    margin-bottom: 12px;
+    text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
+    padding-bottom: 6px;
   }
 
-  .warehouse-layers {
-    display: flex;
-    gap: 15px;
-    height: calc(100% - 50px);
+  .layer-stats {
+    flex: 1;
+    display: grid;
+    gap: 10px;
+    overflow: hidden;
 
-    .layer-item {
-      flex: 1;
-
-      padding: 12px;
-      border-radius: 8px;
+    .stat-item {
+      padding: 10px;
+      border-radius: 6px;
       transition: all 0.3s ease;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      box-sizing: border-box;
 
-      .layer-title {
-        font-size: 16px;
-        color: #fff;
-        margin-bottom: 12px;
-        text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
-        padding-bottom: 6px;
+      .stat-label {
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.7);
+        display: block;
+        margin-bottom: 6px;
       }
 
-      .layer-stats {
-        flex: 1;
-        display: grid;
-        gap: 10px;
-        overflow: hidden;
+      .stat-value {
+        font-size: 16px;
+        font-weight: bold;
+        background: linear-gradient(to top, #4a90e2, #fff);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
 
-        .stat-item {
-          padding: 10px;
-          border-radius: 6px;
-          transition: all 0.3s ease;
+      .subset-list {
+        margin-top: 6px;
+        padding-right: 6px;
 
-          .stat-label {
-            font-size: 13px;
-            color: rgba(255, 255, 255, 0.7);
-            display: block;
-            margin-bottom: 6px;
+        &::-webkit-scrollbar {
+          width: 5px;
+        }
+
+        &::-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;
           }
 
-          .stat-value {
-            font-size: 16px;
-            font-weight: bold;
-            background: linear-gradient(to top, #4a90e2, #fff);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-          }
-
-          .subset-list {
-            margin-top: 6px;
-            padding-right: 6px;
-
-            &::-webkit-scrollbar {
-              width: 5px;
-            }
-
-            &::-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;
-              }
-
-              &:hover {
-                color: #4a90e2;
-                transform: translateX(3px);
-                transition: all 0.2s ease;
-              }
-            }
+          &:hover {
+            color: #4a90e2;
+            transform: translateX(3px);
+            transition: all 0.2s ease;
           }
         }
       }
     }
-
-    // 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>
-    
\ No newline at end of file