1

frontend/src/views/Layout.vue

@@ -14,6 +14,7 @@
     <a-layout>
       <a-layout-sider
         theme="light"
+        style="background-color: #FAFAFA;"
       >
         <a-menu class="sub-menu-item" theme="light" mode="inline" v-model="subMenuKey" :default-selected-keys="subMenuKey">
           <a-menu-item :key="subIndex" v-for="(menuInfo, subIndex) in subMenu">
@@ -23,8 +24,8 @@
           </a-menu-item>
         </a-menu>
       </a-layout-sider>
-      <a-layout-content :style="{ margin: '24px 16px 0' }">
-        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
+      <a-layout-content :style="{}">
+        <div :style="{ padding: '24px', background: '#fff', minHeight: '560px' }">
           <router-view />
         </div>
       </a-layout-content>
@@ -91,25 +92,70 @@ export default {
 </script>
 
 <style lang="less" scoped>
-#components-layout-demo-responsive .logo {
-  height: 32px;
-  background: rgba(139, 137, 137, 0.2);
-  margin: 16px;
-}
-#components-layout-demo-responsive .menu-item .ant-menu-item {
-  background-color: #001529;
-}
-#components-layout-demo-responsive .sub-menu-item .ant-menu-item::after {
-  border-right: 3px solid #F2F2F2;
-}
-#components-layout-demo-responsive .sub-menu-item .ant-menu-item-selected {
-  background-color:#F2F2F2;
-  span {
-    color: #111;
+// 嵌套
+#components-layout-demo-responsive {
+  .logo {
+    height: 32px;
+    background: rgba(139, 137, 137, 0.2);
+    margin: 16px;
+  }  
+  .menu-item {
+    .ant-menu-item {
+      background-color: #001529;
+      margin-top: 0px;
+      margin-bottom: 0px;
+    }
+  }
+  .sub-menu-item {
+    .ant-menu-item {
+      margin-top: 0px;
+      margin-bottom: 0px;
+    }
+    .ant-menu-item::after {
+      border-right: 3px solid #F2F2F2;
+    }
+    .ant-menu-item-selected {
+      background-color:#F2F2F2;
+      span {
+        color: #111;
+      }
+    }
+  }
+  .sub-menu-item.ant-menu {
+    background: #FAFAFA;
+  }
+  .sub-menu-item.ant-menu-inline {
+    border-right: 0px solid #FAFAFA;
   }
 }
 
-// /deep/ .ant-menu-item a {
-//   color:rgba(255, 255, 255, 0.15);
+// #components-layout-demo-responsive .logo {
+//   height: 32px;
+//   background: rgba(139, 137, 137, 0.2);
+//   margin: 16px;
+// }
+// #components-layout-demo-responsive .menu-item .ant-menu-item {
+//   background-color: #001529;
+//   margin-top: 0px;
+//   margin-bottom: 0px;
+// }
+// #components-layout-demo-responsive .sub-menu-item .ant-menu-item {
+//   margin-top: 0px;
+//   margin-bottom: 0px;
+// }
+// #components-layout-demo-responsive .sub-menu-item .ant-menu-item::after {
+//   border-right: 3px solid #F2F2F2;
+// }
+// #components-layout-demo-responsive .sub-menu-item.ant-menu {
+//   background: #FAFAFA;
+// }
+// #components-layout-demo-responsive .sub-menu-item.ant-menu-inline {
+//   border-right: 0px solid #FAFAFA;
+// }
+// #components-layout-demo-responsive .sub-menu-item .ant-menu-item-selected {
+//   background-color:#F2F2F2;
+//   span {
+//     color: #111;
+//   }
 // }
 </style>