.pear-admin .layui-header, .pear-admin .layui-body, .pear-admin .layui-logo, .pear-admin .layui-side { transition: all .3s; } .pear-admin .layui-logo .title { font-size: 20px; } .pear-admin .layui-header { left: 230px; width: calc(100% - 230px); background-color: white; border-bottom: 1px solid whitesmoke; } .pear-admin .layui-header .layui-nav-img { width: 30px; height: 30px; } .pear-admin .layui-layout-control { left: 120px; position: absolute; } .pear-admin .layui-logo { width: 230px; height: 60px; line-height: 60px; position: relative; background-color: #28333E; } .pear-admin .layui-logo img { width: 34px; height: 34px; } .pear-admin .layui-logo .title { font-size: 21px; font-weight: 550; color: #5FB878; position: relative; top: 5px; margin-left: 5px; } .pear-admin .layui-logo .logo { display: none; } .pear-admin .layui-side { top: 0px; width: 230px; box-shadow: 2px 0 6px rgba(0, 21, 41, .35); z-index: 9999; } .pear-admin .layui-side-scroll::-webkit-scrollbar { width: 0px; height: 0px; } .pear-admin .layui-side-scroll { height: calc(100% - 60px)!important; background-color: #28333E; width: 230px; } .pear-admin .layui-header .layui-nav .layui-nav-item>a { color: black; font-size: 15px; } .pear-admin .layui-body { left: 230px; bottom: 0px; } .pear-admin .layui-layout-left { left: 0px; } /** 隐 藏 布 局 样 式 */ .pear-mini .layui-logo .title { display: none; } .pear-mini .layui-logo .logo { display: inline-block; } .pear-mini .layui-side { width: 60px; } .pear-mini .layui-header { left: 60px; width: calc(100% - 60px); } .pear-mini .layui-body { left: 60px; } .pear-mini .layui-logo { width: 60px; } .pear-mini .layui-nav-tree .layui-nav-item span { display: none; } .pear-mini .bottom-nav li { width: 100% !important; } .pear-mini .layui-side-scroll { height: calc(100% - 60px); } .pear-admin .layui-header .layui-nav .layui-nav-bar { top: 0px !important; height: 2px !important; background-color: #5FB878; } .pear-admin .layui-header .layui-nav .layui-this:after { display: none; } /** 新增兼容 */ @media screen and (max-width:768px) { .pear-mini .bottom-nav { display: none; } .pear-mini .layui-side-scroll { height: calc(100% - 62px); } /** 隐 藏 布 局 样 式 */ .pear-mini .layui-side { width: 0px; } .pear-mini .layui-header { left: 0px; width: 100%; } .pear-mini .layui-body { left: 0px; } .pear-mini .layui-logo { width: 0px; } .pear-admin .layui-body { left: 0px; } .pear-admin .layui-header { left: 0px; width: 100%; } .pear-admin .pear-cover { width: 100%; height: 100%; background-color: #1E1E1E; display: block; position: absolute; z-index: 1000; opacity: 0; margin-top: -60px; } .pear-mini .pear-cover { display: none; } } @-webkit-keyframes am-horizontal-roll_show { 0% { opacity: 1; -webkit-transform: translateX(2000px); transform: translateX(2000px) } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes am-horizontal-roll_show { 0% { opacity: 1; -webkit-transform: translateX(800px); -ms-transform: translateX(800px); transform: translateX(800px) } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .layer-anim-right { -webkit-animation: am-horizontal-roll_show .6s ease-out; animation: am-horizontal-roll_show .6s ease-out; }