main.css 7.1 KB

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