@heartlee/element-components/lib/styles/layout.css

a component library for Vue 3 base on element-plus. Forked from element-pro-components. 根据业务需求自用，如需使用，请移步官方仓库使用

body{margin:0;padding:0}.pro-layout{display:flex;height:100vh;height:var(--pro-layout-height);overflow:hidden}.pro-layout .pro-container{flex:1;display:flex;flex-direction:column;width:calc(100% - 240px);width:calc(100% - var(--pro-layout-width-aside));background-color:#f5f7fa;background-color:var(--el-background-color-base)}.pro-layout .aside-collapse+.pro-container{width:calc(100% - 60px);width:calc(100% - var(--pro-layout-width-aside-collapse))}.pro-layout .pro-aside .mask{display:none}.pro-layout .pro-aside .pro-aside-wrapper{display:flex;flex-direction:column;width:240px;width:var(--pro-layout-width-aside);height:100%;border-right:1px solid #dcdfe6;border-right:var(--el-border-base);background-color:#fff;background-color:var(--pro-layout-aside-background-color);transition:all .3s cubic-bezier(.645,.045,.355,1);transition:var(--el-transition-all)}.pro-layout .pro-aside .pro-aside-wrapper .pro-aside-logo{padding-left:20px;height:54px;height:var(--pro-layout-height-header);min-height:54px;min-height:var(--pro-layout-height-header);border-bottom:1px solid #dcdfe6;border-bottom:var(--el-border-base);background-color:#fff;background-color:var(--pro-layout-aside-background-color);overflow:hidden}.pro-layout .pro-aside .pro-aside-wrapper .el-scrollbar{flex:1}.pro-layout .pro-aside .pro-aside-wrapper .el-scrollbar .el-scrollbar__wrap{overflow-x:hidden}.pro-layout .pro-aside.aside-collapse .pro-aside-wrapper{width:60px;width:var(--pro-layout-width-aside-collapse)}.pro-layout .pro-aside.aside-collapse .pro-aside-wrapper .pro-aside-logo{padding-left:0}@media (max-width:767px){.pro-layout .pro-aside{position:absolute;left:0;top:0;bottom:0;width:0;z-index:100;z-index:var(--pro-layout-index-sidebar)}.pro-layout .pro-aside.aside-collapse{width:100%}.pro-layout .pro-aside .mask{display:block;position:absolute;opacity:0;transition:opacity .3s cubic-bezier(.23,1,.32,1);transition:var(--el-transition-fade)}.pro-layout .pro-aside.aside-collapse .mask{top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,.5);background-color:var(--pro-background-color-mask);opacity:1}.pro-layout .pro-aside .pro-aside-wrapper{transform:translateX(-100%);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:var(--el-transition-md-fade)}.pro-layout .pro-aside.aside-collapse .pro-aside-wrapper{width:240px;width:var(--pro-layout-width-aside);transform:translateX(0)}.pro-layout .pro-aside.aside-collapse .pro-aside-wrapper .pro-aside-logo{padding-left:20px}}.pro-layout .pro-header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:54px;height:var(--pro-layout-height-header);min-height:54px;min-height:var(--pro-layout-height-header);border-bottom:1px solid #dcdfe6;border-bottom:var(--el-border-base);background-color:#fff;background-color:var(--pro-layout-header-background-color)}.pro-layout .pro-header .header-slot{display:flex;align-items:center}.pro-layout .pro-header .header-slot .header-fold-btn{display:inline-block;margin-right:20px;width:24px;height:29px;cursor:pointer}.pro-layout .pro-header .header-slot .header-fold-btn .line{display:block;margin:5px auto;width:24px;height:3px;background-color:#303133;background-color:var(--el-text-color-primary);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:var(--el-transition-md-fade)}.pro-layout .pro-header .header-slot .header-fold-btn.is-active .line:first-child{transform:rotateZ(45deg) scaleX(.8) translate(8px,-3px)}.pro-layout .pro-header .header-slot .header-fold-btn.is-active .line:last-child{transform:rotateZ(-45deg) scaleX(.8) translate(8px,3px)}.pro-layout .pro-main{margin:10px;margin:var(--pro-layout-main-margin);padding:20px;padding:var(--pro-layout-main-padding);border:1px solid #dcdfe6;border:var(--el-border-base);border-radius:4px;border-radius:var(--el-border-radius-base);background-color:#fff;background-color:var(--pro-layout-main-background-color)}.pro-layout .pro-main.el-scrollbar .el-scrollbar__wrap{margin-bottom:0!important;overflow-x:hidden}@media (max-width:767px){.pro-layout .pro-main{margin:4px;margin:var(--pro-layout-xs-main-margin);padding:10px;padding:var(--pro-layout-xs-main-padding)}.pro-layout .pro-main.el-scrollbar .el-scrollbar__wrap{margin-right:0!important}}