Bladeren bron

解决菜单border-raduis问题

liqk 5 jaren geleden
bovenliggende
commit
cf356ee477
2 gewijzigde bestanden met toevoegingen van 36 en 202 verwijderingen
  1. 3 10
      TEAMModelOS/ClientApp/src/common/CollapseMenuLayout.vue
  2. 33 192
      TEAMModelOS/ClientApp/src/view/Home.vue

+ 3 - 10
TEAMModelOS/ClientApp/src/common/CollapseMenuLayout.vue

@@ -180,14 +180,7 @@
     @import "./CollapseMenuLayout.less";
 </style>
 <style lang="less">
-    html,
-    body {
-        width: 100%;
-        height: 100%;
-        padding: 0px;
-        margin: 0px;
-    }
-
+   
     .layout .ivu-layout-header {
         padding: 0px;
     }
@@ -270,12 +263,12 @@
         padding: 0px !important;
         border-radius: 8px;
     }
-    .poptop-content-radius .ivu-menu:first-child {
+    .poptop-content-radius .ivu-menu:first-child,.poptop-content-radius .ivu-menu:first-child .ivu-menu-item{
         border-top-left-radius: 5px;
         border-top-right-radius: 5px;
     }
 
-    .poptop-content-radius .ivu-menu:last-child {
+    .poptop-content-radius .ivu-menu:last-child, .poptop-content-radius .ivu-menu:last-child .ivu-menu-item{
         border-bottom-left-radius: 5px;
         border-bottom-right-radius: 5px;
     }

+ 33 - 192
TEAMModelOS/ClientApp/src/view/Home.vue

@@ -76,42 +76,12 @@
 </script>
 
 <style scoped>
-    
-    .header-container {
-        width: 100%;
-        height: 83px;
-        background: #191919;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        border-bottom: 1px solid rgba(128,128,128,.3);
-        position: fixed;
-        z-index: 999;
-    }
-
-    .header-left-box {
-        width: 220px;
-        height: 100%;
-        
-    }
-
-        .header-left-box .header-btn-menu {
-            color: #fff;
-            font-size: 24px;
-            margin-right: 20px;
-            cursor: pointer;
-        }
-
-        .header-left-box img {
-            width: 140px;
-        }
-
     .header-right-box {
         width: 270px;
         border-left: 2px solid #595959;
         margin: 20px;
-        line-height:1.5;
-        float:right;
+        line-height: 1.5;
+        float: right;
     }
 
         .header-right-box .ivu-icon {
@@ -126,82 +96,6 @@
             border: 2px solid #595959;
         }
 
-    .drawer-header {
-        height: 83px;
-        width: 100%;
-        background: #000;
-    }
-
-        .drawer-header .header-btn-menu {
-            color: #fff;
-            font-size: 22px;
-            margin-right: 20px;
-            cursor: pointer;
-            background: #afafaf;
-            border-radius: 50%;
-            padding: 5px;
-        }
-
-        .drawer-header img {
-            width: 140px;
-            margin-top: 4px;
-            margin-right: 3px;
-        }
-
-    .drawer-body {
-        margin-top: 50px;
-    }
-
-        .drawer-body .drawer-menu-item {
-            width: 100%;
-        }
-
-            .drawer-body .drawer-menu-item .drawer-menu-top {
-                width: 100%;
-                height: 10px;
-            }
-
-                .drawer-body .drawer-menu-item .drawer-menu-top img {
-                    width: 20px;
-                }
-
-            .drawer-body .drawer-menu-item .drawer-menu-name {
-                color: #b5b5b5;
-                font-size: 16px;
-                font-weight: bolder;
-                margin-left: 20px;
-                margin-top: 7px;
-                letter-spacing: 1px;
-            }
-
-        .drawer-body .drawer-menu-bottom {
-            width: 100%;
-            padding: 20px 10px;
-            margin: 20px 0;
-            background-image: linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
-        }
-
-            .drawer-body .drawer-menu-bottom ul {
-                list-style: none;
-                width: 100%;
-                padding-left: 80px;
-            }
-
-                .drawer-body .drawer-menu-bottom ul li {
-                    padding: 8px 0;
-                    width: 100%;
-                    font-size: 14px;
-                    font-weight: bold;
-                    color: #8a8a8a;
-                    cursor: pointer;
-                }
-
-    .fl-center {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
     .fl-around {
         display: flex;
         align-items: center;
@@ -211,98 +105,45 @@
 
 <style>
 
-      html, body {
-          height: 100%;
-          margin: 0px;
-          padding: 0px;
-      }
+    html, body {
+        height: 100%;
+        width:100%;
+        margin: 0px;
+        padding: 0px;
+    }
+
+    #main {
+        width: 100%;
+        height: 100%;
+    }
 
-      #main {
-          width: 100%;
-          height: 100%;
-      }
         #main .layout {
-            border:none;
-            border-radius:0px;
+            border: none;
+            border-radius: 0px;
         }
-      #content {
-          /*width: 100%;
-          position: absolute;
-          top: 83px;
-          left: 0px;
-          bottom: 0px;
-          overflow-y: auto;
-          background: #212121;*/
-          height:100%;
-          background:#191919;
-      }
-      /*修改iview抽屉样式*/
-      .drawer-container .ivu-drawer-left {
-          background: #000;
-          font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI','Microsoft JhengHei' !important;
-      }
-
-      .drawer-container .ivu-drawer-header {
-          padding: 0;
-          border: none;
-      }
-
-      .drawer-container .ivu-drawer-content {
-          background: #000;
-      }
-      /*.drawer-container .ivu-drawer-wrap {
-      z-index:9999;
-    }*/
-      .drawer-container .ivu-drawer-body {
-          padding: 0;
-      }
-
-      /*重绘滚动条样式*/
-      .scrollstyle::-webkit-scrollbar {
-          width: 5px;
-      }
-
-      .ivu-drawer-body::-webkit-scrollbar-track {
-          display: none;
-      }
-
-      .scrollstyle::-webkit-scrollbar-thumb {
-          border-radius: 10px;
-          background: #94998a;
-      }
-
-          .scrollstyle::-webkit-scrollbar-thumb:hover {
-              /*background: #555;*/
-          }
-
-      .scrollstyle::-webkit-scrollbar-button {
-          display: none;
-      }
 
-      .drawer-container .ivu-menu-dark {
-          background: black;
-      }
+    #content {
+        height: 100%;
+        background: #191919;
+    }
 
-          .drawer-container .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title {
-              background: black;
-          }
+    /*重绘滚动条样式*/
+    .scrollstyle::-webkit-scrollbar {
+        width: 5px;
+    }
 
-      .drawer-container .ivu-menu-opened .ivu-menu {
-          background-image: linear-gradient(to right, black, #2C2C2C);
-      }
+    .ivu-drawer-body::-webkit-scrollbar-track {
+        display: none;
+    }
 
-      .drawer-container .first-menu {
-          color: #b5b5b5;
-          font-size: 16px;
-          font-weight: bolder;
-          /*margin-left: 20px;*/
-          margin-top: 7px;
-          letter-spacing: 1px;
-      }
+    .scrollstyle::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background: #94998a;
+    }
 
-      .drawer-container .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item:hover, .drawer-container .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title:hover {
-          background: black;
-      }
+    .scrollstyle::-webkit-scrollbar-button {
+        display: none;
+    }
 </style>
 
 <style lang="less">