feat：头部菜单列最大数修改

src/components/layout/header/HeaderDropdown.vue

 <script>
-const ROW_NUM = 4
+const ROW_NUM = 24;
 export default {
   name: "HeaderDropdown",
   props: {
-    nav: Object
+    nav: Object,
   },
   data() {
-    return {}
+    return {};
   },
   computed: {
     rowNum() {
-      return ROW_NUM - 1
-    }
+      return ROW_NUM - 1;
+    },
   },
   methods: {
     // 目前只支持两级子代 主要是设计图布局不递归
     renderDropdown() {
-      const children = []
-      let itemBox = []
+      const children = [];
+      let itemBox = [];
       if (this.nav.children && this.nav.children.length > 0) {
-        this.nav.children.forEach(item => {
+        this.nav.children.forEach((item) => {
           if (item.children && item.children.length > 0) {
             if (itemBox.length !== 0) {
               // 循环到大版块，且之前有遗留非大版块导航选项 需要先处理下非大版块导航选项列
-              children.push(this.renderItemBox([...itemBox]))
-              itemBox = []
+              children.push(this.renderItemBox([...itemBox]));
+              itemBox = [];
             }
-            children.push(this.renderDropdownRect(item))
+            children.push(this.renderDropdownRect(item));
           } else {
             // 处理非大版块导航选项
             if (itemBox.length === this.rowNum) {
-              children.push(this.renderItemBox([...itemBox, item]))
-              itemBox = []
+              children.push(this.renderItemBox([...itemBox, item]));
+              itemBox = [];
             } else {
-              itemBox.push(item)
+              itemBox.push(item);
             }
           }
-        })
+        });
         if (itemBox.length !== 0) {
           // 循环完之后，有遗留非大版块导航选项 也需要处理
-          children.push(this.renderItemBox([...itemBox]))
+          children.push(this.renderItemBox([...itemBox]));
         }
       }
-      return (<div class="navbar-dropdown-menu-inner">
-        {children}
-      </div>)
+      return <div class="navbar-dropdown-menu-inner">{children}</div>;
     },
 
     // 渲染一个下拉导航里的一个大板块(#1) （带children)
     renderDropdownRect(nav) {
-      const children = []
-      let itemBox = []
-      nav.children.forEach(item => {
+      const children = [];
+      let itemBox = [];
+      nav.children.forEach((item) => {
         if (itemBox.length === this.rowNum) {
-          children.push(this.renderItemBox([...itemBox, item], true))
-          itemBox = []
+          children.push(this.renderItemBox([...itemBox, item], true));
+          itemBox = [];
         } else {
-          itemBox.push(item)
+          itemBox.push(item);
         }
-      })
+      });
       if (itemBox.length > 0) {
-        children.push(this.renderItemBox([...itemBox], true))
+        children.push(this.renderItemBox([...itemBox], true));
       }
-      return (<div class="gs-dropdown-rect">
-        <div class="rect-title"
+      return (
+        <div class="gs-dropdown-rect">
+          <div
+            class="rect-title"
             vOn:click={() => {
-               this.$emit('itemClick', {...nav, root: {...this.nav}})
+              this.$emit("itemClick", { ...nav, root: { ...this.nav } });
             }}
           >
-          <span class="pointer">{nav.nameInHeaderNav ? nav.nameInHeaderNav : nav.name}</span>
+            <span class="pointer">
+              {nav.nameInHeaderNav ? nav.nameInHeaderNav : nav.name}
+            </span>
           </div>
-        <div class="rect-body">
-          {children}
+          <div class="rect-body">{children}</div>
         </div>
-      </div>)
+      );
     },
 
     // 渲染一个下拉导航里的一列 这个分为在大版块(#1)里的列 和 只是单纯的一列
     renderItemBox(items, isChild = false) {
-      const classNames = ['gs-dropdown-col', isChild ? 'no-padding-top' : '']
-      return (<div class={classNames.join(' ').trim()}>
-        {items.map(item => {
-          return (<div class="gs-dropdown-item">
-            <span vOn:click={() => {
-              this.$emit('itemClick', {...item, root: {...this.nav}})
+      const classNames = ["gs-dropdown-col", isChild ? "no-padding-top" : ""];
+      return (
+        <div class={classNames.join(" ").trim()}>
+          {items.map((item) => {
+            return (
+              <div class="gs-dropdown-item">
+                <span
+                  vOn:click={() => {
+                    this.$emit("itemClick", { ...item, root: { ...this.nav } });
                   }}
                   class="pointer link-item gs-hover"
-            >{item.name}
+                >
+                  {item.name}
                 </span>
-          </div>)
+              </div>
+            );
           })}
-      </div>)
+        </div>
+      );
     },
   },
   render() {
     return (
-        <div class="dropdown-menu w-100 gs-nav-dropdown"
-             aria-labelledby={`gs-nav-item-${this.nav.id}`}>
-          <div class="row title">
-            {this.nav.name}
-          </div>
+      <div
+        class="dropdown-menu w-100 gs-nav-dropdown"
+        aria-labelledby={`gs-nav-item-${this.nav.id}`}
+      >
+        <div class="row title">{this.nav.name}</div>
 
-          <div class="row">
-            {this.renderDropdown()}
+        <div class="row">{this.renderDropdown()}</div>
       </div>
-        </div>
-    )
-  }
-}
+    );
+  },
+};
 </script>
 
 <style lang="scss">
@@ -139,6 +144,7 @@ export default {
 .gs-dropdown-rect {
   display: flex;
   flex-direction: column;
+  padding-right: 14px;
   margin-bottom: 20px;
 
   .rect-title {