From 1088900edc7138e67bb8816442ff2ae815c82758 Mon Sep 17 00:00:00 2001 From: tianyongbao Date: Fri, 12 Dec 2025 08:11:00 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/HomePage.vue | 195 ++++++++++++++++------------------------- 1 file changed, 74 insertions(+), 121 deletions(-) diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue index fd84ef0..18761bf 100644 --- a/src/views/HomePage.vue +++ b/src/views/HomePage.vue @@ -2,34 +2,30 @@
-

Qdintc - 统一工作平台

+

海纳云 - 统一工作平台

- +
-

{{ category.title }}

-
-
- {{ tool.icon }} -

{{ tool.name }}

-

{{ tool.desc }}

-

{{ tool.displayUrl }}

@@ -45,7 +41,7 @@ import Page from '../components/Page' export default { name: 'HomePage', components: { Page }, - + data() { return { // 代码管理工具 @@ -82,7 +78,7 @@ export default { icon: 'MI', color: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)' }, - + { name: 'Harbor', desc: 'Docker镜像仓库', @@ -94,7 +90,7 @@ export default { ], // 数据库工具 databaseTools: [ - + { name: 'Nocos', desc: 'Nocos配置管理', @@ -103,7 +99,7 @@ export default { icon: 'NC', color: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)' }, - + { name: 'Jenkins', desc: '持续集成构建平台', @@ -137,13 +133,13 @@ export default { color: 'linear-gradient(135deg, #e43a15 0%, #e65245 100%)' } ], - // + // monitorTools: [ - + ], // 文档知识工具 docTools: [ - + { name: '智聪官网', desc: '智聪官网', @@ -263,7 +259,7 @@ export default { ], // 安全扫描工具 securityTools: [ - + ], // 其他工具 otherTools: [ @@ -348,7 +344,7 @@ export default { cloudTools: [] } }, - + computed: { // 分类配置（统一管理） categories: function() { @@ -361,11 +357,11 @@ export default { ] } }, - + created() { this.init() }, - + methods: { /** * 打开工具链接 @@ -390,16 +386,14 @@ export default { @text-tertiary: #999; // 尺寸变量 -@header-height: 76px; -@card-width: 240px; -@icon-size: 60px; -@border-radius-lg: 12px; -@border-radius-md: 10px; +@header-height: 50px; +@card-width: 100px; +@border-radius-md: 6px; // 间距变量 -@spacing-sm: 10px; -@spacing-md: 20px; -@spacing-lg: 30px; +@spacing-sm: 6px; +@spacing-md: 12px; +@spacing-lg: 16px; // 页面主体 .workbench-page { @@ -411,7 +405,7 @@ export default { .workbench-container { max-width: 1920px; margin: 0 auto; - padding: 20px @spacing-md; + padding: 10px @spacing-md; } .workbench-header { @@ -421,13 +415,13 @@ export default { right: 0; width: 100%; text-align: center; - padding: @spacing-md 0; + padding: 8px 0; background: @primary-gradient; z-index: 1000; - + h1 { - font-size: 32px; - font-weight: 700; + font-size: 20px; + font-weight: 600; color: @white-color; margin: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); @@ -437,23 +431,23 @@ export default { .tools-container { display: flex; flex-wrap: wrap; - gap: 15px @spacing-md; + gap: 8px @spacing-md; align-items: flex-start; } .tool-category { flex: 0 1 auto; - + .category-title { - font-size: 20px; + font-size: 14px; font-weight: 600; color: @white-color; - margin-bottom: @spacing-sm; - padding-left: 12px; - border-left: 4px solid rgba(255, 255, 255, 0.8); - line-height: 1.5; + margin-bottom: 4px; + padding-left: 8px; + border-left: 3px solid rgba(255, 255, 255, 0.8); + line-height: 1.3; } - + .category-items { display: flex; flex-wrap: wrap; @@ -464,63 +458,35 @@ export default { .tool-card { display: flex; align-items: center; - padding: 10px 10px; + justify-content: center; + padding: 8px 6px; background: rgba(255, 255, 255, 0.95); border-radius: @border-radius-md; cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transition: all 0.2s ease; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); width: @card-width; - - &:hover { - transform: translateY(-4px); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); - background: @white-color; - } -} + min-height: 36px; -.tool-icon { - width: @icon-size; - height: @icon-size; - border-radius: @border-radius-lg; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - margin-right: 16px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); - - .icon-text { - font-size: 24px; - font-weight: bold; - color: @white-color; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + background: @white-color; } } .tool-info { flex: 1; min-width: 0; + text-align: center; } .tool-name { - font-size: 18px; + font-size: 13px; font-weight: 600; color: @text-primary; - margin: 0 0 4px; -} - -.tool-desc { - font-size: 13px; - color: @text-secondary; - margin: 0 0 4px; -} - -.tool-url { - font-size: 12px; - color: @text-tertiary; - font-family: 'Consolas', 'Monaco', monospace; margin: 0; + line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -529,78 +495,65 @@ export default { // 响应式布局 - 平板 @media (max-width: 1024px) { .tools-container { - gap: 25px @spacing-lg; + gap: 8px @spacing-md; } - + .tool-category { flex-direction: column; width: 100%; - + .category-title { width: auto; text-align: left; - padding: 10px 12px; + padding: 6px 8px; + font-size: 13px; } - + .category-items { width: 100%; } } - + .tool-card { - width: calc(50% - 8px); + width: calc(33.333% - 6px); } - + .workbench-header h1 { - font-size: 36px; + font-size: 18px; } } // 响应式布局 - 手机 @media (max-width: 600px) { .workbench-container { - padding: @spacing-lg @spacing-sm; + padding: @spacing-md @spacing-sm; } - + .workbench-header { - margin-bottom: @spacing-lg; - + margin-bottom: @spacing-sm; + h1 { - font-size: 28px; + font-size: 16px; } } - + .tools-container { - gap: @spacing-md; + gap: @spacing-sm; } - + .tool-category { .category-title { - font-size: 16px; - padding: 8px 10px; + font-size: 12px; + padding: 4px 6px; } } - + .tool-card { - padding: 14px; - width: 100%; + padding: 6px 8px; + width: calc(50% - 4px); } - - .tool-icon { - width: 50px; - height: 50px; - margin-right: 12px; - - .icon-text { - font-size: 20px; - } - } - + .tool-name { - font-size: 16px; - } - - .tool-desc { font-size: 12px; } }