|
@@ -1,44 +1,58 @@
|
|
|
/*building SAAS 0.1*/
|
|
|
/*bootstrap 初始化*/
|
|
|
body {
|
|
|
- font-size: 0.9rem;
|
|
|
- overflow: hidden;
|
|
|
- background: #e4e7ea
|
|
|
+ font-size: 0.9rem;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #e4e7ea
|
|
|
}
|
|
|
.dropdown-menu {
|
|
|
- font-size: 0.9rem
|
|
|
+ font-size: 0.9rem
|
|
|
}
|
|
|
.btn.disabled, .btn:disabled {
|
|
|
color:#999
|
|
|
}
|
|
|
+.btn,.btn-group {
|
|
|
+ vertical-align: baseline;
|
|
|
+}
|
|
|
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
|
|
|
+ background-color: #e4e7ea;
|
|
|
+ color:#333;
|
|
|
+ font-weight: 600
|
|
|
+}
|
|
|
/*自定义css*/
|
|
|
+.in-1{padding-left:5px!important}
|
|
|
+.in-2{padding-left:21px!important}
|
|
|
+.in-3{padding-left:42px!important}
|
|
|
+.in-4{padding-left:63px!important}
|
|
|
+.in-5{padding-left:84px!important}
|
|
|
+.in-6{padding-left:105px!important}
|
|
|
/*滚动条*/
|
|
|
/* 滚动条 */
|
|
|
::-webkit-scrollbar-thumb:horizontal { /*水平滚动条的样式*/
|
|
|
- width: 5px;
|
|
|
- background-color: #ddd;
|
|
|
- -webkit-border-radius: 6px;
|
|
|
+ width: 5px;
|
|
|
+ background-color: #ddd;
|
|
|
+ -webkit-border-radius: 6px;
|
|
|
}
|
|
|
::-webkit-scrollbar-track-piece {
|
|
|
- background-color: #fff; /*滚动条的背景颜色*/
|
|
|
- -webkit-border-radius: 0; /*滚动条的圆角宽度*/
|
|
|
+ background-color: #fff; /*滚动条的背景颜色*/
|
|
|
+ -webkit-border-radius: 0; /*滚动条的圆角宽度*/
|
|
|
}
|
|
|
::-webkit-scrollbar {
|
|
|
- width: 10px; /*滚动条的宽度*/
|
|
|
- height: 8px; /*滚动条的高度*/
|
|
|
+ width: 10px; /*滚动条的宽度*/
|
|
|
+ height: 8px; /*滚动条的高度*/
|
|
|
}
|
|
|
::-webkit-scrollbar-thumb:vertical { /*垂直滚动条的样式*/
|
|
|
- height: 50px;
|
|
|
- background-color: #ddd;
|
|
|
- -webkit-border-radius: 6px;
|
|
|
- outline: 1px solid #fff;
|
|
|
- outline-offset: -1px;
|
|
|
- border: 1px solid #fff;
|
|
|
+ height: 50px;
|
|
|
+ background-color: #ddd;
|
|
|
+ -webkit-border-radius: 6px;
|
|
|
+ outline: 1px solid #fff;
|
|
|
+ outline-offset: -1px;
|
|
|
+ border: 1px solid #fff;
|
|
|
}
|
|
|
::-webkit-scrollbar-thumb:hover { /*滚动条的hover样式*/
|
|
|
- height: 50px;
|
|
|
- background-color: #999;
|
|
|
- -webkit-border-radius: 6px;
|
|
|
+ height: 50px;
|
|
|
+ background-color: #999;
|
|
|
+ -webkit-border-radius: 6px;
|
|
|
}
|
|
|
.sjs-height-1,.sjs-height-2{
|
|
|
overflow: hidden;
|
|
@@ -55,46 +69,46 @@ body {
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
.form-signin {
|
|
|
- max-width: 500px;
|
|
|
- margin: 150px auto;
|
|
|
+ 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-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);
|
|
|
- }
|
|
|
+ 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);
|
|
|
- }
|
|
|
+ 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);
|
|
|
- }
|
|
|
+ 0%, 100% {
|
|
|
+ transform: translateX(0);
|
|
|
+ }
|
|
|
+ 10%, 30%, 50%, 70%, 90% {
|
|
|
+ transform: translateX(-10px);
|
|
|
+ }
|
|
|
+ 20%, 40%, 60%, 80% {
|
|
|
+ transform: translateX(10px);
|
|
|
+ }
|
|
|
}
|
|
|
/*2.主体框架*/
|
|
|
.header {
|
|
@@ -113,14 +127,14 @@ body {
|
|
|
.main-nav {
|
|
|
position: fixed;
|
|
|
z-index: 99;
|
|
|
- width:120px;
|
|
|
+ width:55px;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
height: 100%;
|
|
|
background: #33425b;
|
|
|
}
|
|
|
.main-panel{
|
|
|
- padding-left:120px;
|
|
|
+ padding-left:55px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
.panel-sidebar{
|
|
@@ -129,13 +143,13 @@ body {
|
|
|
position: fixed;
|
|
|
height: 100%;
|
|
|
z-index: 4;
|
|
|
- left:120px;
|
|
|
- padding-top: 100px;
|
|
|
+ left:55px;
|
|
|
+ padding-top:50px;
|
|
|
border-right: 1px solid #ddd;
|
|
|
- width: 250px;
|
|
|
+ width: 200px;
|
|
|
}
|
|
|
.panel-content{
|
|
|
- padding:115px 0 0;
|
|
|
+ padding:65px 0 0;
|
|
|
position: relative;
|
|
|
z-index: 3;
|
|
|
box-sizing: border-box;
|
|
@@ -146,7 +160,7 @@ body {
|
|
|
margin:0 15px 15px;
|
|
|
}
|
|
|
.panel-sidebar+.panel-content{
|
|
|
- padding: 115px 0 0 250px;
|
|
|
+ padding: 65px 0 0 200px;
|
|
|
}
|
|
|
.panel-title, .panel-title>.title-bar {
|
|
|
height:50px;
|
|
@@ -154,7 +168,7 @@ body {
|
|
|
}
|
|
|
.panel-title{
|
|
|
position: fixed;
|
|
|
- top: 50px;
|
|
|
+ top:0px;
|
|
|
z-index: 98;
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
@@ -163,17 +177,17 @@ body {
|
|
|
border-top: 1px solid #ddd;
|
|
|
}
|
|
|
.panel-sidebar .panel-title{
|
|
|
- width:250px;
|
|
|
+ width:200px;
|
|
|
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-left: 255px;
|
|
|
padding-right: 20px;
|
|
|
}
|
|
|
.panel-content .panel-title.fluid{
|
|
|
- padding-left:120px
|
|
|
+ padding-left:55px
|
|
|
}
|
|
|
.panel-title>.title-bar{
|
|
|
padding-left: 20px
|
|
@@ -200,7 +214,7 @@ body {
|
|
|
.side-menu{
|
|
|
position: fixed;
|
|
|
right:15px;
|
|
|
- top:116px
|
|
|
+ top:66px
|
|
|
}
|
|
|
.side-menu .nav-link{
|
|
|
line-height: 16px;
|
|
@@ -212,24 +226,32 @@ body {
|
|
|
.pr-46{
|
|
|
padding-right:46px
|
|
|
}
|
|
|
+.bcontent-wrap{
|
|
|
+ height: 350px
|
|
|
+ }
|
|
|
+@media only screen and (max-height: 768px) {
|
|
|
+ .bcontent-wrap{
|
|
|
+ height: 250px
|
|
|
+ }
|
|
|
+}
|
|
|
/*滚动*/
|
|
|
.scrollbar-auto {
|
|
|
- overflow-y: auto;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
}
|
|
|
.panel-sidebar .scrollbar-auto{
|
|
|
- padding-top: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
+ padding-top: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
.panel-sidebar .scrollbar-auto {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- overflow-y: auto;
|
|
|
- position: static;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ position: static;
|
|
|
}
|
|
|
/*头部*/
|
|
|
.header .logo {
|
|
@@ -314,16 +336,23 @@ body {
|
|
|
margin-top:15%
|
|
|
}
|
|
|
/*侧栏主菜单*/
|
|
|
-.nav-top{
|
|
|
- padding-top: 50px
|
|
|
+.nav-top,.nav-bottom{
|
|
|
+ width: 55px
|
|
|
}
|
|
|
.bg-nav a{
|
|
|
color:#7786ab;
|
|
|
- width:120px;
|
|
|
- height: 55px;
|
|
|
- line-height: 55px;
|
|
|
+ width:55px;
|
|
|
+ text-align: center;
|
|
|
display: inline-block;
|
|
|
- padding:0 0 0 10px
|
|
|
+ padding:15px 0;
|
|
|
+ font-size: 12px
|
|
|
+}
|
|
|
+.bg-nav a i{
|
|
|
+ font-size:22px;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-nav a span{
|
|
|
+ display: none;
|
|
|
}
|
|
|
.bg-nav > li{
|
|
|
width:120px
|
|
@@ -340,8 +369,11 @@ body {
|
|
|
color:#f2f2f2;
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
+.bg-nav > li.active a span{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
.bg-nav > li + li {
|
|
|
- margin-top:0;
|
|
|
+ margin-top:0;
|
|
|
}
|
|
|
.bg-nav .sub-menu {
|
|
|
list-style:none;
|
|
@@ -367,7 +399,10 @@ body {
|
|
|
border-bottom: 1px solid #e2eaec;
|
|
|
padding-right: 15px;
|
|
|
margin-bottom: 10px;
|
|
|
- margin-left: 20px
|
|
|
+ margin-left: 17px
|
|
|
+}
|
|
|
+.nav-box > .sub-list > li > a{
|
|
|
+ padding-left: 40px
|
|
|
}
|
|
|
.nav-list li a{
|
|
|
color: #333;
|
|
@@ -414,7 +449,7 @@ body {
|
|
|
color:#f90000
|
|
|
}
|
|
|
.bg-gray {
|
|
|
- background-color:#bbb!important;
|
|
|
+ background-color:#bbb!important;
|
|
|
}
|
|
|
.datepickers-container {
|
|
|
z-index: 9999
|
|
@@ -423,6 +458,10 @@ body {
|
|
|
height:500px;
|
|
|
overflow: hidden
|
|
|
}
|
|
|
+.modal-height-300{
|
|
|
+ height:300px;
|
|
|
+ overflow:auto
|
|
|
+}
|
|
|
.modal-lgx {
|
|
|
max-width:1000px
|
|
|
}
|
|
@@ -505,45 +544,3 @@ body {
|
|
|
width:inherit;
|
|
|
height: inherit;
|
|
|
}
|
|
|
-.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;
|
|
|
-}
|