diff --git a/src/assets/22.png b/src/assets/22.png new file mode 100644 index 00000000..9be89026 Binary files /dev/null and b/src/assets/22.png differ diff --git a/src/assets/33.png b/src/assets/33.png new file mode 100644 index 00000000..f37b11d3 Binary files /dev/null and b/src/assets/33.png differ diff --git a/src/assets/app.png b/src/assets/app.png new file mode 100644 index 00000000..edd43d33 Binary files /dev/null and b/src/assets/app.png differ diff --git a/src/assets/arrow.png b/src/assets/arrow.png new file mode 100644 index 00000000..d57ee736 Binary files /dev/null and b/src/assets/arrow.png differ diff --git a/src/assets/four.png b/src/assets/four.png new file mode 100644 index 00000000..c5b65efd Binary files /dev/null and b/src/assets/four.png differ diff --git a/src/assets/new.png b/src/assets/new.png new file mode 100644 index 00000000..bca2fcf5 Binary files /dev/null and b/src/assets/new.png differ diff --git a/src/assets/new33.png b/src/assets/new33.png new file mode 100644 index 00000000..b0804008 Binary files /dev/null and b/src/assets/new33.png differ diff --git a/src/assets/system-icon.png b/src/assets/system-icon.png index ecfa9834..d26e7d1f 100644 Binary files a/src/assets/system-icon.png and b/src/assets/system-icon.png differ diff --git a/src/assets/system-icon.png (1).png b/src/assets/system-icon.png (1).png deleted file mode 100644 index 6c1a1dc0..00000000 Binary files a/src/assets/system-icon.png (1).png and /dev/null differ diff --git a/src/assets/system-icon.png (17).png b/src/assets/system-icon.png (17).png index 8395284c..026f44ae 100644 Binary files a/src/assets/system-icon.png (17).png and b/src/assets/system-icon.png (17).png differ diff --git a/src/assets/system-icon.png (4).png b/src/assets/system-icon.png (4).png index 15c11d34..a58f92bf 100644 Binary files a/src/assets/system-icon.png (4).png and b/src/assets/system-icon.png (4).png differ diff --git a/src/assets/system-icon.png (5).png b/src/assets/system-icon.png (5).png index 405665d5..511860e6 100644 Binary files a/src/assets/system-icon.png (5).png and b/src/assets/system-icon.png (5).png differ diff --git a/src/components/AutoScroll.vue b/src/components/AutoScroll.vue index bf3cfdf0..0174b5c8 100644 --- a/src/components/AutoScroll.vue +++ b/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)" > - - - - {{ item }} - + + Item image + + {{ item }} @@ -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)" > - - {{ item }} - + + Item image + {{ item }} @@ -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; - align-items: center; - justify-content: center; - height: 100%; + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } } } - \ No newline at end of file diff --git a/src/views/component/BusinessSystem.vue b/src/views/component/BusinessSystem.vue index e1ae6579..d31b74e9 100644 --- a/src/views/component/BusinessSystem.vue +++ b/src/views/component/BusinessSystem.vue @@ -2,18 +2,17 @@
- + 业务系统
-
-
-
{{ systemCount }}
-
使用数据的业务系统数
-
+ +
+
{{ systemCount }}
+
使用数据的业务系统数
@@ -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 { - font-size: 28px; - color: #4a90e2; - margin-right: 10px; - filter: drop-shadow(0 2px 2px rgba(74, 144, 226, 0.3)); + .title-image { + width: 70%; + margin-bottom: 10px; } 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;