main.css 10 KB

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