fixed:#1692 统一前端操作模式

Author: pixelmaxQm

web/src/style/element_visiable.scss

@@ -5,19 +5,6 @@
     border-radius: 2px;
 }
 
-::-webkit-scrollbar {
-    @apply hidden;
-}
-
-
-.gva-search-box {
-    @apply p-6 pb-0.5 bg-white rounded mb-3;
-}
-
-.gva-form-box {
-    @apply p-6 bg-white rounded;
-}
-
 .gva-pagination {
     @apply flex justify-end;
     .el-pagination__editor {
@@ -40,3 +27,181 @@
     padding-bottom: 16px !important;
     @apply border-0 border-b border-solid border-gray-200;
 }
+
+
+.el-form--inline {
+    .el-form-item {
+        & > .el-input, .el-cascader, .el-select, .el-date-editor, .el-autocomplete {
+            @apply w-52;
+        }
+    }
+}
+
+.el-dropdown {
+    @apply overflow-hidden
+}
+
+
+.admin-box {
+    @apply min-h-[calc(100vh-200px)] px-3 py-4 mt-28 mb-4 mx-1;
+    .el-table {
+        th {
+            @apply px-0 py-2;
+            .cell {
+                @apply leading-[40px] text-gray-700;
+            }
+        }
+        td {
+            @apply px-0 py-2;
+            .cell {
+                @apply leading-[40px] text-gray-600;
+            }
+        }
+        .is-leaf {
+            @apply border-b border-t-0 border-l-0 border-solid border-gray-50;
+            border-right:var(--el-table-border);
+            background: #F7FBFF !important;
+        }
+    }
+}
+
+//   layout
+
+// table
+.el-pagination {
+    @apply mt-8;
+    .btn-prev,
+    .btn-next {
+        @apply border border-solid border-gray-300 rounded;
+    }
+    .el-pager {
+        li {
+            @apply border border-solid border-gray-300 rounded text-gray-600 text-sm mx-1;
+        }
+    }
+}
+
+// 导航
+#app {
+    .el-container {
+        @apply relative h-full w-full;
+    }
+    .el-container.mobile.openside {
+        @apply fixed top-0;
+    }
+    .gva-aside {
+        @apply fixed top-0 left-0 z-[1001] overflow-hidden;
+        .el-menu {
+            @apply border-r-0;
+        }
+    }
+    .aside {
+        .el-menu--collapse {
+            >.el-menu-item {
+                display: flex;
+                justify-content: center;
+            }
+        }
+        .el-sub-menu {
+            .el-menu {
+                .is-active {
+                    // 关闭三级菜单二级菜单样式
+                    ul {
+                        border: none;
+                    }
+                }
+                // 关闭三级菜单二级菜单样式
+                .is-active.is-opened {
+                    ul {
+                        border: none;
+                    }
+                }
+            }
+        }
+    }
+    .hideside {
+        .aside {
+            @apply w-[54px]
+        }
+    }
+
+    .mobile {
+        .gva-aside {
+            @apply w-[54px];
+        }
+    }
+
+    .hideside {
+        .main-cont.el-main {
+            @apply ml-[54px];
+        }
+    }
+    .mobile {
+        .main-cont.el-main {
+            @apply ml-0;
+        }
+    }
+}
+
+.el-container.layout-cont {
+    .header-cont {
+        @apply px-4 h-16 bg-white;
+    }
+
+
+    .main-cont {
+        @apply h-screen overflow-visible;
+        &.el-main {
+            @apply min-h-full ml-[220px] bg-main p-0 overflow-auto;
+        }
+
+        .breadcrumb {
+            @apply h-16 flex items-center p-0 ml-12 text-lg;
+            .el-breadcrumb__item {
+                .el-breadcrumb__inner {
+                    @apply text-gray-600;
+                }
+            }
+            .el-breadcrumb__item:nth-last-child(1) {
+                .el-breadcrumb__inner {
+                    @apply text-gray-600;
+                }
+            }
+        }
+
+        .router-history {
+            @apply bg-white p-0 border-t border-l-0 border-r-0 border-b-0 border-solid border-gray-100;
+            .el-tabs__header {
+                @apply m-0;
+                .el-tabs__item{
+                    @apply border-solid border-r border-t-0 border-gray-100 border-b-0 border-l-0;
+                }
+                .el-tabs__item.is-active {
+                    @apply bg-blue-500 bg-opacity-5;
+                }
+                .el-tabs__nav {
+                    @apply border-0;
+                }
+            }
+        }
+
+        .aside {
+            @apply overflow-auto;
+        }
+        .el-menu-vertical {
+            @apply h-[calc(100vh-60px)];
+            &:not(.el-menu--collapse) {
+                @apply w-[220px];
+            }
+        }
+        .el-menu--collapse {
+            @apply w-[54px];
+            li {
+                .el-tooltip,
+                .el-sub-menu__title {
+                    @apply px-4;
+                }
+            }
+        }
+    }
+}