main.css 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520
  1. /*building SAAS 0.1*/
  2. /*bootstrap 初始化*/
  3. body {
  4. font-size: 0.9rem;
  5. overflow: hidden;
  6. background: #e4e7ea
  7. }
  8. .dropdown-menu {
  9. font-size: 0.9rem
  10. }
  11. .btn.disabled, .btn:disabled {
  12. color:#999
  13. }
  14. .btn,.btn-group {
  15. vertical-align: baseline;
  16. }
  17. /*自定义css*/
  18. .in-1{padding-left:5px!important}
  19. .in-2{padding-left:21px!important}
  20. .in-3{padding-left:42px!important}
  21. .in-4{padding-left:63px!important}
  22. .in-5{padding-left:84px!important}
  23. .in-6{padding-left:105px!important}
  24. /*滚动条*/
  25. /* 滚动条 */
  26. ::-webkit-scrollbar-thumb:horizontal { /*水平滚动条的样式*/
  27. width: 5px;
  28. background-color: #ddd;
  29. -webkit-border-radius: 6px;
  30. }
  31. ::-webkit-scrollbar-track-piece {
  32. background-color: #fff; /*滚动条的背景颜色*/
  33. -webkit-border-radius: 0; /*滚动条的圆角宽度*/
  34. }
  35. ::-webkit-scrollbar {
  36. width: 10px; /*滚动条的宽度*/
  37. height: 8px; /*滚动条的高度*/
  38. }
  39. ::-webkit-scrollbar-thumb:vertical { /*垂直滚动条的样式*/
  40. height: 50px;
  41. background-color: #ddd;
  42. -webkit-border-radius: 6px;
  43. outline: 1px solid #fff;
  44. outline-offset: -1px;
  45. border: 1px solid #fff;
  46. }
  47. ::-webkit-scrollbar-thumb:hover { /*滚动条的hover样式*/
  48. height: 50px;
  49. background-color: #999;
  50. -webkit-border-radius: 6px;
  51. }
  52. .sjs-height-1,.sjs-height-2{
  53. overflow: hidden;
  54. }
  55. .sjs-height-4,.sjs-height-5,.sjs-height-6{
  56. overflow: auto;
  57. }
  58. .sjs-bottom{
  59. height:400px;
  60. overflow-y: auto;
  61. }
  62. .sjs-bottom-2{
  63. height:360px;
  64. overflow-y: auto;
  65. }
  66. .form-signin {
  67. max-width: 500px;
  68. margin: 150px auto;
  69. }
  70. .has-danger {
  71. -webkit-animation: shake 1s .2s ease both;
  72. -moz-animation: shake 1s .2s ease both;
  73. animation: shake 1s .2s ease both;
  74. }
  75. @-webkit-keyframes shake {
  76. 0%, 100% {
  77. -webkit-transform: translateX(0);
  78. }
  79. 10%, 30%, 50%, 70%, 90% {
  80. -webkit-transform: translateX(-10px);
  81. }
  82. 20%, 40%, 60%, 80% {
  83. -webkit-transform: translateX(10px);
  84. }
  85. }
  86. @-moz-keyframes shake {
  87. 0%, 100% {
  88. -moz-transform: translateX(0);
  89. }
  90. 10%, 30%, 50%, 70%, 90% {
  91. -moz-transform: translateX(-10px);
  92. }
  93. 20%, 40%, 60%, 80% {
  94. -moz-transform: translateX(10px);
  95. }
  96. }
  97. @keyframes shake {
  98. 0%, 100% {
  99. transform: translateX(0);
  100. }
  101. 10%, 30%, 50%, 70%, 90% {
  102. transform: translateX(-10px);
  103. }
  104. 20%, 40%, 60%, 80% {
  105. transform: translateX(10px);
  106. }
  107. }
  108. /*2.主体框架*/
  109. .header {
  110. background:#fff;
  111. position: fixed;
  112. z-index: 10;
  113. width: 100%;
  114. height: 50px;
  115. top: 0;
  116. left: 0
  117. }
  118. .main{
  119. position: relative;
  120. z-index: 4;
  121. }
  122. .main-nav {
  123. position: fixed;
  124. z-index: 99;
  125. width:120px;
  126. left: 0;
  127. top: 0;
  128. height: 100%;
  129. background: #33425b;
  130. }
  131. .main-panel{
  132. padding-left:120px;
  133. box-sizing: border-box;
  134. }
  135. .panel-sidebar{
  136. box-sizing: border-box;
  137. background: #fbfcfd;
  138. position: fixed;
  139. height: 100%;
  140. z-index: 4;
  141. left:120px;
  142. padding-top: 100px;
  143. border-right: 1px solid #ddd;
  144. width: 250px;
  145. }
  146. .panel-content{
  147. padding:115px 0 0;
  148. position: relative;
  149. z-index: 3;
  150. box-sizing: border-box;
  151. overflow-y: auto;
  152. height: 100vh;
  153. }
  154. .panel-content .content-wrap{
  155. margin:0 15px 15px;
  156. }
  157. .panel-sidebar+.panel-content{
  158. padding: 115px 0 0 250px;
  159. }
  160. .panel-title, .panel-title>.title-bar {
  161. height:50px;
  162. line-height: 50px
  163. }
  164. .panel-title{
  165. position: fixed;
  166. top: 50px;
  167. z-index: 98;
  168. width: 100%;
  169. box-sizing: border-box;
  170. background: #fff;
  171. box-shadow: 0 1px 3px rgba(0,0,0,.05);
  172. border-top: 1px solid #ddd;
  173. }
  174. .panel-sidebar .panel-title{
  175. width:250px;
  176. border-right: 1px solid #ddd;
  177. box-shadow: 0 1px 3px rgba(0,0,0,.1);
  178. }
  179. .panel-content .panel-title{
  180. left: 0;
  181. padding-left: 370px;
  182. padding-right: 20px;
  183. }
  184. .panel-content .panel-title.fluid{
  185. padding-left:120px
  186. }
  187. .panel-title>.title-bar{
  188. padding-left: 20px
  189. }
  190. .panel-title>.title-bar>h2,.panel-title>.title-main>h2{
  191. font-size: 16px;
  192. margin:0;
  193. height: 50px;
  194. line-height: 50px;
  195. display:block
  196. }
  197. .panel-title>.title-bar>h2 .btn{
  198. margin-right:15px
  199. }
  200. .panel-title>.title-main .btn.pull-right {
  201. margin:10px 0 0 10px
  202. }
  203. .panel-title>.title-main .form-control {
  204. margin:10px 0 0 0
  205. }
  206. .panel-title>.title-main{
  207. padding-left: 15px
  208. }
  209. .side-menu{
  210. position: fixed;
  211. right:15px;
  212. top:116px
  213. }
  214. .side-menu .nav-link{
  215. line-height: 16px;
  216. font-size: 14px
  217. }
  218. .sub-content{
  219. margin:0;
  220. }
  221. .pr-46{
  222. padding-right:46px
  223. }
  224. /*滚动*/
  225. .scrollbar-auto {
  226. overflow-y: auto;
  227. position: absolute;
  228. bottom: 0;
  229. left: 0;
  230. top: 0;
  231. right: 0;
  232. }
  233. .panel-sidebar .scrollbar-auto{
  234. padding-top: 20px;
  235. box-sizing: border-box;
  236. }
  237. .panel-sidebar .scrollbar-auto {
  238. height: 100%;
  239. width: 100%;
  240. overflow-y: auto;
  241. position: static;
  242. }
  243. /*头部*/
  244. .header .logo {
  245. float: left;
  246. box-shadow: 1px 0 6px rgba(0,0,0,.06);
  247. margin-right: 20px;
  248. margin:0
  249. }
  250. .header .logo>a{
  251. width:120px;
  252. height:50px;
  253. line-height: 50px;
  254. display: inline-block;
  255. color:#fff;
  256. font-size:24px;
  257. padding:0 10px;
  258. transition: all ease .4s;
  259. background:#207fd1 url(logo.png) no-repeat;
  260. text-indent: -9999px;
  261. vertical-align: top
  262. }
  263. .header .logo>a:hover{
  264. background-color:#5596cf;
  265. text-decoration: none;
  266. }
  267. .header-user > div {
  268. float:left
  269. }
  270. .avatar .pic {
  271. height: 35px;
  272. width: 35px;
  273. border-radius: 100%;
  274. display: inline-block;
  275. float:left;
  276. margin:7px 7px 0 0
  277. }
  278. .avatar .pic img{
  279. display: block;
  280. width: 100%;
  281. height: 100%;
  282. border-radius: 100%;
  283. }
  284. .avatar > a,.msg >a{
  285. display: block;
  286. height:50px;
  287. line-height: 50px;
  288. color:#666;
  289. padding:0 15px;
  290. cursor: pointer;
  291. }
  292. .avatar > a:hover,.msg > a:hover{
  293. text-decoration: none;
  294. box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
  295. }
  296. .header-user .msg{
  297. border-left:1px solid #eee
  298. }
  299. .header-user .msg .glyphicon{
  300. font-size:20px;
  301. vertical-align: middle;
  302. }
  303. .header-user .msg .badge{
  304. margin:0 0 0 5px
  305. }
  306. .header .poj-name {
  307. float:left;
  308. padding:0 0 0 15px;
  309. font-size:18px
  310. }
  311. .header .poj-name a{
  312. color:#666
  313. }
  314. .header .poj-name > span{
  315. height:50px;
  316. line-height:50px;
  317. }
  318. /*登陆相关*/
  319. .login-body{
  320. background: #fff
  321. }
  322. .login-infoinput {
  323. margin-top:15%
  324. }
  325. /*侧栏主菜单*/
  326. .nav-top{
  327. padding-top: 50px
  328. }
  329. .bg-nav a{
  330. color:#7786ab;
  331. width:120px;
  332. height: 55px;
  333. line-height: 55px;
  334. display: inline-block;
  335. padding:0 0 0 10px
  336. }
  337. .bg-nav > li{
  338. width:120px
  339. }
  340. .bg-nav > li.active{
  341. background: #192948
  342. }
  343. .bg-nav > li.active a{
  344. border-radius: 0;
  345. background: #192948
  346. }
  347. .bg-nav > li > a:hover,.bg-nav > li.active > a:hover{
  348. background: #192948;
  349. color:#f2f2f2;
  350. text-decoration: none;
  351. }
  352. .bg-nav > li + li {
  353. margin-top:0;
  354. }
  355. .bg-nav .sub-menu {
  356. list-style:none;
  357. padding:0 0 0 20px;
  358. width:120px;
  359. display: none
  360. }
  361. .bg-nav .sub-menu a {
  362. width:100px;
  363. height:30px;
  364. line-height:30px
  365. }
  366. .bg-nav .sub-menu:last-child{
  367. margin:0 0 20px 0
  368. }
  369. .bg-nav .menu-arrow{
  370. margin:22px 8px 0 0
  371. }
  372. .nav-box h3{
  373. font-size: 14px;
  374. font-weight: 700;
  375. padding-bottom: 4px;
  376. border-bottom: 1px solid #e2eaec;
  377. padding-right: 15px;
  378. margin-bottom: 10px;
  379. margin-left: 20px
  380. }
  381. .nav-list li a{
  382. color: #333;
  383. display: block;
  384. height: 35px;
  385. line-height: 35px;
  386. box-sizing: border-box;
  387. padding-left: 17px;
  388. padding-right: 45px;
  389. text-overflow: ellipsis;
  390. position: relative;
  391. }
  392. .nav-list li a:hover{
  393. text-decoration: none;
  394. background:#e4e7ea;
  395. cursor: pointer;
  396. }
  397. .nav-list li a .badge{
  398. position: absolute;
  399. right:17px;
  400. top:9px
  401. }
  402. .nav-list li.active a{
  403. background:#e4e7ea;
  404. font-weight: 600
  405. }
  406. /*内容区*/
  407. .c-header {
  408. padding:0 0 5px
  409. }
  410. .c-body{
  411. padding:15px;
  412. background:#fff;
  413. }
  414. .right-nav{
  415. width:46px
  416. }
  417. .right-nav .nav-link.active{
  418. background: #fff;
  419. color:#495057
  420. }
  421. .form-group .necessary{
  422. font-size:18px;
  423. color:#f90000
  424. }
  425. .bg-gray {
  426. background-color:#bbb!important;
  427. }
  428. .datepickers-container {
  429. z-index: 9999
  430. }
  431. .modal-height-500{
  432. height:500px;
  433. overflow: hidden
  434. }
  435. .modal-height-300{
  436. height:300px;
  437. overflow:auto
  438. }
  439. .modal-lgx {
  440. max-width:1000px
  441. }
  442. .title-main .nav{
  443. line-height: 16px;
  444. margin-top:8px
  445. }
  446. /*草图编辑器*/
  447. .img-view{
  448. height:400px;
  449. border:.2rem solid #ccc;
  450. position: relative;
  451. width:100%;
  452. overflow: hidden;
  453. }
  454. .img-view::after{
  455. content:"草图编辑区";
  456. color:#ddd;
  457. position: absolute;
  458. left:50%;
  459. top:50%;
  460. margin-left:-80px;
  461. margin-top:-24px;
  462. font-size:36px
  463. }
  464. .img-view .img-item{
  465. position: absolute;
  466. }
  467. .img-view .img-item .img-bar{
  468. position:absolute;
  469. right:0;
  470. top:0;
  471. display:none
  472. }
  473. .img-item:hover .img-bar{
  474. display: block;
  475. }
  476. .batch-l-t,.batch-l-b{
  477. height: 200px;
  478. overflow: hidden
  479. }
  480. .batch-r {
  481. height:400px;
  482. overflow: hidden
  483. }
  484. /*打印工具栏*/
  485. .print-toolsbar{
  486. padding-bottom:5px
  487. }
  488. .print-toolsbar .panel {
  489. display:inline-block;
  490. vertical-align:top;
  491. background:#f7f7f9
  492. }
  493. .print-toolsbar .panel .panel-foot{
  494. text-align: center;
  495. font-size: 12px
  496. }
  497. .print-list {
  498. border-right:1px solid #ccc
  499. }
  500. .print-list .form-list {
  501. overflow: auto
  502. }
  503. .print-list .list-tools{
  504. height:50px;
  505. padding:10px 0;
  506. border-bottom:1px solid #f2f2f2
  507. }
  508. .pageContainer {
  509. background: #ededed;
  510. text-align: center
  511. }
  512. .pageContainer .page{
  513. border:9px solid transparent;
  514. display: inline-block;
  515. }
  516. .pageContainer .page img{
  517. width:inherit;
  518. height: inherit;
  519. }