1

src/components/PublicFooterNav/index.vue

@@ -21,6 +21,11 @@ export default {
   data() {
     return {
       navItems: [
+        {
+          label: '首页',
+          path: '/public/home',
+          icon: 'el-icon-s-home'
+        },
         {
           label: '评论生成',
           path: '/tools/comment-gen',
@@ -70,9 +75,10 @@ export default {
   display: flex;
   justify-content: space-around;
   align-items: center;
-  max-width: 600px;
+  max-width: 800px;
   margin: 0 auto;
-  padding: 0 16px;
+  padding: 0 8px;
+  gap: 4px;
 }
 
 .nav-item {
@@ -81,7 +87,7 @@ export default {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  padding: 8px 16px;
+  padding: 8px 8px;
   border-radius: 8px;
   transition: all 0.3s ease;
   flex: 1;
@@ -100,7 +106,7 @@ export default {
 }
 
 .nav-item i {
-  font-size: 22px;
+  font-size: 20px;
   margin-bottom: 4px;
   transition: transform 0.3s ease;
 }
@@ -110,43 +116,51 @@ export default {
 }
 
 .nav-label {
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 100%;
 }
 
 /* 响应式设计 */
 @media (max-width: 480px) {
+  .nav-container {
+    padding: 0 4px;
+    gap: 2px;
+  }
+  
   .nav-item {
-    padding: 6px 12px;
+    padding: 6px 4px;
   }
   
   .nav-item i {
-    font-size: 20px;
+    font-size: 18px;
   }
   
   .nav-label {
-    font-size: 11px;
+    font-size: 10px;
   }
 }
 
 @media (min-width: 768px) {
   .nav-container {
-    max-width: 800px;
+    max-width: 900px;
+    padding: 0 12px;
+    gap: 8px;
   }
   
   .nav-item {
-    padding: 10px 20px;
+    padding: 10px 12px;
   }
   
   .nav-item i {
-    font-size: 24px;
+    font-size: 22px;
   }
   
   .nav-label {
-    font-size: 13px;
+    font-size: 12px;
   }
 }
 </style>