index.css 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  1. .app-wrapper {
  2. position: relative;
  3. height: 100%;
  4. width: 100%;
  5. overflow-y: hidden;
  6. min-width: 1366px;
  7. overflow-x: auto;
  8. display: flex;
  9. }
  10. .drawer-bg {
  11. background: #000;
  12. opacity: 0.3;
  13. width: 100%;
  14. top: 0;
  15. height: 100%;
  16. position: absolute;
  17. z-index: 999;
  18. }
  19. .main-container {
  20. height: 100%;
  21. background: #f3f4f7;
  22. position: relative;
  23. width: calc(100% - 190px);
  24. }
  25. .sidebar-container {
  26. transition: width 0.28s;
  27. width: 190px !important;
  28. height: 100%;
  29. z-index: 1001;
  30. overflow: hidden;
  31. }
  32. .hideSidebar .main-container {
  33. margin-left: 54px;
  34. }
  35. .hideSidebar .sidebar-container {
  36. width: 54px !important;
  37. }
  38. .sidebar-container .horizontal-collapse-transition {
  39. transition: 0s width ease-in-out, 0s padding-left ease-in-out,
  40. 0s padding-right ease-in-out;
  41. }
  42. .sidebar-container .scrollbar-wrapper {
  43. overflow-x: hidden !important;
  44. }
  45. .sidebar-container .el-scrollbar__view {
  46. height: 100%;
  47. }
  48. .sidebar-container .el-scrollbar__bar.is-vertical {
  49. right: 0px;
  50. }
  51. .sidebar-container .el-scrollbar__bar.is-horizontal {
  52. display: none;
  53. }
  54. .navbar {
  55. height: 64px;
  56. overflow: hidden;
  57. position: relative;
  58. background: #fff;
  59. box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  60. }
  61. .navbar .hamburger-container {
  62. line-height: 46px;
  63. height: 100%;
  64. float: left;
  65. padding: 0 15px;
  66. cursor: pointer;
  67. transition: background 0.3s;
  68. -webkit-tap-highlight-color: transparent;
  69. }
  70. .navbar .hamburger-container:hover {
  71. background: rgba(0, 0, 0, 0.025);
  72. }
  73. .navbar .breadcrumb-container {
  74. float: left;
  75. }
  76. .navbar .right-menu {
  77. float: right;
  78. display: flex;
  79. margin-right: 34px;
  80. height: 100%;
  81. line-height: 64px;
  82. color: #333333;
  83. font-size: 14px;
  84. }
  85. .navbar .right-menu .logout {
  86. margin-left: 20px;
  87. width: 28px;
  88. font-size: 14px;
  89. color: #ffc200;
  90. cursor: pointer;
  91. }
  92. .navbar .right-menu img {
  93. margin-top: 20px;
  94. margin-left: 10px;
  95. width: 25px;
  96. height: 25px;
  97. }
  98. .navbar .right-menu .outLogin {
  99. cursor: pointer;
  100. }
  101. .navbar .right-menu:focus {
  102. outline: none;
  103. }
  104. .navbar .right-menu .right-menu-item {
  105. display: inline-block;
  106. padding: 0 8px;
  107. height: 100%;
  108. font-size: 18px;
  109. color: #5a5e66;
  110. vertical-align: text-bottom;
  111. }
  112. .navbar .right-menu .right-menu-item.hover-effect {
  113. cursor: pointer;
  114. transition: background 0.3s;
  115. }
  116. .navbar .right-menu .right-menu-item.hover-effect:hover {
  117. background: rgba(0, 0, 0, 0.025);
  118. }
  119. .navbar .right-menu .avatar-container {
  120. margin-right: 30px;
  121. }
  122. .navbar .right-menu .avatar-container .avatar-wrapper {
  123. margin-top: 5px;
  124. position: relative;
  125. }
  126. .navbar .right-menu .avatar-container .avatar-wrapper .user-avatar {
  127. cursor: pointer;
  128. width: 40px;
  129. height: 40px;
  130. border-radius: 10px;
  131. }
  132. .navbar .right-menu .avatar-container .avatar-wrapper .el-icon-caret-bottom {
  133. cursor: pointer;
  134. position: absolute;
  135. right: -20px;
  136. top: 25px;
  137. font-size: 12px;
  138. }
  139. .navbar .head-lable {
  140. /* position: absolute; */
  141. /* background: #fff; */
  142. color: #333333;
  143. height: 64px;
  144. font-size: 16px;
  145. width: 300px;
  146. padding-left: 22px;
  147. line-height: 64px;
  148. font-weight: 700;
  149. /* top: 0px;
  150. left: 0px; */
  151. opacity: 0;
  152. float: left;
  153. animation: opacity 500ms ease-out 800ms forwards;
  154. }
  155. .navbar .head-lable .goBack {
  156. border-right: solid 1px #d8dde3;
  157. padding-right: 14px;
  158. margin-right: 14px;
  159. font-size: 16px;
  160. color: #333333;
  161. cursor: pointer;
  162. font-weight: 400;
  163. }
  164. .navbar .head-lable .goBack img {
  165. position: relative;
  166. top: 24px;
  167. margin-right: 5px;
  168. width: 18px;
  169. height: 18px;
  170. float: left;
  171. }
  172. @keyframes opacity {
  173. 0% {
  174. opacity: 0;
  175. left: 80px;
  176. }
  177. 100% {
  178. opacity: 1;
  179. left: 0;
  180. }
  181. }
  182. .logo {
  183. text-align: center;
  184. background-color: rgb(52, 55, 68);
  185. /* height: 100px;
  186. line-height: 100px;
  187. padding: 12px 5px; */
  188. padding: 46px 37px 67px 36px;
  189. }
  190. .img {
  191. display: inline-block;
  192. }
  193. .el-scrollbar {
  194. height: 100%;
  195. }
  196. .el-menu {
  197. border: none;
  198. height: 100%;
  199. width: 100% !important;
  200. }
  201. .el-submenu.is-active > .el-submenu__title {
  202. color: #f4f4f5 !important;
  203. }
  204. .el-submenu > .el-submenu__title,
  205. .el-submenu .el-menu-item {
  206. min-width: 190px !important;
  207. background-color: #272a36 !important;
  208. }
  209. /* .el-submenu > .el-submenu__title:hover, .el-submenu .el-menu-item:hover {
  210. background-color: #0e132b !important;
  211. color: #FF903D !important;
  212. }
  213. .el-menu-item.is-active {
  214. color: #FF903D !important;
  215. } */
  216. .el-menu .el-menu-item {
  217. color: #aeb5c4;
  218. height: 42px;
  219. line-height: 42px;
  220. }
  221. .el-menu .el-menu-item {
  222. padding: 0 0 0 32px !important;
  223. margin: 0 34px 20px 0;
  224. border-radius: 0 21px 21px 0 !important;
  225. }
  226. .el-menu .el-menu-item:hover {
  227. color: #ffffff !important;
  228. background-color: transparent !important;
  229. }
  230. .el-menu .el-menu-item:hover span {
  231. color: #ffffff !important;
  232. }
  233. .el-menu .el-menu-item:active {
  234. color: #333333 !important;
  235. background-color: transparent !important;
  236. }
  237. .el-menu .el-menu-item:active span {
  238. color: #333333 !important;
  239. }
  240. .el-menu .el-menu-item.is-active {
  241. background-color: #ffc200 !important;
  242. color: #333333 !important;
  243. border-radius: 0 21px 21px 0 !important;
  244. }
  245. .el-menu .el-menu-item.is-active span {
  246. color: #333333 !important;
  247. font-weight: 500 !important;
  248. }
  249. .el-menu-item i {
  250. color: inherit;
  251. font-size: 20px;
  252. margin-right: 5px;
  253. }
  254. .simple-mode.first-level .submenu-title-noDropdown {
  255. padding: 0 !important;
  256. position: relative;
  257. }
  258. .simple-mode.first-level .submenu-title-noDropdown .el-tooltip {
  259. padding: 0 !important;
  260. }
  261. .simple-mode.first-level .el-submenu {
  262. overflow: hidden;
  263. }
  264. .simple-mode.first-level .el-submenu > .el-submenu__title {
  265. padding: 0px !important;
  266. }
  267. .simple-mode.first-level
  268. .el-submenu
  269. > .el-submenu__title
  270. .el-submenu__icon-arrow {
  271. display: none;
  272. }
  273. .simple-mode.first-level .el-submenu > .el-submenu__title > span {
  274. visibility: hidden;
  275. }
  276. .el-icon-arrow-down:before {
  277. color: #fff;
  278. }
  279. .el-submenu__title {
  280. font-size: 16px !important;
  281. position: relative;
  282. z-index: 9;
  283. }
  284. .el-submenu__title svg {
  285. margin-right: 5px !important;
  286. width: 28px !important;
  287. height: 28px !important;
  288. }
  289. .el-menu-item {
  290. position: relative;
  291. font-size: 14px !important;
  292. padding-left: 52px !important;
  293. }
  294. .el-menu-item::before {
  295. /* position: absolute;
  296. left: 26px;
  297. top: -24px;
  298. content: '';
  299. width: 15px;
  300. height: 50px;
  301. border-left: dotted 1px #7b7e88;
  302. border-bottom: dotted 1px #7b7e88; */
  303. }
  304. .c_iframe {
  305. width: 100%;
  306. height: 100%;
  307. border: 0;
  308. overflow: hidden;
  309. }
  310. .hide {
  311. display: hide;
  312. }