/*==============================================主要就是index.html页面美化代码==============================================*/ /*顶部导航菜单logo样式*/ .layui-layout-admin .layui-logo { color: #fff; font-size: 20px } /*顶部导航文字菜单样式*/ .layui-nav { padding: 0 } /*顶部菜单左边部分菜单样式*/ .layui-layout-left { left: 235px } /*第一个tan选项卡隐藏取消图标*/ .layui-tab-title li:first-child .layui-tab-close { display: none } /*隐藏/显示左边菜单按钮样式*/ .menu-switch { width: 30px; height: 30px; position: relative; left: 200px; top: 16px; color: #fff; background-color: #1AA094; text-align: center; line-height: 30px; cursor: pointer } /*左侧菜单栏文字样式*/ .layui-nav-tree .layui-nav-child a { padding-left: 36px; } .layui-tab-title li { background-color: #f2f2f2; } /*主体内容样式*/ .content-body { position: absolute; top: 46px; right: 0; bottom: 42px; left: 200px; z-index: 1; overflow: hidden } /*主体内容选项卡内容样式*/ .content-body .layui-tab-content { position: absolute; top: 50px; bottom: 0; width: 100%; padding: 0; z-index: -999; overflow: hidden } /*使iframe高度100%,它的父类高度也需要100%*/ .content-body .layui-tab-content .layui-tab-item { height: 100% } /*使iframe高度100*/ .content-body .layui-tab-content .layui-tab-item iframe { height: 100% } /*响应式代码控制*/ @media screen and (max-width: 768px) { .layui-layout-admin .layui-bg-black { left: -200px } .layui-layout-admin .content-body { left: 0 } .layui-layout-admin .layui-footer { left: 0 } .layui-layout-left { display: none } } @media screen and (max-width: 480px) { .layui-layout-admin .layui-logo { left: -32px; } .menu-switch { left: 140px; } } @media screen and (max-width: 330px) { .layui-layout-admin .layui-logo { left: -51px; font-size: 14px; } .menu-switch { left: 100px; } } /*阴影*/ .yy { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .5; z-index: 10; background-color: #000; display: none; }