/*layui优化*/ table .layui-form-switch { margin-top: 0; } .layui-form-select { z-index: 1000; } .layui-form-item .layui-input-inline, .layui-input-block { width: 500px; } .layui-form-onswitch, .layui-form-checked[lay-skin="primary"] i { border-color: #1aa094; background-color: #1aa094; } /*公共样式*/ html, body, #app, .main, .right { height: 100%; } body { background-color: rgba(238, 238, 238, 0.2); } a { color: #1aa094; } a:hover { color: #333; } .cl { zoom: 1; } .cl:after { content: '\20'; display: block; height: 0; clear: both; visibility: hidden; } .l { float: left; } .r { float: right; } .p20 { padding: 20px; box-sizing: border-box; } foo, .foo { color: #f00; } /*滚动条*/ ::-webkit-scrollbar-corner { background: #1aa094; } ::-webkit-scrollbar { width: 0px; } ::-webkit-scrollbar-thumb { background: #1aa094; } ::-webkit-scrollbar-thumb:window-inactive { background: #1aa094; } /*右侧滚动条*/ .right::-webkit-scrollbar { width: 5px; background-color: #eee; } .right::-webkit-scrollbar-thumb { background: #009688; border-radius: 10px; } .right::-webkit-scrollbar-track-piece { background: transparent; } /*顶栏*/ header { height: 50px; line-height: 50px; width: 100%; box-sizing: border-box; background-color: #eee; position: fixed; z-index: 1001; color: #333; } header h1 { height: 50px; line-height: 50px; width: 150px; display: block; color: #fff; float: left; background-color: #404852; text-align: center; font-size: 36px; } header .breadcrumb { margin-left: 150px; padding-left: 20px; } header .breadcrumb i { float: left; } header .breadcrumb ul { float: left; } header .breadcrumb li { float: left; margin: 0 3px; } .main { min-height: 100%; width: 100%; overflow: hidden; } /*左栏*/ .left { position: fixed; left: 0; width: 150px; padding-top: 50px; height: 100%; background: #3c444d; overflow-x: auto; z-index: 100; box-sizing: border-box; } .left ul li { float: left; color: #333; width: 100%; box-sizing: border-box; } .left ul li.hidden div { display: none; } .left ul li.hidden i.arrow { transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); padding-bottom: 4px; } .left ul li a { color: #ececec; padding: 10px 0 10px 20px; display: block; } .left ul li i:first-child { margin-right: 5px; } .left ul li i.arrow { float: right; margin-right: 20px; font-size: 12px; padding-top: 4px; } .left ul li i.active { color: #eee; position: absolute; right: -6px; height: 40px; line-height: 40px; top: 0px; margin: 0; font-size: 20px; z-index: 1; transform: rotateY(180deg); } .left ul li > div { position: relative; background-color: #404852; } .left ul li > div a { padding-left: 45px; color: #b2b2b2; } .left ul li a:hover, .left ul li a.active { color: #009688; background: #28313c; } /*右侧*/ .right { margin-left: 150px; box-sizing: border-box; height: 100%; overflow: auto; padding-top: 70px; } .right iframe { position: absolute; width: 100%; height: 100%; padding-left: 150px; padding-top: 50px; top: 0; left: 0; right: 0; bottom: 0; box-sizing: border-box; } .right > a > i { margin-right: 5px; } .right .arz { margin: 20px 0 0 30px; } .right .arz a { color: #fff; padding: 10px 18px; background: #009688; height: 36px; line-height: 36px; border-radius: 2px; } .right .arz a i { position: relative; right: 3px; top: 1px; } .right .arz a:hover { opacity: 0.8; filter: alpha(opacity=80); color: #fff; } .bform { margin: 20px 30px 0 10px; } /*分页*/ .page { margin-top: 10px; margin-bottom: 10px; overflow: hidden; } .page li { float: left; } .page li a, .page li span { padding: 5px 10px; background-color: #009688; color: #fff; margin-right: 5px; display: block; } .page li a:hover, .page li span { background-color: #999; }