lc_garage/frontend/src/style/element_visiable.scss

@import '@/style/main.scss';

.el-button {
    font-weight: 400;
    border-radius: 2px;
}

.gva-pagination {
    @apply flex justify-end;
    .el-pagination__editor {
        .el-input__inner {
            @apply h-8;
        }
    }

    .is-active {
        @apply rounded text-white;
        background: var(--el-color-primary);
        color: #ffffff !important;
    }
}


.el-drawer__header{
    margin-bottom: 0 !important;
    padding-top: 16px !important;
    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;
                }
            }
        }
    }
}