From 310d618a1616d048d53f27b6579b04e8d69d9c60 Mon Sep 17 00:00:00 2001
From: CaIon <i@caion.me>
Date: Tue, 31 Mar 2026 18:41:44 +0800
Subject: [PATCH] style: enhance footer layout and add custom class for styling

- Refactor Footer component to use a semantic <footer> element for better accessibility.
- Update CSS to include a new class for the custom footer, allowing for relative positioning.
- Adjust layout to improve responsiveness and visual alignment of footer content.
---
 web/src/components/layout/Footer.jsx | 36 +++++++++++++++-------------
 web/src/index.css                    |  3 +++
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/web/src/components/layout/Footer.jsx b/web/src/components/layout/Footer.jsx
index c827a581..ba646893 100644
--- a/web/src/components/layout/Footer.jsx
+++ b/web/src/components/layout/Footer.jsx
@@ -221,23 +221,27 @@ const FooterBar = () => {
   return (
     <div className='w-full'>
       {footer ? (
-        <div className='relative'>
-          <div
-            className='custom-footer'
-            dangerouslySetInnerHTML={{ __html: footer }}
-          ></div>
-          <div className='absolute bottom-2 right-4 text-xs !text-semi-color-text-2 opacity-70'>
-            <span>{t('设计与开发由')} </span>
-            <a
-              href='https://github.com/QuantumNous/new-api'
-              target='_blank'
-              rel='noopener noreferrer'
-              className='!text-semi-color-primary font-medium'
-            >
-              New API
-            </a>
+        <footer className='relative h-auto py-4 px-6 md:px-24 w-full flex items-center justify-center overflow-hidden'>
+          <div className='flex flex-col md:flex-row items-center justify-between w-full max-w-[1110px] gap-4'>
+            <div
+              className='custom-footer na-cb6feafeb3990c78 text-sm !text-semi-color-text-1'
+              dangerouslySetInnerHTML={{ __html: footer }}
+            ></div>
+            <div className='text-sm flex-shrink-0'>
+              <span className='!text-semi-color-text-1'>
+                {t('设计与开发由')}{' '}
+              </span>
+              <a
+                href='https://github.com/QuantumNous/new-api'
+                target='_blank'
+                rel='noopener noreferrer'
+                className='!text-semi-color-primary font-medium'
+              >
+                New API
+              </a>
+            </div>
           </div>
-        </div>
+        </footer>
       ) : (
         customFooter
       )}
diff --git a/web/src/index.css b/web/src/index.css
index 116ff741..163d79b6 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -469,6 +469,9 @@ html.dark .sbg-variant-green {
 .custom-footer {
   font-size: 1.1em;
 }
+.custom-footer.na-cb6feafeb3990c78 {
+  position: relative;
+}
 
 /* 卡片内容容器通用样式 */
 .card-content-container {