图片上传

src/components/AutoScroll.vue

@@ -188,14 +188,14 @@ export default {
   position: relative;
   width: 100%;
   max-width: 1200px;
-  margin: 20px auto;
+  margin: 0 auto;
   padding: 0;
   box-sizing: border-box;
 
   .scroll-wrapper {
     overflow: hidden;
     white-space: nowrap;
-    padding: 20px 0;
+    padding: 0;
     scroll-behavior: smooth;
 
     .scroll-content {

src/views/component/BusinessSystem.vue

@@ -1,12 +1,15 @@
 <template>
   <div class="business-system">
-    <div class="business-container">
+    <!-- 主标题区域 - 单独放左边 -->
-      <div class="title-section">
+    <div class="main-title-section">
-        <div class="title-content">
-          <div class="main-title">
       <i class="el-icon-monitor"></i>
       <span>业务系统</span>
     </div>
+
+    <!-- 原有内容区域 - 放右边，与标题区域左右布局 -->
+    <div class="business-container">
+      <div class="title-section">
+        <div class="title-content">
           <div class="system-stats">
             <div class="stat-number">{{ systemCount }}</div>
             <div class="stat-label">使用数据的业务系统数</div>
@@ -48,12 +51,26 @@ export default {
   },
   mounted() {},
   beforeDestroy() {},
-  methods: {},
+  methods: {
+    handleItemClick(item) {
+      // 处理点击事件的逻辑
+      console.log("点击了系统:", item);
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
 .business-system {
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden; /* 防止内容溢出组件 */
+  display: flex; /* 主容器变为flex，让标题和内容区域左右布局 */
+  gap: 20px;
+}
+
+.main-title-section,
+.business-container {
   background: linear-gradient(
     to bottom,
     rgba(30, 60, 100, 0.8),
@@ -63,21 +80,44 @@ export default {
   border-radius: 12px;
   padding: 15px;
   box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
-  height: 100%;
-  box-sizing: border-box;
-  overflow: hidden; /* 防止内容溢出组件 */
 }
 
-// 主容器：标题区域与内容区域左右布局
+// 主标题区域 - 单独放左边
+.main-title-section {
+  flex: 0 0 180px; // 固定宽度
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding-right: 20px;
+  box-sizing: border-box;
+
+  i {
+    font-size: 28px;
+    color: #4a90e2;
+    margin-right: 10px;
+    filter: drop-shadow(0 2px 2px rgba(74, 144, 226, 0.3));
+  }
+
+  span {
+    font-size: 22px;
+    color: #fff;
+    font-weight: 600;
+    text-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
+  }
+}
+
+// 原有内容区域容器 - 放右边
 .business-container {
+  flex: 1; // 占满剩余空间
   display: flex;
   height: 100%;
   gap: 20px;
 }
 
-// 左侧标题区域 - 单独分离
+// 左侧统计数字区域
 .title-section {
-  flex: 0 0 220px; // 固定宽度
+  flex: 0 0 200px; // 固定宽度
   display: flex;
   align-items: center;
   justify-content: center;
@@ -101,27 +141,6 @@ export default {
   text-align: center;
 }
 
-.main-title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 20px;
-
-  i {
-    font-size: 28px;
-    color: #4a90e2;
-    margin-right: 10px;
-    filter: drop-shadow(0 2px 2px rgba(74, 144, 226, 0.3));
-  }
-
-  span {
-    font-size: 22px;
-    color: #fff;
-    font-weight: 600;
-    text-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
-  }
-}
-
 .system-stats {
   display: flex;
   flex-direction: column;
@@ -154,6 +173,20 @@ export default {
 
 // 响应式调整
 @media (max-width: 1200px) {
+  .business-system {
+    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%;
+  }
+
   .business-container {
     flex-direction: column;
   }
@@ -169,4 +202,3 @@ export default {
   }
 }
 </style>
-