main.css 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  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. .form-signin {
  16. max-width: 500px;
  17. margin: 150px auto;
  18. }
  19. .has-danger {
  20. -webkit-animation: shake 1s .2s ease both;
  21. -moz-animation: shake 1s .2s ease both;
  22. animation: shake 1s .2s ease both;
  23. }
  24. @-webkit-keyframes shake {
  25. 0%, 100% {
  26. -webkit-transform: translateX(0);
  27. }
  28. 10%, 30%, 50%, 70%, 90% {
  29. -webkit-transform: translateX(-10px);
  30. }
  31. 20%, 40%, 60%, 80% {
  32. -webkit-transform: translateX(10px);
  33. }
  34. }
  35. @-moz-keyframes shake {
  36. 0%, 100% {
  37. -moz-transform: translateX(0);
  38. }
  39. 10%, 30%, 50%, 70%, 90% {
  40. -moz-transform: translateX(-10px);
  41. }
  42. 20%, 40%, 60%, 80% {
  43. -moz-transform: translateX(10px);
  44. }
  45. }
  46. @keyframes shake {
  47. 0%, 100% {
  48. transform: translateX(0);
  49. }
  50. 10%, 30%, 50%, 70%, 90% {
  51. transform: translateX(-10px);
  52. }
  53. 20%, 40%, 60%, 80% {
  54. transform: translateX(10px);
  55. }
  56. }
  57. /*2.主体框架*/
  58. .header {
  59. background:#fff;
  60. position: fixed;
  61. z-index: 10;
  62. width: 100%;
  63. height: 50px;
  64. top: 0;
  65. left: 0
  66. }
  67. .main{
  68. position: relative;
  69. z-index: 4;
  70. }
  71. .main-nav {
  72. position: fixed;
  73. z-index: 99;
  74. width:55px;
  75. left: 0;
  76. top: 0;
  77. height: 100%;
  78. background: #33425b;
  79. }
  80. .main-panel{
  81. padding-left:55px;
  82. box-sizing: border-box;
  83. }
  84. .panel-sidebar{
  85. box-sizing: border-box;
  86. background: #fbfcfd;
  87. position: fixed;
  88. height: 100%;
  89. z-index: 4;
  90. left:55px;
  91. padding-top: 100px;
  92. border-right: 1px solid #ddd;
  93. width: 250px;
  94. }
  95. .panel-content{
  96. padding:115px 0 0;
  97. position: relative;
  98. z-index: 3;
  99. box-sizing: border-box;
  100. overflow-y: auto;
  101. height: 100vh;
  102. }
  103. .panel-content .content-wrap{
  104. margin:0 15px 15px;
  105. }
  106. .panel-sidebar+.panel-content{
  107. padding: 115px 0 0 250px;
  108. }
  109. .panel-title, .panel-title>.title-bar {
  110. height:50px;
  111. line-height: 50px
  112. }
  113. .panel-title{
  114. position: fixed;
  115. top: 50px;
  116. z-index: 98;
  117. width: 100%;
  118. box-sizing: border-box;
  119. background: #fff;
  120. box-shadow: 0 1px 3px rgba(0,0,0,.05);
  121. border-top: 1px solid #ddd;
  122. }
  123. .panel-sidebar .panel-title{
  124. width:250px;
  125. border-right: 1px solid #ddd;
  126. box-shadow: 0 1px 3px rgba(0,0,0,.1);
  127. }
  128. .panel-content .panel-title{
  129. left: 0;
  130. padding-left: 305px;
  131. padding-right: 20px;
  132. }
  133. .panel-content .panel-title.fluid{
  134. padding-left:55px
  135. }
  136. .panel-title>.title-bar{
  137. padding-left: 20px
  138. }
  139. .panel-title>.title-bar>h2,.panel-title>.title-main>h2{
  140. font-size: 16px;
  141. margin:0;
  142. height: 50px;
  143. line-height: 50px;
  144. display:block
  145. }
  146. .panel-title>.title-bar>h2 .btn{
  147. margin-right:15px
  148. }
  149. .panel-title>.title-main .btn {
  150. margin:0 0 0 20px
  151. }
  152. .panel-title>.title-main .btn.pull-right {
  153. margin:10px 0 0 10px
  154. }
  155. .panel-title>.title-main{
  156. padding-left: 15px
  157. }
  158. /*滚动*/
  159. .scrollbar-auto {
  160. overflow-y: auto;
  161. position: absolute;
  162. bottom: 0;
  163. left: 0;
  164. top: 0;
  165. right: 0;
  166. }
  167. .panel-sidebar .scrollbar-auto{
  168. padding-top: 20px;
  169. box-sizing: border-box;
  170. }
  171. .panel-sidebar .scrollbar-auto {
  172. height: 100%;
  173. width: 100%;
  174. overflow-y: auto;
  175. position: static;
  176. }
  177. /*头部*/
  178. .header .logo {
  179. float: left;
  180. box-shadow: 1px 0 6px rgba(0,0,0,.06);
  181. margin-right: 20px;
  182. margin:0
  183. }
  184. .header .logo>a{
  185. width:55px;
  186. height:50px;
  187. line-height: 50px;
  188. display: inline-block;
  189. color:#fff;
  190. font-size:24px;
  191. padding:0 10px;
  192. transition: all ease .4s;
  193. background:#207fd1 url(logo.png) no-repeat;
  194. text-indent: -9999px;
  195. vertical-align: top
  196. }
  197. .header .logo>a:hover{
  198. background-color:#5596cf;
  199. text-decoration: none;
  200. }
  201. .header-user > div {
  202. float:left
  203. }
  204. .avatar .pic {
  205. height: 35px;
  206. width: 35px;
  207. border-radius: 100%;
  208. display: inline-block;
  209. float:left;
  210. margin:7px 7px 0 0
  211. }
  212. .avatar .pic img{
  213. display: block;
  214. width: 100%;
  215. height: 100%;
  216. border-radius: 100%;
  217. }
  218. .avatar > a,.msg >a{
  219. display: block;
  220. height:50px;
  221. line-height: 50px;
  222. color:#666;
  223. padding:0 15px;
  224. cursor: pointer;
  225. }
  226. .avatar > a:hover,.msg > a:hover{
  227. text-decoration: none;
  228. box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
  229. }
  230. .header-user .msg{
  231. border-left:1px solid #eee
  232. }
  233. .header-user .msg .glyphicon{
  234. font-size:20px;
  235. vertical-align: middle;
  236. }
  237. .header-user .msg .badge{
  238. margin:0 0 0 5px
  239. }
  240. .header .poj-name {
  241. float:left;
  242. padding:0 0 0 15px;
  243. font-size:18px
  244. }
  245. .header .poj-name a{
  246. color:#666
  247. }
  248. .header .poj-name > span{
  249. height:50px;
  250. line-height:50px;
  251. }
  252. /*登陆相关*/
  253. .login-body{
  254. background: #fff
  255. }
  256. .login-infoinput {
  257. margin-top:15%
  258. }
  259. /*侧栏主菜单*/
  260. .nav-top{
  261. padding-top: 50px
  262. }
  263. .bg-nav a{
  264. color:#7786ab;
  265. font-size: 24px;
  266. width:55px;
  267. height: 55px;
  268. line-height: 55px;
  269. display: inline-block;
  270. }
  271. .bg-nav > li.active > a{
  272. border-radius: 0;
  273. background: #192948
  274. }
  275. .bg-nav > li > a:hover,.bg-nav > li.active > a:hover{
  276. background: #192948;
  277. color:#f2f2f2
  278. }
  279. .bg-nav > li + li {
  280. margin-top:0;
  281. }
  282. .nav-box h3{
  283. font-size: 14px;
  284. font-weight: 700;
  285. padding-bottom: 4px;
  286. border-bottom: 1px solid #e2eaec;
  287. padding-right: 15px;
  288. margin-bottom: 10px;
  289. margin-left: 20px
  290. }
  291. .nav-list li a{
  292. color: #333;
  293. display: block;
  294. height: 35px;
  295. line-height: 35px;
  296. box-sizing: border-box;
  297. padding-left: 17px;
  298. padding-right: 45px;
  299. text-overflow: ellipsis;
  300. position: relative;
  301. }
  302. .nav-list li a:hover{
  303. text-decoration: none;
  304. background:#e4e7ea;
  305. cursor: pointer;
  306. }
  307. .nav-list li a .badge{
  308. position: absolute;
  309. right:17px;
  310. top:9px
  311. }
  312. .nav-list li.active a{
  313. background:#e4e7ea;
  314. font-weight: 600
  315. }
  316. .nav-list li.active .badge{
  317. background:#207fd1
  318. }
  319. /*内容区*/
  320. .c-header {
  321. padding:0 0 5px
  322. }
  323. .c-body{
  324. padding:15px;
  325. background:#fff;
  326. }
  327. .form-group .necessary{
  328. font-size:18px;
  329. color:#f90000
  330. }