缓解窗口缩放时，导航挡住页面内容。增加导航字体大小缩放

src/assets/darkModelCss/darkStyleMix.css

@@ -40,11 +40,8 @@ background-color: #1D252F;
   height: 92px;
   width: 153px;
 }
-.tab-img { background-color: #1D252F;}
-.tab-img { background-color: #1a4861;}
 
 .nav-tabs > li > a {
-  /* use your comfortable desktop padding */
   padding: 8px 14px;             /* bigger than mobile */
   width: 100%;
   height: 100%;
@@ -249,7 +246,6 @@ font-size: 16px;
 text-align: left;
 background-color: #283044;
 border: 1px solid black;
-border: 1px solid black;
 border-radius: 4px;
 -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
 box-shadow: 0 6px 12px rgb(0 0 0 / 18%);

src/components/PageHeader.vue

@@ -654,6 +654,31 @@ background-color: #283044;
     /* padding-right: 10px; */
   }
 
+  /* 导航字体大小缩放，缩小窗口时，字体一起缩小 */
+  .navbar-nav {
+    display: flex;           /* turn into flexbox */
+    flex-wrap: nowrap;       /* prevent wrapping */
+    justify-content: space-around; /* distribute items */
+  }
+
+  .navbar-nav > li {
+    flex: 1 1 auto;          /* allow shrink & grow */
+    min-width: 0;            /* allow items to get very narrow */
+  }
+
+  .navbar-nav > li > a {
+    text-overflow: ellipsis; /* optional: shorten text with … */
+    white-space: nowrap;     /* keep each link on one line */
+    overflow: hidden;
+  }
+
+  @media (max-width: 992px) {
+    .navbar-nav > li > a {
+      font-size: 12px;
+      padding: 8px;
+    }
+  }
+
   /*body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
 body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
 body .demo-class .layui-layer-btn a{background:#333;}