Ver Fonte

菜单样式调整

like há 8 meses atrás
pai
commit
1e2d0fbdd7
1 ficheiros alterados com 20 adições e 9 exclusões
  1. 20 9
      snowy-admin-web/src/layout/components/NavMenu.vue

+ 20 - 9
snowy-admin-web/src/layout/components/NavMenu.vue

@@ -67,6 +67,7 @@
 	/* 经典模式子菜单 */
 	.ant-menu-dark.ant-menu-inline ul {
 		width: 95%;
+
 		margin: 0 0 0 5%;
 		background-color: #1b1c1e !important;
 
@@ -75,7 +76,7 @@
 			margin: -2px 0 0 20px;
 			position: relative;
 			padding-left: 20px !important;
-			border-left: 1px solid #c3c4c5 !important;
+			border-left: 1px solid #303135 !important;
 			transition:
 				background-color 0.3s ease,
 				border 0.3s ease;
@@ -95,20 +96,30 @@
 		li::before {
 			content: '';
 			position: absolute;
-			top: -10px;
-			left: -2px;
-			width: 19px;
-			height: 30px;
-			transform: rotate(11deg) !important;
-			border-bottom: 1px solid #c3c4c5;
+			top: -45px;
+			left: 0px;
+			width: 11px;
+			height: 70px;
+			border-bottom: 1px solid #35373b;
+			border-left: 1px solid #35373b;
 			border-bottom-left-radius: 15px;
 		}
 
-		// 选中时候的样式
+		// 最后一个子菜单元素
+		li:last-child {
+			border: none !important;
+		}
+		// 避免边框重叠,除了最后一个元素,其他的左边框都没有
+		li:not(:last-child)::before {
+			border-left: none !important;
+			width: 12px;
+		}
 
+		// 选中时候的样式
 		.ant-menu-item-selected {
 			span {
 				background-color: #272a31;
+
 				display: inline-block;
 			}
 			.ant-menu-item-icon {
@@ -130,6 +141,6 @@
 	}
 	// 选中时候的样式
 	.ant-menu-dark .ant-menu-item-selected {
-		background-color: none !important;
+		background-color: #1b1c1e !important;
 	}
 </style>