diff --git a/apps/jingrow/frontend/src/views/HomePage.vue b/apps/jingrow/frontend/src/views/HomePage.vue index 08f9e33..9b481c4 100644 --- a/apps/jingrow/frontend/src/views/HomePage.vue +++ b/apps/jingrow/frontend/src/views/HomePage.vue @@ -1117,49 +1117,70 @@ onUnmounted(() => { @@ -2467,7 +2488,7 @@ onUnmounted(() => { background: white; border-top: 1px solid #e5e7eb; margin-top: auto; - padding: 64px 0 32px; + padding: 64px 0; } .footer-container { @@ -2476,23 +2497,125 @@ onUnmounted(() => { padding: 0 24px; } -.footer-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); +.footer-content { + display: flex; + justify-content: space-between; + align-items: flex-start; gap: 64px; - margin-bottom: 48px; +} + +/* 左侧区域 */ +.footer-left { + display: flex; + flex-direction: column; + gap: 24px; + flex-shrink: 0; +} + +.footer-logo { + .logo-link { + display: flex; + align-items: center; + gap: 12px; + text-decoration: none; + color: #1f2937; + font-size: 18px; + font-weight: 700; + transition: opacity 0.2s; + + &:hover { + opacity: 0.8; + } + } + + .logo-img { + height: 32px; + width: auto; + } + + .logo-text { + font-size: 18px; + font-weight: 700; + white-space: nowrap; + } +} + +.footer-social { + display: flex; + gap: 16px; + align-items: center; +} + +.social-icon { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + color: #94a3b8; + transition: all 0.2s ease; + text-decoration: none; + + :deep(svg) { + width: 32px; + height: 32px; + } + + &:hover { + color: #1fc76f; + transform: translateY(-2px); + } +} + +.footer-copyright { + display: flex; + flex-direction: column; + gap: 8px; +} + +.copyright-text { + margin: 0; + color: #6b7280; + font-size: 13px; + line-height: 1.5; +} + +.icp-text { + margin: 0; + color: #9ca3af; + font-size: 12px; + line-height: 1.5; + + a { + color: inherit; + text-decoration: none; + transition: color 0.2s ease; + + &:hover { + color: #1fc76f; + } + } +} + +/* 右侧区域 */ +.footer-right { + display: flex; + gap: 64px; + flex: 1; + justify-content: flex-end; } .footer-column { display: flex; flex-direction: column; + min-width: 140px; } .footer-title { font-size: 13px; font-weight: 600; color: #111827; - margin: 0 0 20px 0; + margin: 0 0 16px 0; letter-spacing: 0.05em; text-transform: uppercase; } @@ -2503,7 +2626,7 @@ onUnmounted(() => { margin: 0; display: flex; flex-direction: column; - gap: 14px; + gap: 12px; } .footer-links li { @@ -2524,23 +2647,13 @@ onUnmounted(() => { } } -.footer-bottom { - border-top: 1px solid #e5e7eb; - padding-top: 24px; - text-align: center; -} - -.copyright { - margin: 0; - color: #9ca3af; - font-size: 13px; - letter-spacing: 0.01em; -} - @media (max-width: 1024px) { - .footer-grid { - grid-template-columns: repeat(2, 1fr); - gap: 32px; + .footer-content { + gap: 48px; + } + + .footer-right { + gap: 48px; } } @@ -2654,24 +2767,76 @@ onUnmounted(() => { } } - .footer-grid { - grid-template-columns: repeat(2, 1fr); - gap: 40px; + .marketing-footer { + padding: 40px 0 24px; } - .marketing-footer { - padding: 48px 0 24px; + .footer-container { + padding: 0 16px; + } + + .footer-content { + flex-direction: column; + gap: 32px; + } + + .footer-right { + flex-direction: column; + gap: 32px; + width: 100%; + } + + .footer-column { + min-width: auto; + } + + .footer-social { + gap: 12px; + } + + .social-icon { + width: 28px; + height: 28px; + + :deep(svg) { + width: 18px; + height: 18px; + } } } @media (max-width: 480px) { - .footer-grid { - grid-template-columns: 1fr; - gap: 32px; + .marketing-footer { + padding: 32px 0 20px; } - .marketing-footer { - padding: 40px 0 20px; + .footer-content { + gap: 24px; + } + + .footer-right { + gap: 24px; + } + + .footer-title { + font-size: 12px; + margin-bottom: 12px; + } + + .footer-links { + gap: 10px; + } + + .footer-links a { + font-size: 13px; + } + + .copyright-text { + font-size: 12px; + } + + .icp-text { + font-size: 11px; } }