移动端 动态文档添加 首页导航bug修复

mining-pool/src/components/header.vue

@@ -904,10 +904,13 @@ export default {
 }
 .header {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-between; /* 保持logo在左，导航在右 */
   align-items: center;
   height: 100%;
-  width: 95%;
+  width: 100%;
+ 
+  margin: 0 auto; /* 居中显示 */
+  padding: 0 2.5%; /* 使用padding替代固定宽度 */
   /* outline: 1px solid red; */
   // outline: 1PX solid red;
   // padding: 0px 5%;
@@ -915,30 +918,35 @@ export default {
   // background: #21A0FF;
 }
 .logo {
-  width: 18%;
+  flex: 0 0 auto; /* 不伸缩，保持固定大小 */
   height: 100%;
   display: flex;
-  justify-content: right;
+  justify-content: flex-end; /* 右对齐 */
   align-items: center;
   font-size: 0.9rem;
+  width: 300px; /* 固定宽度，给导航留出更多空间 */
 
   img {
     width: 100px;
+    height: auto; /* 保持比例 */
   }
 }
 .topMenu {
-  width: 80%;
+  flex: 1; /* 占据剩余空间 */
   height: 100%;
   display: flex;
-  justify-content: end;
+  justify-content: flex-end; /* 右对齐 */
   align-items: center;
+  min-width: 0; /* 允许收缩 */
   // background: goldenrod;
 
+
   .afterLoggingIn {
-    min-width: 50%;
     display: flex;
-    justify-content: right;
+    justify-content: flex-end; /* 右对齐 */
     align-items: center;
+    flex-wrap: nowrap; /* 防止换行 */
+    width: auto; /* 自适应宽度 */
     // background: #6E3EDB;
 
     .langBox {
@@ -983,10 +991,15 @@ export default {
     }
   }
   .notLoggedIn {
-    width: 40%;
+    display: flex;
+    justify-content: flex-end; /* 右对齐 */
+    align-items: center;
+    gap: 12px; /* 增加间距 */
 
     li {
-      margin-left: 1%;
+      flex: 0 0 auto; /* 不伸缩，保持内容大小 */
+      white-space: nowrap; /* 防止文字换行 */
+      padding: 0 6px; /* 减少内边距 */
     }
     .langBox {
       display: flex;
@@ -1006,28 +1019,28 @@ export default {
   }
 }
 .menuBox {
-  min-width: 42% !important;
-  height: 100%;
   display: flex;
-  justify-content: end;
+  justify-content: flex-end; /* 右对齐 */
   align-items: center;
-  margin: 0%;
+  margin: 0;
+  gap: 12px; /* 增加间距 */
+  flex-wrap: nowrap; /* 防止换行 */
   // background: #fff;
 
   li {
     list-style: none;
-    // width: calc(100% / 5);
     height: 45%;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    margin-left: 3%;
     font-size: 0.9rem;
-    // transition: all 0.3s linear;
     position: relative;
     text-align: center;
-    min-width: 61px;
+    flex: 0 0 auto; /* 不伸缩，保持内容大小 */
+    white-space: nowrap; /* 防止文字换行 */
+    padding: 0 6px; /* 减少内边距 */
+    min-width: auto; /* 移除最小宽度限制 */
   }
 
   li:hover {
@@ -1087,4 +1100,48 @@ export default {
 .el-menu.el-menu--horizontal {
   border-bottom: 0px !important;
 }
+
+/* 响应式设计 - 小屏幕适配 */
+@media (max-width: 768px) {
+  .header {
+    padding: 0 1%; /* 减少内边距 */
+  }
+  
+  .logo {
+    min-width: 80px; /* 减少logo最小宽度 */
+    
+    img {
+      width: 80px; /* 减小logo尺寸 */
+    }
+  }
+  
+  .menuBox {
+    gap: 4px; /* 减少间距 */
+    
+    li {
+      font-size: 0.8rem; /* 减小字体 */
+      padding: 0 4px; /* 减少内边距 */
+    }
+  }
+  
+  .topMenu .afterLoggingIn .langBox {
+    width: 50px; /* 减小语言选择框宽度 */
+  }
+}
+
+/* 超小屏幕 - 隐藏部分菜单项 */
+@media (max-width: 480px) {
+  .menuBox li:not(.home):not(.langBox) {
+    display: none; /* 只显示首页和语言选择 */
+  }
+  
+  .menuBox {
+    gap: 2px;
+    
+    li {
+      font-size: 0.75rem;
+      padding: 0 2px;
+    }
+  }
+}
 </style>