Fix:修改大屏菜单样式为换行

src/app/routes/data-v/navigation/navigation.component.html

@@ -21,9 +21,6 @@
         (mouseover)="menuOver(menu, $event)"
         *ngIf="menu.rootFlag && selectedParentMenu && menu.menuCode == selectedParentMenu.menuCode && menu.menuCode !== 'Home'"
       >
-        <!-- <a href="javascript:void(0);" class="menu-group" [class.active]="isActive(true)" (click)="navigate(menu)">
-          {{ menu.text }}
-        </a> -->
         <ul *ngIf="menu.children && menu.children.length > 0">
           <li *ngFor="let child of menu.children">
             <ng-container *ngIf="child.children && child.children.length > 0">

src/app/routes/data-v/navigation/navigation.component.less

@@ -1,48 +1,53 @@
 
 .navigation-container {
-  overflow-x: auto; /* 水平方向上的滚动条 */
+  // overflow-x: auto; /* 水平方向上的滚动条 */
   display: flex;
   flex-direction: row;
-  width: 100%;
+  // width: 100%;
   padding-left: 2rem;
-  white-space: nowrap; /* 防止菜单项换行 */
+  // white-space: nowrap; /* 防止菜单项换行 */
+  white-space: normal;
 }
 
-/* 调整滚动条大小 */
-::-webkit-scrollbar {
-  width: 8px; /* 调整滚动条的宽度 */
-  height: 8px; /* 调整滚动条的高度 */
-}
-
-/* 调整滚动条轨道的样式 */
-::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 4px;
-}
-
-/* 调整滚动条滑块的样式 */
-::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 4px;
-}
-
-/* 当鼠标悬停在滑块上时，改变滑块的颜色 */
-::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-
-/* 调整菜单与滚动条的间距 */
-.navigation-container ul {
-  padding-right: 12px; /* 增加右侧内边距以增加间距 */
-}
-
-.dropdown-submenu {
-  display: inline-block; /* 使菜单项在一行内显示 */
-}
-
-.scrollable-menu ul {
-  padding-right: 20px; /* 右侧内边距，根据需要调整 */
-}
+// .navigation-container .dropdown-submenu {
+//   white-space: normal; /* 允许内容换行 */
+// }
+
+// /* 调整滚动条大小 */
+// ::-webkit-scrollbar {
+//   width: 8px; /* 调整滚动条的宽度 */
+//   height: 8px; /* 调整滚动条的高度 */
+// // }
+
+// /* 调整滚动条轨道的样式 */
+// ::-webkit-scrollbar-track {
+//   background: #f1f1f1;
+//   border-radius: 4px;
+// }
+
+// /* 调整滚动条滑块的样式 */
+// ::-webkit-scrollbar-thumb {
+//   background: #888;
+//   border-radius: 4px;
+// }
+
+// /* 当鼠标悬停在滑块上时，改变滑块的颜色 */
+// ::-webkit-scrollbar-thumb:hover {
+//   background: #555;
+// }
+
+// /* 调整菜单与滚动条的间距 */
+// .navigation-container ul {
+//   padding-right: 12px; /* 增加右侧内边距以增加间距 */
+// }
+
+// .dropdown-submenu {
+//   display: inline-block; /* 使菜单项在一行内显示 */
+// }
+
+// .scrollable-menu ul {
+  // padding-right: 20px; /* 右侧内边距，根据需要调整 */
+// }
 
 [nz-button] {
   margin-right: 8px;
@@ -53,15 +58,30 @@
   margin-right: 0;
 }
 
+// ul.nz-menu {
+//   padding-left: 0;
+// }
+
 ul {
-  display: inline-flex;
-  width: max-content;
-  margin-right: auto;
+  display: flex;
+  flex-wrap: wrap; /* 允许子元素换行 */
+  // justify-content: space-around;
+  // width: max-content;
+  // margin-right: auto;
   margin-bottom: 10px;
-  margin-bottom: 0;
+
+  // nz-menu {
+    padding-top: 0;
+    padding-left: 0;
+   
+
+  // }
 
   li {
-    display: inline-flex;
+    // display: flex;
+    flex-wrap: wrap;
+    margin-right: 10px;
+    margin-bottom: 10px;
 
     a {
       clear: both;

src/assets/home.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710927165008" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1510" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M230.4 992c-64 0-115.2-51.2-115.2-115.2L115.2 544 76.8 582.4C70.4 588.8 57.6 595.2 44.8 595.2c-12.8 0-25.6-6.4-32-12.8C6.4 569.6 0 556.8 0 544 0 537.6 6.4 524.8 12.8 512l467.2-467.2C486.4 38.4 499.2 32 512 32s25.6 6.4 32 12.8L1011.2 512C1017.6 524.8 1024 537.6 1024 544c0 12.8-6.4 25.6-12.8 32-6.4 6.4-19.2 12.8-32 12.8s-25.6-6.4-32-12.8L512 147.2 211.2 448l0 422.4c0 12.8 12.8 25.6 25.6 25.6l115.2 0 0-185.6c0-25.6 19.2-44.8 44.8-44.8l230.4 0c25.6 0 44.8 19.2 44.8 44.8s-19.2 44.8-44.8 44.8L441.6 755.2l0 185.6c0 25.6-19.2 44.8-44.8 44.8L230.4 985.6zM627.2 992c-25.6 0-44.8-19.2-44.8-44.8 0-25.6 19.2-44.8 44.8-44.8l160 0c12.8 0 25.6-12.8 25.6-25.6l0-256c0-25.6 19.2-44.8 44.8-44.8 25.6 0 44.8 19.2 44.8 44.8l0 256c0 64-51.2 115.2-115.2 115.2L627.2 992z" fill="#305AB7" p-id="1511"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710990867839" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2295" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M972.8 395.008L512 51.2 51.2 400.384l35.2256 47.7696 67.4304-49.5616v469.1456c0 32.9728 26.7264 59.6992 59.6992 59.6992h596.8896c32.9728 0 59.6992-26.7264 59.6992-59.6992V390.2464l68.608 51.3024 34.048-46.5408z m-162.3552 472.7296H213.5552V353.28L512 125.7984l298.4448 220.8768v521.0624z" p-id="2296" fill="#ffffff"></path></svg>