/*building SAAS 0.1*/ /*bootstrap 初始化*/ body { font-size: 0.9rem; overflow: hidden; background: #e4e7ea } .dropdown-menu { font-size: 0.9rem } .btn.disabled, .btn:disabled { color:#999 } /*自定义css*/ .form-signin { max-width: 500px; margin: 150px auto; } .has-danger { -webkit-animation: shake 1s .2s ease both; -moz-animation: shake 1s .2s ease both; animation: shake 1s .2s ease both; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -moz-transform: translateX(10px); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } /*2.主体框架*/ .header { background:#fff; position: fixed; z-index: 10; width: 100%; height: 50px; top: 0; left: 0 } .main{ position: relative; z-index: 4; } .main-nav { position: fixed; z-index: 99; width:120px; left: 0; top: 0; height: 100%; background: #33425b; } .main-panel{ padding-left:120px; box-sizing: border-box; } .panel-sidebar{ box-sizing: border-box; background: #fbfcfd; position: fixed; height: 100%; z-index: 4; left:120px; padding-top: 100px; border-right: 1px solid #ddd; width: 250px; } .panel-content{ padding:115px 0 0; position: relative; z-index: 3; box-sizing: border-box; overflow-y: auto; height: 100vh; } .panel-content .content-wrap{ margin:0 15px 15px; } .panel-sidebar+.panel-content{ padding: 115px 0 0 250px; } .panel-title, .panel-title>.title-bar { height:50px; line-height: 50px } .panel-title{ position: fixed; top: 50px; z-index: 98; width: 100%; box-sizing: border-box; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.05); border-top: 1px solid #ddd; } .panel-sidebar .panel-title{ width:250px; border-right: 1px solid #ddd; box-shadow: 0 1px 3px rgba(0,0,0,.1); } .panel-content .panel-title{ left: 0; padding-left: 370px; padding-right: 20px; } .panel-content .panel-title.fluid{ padding-left:120px } .panel-title>.title-bar{ padding-left: 20px } .panel-title>.title-bar>h2,.panel-title>.title-main>h2{ font-size: 16px; margin:0; height: 50px; line-height: 50px; display:block } .panel-title>.title-bar>h2 .btn{ margin-right:15px } .panel-title>.title-main .btn.pull-right { margin:10px 0 0 10px } .panel-title>.title-main .form-control { margin:10px 0 0 0 } .panel-title>.title-main{ padding-left: 15px } /*滚动*/ .scrollbar-auto { overflow-y: auto; position: absolute; bottom: 0; left: 0; top: 0; right: 0; } .panel-sidebar .scrollbar-auto{ padding-top: 20px; box-sizing: border-box; } .panel-sidebar .scrollbar-auto { height: 100%; width: 100%; overflow-y: auto; position: static; } /*头部*/ .header .logo { float: left; box-shadow: 1px 0 6px rgba(0,0,0,.06); margin-right: 20px; margin:0 } .header .logo>a{ width:120px; height:50px; line-height: 50px; display: inline-block; color:#fff; font-size:24px; padding:0 10px; transition: all ease .4s; background:#207fd1 url(logo.png) no-repeat; text-indent: -9999px; vertical-align: top } .header .logo>a:hover{ background-color:#5596cf; text-decoration: none; } .header-user > div { float:left } .avatar .pic { height: 35px; width: 35px; border-radius: 100%; display: inline-block; float:left; margin:7px 7px 0 0 } .avatar .pic img{ display: block; width: 100%; height: 100%; border-radius: 100%; } .avatar > a,.msg >a{ display: block; height:50px; line-height: 50px; color:#666; padding:0 15px; cursor: pointer; } .avatar > a:hover,.msg > a:hover{ text-decoration: none; box-shadow: inset 0 3px 5px rgba(0,0,0,.125) } .header-user .msg{ border-left:1px solid #eee } .header-user .msg .glyphicon{ font-size:20px; vertical-align: middle; } .header-user .msg .badge{ margin:0 0 0 5px } .header .poj-name { float:left; padding:0 0 0 15px; font-size:18px } .header .poj-name a{ color:#666 } .header .poj-name > span{ height:50px; line-height:50px; } /*登陆相关*/ .login-body{ background: #fff } .login-infoinput { margin-top:15% } /*侧栏主菜单*/ .nav-top{ padding-top: 50px } .bg-nav a{ color:#7786ab; width:120px; height: 55px; line-height: 55px; display: inline-block; padding:0 0 0 10px } .bg-nav > li{ width:120px } .bg-nav > li.active{ background: #192948 } .bg-nav > li.active a{ border-radius: 0; background: #192948 } .bg-nav > li > a:hover,.bg-nav > li.active > a:hover{ background: #192948; color:#f2f2f2; text-decoration: none; } .bg-nav > li + li { margin-top:0; } .bg-nav .sub-menu { list-style:none; padding:0 0 0 20px; width:120px; display: none } .bg-nav .sub-menu a { width:100px; height:30px; line-height:30px } .bg-nav .sub-menu:last-child{ margin:0 0 20px 0 } .bg-nav .menu-arrow{ margin:22px 8px 0 0 } .nav-box h3{ font-size: 14px; font-weight: 700; padding-bottom: 4px; border-bottom: 1px solid #e2eaec; padding-right: 15px; margin-bottom: 10px; margin-left: 20px } .nav-list li a{ color: #333; display: block; height: 35px; line-height: 35px; box-sizing: border-box; padding-left: 17px; padding-right: 45px; text-overflow: ellipsis; position: relative; } .nav-list li a:hover{ text-decoration: none; background:#e4e7ea; cursor: pointer; } .nav-list li a .badge{ position: absolute; right:17px; top:9px } .nav-list li.active a{ background:#e4e7ea; font-weight: 600 } /*内容区*/ .c-header { padding:0 0 5px } .c-body{ padding:15px; background:#fff; } .form-group .necessary{ font-size:18px; color:#f90000 } .bg-gray { background-color:#bbb!important; } .toast{ position: absolute; top: 0; width: 65%; left: 0; right: 0; margin: 0 auto; opacity: 0.8; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); z-index: 999; padding: 15px; border-radius: 3px; color: #ffffff; display: none; } .toast .message{ padding-left: 50px; display: inline-block; font-size: 14px; } .toast i.icon{ font-size: 25px; position: absolute; left: 23px; top: 13px; } .toast.success{ background: rgba(16, 196, 105, 0.8); border: 2px solid #10c469 } .toast.error{ background-color: rgba(255, 91, 91, 0.8); border: 2px solid #ff5b5b; } .toast.warning { background-color: rgba(249, 200, 81, 0.8); border: 2px solid #f9c851; } .toast.info { background-color: rgba(53, 184, 224, 0.8); border: 2px solid #35b8e0; } label.required::after { color: red; content: "*"; margin-left: 4px; }