frame.css 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. /*// 主题色*/
  2. /*字体主色调*/
  3. /*线条主色调*/
  4. /*按钮主色调*/
  5. /*底纹色*/
  6. /*个人中心布局*/
  7. .layout-header {
  8. position: fixed;
  9. z-index: 9;
  10. top: 0;
  11. left: 0;
  12. width: 100%;
  13. height: 55px;
  14. background: #fff;
  15. border-bottom: 2px solid #cfcfcf;
  16. min-width: 900px;
  17. }
  18. .layout-header .logo {
  19. display: inline-block;
  20. width: 220px;
  21. height: 100%;
  22. position: relative;
  23. vertical-align: middle;
  24. line-height: 100%;
  25. border-right: 1px solid #eceff4;
  26. background:url(../images/logo.png)left center no-repeat;
  27. }
  28. .layout-header .c-left-nav {
  29. position: absolute;
  30. z-index: 3;
  31. right: 0;
  32. display: block;
  33. width: 30px;
  34. height: 55px;
  35. line-height: 55px;
  36. text-align: center;
  37. vertical-align: bottom;
  38. cursor: pointer;
  39. }
  40. .layout-header .c-left-nav:hover {
  41. background: #f5f6fa;
  42. }
  43. .layout-header .logo a {
  44. padding-top: 10px;
  45. padding-left: 8px;
  46. display: inline-block;
  47. }
  48. .layout-header .logo i {
  49. border-radius: 2px;
  50. color: #5775b5;
  51. font-size: 14px;
  52. }
  53. .layout-header .logo i:before {
  54. content: "\e60d";
  55. }
  56. .layout-header .nav,
  57. .layout-header .logo,
  58. .layout-header .navright {
  59. height: 100%;
  60. }
  61. .layout-header .navright .navrightlist {
  62. float: right;
  63. line-height: 55px;
  64. padding: 0 18px;
  65. height: 100%;
  66. border-left: 1px solid #eceff4;
  67. cursor: pointer;
  68. position: relative;
  69. padding-right: 40px;
  70. }
  71. .layout-header .navright .navrightlist .hidenav {
  72. position: absolute;
  73. top: 55px;
  74. right: 0;
  75. background: #fff;
  76. border: 1px solid #eceff4;
  77. width: 140px;
  78. height: 0;
  79. overflow: hidden;
  80. opacity: 0;
  81. transition: all 0.2s;
  82. -moz-transition: all 0.2s;
  83. -webkit-transition: all 0.2s;
  84. -o-transition: all 0.2s;
  85. }
  86. .layout-header .navright .navrightlist.active .hidenav {
  87. height: auto;
  88. opacity: 1;
  89. transition: all 0.2s;
  90. -moz-transition: all 0.2s;
  91. -webkit-transition: all 0.2s;
  92. -o-transition: all 0.2s;
  93. }
  94. .layout-header .navright .navrightlist.active i {
  95. transform: rotate(-180deg);
  96. -ms-transform: rotate(-180deg);
  97. /* IE 9 */
  98. -webkit-transform: rotate(-180deg);
  99. /* Safari and Chrome */
  100. -o-transform: rotate(-180deg);
  101. /* Opera */
  102. -moz-transform: rotate(-180deg);
  103. }
  104. .layout-header .navright .navrightlist .hidenav a {
  105. display: block;
  106. padding: 0 20px;
  107. line-height: 40px;
  108. text-align: left;
  109. }
  110. .layout-header .navright .navrightlist .hidenava:hover,
  111. .layout-header .navright .navrightlist .hidenav a:hover {
  112. background: #f5f6fa;
  113. }
  114. .layout-header .navright .navrightlist i {
  115. position: absolute;
  116. top: 0;
  117. right: 18px;
  118. font-size: 13px;
  119. padding-left: 5px;
  120. }
  121. .layout-header .navright .navrightlist:hover {
  122. background: #f5f6fa;
  123. }
  124. .layout-header .nav a {
  125. display: inline-block;
  126. float: left;
  127. line-height: 55px;
  128. padding: 0 18px;
  129. height: 100%;
  130. border-right: 1px solid #eceff4;
  131. }
  132. .layout-header .nav a.active,
  133. .layout-header .nav a:hover {
  134. background: #f5f6fa;
  135. color: #5775b5;
  136. }
  137. .layout-main {
  138. z-index: 2;
  139. padding-top: 55px;
  140. position: fixed;
  141. width: 100%;
  142. height: 100%;
  143. left: 0;
  144. top: 0;
  145. bottom: 0;
  146. right: 0;
  147. }
  148. .layout-right {
  149. position: fixed;
  150. left: 220px;
  151. right: 0;
  152. top: 57px;
  153. bottom: 0px;
  154. background: #f7f7f7;
  155. }
  156. .layout-right iframe {
  157. width: 100%;
  158. height: 100%;
  159. border: 0;
  160. background: #f7f7f7;
  161. }
  162. .layout-left {
  163. width: 220px;
  164. position: absolute;
  165. z-index: 2;
  166. height: 100%;
  167. left: 0;
  168. top: 57px;
  169. border-right: 1px solid #cfcfcf;
  170. }
  171. .layout-left .navlist i.basicdata:before {
  172. content: "\e600";
  173. position: relative;
  174. z-index: 2;
  175. }
  176. .layout-left .navlist i.financialmanage:before {
  177. content: "\e602";
  178. position: relative;
  179. z-index: 2;
  180. }
  181. .layout-left .navlist i.accountset:before {
  182. content: "\e603";
  183. position: relative;
  184. z-index: 2;
  185. }
  186. .layout-left .navlist {
  187. height: 45px;
  188. line-height: 45px;
  189. width: 100%;
  190. overflow: hidden;
  191. border-bottom: 1px solid #eceff4;
  192. }
  193. .layout-left .navlist > a {
  194. display: block;
  195. width: 100%;
  196. }
  197. .layout-left .navlist > a > span {
  198. float: left;
  199. padding-left: 10px;
  200. }
  201. .layout-left .navlist i.left {
  202. color: #999999;
  203. border-right: 1px solid #eceff4;
  204. line-height: 45px;
  205. width: 44px;
  206. float: left;
  207. font-size: 18px;
  208. text-align: center;
  209. position: relative;
  210. overflow: hidden;
  211. }
  212. .layout-left .navlist i.left > b {
  213. position: absolute;
  214. left: -42px;
  215. width: 100%;
  216. top: 0;
  217. bottom: 0;
  218. z-index: 0;
  219. transition: left .25s;
  220. }
  221. .layout-left .navlist a.active,
  222. .layout-left .navlist a:hover {
  223. background: #f5f6fa;
  224. }
  225. .layout-left .navlist a.active i.left > b,
  226. .layout-left .navlist a:hover i.left > b {
  227. left: 0!important;
  228. }
  229. .layout-left .navlist a.active i.left,
  230. .layout-left .navlist a:hover i.left {
  231. color: #fff;
  232. }
  233. .bg-success {
  234. background-color: #8ec165;
  235. color: #ebf4e4;
  236. }
  237. .bg-info {
  238. background-color: #4cc0c1;
  239. color: #d1efef;
  240. }
  241. .bg-danger {
  242. background-color: #fb6b5b;
  243. color: #fff;
  244. }
  245. .bg-warning {
  246. background-color: #ffc333;
  247. color: #fff8e5;
  248. }
  249. .layout-main.close .layout-left {
  250. width: 60px;
  251. }
  252. .layout-main.close .layout-right {
  253. left: 60px;
  254. }
  255. .layout-main.close .layout-left .navlist a i.left > b {
  256. left: 0!important;
  257. width: 59px;
  258. height: 60px;
  259. }
  260. .layout-main.close .layout-left .navlist {
  261. height: 60px;
  262. line-height: 60px;
  263. }
  264. .layout-main.close .layout-left .navlist a i.left {
  265. color: #fff;
  266. line-height: 60px;
  267. width: 59px;
  268. font-size: 25px;
  269. }