diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue index 401bfca..b08c6f7 100644 --- a/src/views/HomePage.vue +++ b/src/views/HomePage.vue @@ -331,7 +331,7 @@ export default { // 尺寸变量 @header-height: 76px; -@card-width: 250px; +@card-width: 245px; @icon-size: 60px; @border-radius-lg: 12px; @border-radius-md: 10px; @@ -540,18 +540,19 @@ export default { .tools-container { display: flex; - flex-direction: column; - gap: 30px; + flex-direction: row; + flex-wrap: wrap; + gap: 20px; align-items: flex-start; overflow: visible; } .tool-category { - flex: 0 1 auto; + flex: 0 0 auto; overflow: visible; - width: 100%; position: relative; z-index: 1; + max-width: 100%; .category-title { font-size: 22px; @@ -571,6 +572,8 @@ export default { flex-wrap: wrap; gap: @spacing-sm; overflow: visible; + align-items: flex-start; + max-width: 100%; } } @@ -597,7 +600,7 @@ export default { display: inline-flex; align-items: center; justify-content: center; - padding: 12px 24px; + padding: 8px 10px; background: rgba(255, 255, 255, 0.98); border-radius: 10px; cursor: pointer; @@ -607,6 +610,7 @@ export default { backdrop-filter: blur(10px); position: relative; z-index: 1; + flex: 0 0 auto; .simple-tool-name { font-size: 15px; @@ -1029,7 +1033,7 @@ export default { } .tool-card { - padding: 14px; + padding: 4px; width: 100%; }