adui/es/layout/style/index.css

<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>

.adui-layout-header{position:relative;z-index:11;display:flex;align-items:center;justify-content:space-between;background-color:#fff;box-shadow:0 1px 0 0 rgba(223,223,223,.4),0 1px 10px 0 rgba(0,0,0,.03)}.adui-layout-header_affixed{position:-webkit-sticky;position:sticky;z-index:13;top:0;left:0;width:100%}.adui-layout-aside{flex:none;width:240px;background-color:#fff;box-shadow:1px 0 0 0 rgba(223,223,223,.45)}.adui-layout-asideInner{height:100%;background-color:#fff}.adui-layout-asideContent{height:100%;overflow:hidden}.adui-layout-asideContent:hover{overflow:auto}@supports(overflow: overlay){.adui-layout-asideContent:hover{overflow:overlay}}.adui-layout-asideContent:hover::-webkit-scrollbar{width:14px;height:14px}.adui-layout-asideContent:hover::-webkit-scrollbar-thumb{min-width:14px;min-height:14px;background-color:rgba(0,0,0,.15);background-clip:content-box;border:4px solid rgba(0,0,0,0);border-radius:14px}.adui-layout-asideContent:hover::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4)}.adui-layout-asideContent:hover::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,.65)}.adui-layout-aside_affixed{position:-webkit-sticky;position:sticky;z-index:12;top:72px;left:0;max-height:calc(100vh - 72px)}.adui-layout-aside_affixed_alone{max-height:calc(100vh - 72px)}.adui-layout-aside_collapsible{width:0;z-index:14}.adui-layout-aside_collapsible .adui-layout-asideInner{position:fixed;z-index:13;top:0;left:0;width:240px;height:100%;opacity:.6;transform:translateX(-100%);transition:all var(--motion-duration-slow) var(--ease-in-out);margin-top:0}.adui-layout-aside_collapsible:not(.adui-layout-aside_collapsed) .adui-layout-asideInner{opacity:1;transform:translateX(0)}.adui-layout-aside_collapsible:not(.adui-layout-aside_collapsed) .adui-layout-asideMask{opacity:1;visibility:visible}.adui-layout-aside_collapsible .adui-layout-asideContent{height:calc(100vh - 72px);overflow:auto}@supports(overflow: overlay){.adui-layout-aside_collapsible .adui-layout-asideContent{overflow:overlay}}.adui-layout-aside_collapsible .adui-layout-asideContent::-webkit-scrollbar{width:14px;height:14px}.adui-layout-aside_collapsible .adui-layout-asideContent::-webkit-scrollbar-thumb{min-width:14px;min-height:14px;background-color:rgba(0,0,0,.15);background-clip:content-box;border:4px solid rgba(0,0,0,0);border-radius:14px}.adui-layout-aside_collapsible .adui-layout-asideContent::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4)}.adui-layout-aside_collapsible .adui-layout-asideContent::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,.65)}.adui-layout-asideMask{position:fixed;z-index:12;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.65);opacity:0;visibility:hidden;transition:all var(--motion-duration-base) var(--ease-in-out)}.adui-layout-asideBackButton{padding:12px 8px;box-shadow:0 1px 0 rgba(107,107,107,.15)}.adui-layout-asideBackButton button{width:48px;height:48px}.adui-layout-asideBackButton button svg{width:20px;height:20px}.adui-layout-main{flex:1;max-width:calc(100vw - 240px)}.adui-layout-mian-fix{margin-top:72px}