base.css 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. body, ul {
  2. margin: 0;
  3. }
  4. body {
  5. font-size: 12px;
  6. font-family: 'Microsoft YaHei', 'Arial';
  7. }
  8. ul {
  9. list-style: none;
  10. padding: 0;
  11. }
  12. a, a:hover {
  13. text-decoration: none;
  14. }
  15. a:hover {
  16. }
  17. h4 {
  18. margin: 0;
  19. }
  20. .fl {
  21. float: left;
  22. }
  23. .fr {
  24. float: right;
  25. }
  26. .header {
  27. height: 72px;
  28. width: 100%;
  29. position: fixed;
  30. left: 0;
  31. top: 0;
  32. box-shadow: 0 1px 2px 0 rgba(40,42,49,.16);
  33. z-index: 100;
  34. }
  35. .header .logo {
  36. height: 72px;
  37. width: 288px;
  38. line-height: 72px;
  39. text-align: center;
  40. color: #FFF;
  41. font-size: 18px;
  42. font-weight: bold;
  43. background-image: linear-gradient(100deg,#1c5de7,#1c91e7);
  44. }
  45. .header .logo i {
  46. font-size: 14px;
  47. font-weight: normal;
  48. font-style: normal;
  49. }
  50. .header .info {
  51. margin-left: 288px;
  52. height: 72px;
  53. }
  54. .header .info .profile {
  55. width: 160px;
  56. height: 72px;
  57. cursor: pointer;
  58. transition: all .2s;
  59. margin-right: 50px;
  60. }
  61. .header .info .profile .btn {
  62. width: 100%;
  63. height: 72px;
  64. line-height: 72px;
  65. text-align: right;
  66. padding-right: 26px;
  67. }
  68. .header .info .profile:hover {
  69. background: #f9f9f9;
  70. }
  71. .header .search {
  72. height: 72px;
  73. margin-right: 210px;
  74. }
  75. .content {
  76. position: fixed;
  77. left: 0;
  78. right: 0;
  79. top: 72px;
  80. bottom: 0;
  81. }
  82. .aside {
  83. width: 288px;
  84. height: 100%;
  85. background: #18202e;
  86. overflow-y: auto;
  87. position: relative;
  88. }
  89. .aside .cprt {
  90. position: absolute;
  91. left: 0;
  92. bottom: 0;
  93. width: 100%;
  94. height: 36px;
  95. background: #1d2432;
  96. color: #FFF;
  97. line-height: 36px;
  98. text-align: center;
  99. }
  100. .main {
  101. margin-left: 288px;
  102. height: 100%;
  103. background: #fafafb;
  104. overflow-y: auto;
  105. box-sizing: border-box;
  106. padding: 25px;
  107. }
  108. .menu {
  109. margin-top: 50px;
  110. }
  111. .menu li {
  112. }
  113. .menu .item {
  114. display: block;
  115. padding: 15px 20px 15px 30px;
  116. position: relative;
  117. color: #919bae;
  118. }
  119. .menu .item .glyphicon {
  120. margin-right: 8px;
  121. }
  122. .menu .active {
  123. color: #FFF;
  124. }
  125. .menu .active:before,
  126. .menu .item:hover:before {
  127. content: '';
  128. position: absolute;
  129. left: 0;
  130. top: 0;
  131. width: 0;
  132. height: 100%;
  133. border-left: 4px solid #0097f7;
  134. }
  135. .menu .item:hover {
  136. background: rgba(80, 80, 80, .1);
  137. }
  138. .main .title {
  139. margin-bottom: 20px;
  140. position: relative;
  141. }
  142. .main .title h4 {
  143. font-weight: bold;
  144. color: #000;
  145. font-size: 22px;
  146. position: relative;
  147. }
  148. .main .title .new {
  149. position: absolute;
  150. right: 0;
  151. top: 10px;
  152. }
  153. .main .buttons {
  154. margin-top: 20px;
  155. }
  156. .main .title span {
  157. display: block;
  158. font-size: 14px;
  159. margin-top: 4px;
  160. color: #787e8f;
  161. }
  162. .main .custom-table {
  163. background: #FFF;
  164. }
  165. .main .custom-table .glyphicon {
  166. margin-right: 4px;
  167. cursor: pointer;
  168. }
  169. .main .pagination {
  170. margin: 0;
  171. }
  172. .form-container {
  173. padding: 20px;
  174. background: #FFF;
  175. box-shadow: 1px 1px 3px #ccc;
  176. }
  177. .login-body {
  178. background: #fafafb;
  179. position: absolute;
  180. left: 0;
  181. top: 0;
  182. bottom: 0;
  183. right: 0;
  184. }
  185. .login-container {
  186. position: absolute;
  187. left: 50%;
  188. top: 50%;
  189. transform: translate(-50%, -66%);
  190. }
  191. .login-container .title {
  192. color: #000;
  193. font-weight: bold;
  194. font-size: 22px;
  195. text-align: center;
  196. margin-bottom: 20px;
  197. }
  198. .login-container .login {
  199. background: #FFF;
  200. width: 500px;
  201. height: 220px;
  202. box-shadow: 0px 0px 3px 1px #e1e1e1;
  203. border-top: 2px solid #1c5de7;
  204. box-sizing: border-box;
  205. padding: 20px;
  206. }
  207. .statistics {
  208. overflow: hidden;
  209. padding-bottom: 60px;
  210. }
  211. .statistics li {
  212. float: left;
  213. position: relative;
  214. width: 280px;
  215. height: 100px;
  216. background: #FFF;
  217. box-shadow: 1px 1px 3px #e1e1e1;
  218. margin-right: 35px;
  219. }
  220. .statistics li * {
  221. position: absolute;
  222. }
  223. .statistics .glyphicon {
  224. font-size: 45px;
  225. left: 10px;
  226. top: 50%;
  227. transform: translateY(-50%);
  228. padding: 15px;
  229. transition: all .6s;
  230. border-radius: 6px;
  231. }
  232. .statistics li:nth-child(1) .glyphicon {
  233. color: #1c5de7;
  234. }
  235. .statistics li:nth-child(2) .glyphicon {
  236. color: #40c9c6;
  237. }
  238. .statistics li:hover .glyphicon {
  239. color: #FFF;
  240. }
  241. .statistics li:nth-child(1):hover .glyphicon {
  242. background: #1c5de7;
  243. }
  244. .statistics li:nth-child(2):hover .glyphicon {
  245. background: #40c9c6;
  246. }
  247. .statistics span {
  248. right: 20px;
  249. font-weight: bold;
  250. }
  251. .statistics .title {
  252. position: absolute;
  253. top: 25px;
  254. font-size: 16px;
  255. color: rgba(0,0,0,.4);
  256. }
  257. .statistics .count {
  258. top: 48px;
  259. color: #666;
  260. font-size: 20px;
  261. }
  262. .welcome {
  263. font-size: 14px;
  264. overflow: hidden;
  265. margin-bottom: 20px;
  266. }
  267. .welcome .underline {
  268. float: left;
  269. border-bottom: 2px solid #f0b41e;
  270. padding: 0 4px;
  271. }
  272. .welcome span {
  273. color: #337ab7;
  274. }
  275. .thumbnail-waper {
  276. margin-top: 15px;
  277. }
  278. .form-group:last-child {
  279. margin-bottom: 0;
  280. }
  281. .tips {
  282. margin-top: 20px;
  283. background: #f2dede;
  284. padding: 10px 15px;
  285. font-size: 14px;
  286. }
  287. .tips:empty {
  288. display: none;
  289. }
  290. .modal-content {
  291. display: block;
  292. }