main.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650
  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. .nav-pills .nav-link.active, .nav-pills .show > .nav-link{
  18. background-color: #e4e7ea;
  19. color:#333;
  20. font-weight: 600
  21. }
  22. .custom-file-sm,.custom-file-sm .custom-file-label{
  23. height: calc(1.5em + .5rem + 2px);
  24. padding-top: .25rem;
  25. padding-bottom: .25rem;
  26. padding-left: .5rem;
  27. }
  28. .custom-file-sm .custom-file-label:after{
  29. height: calc(1.4em + .5rem + 2px);
  30. padding-top: .25rem;
  31. padding-bottom: .25rem;
  32. font-size: .875rem;
  33. }
  34. .custom-file-sm input{
  35. height: calc(1.5em + .5rem + 2px);
  36. font-size: .875rem;
  37. }
  38. /*自定义css*/
  39. .in-1{padding-left:5px!important}
  40. .in-2{padding-left:21px!important}
  41. .in-3{padding-left:42px!important}
  42. .in-4{padding-left:63px!important}
  43. .in-5{padding-left:84px!important}
  44. .in-6{padding-left:105px!important}
  45. /*滚动条*/
  46. /* 滚动条 */
  47. ::-webkit-scrollbar-thumb:horizontal { /*水平滚动条的样式*/
  48. width: 5px;
  49. background-color: #e9ecef;
  50. -webkit-border-radius: 0;
  51. }
  52. ::-webkit-scrollbar-track-piece {
  53. background-color: #efefef; /*滚动条的背景颜色*/
  54. -webkit-border-radius: 0; /*滚动条的圆角宽度*/
  55. }
  56. ::-webkit-scrollbar {
  57. width: 14px; /*滚动条的宽度*/
  58. height: 14px; /*滚动条的高度*/
  59. }
  60. ::-webkit-scrollbar-thumb:vertical { /*垂直滚动条的样式*/
  61. height: 50px;
  62. background-color: #e9ecef;
  63. -webkit-border-radius: 0;
  64. outline: 1px solid #fff;
  65. outline-offset: -1px;
  66. border: 1px solid #ced4da;
  67. }
  68. ::-webkit-scrollbar-thumb:hover { /*滚动条的hover样式*/
  69. height: 50px;
  70. background-color: #ced4da;
  71. -webkit-border-radius: 0;
  72. }
  73. .sjs-height-1,.sjs-height-2,.sjs-sh-1,.sjs-sh-2,.sjs-sh-3,.sjs-sh-4,.sjs-sh-5{
  74. overflow: hidden;
  75. }
  76. .sjs-height-4,.sjs-height-5,.sjs-height-6,.sjs-option-height{
  77. overflow: auto;
  78. }
  79. .sjs-bottom{
  80. height:400px;
  81. overflow-y: auto;
  82. }
  83. .sjs-bottom-2{
  84. height:360px;
  85. overflow-y: auto;
  86. }
  87. .form-signin {
  88. max-width: 500px;
  89. margin: 150px auto;
  90. }
  91. .has-danger {
  92. -webkit-animation: shake 1s .2s ease both;
  93. -moz-animation: shake 1s .2s ease both;
  94. animation: shake 1s .2s ease both;
  95. }
  96. @-webkit-keyframes shake {
  97. 0%, 100% {
  98. -webkit-transform: translateX(0);
  99. }
  100. 10%, 30%, 50%, 70%, 90% {
  101. -webkit-transform: translateX(-10px);
  102. }
  103. 20%, 40%, 60%, 80% {
  104. -webkit-transform: translateX(10px);
  105. }
  106. }
  107. @-moz-keyframes shake {
  108. 0%, 100% {
  109. -moz-transform: translateX(0);
  110. }
  111. 10%, 30%, 50%, 70%, 90% {
  112. -moz-transform: translateX(-10px);
  113. }
  114. 20%, 40%, 60%, 80% {
  115. -moz-transform: translateX(10px);
  116. }
  117. }
  118. @keyframes shake {
  119. 0%, 100% {
  120. transform: translateX(0);
  121. }
  122. 10%, 30%, 50%, 70%, 90% {
  123. transform: translateX(-10px);
  124. }
  125. 20%, 40%, 60%, 80% {
  126. transform: translateX(10px);
  127. }
  128. }
  129. /*2.主体框架*/
  130. .header {
  131. background:#fff;
  132. position: fixed;
  133. z-index: 10;
  134. width: 100%;
  135. height: 50px;
  136. top: 0;
  137. left: 0
  138. }
  139. .main{
  140. position: relative;
  141. z-index: 4;
  142. }
  143. .main-nav {
  144. position: fixed;
  145. z-index: 99;
  146. width:55px;
  147. left: 0;
  148. top: 0;
  149. height: 100%;
  150. background: #33425b;
  151. }
  152. .main-panel{
  153. padding-left:55px;
  154. box-sizing: border-box;
  155. }
  156. .panel-sidebar{
  157. box-sizing: border-box;
  158. background: #fbfcfd;
  159. position: fixed;
  160. height: 100%;
  161. z-index: 4;
  162. left:55px;
  163. padding-top:50px;
  164. border-right: 1px solid #ddd;
  165. width: 200px;
  166. }
  167. .side-fold{
  168. position: absolute;
  169. bottom:10px;
  170. right:20px;
  171. }
  172. .min-side .side-fold{
  173. position: absolute;
  174. bottom:15px;
  175. right:5px;
  176. height: 20px
  177. }
  178. .min-side{
  179. border-right: 1px solid #ddd;
  180. margin-right:10px;
  181. padding-right:15px;
  182. position: relative;
  183. }
  184. .min-side .side-switch i{
  185. font-size: 20px
  186. }
  187. .min-side .side-menu{
  188. position: absolute;
  189. left:-15px;
  190. top:50px;
  191. background:#fff;
  192. width:150px;
  193. border-right:1px solid #ddd;
  194. border-bottom:1px solid #ddd;
  195. box-shadow: 0 1px 3px rgba(0,0,0,.1);
  196. }
  197. .panel-content{
  198. padding:65px 0 0;
  199. position: relative;
  200. z-index: 3;
  201. box-sizing: border-box;
  202. overflow-y: auto;
  203. height: 100vh;
  204. }
  205. .panel-content .content-wrap{
  206. margin:0 15px 15px;
  207. position: relative;
  208. background-color: #d2d5da
  209. }
  210. .panel-sidebar+.panel-content{
  211. padding: 65px 0 0 200px;
  212. }
  213. .panel-title, .panel-title>.title-bar {
  214. height:50px;
  215. line-height: 50px
  216. }
  217. .panel-title .dropdown-item,.panel-title .dropdown-item-text,.panel-title .form-group {
  218. line-height: normal;
  219. }
  220. .panel-title{
  221. position: fixed;
  222. top:0px;
  223. z-index: 98;
  224. width: 100%;
  225. box-sizing: border-box;
  226. background: #fff;
  227. box-shadow: 0 1px 3px rgba(0,0,0,.05);
  228. border-top: 1px solid #ddd;
  229. }
  230. .panel-sidebar .panel-title{
  231. width:200px;
  232. border-right: 1px solid #ddd;
  233. box-shadow: 0 1px 3px rgba(0,0,0,.1);
  234. }
  235. .panel-content .panel-title{
  236. left: 0;
  237. padding-left: 255px;
  238. padding-right: 20px;
  239. }
  240. .panel-content .panel-title.fluid{
  241. padding-left:55px
  242. }
  243. .panel-title>.title-bar{
  244. padding-left: 20px
  245. }
  246. .panel-title>.title-bar>h2,.panel-title>.title-main>h2{
  247. font-size: 16px;
  248. margin:0;
  249. height: 50px;
  250. line-height: 50px;
  251. display:block
  252. }
  253. .panel-title>.title-bar>h2 .btn{
  254. margin-right:15px
  255. }
  256. .panel-title>.title-main .btn.pull-right {
  257. margin:10px 0 0 10px
  258. }
  259. .panel-title>.title-main .form-control {
  260. margin:10px 0 0 0
  261. }
  262. .panel-title>.title-main{
  263. padding-left: 15px
  264. }
  265. .panel-title .alert {
  266. line-height: normal;
  267. z-index: 999
  268. }
  269. .side-menu{
  270. position: fixed;
  271. right:15px;
  272. top:65px
  273. }
  274. .side-menu .nav-link{
  275. line-height: 16px;
  276. font-size: 14px;
  277. color:#666;
  278. }
  279. .side-menu .nav-link:hover{
  280. background:#dcdee3;
  281. color:#333;
  282. }
  283. .sub-content{
  284. margin:0;
  285. }
  286. .pr-46{
  287. padding-right:36px
  288. }
  289. .bcontent-wrap{
  290. height: 350px
  291. }
  292. @media only screen and (max-height: 768px) {
  293. .bcontent-wrap{
  294. height: 250px
  295. }
  296. }
  297. .modal-xl {
  298. max-width: 1000px
  299. }
  300. /*滚动*/
  301. .scrollbar-auto {
  302. overflow-y: auto;
  303. position: absolute;
  304. bottom: 0;
  305. left: 0;
  306. top: 0;
  307. right: 0;
  308. }
  309. .panel-sidebar .scrollbar-auto{
  310. padding-top: 20px;
  311. box-sizing: border-box;
  312. }
  313. .panel-sidebar .scrollbar-auto {
  314. height: 100%;
  315. width: 100%;
  316. overflow-y: auto;
  317. position: static;
  318. }
  319. /*结构宽度高度调整条*/
  320. .resize-y{
  321. height:5px;
  322. width:100%;
  323. float: left;
  324. margin-top:-5px;
  325. cursor: s-resize;
  326. z-index: 999
  327. }
  328. .resize-x{
  329. width:5px;
  330. height:100%;
  331. float: left;
  332. margin-left:-15px;
  333. cursor: w-resize;
  334. z-index: 999
  335. }
  336. /*头部*/
  337. .header .logo {
  338. float: left;
  339. box-shadow: 1px 0 6px rgba(0,0,0,.06);
  340. margin-right: 20px;
  341. margin:0
  342. }
  343. .header .logo>a{
  344. width:120px;
  345. height:50px;
  346. line-height: 50px;
  347. display: inline-block;
  348. color:#fff;
  349. font-size:24px;
  350. padding:0 10px;
  351. transition: all ease .4s;
  352. background:#207fd1 url(logo.png) no-repeat;
  353. text-indent: -9999px;
  354. vertical-align: top
  355. }
  356. .header .logo>a:hover{
  357. background-color:#5596cf;
  358. text-decoration: none;
  359. }
  360. .header-user > div {
  361. float:left
  362. }
  363. .avatar .pic {
  364. height: 35px;
  365. width: 35px;
  366. border-radius: 100%;
  367. display: inline-block;
  368. float:left;
  369. margin:7px 7px 0 0
  370. }
  371. .avatar .pic img{
  372. display: block;
  373. width: 100%;
  374. height: 100%;
  375. border-radius: 100%;
  376. }
  377. .avatar > a,.msg >a{
  378. display: block;
  379. height:50px;
  380. line-height: 50px;
  381. color:#666;
  382. padding:0 15px;
  383. cursor: pointer;
  384. }
  385. .avatar > a:hover,.msg > a:hover{
  386. text-decoration: none;
  387. box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
  388. }
  389. .header-user .msg{
  390. border-left:1px solid #eee
  391. }
  392. .header-user .msg .glyphicon{
  393. font-size:20px;
  394. vertical-align: middle;
  395. }
  396. .header-user .msg .badge{
  397. margin:0 0 0 5px
  398. }
  399. .header .poj-name {
  400. float:left;
  401. padding:0 0 0 15px;
  402. font-size:18px
  403. }
  404. .header .poj-name a{
  405. color:#666
  406. }
  407. .header .poj-name > span{
  408. height:50px;
  409. line-height:50px;
  410. }
  411. /*登陆相关*/
  412. .login-body{
  413. background: #fff
  414. }
  415. .login-infoinput {
  416. margin-top:15%
  417. }
  418. /*侧栏主菜单*/
  419. .nav-top,.nav-bottom{
  420. width: 55px
  421. }
  422. .bg-nav a{
  423. color:#7786ab;
  424. width:55px;
  425. text-align: center;
  426. display: inline-block;
  427. padding:15px 0;
  428. font-size: 12px
  429. }
  430. .bg-nav a i{
  431. font-size:22px;
  432. }
  433. .bg-nav a span{
  434. display: none;
  435. }
  436. .bg-nav > li{
  437. width:120px
  438. }
  439. .bg-nav > li.active{
  440. background: #192948
  441. }
  442. .bg-nav > li.active a{
  443. border-radius: 0;
  444. background: #192948
  445. }
  446. .bg-nav > li > a:hover,.bg-nav > li.active > a:hover{
  447. background: #192948;
  448. color:#f2f2f2;
  449. text-decoration: none;
  450. }
  451. .bg-nav > li.active a span{
  452. display: block;
  453. }
  454. .bg-nav > li + li {
  455. margin-top:0;
  456. }
  457. .bg-nav .sub-menu {
  458. list-style:none;
  459. padding:0 0 0 20px;
  460. width:120px;
  461. display: none
  462. }
  463. .bg-nav .sub-menu a {
  464. width:100px;
  465. height:30px;
  466. line-height:30px
  467. }
  468. .bg-nav .sub-menu:last-child{
  469. margin:0 0 20px 0
  470. }
  471. .bg-nav .menu-arrow{
  472. margin:22px 8px 0 0
  473. }
  474. .nav-box h3{
  475. font-size: 14px;
  476. font-weight: 700;
  477. padding-bottom: 4px;
  478. border-bottom: 1px solid #e2eaec;
  479. padding-right: 15px;
  480. margin-bottom: 10px;
  481. margin-left: 17px
  482. }
  483. .nav-box > .sub-list > li > a{
  484. padding-left: 40px
  485. }
  486. .nav-box .tips-dot {
  487. right:20px;
  488. top:8px
  489. }
  490. .nav-box .nav-list li{
  491. position: relative;
  492. }
  493. .contarl-box{
  494. padding:1rem 2rem 1rem 2rem;
  495. border-top:1px solid #ddd;
  496. }
  497. .nav-list li a{
  498. color: #333;
  499. display: block;
  500. height: 35px;
  501. line-height: 35px;
  502. box-sizing: border-box;
  503. padding-left: 17px;
  504. padding-right: 45px;
  505. text-overflow: ellipsis;
  506. position: relative;
  507. }
  508. .nav-list li a:hover{
  509. text-decoration: none;
  510. background:#e4e7ea;
  511. cursor: pointer;
  512. }
  513. .nav-list li a .badge{
  514. position: absolute;
  515. right:17px;
  516. top:9px
  517. }
  518. .nav-list li.active a{
  519. background:#e4e7ea;
  520. font-weight: 600
  521. }
  522. .side-menu .nav-link{
  523. padding:.5rem .6rem;
  524. }
  525. /*内容区*/
  526. .c-header {
  527. padding:0 0 5px
  528. }
  529. .c-body{
  530. padding:6px 6px 4px 6px;
  531. background:#fff;
  532. }
  533. .right-nav{
  534. width:36px
  535. }
  536. .right-nav .nav-link.active{
  537. background: #fff;
  538. color:#495057
  539. }
  540. .form-group .necessary{
  541. font-size:18px;
  542. color:#f90000
  543. }
  544. .bg-gray {
  545. background-color:#bbb!important;
  546. }
  547. .datepickers-container {
  548. z-index: 9999
  549. }
  550. .modal-height-500{
  551. height:450px;
  552. overflow: hidden
  553. }
  554. .modal-height-300{
  555. height:300px;
  556. overflow:auto
  557. }
  558. .modal-lgx {
  559. max-width:1000px
  560. }
  561. .title-main .nav{
  562. line-height: 16px;
  563. margin-top:8px
  564. }
  565. /*草图编辑器*/
  566. .img-view{
  567. height:400px;
  568. border:.2rem solid #ccc;
  569. position: relative;
  570. width:100%;
  571. overflow: hidden;
  572. }
  573. .img-view::after{
  574. content:"草图编辑区";
  575. color:#ddd;
  576. position: absolute;
  577. left:50%;
  578. top:50%;
  579. margin-left:-80px;
  580. margin-top:-24px;
  581. font-size:36px
  582. }
  583. .img-view .img-item{
  584. position: absolute;
  585. }
  586. .img-view .img-item .img-bar{
  587. position:absolute;
  588. right:0;
  589. top:0;
  590. display:none
  591. }
  592. .img-item:hover .img-bar{
  593. display: block;
  594. }
  595. .batch-l-t,.batch-l-b{
  596. height: 200px;
  597. overflow: hidden
  598. }
  599. .batch-r {
  600. height:400px;
  601. overflow: hidden
  602. }
  603. /*打印工具栏*/
  604. .print-toolsbar{
  605. padding-bottom:5px
  606. }
  607. .print-toolsbar .panel {
  608. display:inline-block;
  609. vertical-align:top;
  610. background:#f7f7f9
  611. }
  612. .print-toolsbar .panel .panel-foot{
  613. text-align: center;
  614. font-size: 12px
  615. }
  616. .print-list {
  617. border-right:1px solid #ccc
  618. }
  619. .print-list .form-list {
  620. overflow: auto
  621. }
  622. .print-list .list-tools{
  623. height:50px;
  624. padding:10px 0;
  625. border-bottom:1px solid #f2f2f2
  626. }
  627. .pageContainer {
  628. background: #ededed;
  629. text-align: center
  630. }
  631. .pageContainer .page{
  632. border:9px solid transparent;
  633. display: inline-block;
  634. }
  635. .pageContainer .page img{
  636. width:inherit;
  637. height: inherit;
  638. }
  639. .m-close-side{
  640. position: absolute;
  641. right:-1px;
  642. top:250px;
  643. background: #f2f2f2;
  644. padding:30px 3px;
  645. }
  646. .m-close-side:hover{
  647. background:#eae9e9;
  648. }