::-webkit-scrollbar-track { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0); } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.05); border-radius: 10px; -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1); } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 10px; -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1); } ::-webkit-scrollbar { width: 16px; height: 16px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent; } ::-webkit-scrollbar-track { box-shadow: 1px 1px 5px rgba(0, 0, 0, .2) inset; } ::-webkit-scrollbar-thumb { min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px rgba(0, 0, 0, .2) inset; } ::-webkit-scrollbar-corner { background: transparent; } html, body { min-height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; font-size: 12px; } .html-body-overflow { overflow-x: hidden; overflow-y: hidden; } .wrapper { min-height: 100%; position: relative; /*overflow: hidden;*/ } .wrapper:before, .wrapper:after { content: " "; display: table } .wrapper:after { clear: both } @media (max-width:767px) { .content-wrapper, .right-side, .main-footer { margin-left: 0 } } @media (min-width:768px) { .sidebar-collapse .content-wrapper, .sidebar-collapse .right-side, .sidebar-collapse .main-footer { margin-left: 0 } } @media (max-width:767px) { .sidebar-open .content-wrapper, .sidebar-open .right-side, .sidebar-open .main-footer { -webkit-transform: translate(230px, 0); -ms-transform: translate(230px, 0); -o-transform: translate(230px, 0); transform: translate(230px, 0) } } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Source Sans Pro', sans-serif } a { color: #999; cursor: pointer; } a:hover, a:active, a:focus { outline: none; text-decoration: none; color: #F79767 } .main-header { position: relative; max-height: 100px; z-index: 1030; background: white; height: 78px; } .main-header>.navbar { -webkit-transition: margin-left .3s ease-in-out; -o-transition: margin-left .3s ease-in-out; transition: margin-left .3s ease-in-out; margin-bottom: 0; border: none; min-height: 50px; border-radius: 0; box-sizing: border-box; } .main-header #navbar-search-input.form-control { background: rgba(255, 255, 255, 0.2); border-color: transparent } .main-header #navbar-search-input.form-control:focus, .main-header #navbar-search-input.form-control:active { border-color: rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.9) } .main-header #navbar-search-input.form-control::-moz-placeholder { color: #ccc; opacity: 1 } .main-header #navbar-search-input.form-control:-ms-input-placeholder { color: #ccc } .main-header #navbar-search-input.form-control::-webkit-input-placeholder { color: #ccc } .main-header .navbar-custom-menu, .main-header .navbar-right { float: right; margin-top: 4px; } @media (max-width:991px) { .main-header .navbar-custom-menu a, .main-header .navbar-right a { color: inherit; background: transparent } } @media (max-width:767px) { .main-header .navbar-right { float: none } .main-header .navbar-right>li { color: inherit; border: 0 } } .main-header .sidebar-toggle { float: left; background-color: transparent; background-image: none; padding: 16px 15px; font-family: fontAwesome } .main-header .sidebar-toggle:before { content: "\f0c9" } .main-header .sidebar-toggle:hover { color: #fff; cursor: pointer; } .main-header .sidebar-toggle:focus, .main-header .sidebar-toggle:active { background: transparent } .main-header .sidebar-toggle .icon-bar { display: none } .main-header .navbar .nav>li.user>a>.fa, .main-header .navbar .nav>li.user>a>.glyphicon, .main-header .navbar .nav>li.user>a>.ion { margin-right: 5px } .main-header .navbar .nav>li>a>.label { position: absolute; top: 9px; right: 10px; text-align: center; font-size: 9px; padding: 2px 3px; line-height: .9; border-radius: 50%; color: #F79767 !important; } .main-header .logo { -webkit-transition: width .3s ease-in-out; -o-transition: width .3s ease-in-out; transition: width .3s ease-in-out; display: block; float: left; height: 78px; line-height: 19px; text-align: left; width: 330px; padding-top: 20px; padding-left: 35px; } .main-header .logo img { float: left; margin-right: 15px; width: 112px; } .main-header .logo .logo-lg { display: block; font-size: 16px; } .main-header .logo .logo-lg strong { font-size: 9px; font-family: arial; line-height: 18px; } .main-header .logo .logo-mini { display: none; font-weight: bold; font-size: 25px; text-shadow: 3px 3px 7px #000; } .main-header .navbar-brand { color: #fff } .content-header { position: relative; padding: 15px 15px 0 15px } .content-header>h1 { margin: 0; font-size: 24px } .content-header>h1>small { font-size: 15px; display: inline-block; padding-left: 4px; font-weight: 300 } .content-header>.breadcrumb { float: right; background: transparent; margin-top: 0; margin-bottom: 0; font-size: 12px; padding: 7px 5px; position: absolute; top: 15px; right: 10px; border-radius: 2px } .content-header>.breadcrumb>li>a { color: #444; text-decoration: none; display: inline-block } .content-header>.breadcrumb>li>a>.fa, .content-header>.breadcrumb>li>a>.glyphicon, .content-header>.breadcrumb>li>a>.ion { margin-right: 5px } .content-header>.breadcrumb>li+li:before { content: '>\00a0' } .main-sidebar, .left-side { position: absolute; top: 95px; left: 0; /*min-height: 100%;*/ height:100%; width: 201px; z-index: 810; border: 1px solid #F79767; border-radius: 5px; -webkit-transition: -webkit-transform .3s ease-in-out, width .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out, width .3s ease-in-out; -o-transition: -o-transform .3s ease-in-out, width .3s ease-in-out; transition: transform .3s ease-in-out, width .3s ease-in-out; border-top-left-radius: 0; border-bottom-left-radius: 0; overflow: auto; } @media (max-width:991px) { .content-header>.breadcrumb { position: relative; margin-top: 5px; top: 0; right: 0; float: none; background: #d2d6de; padding-left: 10px } .content-header>.breadcrumb li:before { color: #97a0b3 } } .navbar-toggle { color: #fff; border: 0; margin: 0; padding: 15px 15px } @media (max-width:991px) { .navbar-custom-menu .navbar-nav>li { float: left } .navbar-custom-menu .navbar-nav { margin: 0; float: left; } .navbar-custom-menu .navbar-nav>li>a { padding-top: 15px; padding-bottom: 15px; line-height: 20px } } @media (max-width:767px) { .main-header { position: relative } .main-header .logo, .main-header .navbar { width: 100%; /*float: none*/ } .main-header .navbar { margin: 0 } .main-header .navbar-custom-menu { float: right } } @media (max-width:991px) { .navbar-collapse.pull-left { float: none !important } .navbar-collapse.pull-left+.navbar-custom-menu { display: block; position: absolute; top: 0; right: 40px } } @media (max-width:767px) { .main-sidebar, .left-side { padding-top: 100px } } @media (max-width:767px) { .main-sidebar, .left-side { /*-webkit-transform: translate(-230px, 0);*/ /*-ms-transform: translate(-230px, 0);*/ /*-o-transform: translate(-230px, 0);*/ /*transform: translate(-230px, 0)*/ } } @media (min-width:768px) { .sidebar-collapse .main-sidebar, .sidebar-collapse .left-side { -webkit-transform: translate(-230px, 0); -ms-transform: translate(-230px, 0); -o-transform: translate(-230px, 0); transform: translate(-230px, 0) } } @media (max-width:767px) { .sidebar-open .main-sidebar, .sidebar-open .left-side { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) } } .sidebar { padding-bottom: 10px; padding-top: 20px; } .sidebar-form input:focus { border-color: transparent; } .sidebar-form .input-group-btn { font-size: 14px; } .user-panel { position: relative; width: 100%; padding: 10px; overflow: hidden; } .user-panel:before, .user-panel:after { content: " "; display: table; } .user-panel:after { clear: both; } .user-panel> .image> img { width: 100%; max-width: 45px; height: auto; } .user-panel> .info { padding: 5px 5px 5px 15px; line-height: 1; position: absolute; left: 55px; top: 0px; } .user-panel> .info> p { font-weight: 600; margin-bottom: 9px; } .user-panel> .info> a { text-decoration: none; padding-right: 5px; margin-top: 3px; font-size: 11px; } .user-panel> .info> a> .fa, .user-panel> .info> a> .ion, .user-panel> .info> a> .glyphicon { margin-right: 5px; } .sidebar-menu { list-style: none; margin: 0; padding: 0; } .sidebar-menu>li { position: relative; margin: 0; padding: 0; } .sidebar-menu>li>a { padding: 12px 5px 12px 15px; display: block; font-size: 14px; } .sidebar-menu>li>a>.fa, .sidebar-menu>li>a>.glyphicon, .sidebar-menu>li>a>.ion { width: 20px; text-align: center; margin-right: 5px; } .sidebar-menu>li>a>.fa:nth-child(5n) { margin-right: 15px; } .sidebar-menu>li .label, .sidebar-menu>li .badge { margin-top: 3px; margin-right: 5px } .sidebar-menu li.header { padding: 10px 25px 10px 15px; font-size: 12px } .sidebar-menu li>a>.fa-angle-left { width: auto; height: auto; padding: 0; margin-right: 10px; margin-top: 3px } .sidebar-menu li.active>a>.fa-angle-left { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg) } .sidebar-menu li.active>.treeview-menu { display: block; } .sidebar-menu .treeview-menu { display: none; list-style: none; padding: 0; margin: 0; padding-left: 20px; padding-top: 5px; padding-bottom: 5px; } .sidebar-menu .treeview-menu .treeview-menu { padding-left: 20px } .sidebar-menu .treeview-menu>li { margin: 0; line-height: 25px; } .sidebar-menu .treeview-menu>li>a { padding: 5px 5px 5px 15px; display: block; font-size: 12px } .sidebar-menu .treeview-menu>li>a>.fa, .sidebar-menu .treeview-menu>li>a>.glyphicon, .sidebar-menu .treeview-menu>li>a>.ion { width: 20px; } .sidebar-menu .treeview-menu>li>a>.fa-angle-left, .sidebar-menu .treeview-menu>li>a>.fa-angle-down { width: auto } @media (min-width:768px) { .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .right-side, .sidebar-mini.sidebar-collapse .main-footer { margin-left: 50px !important; z-index: 840 } .sidebar-mini.sidebar-collapse .main-sidebar { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); width: 50px !important; z-index: 850 } .sidebar-mini.sidebar-collapse .sidebar-menu>li { position: relative } .sidebar-mini.sidebar-collapse .sidebar-menu>li>a { margin-right: 0 } .sidebar-mini.sidebar-collapse .sidebar-menu>li>a>span { border-top-right-radius: 4px } .sidebar-mini.sidebar-collapse .sidebar-menu>li:not(.treeview)>a>span { border-bottom-right-radius: 4px } .sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu { padding-top: 5px; padding-bottom: 5px; border-bottom-right-radius: 4px } .sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>a>span:not(.pull-right), .sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu { display: block !important; position: absolute; width: 180px; left: 50px } .sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>a>span { top: 0; margin-left: -3px; padding: 12px 5px 12px 20px; background-color: inherit } .sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu { top: 40px; margin-left: -0.5px } .sidebar-mini.sidebar-collapse .main-sidebar .user-panel>.info, .sidebar-mini.sidebar-collapse .sidebar-form, .sidebar-mini.sidebar-collapse .sidebar-menu>li>a>span, .sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu, .sidebar-mini.sidebar-collapse .sidebar-menu>li>a>.pull-right, .sidebar-mini.sidebar-collapse .sidebar-menu li.header { display: none !important; -webkit-transform: translateZ(0) } .sidebar-mini.sidebar-collapse .main-header .logo { width: 50px } .sidebar-mini.sidebar-collapse .main-header .logo>.logo-mini { display: block; margin-left: -15px; margin-right: -15px; font-size: 18px } .sidebar-mini.sidebar-collapse .main-header .logo>.logo-lg { display: none } .sidebar-mini.sidebar-collapse .main-header .navbar { margin-left: 50px } } .sidebar-menu, .main-sidebar .user-panel, .sidebar-menu>li.header { white-space: nowrap; overflow: hidden } .sidebar-menu:hover { overflow: visible } .sidebar-menu>li.header { overflow: hidden; text-overflow: clip } .sidebar-menu li>a { position: relative } .sidebar-menu li>a>.pull-right { position: absolute; right: 10px; top: 50%; margin-top: -7px } /*李洁写的部分*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; text-decoration: none; list-style: none; outline: none; } body { width: 100%; margin: 0; font-size: 14px; font-family: "微软雅黑"; color: #666; background: #f6f8f9; /*border-top: 1px solid #ddd;*/ margin-top: -1px; } input { outline: medium; } #block { width: 1080px; height: 300px; } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(360deg) } } @-moz-keyframes rotate { from { -moz-transform: rotate(0deg) } to { -moz-transform: rotate(360deg) } } @-ms-keyframes rotate { from { -ms-transform: rotate(0deg) } to { -ms-transform: rotate(360deg) } } @-o-keyframes rotate { from { -o-transform: rotate(0deg) } to { -o-transform: rotate(360deg) } }