main.css 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437
  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. /*自定义css*/
  15. .sjs-height-1,.sjs-height-2,.sjs-height-3{
  16. overflow: auto;
  17. }
  18. .sjs-bottom{
  19. height:400px;
  20. overflow-y: auto;
  21. }
  22. .sjs-bottom-2{
  23. overflow-y: auto;
  24. }
  25. .sjs-bottom-4
  26. {
  27. height:360px
  28. }
  29. .form-signin {
  30. max-width: 500px;
  31. margin: 150px auto;
  32. }
  33. .has-danger {
  34. -webkit-animation: shake 1s .2s ease both;
  35. -moz-animation: shake 1s .2s ease both;
  36. animation: shake 1s .2s ease both;
  37. }
  38. @-webkit-keyframes shake {
  39. 0%, 100% {
  40. -webkit-transform: translateX(0);
  41. }
  42. 10%, 30%, 50%, 70%, 90% {
  43. -webkit-transform: translateX(-10px);
  44. }
  45. 20%, 40%, 60%, 80% {
  46. -webkit-transform: translateX(10px);
  47. }
  48. }
  49. @-moz-keyframes shake {
  50. 0%, 100% {
  51. -moz-transform: translateX(0);
  52. }
  53. 10%, 30%, 50%, 70%, 90% {
  54. -moz-transform: translateX(-10px);
  55. }
  56. 20%, 40%, 60%, 80% {
  57. -moz-transform: translateX(10px);
  58. }
  59. }
  60. @keyframes shake {
  61. 0%, 100% {
  62. transform: translateX(0);
  63. }
  64. 10%, 30%, 50%, 70%, 90% {
  65. transform: translateX(-10px);
  66. }
  67. 20%, 40%, 60%, 80% {
  68. transform: translateX(10px);
  69. }
  70. }
  71. /*2.主体框架*/
  72. .header {
  73. background:#fff;
  74. position: fixed;
  75. z-index: 10;
  76. width: 100%;
  77. height: 50px;
  78. top: 0;
  79. left: 0
  80. }
  81. .main{
  82. position: relative;
  83. z-index: 4;
  84. }
  85. .main-nav {
  86. position: fixed;
  87. z-index: 99;
  88. width:120px;
  89. left: 0;
  90. top: 0;
  91. height: 100%;
  92. background: #33425b;
  93. }
  94. .main-panel{
  95. padding-left:120px;
  96. box-sizing: border-box;
  97. }
  98. .panel-sidebar{
  99. box-sizing: border-box;
  100. background: #fbfcfd;
  101. position: fixed;
  102. height: 100%;
  103. z-index: 4;
  104. left:120px;
  105. padding-top: 100px;
  106. border-right: 1px solid #ddd;
  107. width: 250px;
  108. }
  109. .panel-content{
  110. padding:115px 0 0;
  111. position: relative;
  112. z-index: 3;
  113. box-sizing: border-box;
  114. overflow-y: auto;
  115. height: 100vh;
  116. }
  117. .panel-content .content-wrap{
  118. margin:0 15px 15px;
  119. }
  120. .panel-sidebar+.panel-content{
  121. padding: 115px 0 0 250px;
  122. }
  123. .panel-title, .panel-title>.title-bar {
  124. height:50px;
  125. line-height: 50px
  126. }
  127. .panel-title{
  128. position: fixed;
  129. top: 50px;
  130. z-index: 98;
  131. width: 100%;
  132. box-sizing: border-box;
  133. background: #fff;
  134. box-shadow: 0 1px 3px rgba(0,0,0,.05);
  135. border-top: 1px solid #ddd;
  136. }
  137. .panel-sidebar .panel-title{
  138. width:250px;
  139. border-right: 1px solid #ddd;
  140. box-shadow: 0 1px 3px rgba(0,0,0,.1);
  141. }
  142. .panel-content .panel-title{
  143. left: 0;
  144. padding-left: 370px;
  145. padding-right: 20px;
  146. }
  147. .panel-content .panel-title.fluid{
  148. padding-left:120px
  149. }
  150. .panel-title>.title-bar{
  151. padding-left: 20px
  152. }
  153. .panel-title>.title-bar>h2,.panel-title>.title-main>h2{
  154. font-size: 16px;
  155. margin:0;
  156. height: 50px;
  157. line-height: 50px;
  158. display:block
  159. }
  160. .panel-title>.title-bar>h2 .btn{
  161. margin-right:15px
  162. }
  163. .panel-title>.title-main .btn.pull-right {
  164. margin:10px 0 0 10px
  165. }
  166. .panel-title>.title-main{
  167. padding-left: 15px
  168. }
  169. .panel-title>.title-main .dropdown-item{
  170. line-height: normal;
  171. }
  172. /*滚动*/
  173. .scrollbar-auto {
  174. overflow-y: auto;
  175. position: absolute;
  176. bottom: 0;
  177. left: 0;
  178. top: 0;
  179. right: 0;
  180. }
  181. .panel-sidebar .scrollbar-auto{
  182. padding-top: 20px;
  183. box-sizing: border-box;
  184. }
  185. .panel-sidebar .scrollbar-auto {
  186. height: 100%;
  187. width: 100%;
  188. overflow-y: auto;
  189. position: static;
  190. }
  191. /*头部*/
  192. .header .logo {
  193. float: left;
  194. box-shadow: 1px 0 6px rgba(0,0,0,.06);
  195. margin-right: 20px;
  196. margin:0
  197. }
  198. .header .logo>a{
  199. width:120px;
  200. height:50px;
  201. line-height: 50px;
  202. display: inline-block;
  203. color:#fff;
  204. font-size:24px;
  205. padding:0 10px;
  206. transition: all ease .4s;
  207. background:#ff6501 url(logo.png) no-repeat;
  208. text-indent: -9999px;
  209. vertical-align: top
  210. }
  211. .header .logo>a:hover{
  212. background-color:#ff7821;
  213. text-decoration: none;
  214. }
  215. .header-user > div {
  216. float:left
  217. }
  218. .avatar .pic {
  219. height: 35px;
  220. width: 35px;
  221. border-radius: 100%;
  222. display: inline-block;
  223. float:left;
  224. margin:7px 7px 0 0
  225. }
  226. .avatar .pic img{
  227. display: block;
  228. width: 100%;
  229. height: 100%;
  230. border-radius: 100%;
  231. }
  232. .avatar > a,.msg >a{
  233. display: block;
  234. height:50px;
  235. line-height: 50px;
  236. color:#666;
  237. padding:0 15px;
  238. cursor: pointer;
  239. }
  240. .avatar > a:hover,.msg > a:hover{
  241. text-decoration: none;
  242. box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
  243. }
  244. .header-user .msg{
  245. border-left:1px solid #eee
  246. }
  247. .header-user .msg .glyphicon{
  248. font-size:20px;
  249. vertical-align: middle;
  250. }
  251. .header-user .msg .badge{
  252. margin:0 0 0 5px
  253. }
  254. .header .poj-name {
  255. float:left;
  256. padding:0 0 0 15px;
  257. font-size:18px
  258. }
  259. .header .poj-name a{
  260. color:#666
  261. }
  262. .header .poj-name > span{
  263. height:50px;
  264. line-height:50px;
  265. }
  266. /*登陆相关*/
  267. .login-body{
  268. background: #fff
  269. }
  270. .login-infoinput {
  271. margin-top:15%
  272. }
  273. /*侧栏主菜单*/
  274. .nav-top{
  275. padding-top: 50px
  276. }
  277. .bg-nav a{
  278. color:#7786ab;
  279. width:120px;
  280. height: 55px;
  281. line-height: 55px;
  282. display: inline-block;
  283. padding:0 0 0 10px
  284. }
  285. .bg-nav > li{
  286. width:120px
  287. }
  288. .bg-nav > li.active{
  289. background: #192948
  290. }
  291. .bg-nav > li.active a{
  292. border-radius: 0;
  293. background: #192948
  294. }
  295. .bg-nav > li > a:hover,.bg-nav > li.active > a:hover{
  296. background: #192948;
  297. color:#f2f2f2;
  298. text-decoration: none;
  299. }
  300. .bg-nav > li + li {
  301. margin-top:0;
  302. }
  303. .bg-nav .sub-menu {
  304. list-style:none;
  305. padding:0 0 0 20px;
  306. width:120px;
  307. display: none
  308. }
  309. .bg-nav .sub-menu a {
  310. width:100px;
  311. height:30px;
  312. line-height:30px
  313. }
  314. .bg-nav .sub-menu:last-child{
  315. margin:0 0 20px 0
  316. }
  317. .bg-nav .menu-arrow{
  318. margin:22px 8px 0 0
  319. }
  320. .nav-box h3{
  321. font-size: 14px;
  322. font-weight: 700;
  323. padding-bottom: 4px;
  324. border-bottom: 1px solid #e2eaec;
  325. padding-right: 15px;
  326. margin-bottom: 10px;
  327. margin-left: 20px
  328. }
  329. .nav-list li a{
  330. color: #333;
  331. display: block;
  332. height: 35px;
  333. line-height: 35px;
  334. box-sizing: border-box;
  335. padding-left: 17px;
  336. padding-right: 45px;
  337. text-overflow: ellipsis;
  338. position: relative;
  339. }
  340. .nav-list li a:hover{
  341. text-decoration: none;
  342. background:#e4e7ea;
  343. cursor: pointer;
  344. }
  345. .nav-list li a .badge{
  346. position: absolute;
  347. right:17px;
  348. top:9px
  349. }
  350. .nav-list li.active a{
  351. background:#e4e7ea;
  352. font-weight: 600
  353. }
  354. /*内容区*/
  355. .c-header {
  356. padding:0 0 5px
  357. }
  358. .c-body{
  359. padding:15px;
  360. background:#fff;
  361. }
  362. .right-nav{
  363. width:18px
  364. }
  365. .right-nav .nav-link.active{
  366. background: #fff;
  367. color:#495057
  368. }
  369. .form-group .necessary{
  370. font-size:18px;
  371. color:#f90000
  372. }
  373. .bg-gray {
  374. background-color:#bbb!important;
  375. }
  376. .datepickers-container {
  377. z-index: 9999
  378. }
  379. .modal-height-500{
  380. height:500px;
  381. overflow: hidden
  382. }
  383. .modal-height-500-scroll{
  384. height:500px;
  385. overflow: auto;
  386. }
  387. .modal-lgx {
  388. max-width:1000px
  389. }
  390. .title-main .nav{
  391. line-height: 16px;
  392. margin-top:8px
  393. }
  394. /*草图编辑器*/
  395. .img-view{
  396. height:400px;
  397. border:.2rem solid #ccc;
  398. position: relative;
  399. width:100%;
  400. overflow: hidden;
  401. }
  402. .img-view::after{
  403. content:"草图编辑区";
  404. color:#ddd;
  405. position: absolute;
  406. left:50%;
  407. top:50%;
  408. margin-left:-80px;
  409. margin-top:-24px;
  410. font-size:36px
  411. }
  412. .img-view .img-item{
  413. position: absolute;
  414. }
  415. .img-view .img-item .img-bar{
  416. position:absolute;
  417. right:0;
  418. top:0;
  419. display:none
  420. }
  421. .img-item:hover .img-bar{
  422. display: block;
  423. }
  424. .batch-l-t,.batch-l-b{
  425. height: 200px;
  426. overflow: hidden
  427. }
  428. .batch-r {
  429. height:400px;
  430. overflow: hidden
  431. }
  432. .table-f td.text-right{
  433. word-break:break-all;
  434. }