业务系统模块

src/components/AutoScroll.vue

@@ -13,14 +13,13 @@
           class="scroll-item"
           v-for="(item, index) in items"
           :key="index"
-          :style="itemStyle(item)"
+          :style="itemStyle()"
           @click="$emit('item-click', item, index)"
         >
-          <!-- 自定义项目内容插槽 -->
+          <!-- 固定图片 -->
-          <slot name="item" :item="item">
+          <img src="../assets/app.png" alt="Item image" class="item-image" />
           <!-- 默认内容 -->
           <span class="default-item-content">{{ item }}</span>
-          </slot>
         </div>
 
         <!-- 复制一份用于无缝循环 -->
@@ -28,12 +27,12 @@
           class="scroll-item"
           v-for="(item, index) in items"
           :key="'copy-' + index"
-          :style="itemStyle(item)"
+          :style="itemStyle()"
           @click="$emit('item-click', item, index)"
         >
-          <slot name="item" :item="item">
+          <!-- 固定图片 -->
+          <img src="../assets/app.png" alt="Item image" class="item-image" />
           <span class="default-item-content">{{ item }}</span>
-          </slot>
         </div>
       </div>
     </div>
@@ -69,18 +68,13 @@ export default {
     // 项目宽度
     itemWidth: {
       type: Number,
-      default: 150,
+      default: 100,
     },
     // 项目高度
     itemHeight: {
       type: Number,
       default: 100,
     },
-    // 项目间距
-    itemMargin: {
-      type: Number,
-      default: 10,
-    },
   },
   data() {
     return {
@@ -111,13 +105,11 @@ export default {
     window.removeEventListener("resize", this.handleResize);
   },
   methods: {
-    // 计算项目样式
+    // 计算项目样式 - 移除了背景色设置
-    itemStyle(item) {
+    itemStyle() {
       return {
         width: `${this.itemWidth}px`,
         height: `${this.itemHeight}px`,
-        margin: `0 ${this.itemMargin}px`,
-        background: item.color || "#ccc",
       };
     },
 
@@ -187,7 +179,7 @@ export default {
 .auto-scroll {
   position: relative;
   width: 100%;
-  max-width: 1200px;
+  max-width: 1300px;
   margin: 0 auto;
   padding: 0;
   box-sizing: border-box;
@@ -205,29 +197,36 @@ export default {
     .scroll-item {
       display: inline-block;
       border-radius: 8px;
-      color: white;
+      color: #eee;
       font-weight: bold;
       text-align: center;
-      line-height: 100%;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease;
       cursor: pointer;
       padding: 10px;
       box-sizing: border-box;
+      vertical-align: top; /* 确保所有项目对齐 */
 
       &:hover {
         transform: scale(1.05);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
       }
 
+      .item-image {
+        width: 80%;
+        height: auto;
+        object-fit: cover; /* 保持图片比例并覆盖容器 */
+        border-radius: 4px;
+        margin-bottom: 5px;
+      }
+
       .default-item-content {
-        display: flex;
+        display: block;
-        align-items: center;
+        overflow: hidden;
-        justify-content: center;
+        text-overflow: ellipsis;
-        height: 100%;
+        white-space: nowrap;
       }
     }
   }
 }
 </style>
-    

src/views/component/BusinessSystem.vue

@@ -2,20 +2,19 @@
   <div class="business-system">
     <!-- 主标题区域 - 单独放左边 -->
     <div class="main-title-section">
-      <i class="el-icon-monitor"></i>
+      <img src="@/assets/22.png" alt="" class="title-image" />
       <span>业务系统</span>
     </div>
 
     <!-- 原有内容区域 - 放右边，与标题区域左右布局 -->
     <div class="business-container">
       <div class="title-section">
-        <div class="title-content">
+        <img src="@/assets/new.png" alt="" class="system-image" />
         <div class="system-stats">
           <div class="stat-number">{{ systemCount }}</div>
           <div class="stat-label">使用数据的业务系统数</div>
         </div>
       </div>
-      </div>
 
       <!-- 右侧内容区域 -->
       <div class="content-section">
@@ -84,25 +83,24 @@ export default {
 
 // 主标题区域 - 单独放左边
 .main-title-section {
-  flex: 0 0 180px; // 固定宽度
+  flex: 0 0 100px; // 固定宽度
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-
   padding-right: 20px;
   box-sizing: border-box;
 
-  i {
+  .title-image {
-    font-size: 28px;
+    width: 70%;
-    color: #4a90e2;
+    margin-bottom: 10px;
-    margin-right: 10px;
-    filter: drop-shadow(0 2px 2px rgba(74, 144, 226, 0.3));
   }
 
   span {
-    font-size: 22px;
+    font-size: 24px;
     color: #fff;
     font-weight: 600;
+    text-align: center;
     text-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
   }
 }
@@ -117,7 +115,7 @@ export default {
 
 // 左侧统计数字区域
 .title-section {
-  flex: 0 0 200px; // 固定宽度
+  flex: 0 0 320px; // 固定宽度
   display: flex;
   align-items: center;
   justify-content: center;
@@ -136,20 +134,20 @@ export default {
   box-sizing: border-box;
 }
 
-// 标题区域样式
-.title-content {
-  text-align: center;
-}
-
 .system-stats {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  margin-left: 20px;
 
   .stat-number {
     font-size: 40px;
     font-weight: bold;
-    background: linear-gradient(to top, #4a90e2, #fff);
+    font-style: italic;
+    text-decoration: underline;
+    text-underline-position: under right;
+    text-decoration-thickness: 1px;
+    text-decoration-color: #465e8a;
+    background: #17f5f8;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 10px;