You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

180 lines
3.0 KiB

2 years ago
  1. /* 主页面背景 */
  2. .app-main {
  3. background: #f3f5f8;
  4. }
  5. /* 侧边菜单栏背景 */
  6. .sidebar-container .el-scrollbar {
  7. background: #303030;
  8. }
  9. /* 导航栏 */
  10. .navbar {
  11. background: #fff;
  12. /* 与tagViews的间隔 */
  13. border-bottom: 1px solid #f1f1f1;
  14. /* 收缩图标 */
  15. >.hamburger-container {
  16. fill: #5a5e66;
  17. &:hover {
  18. background: rgba(0, 0, 0, .05)
  19. }
  20. }
  21. /* 右侧功能区 */
  22. >.right-menu {
  23. /* 功能项 */
  24. >.right-menu-item {
  25. color: #5a5e66;
  26. &.hover-effect {
  27. &:hover {
  28. background: rgba(0, 0, 0, .05)
  29. }
  30. }
  31. }
  32. }
  33. }
  34. /* 打开的菜单视图 */
  35. .tags-view-container {
  36. background: #fff;
  37. >.tags-view-wrapper {
  38. /* 显示区域 */
  39. .tags-view-item {
  40. color: #999;
  41. border-left: 1px solid #f1f1f1;
  42. /* 关闭图标 */
  43. &>.el-icon-close {
  44. color: #000;
  45. }
  46. &:hover {
  47. color: #495060;
  48. &>.el-icon-close {
  49. color: red;
  50. }
  51. }
  52. /* 边框 */
  53. &:last-of-type {
  54. border-right: 1px solid #f1f1f1;
  55. }
  56. /* 激活项 */
  57. &.active {
  58. /* 图标 */
  59. &::before {
  60. background: #85ef47!important;
  61. box-shadow: 0 0 7px #b7eb8f;
  62. }
  63. }
  64. }
  65. }
  66. /* 菜单弹出功能区 */
  67. >.contextmenu {
  68. background: #fff;
  69. color: #333;
  70. box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  71. /* 功能项 */
  72. li {
  73. &:hover {
  74. background-color: #e8f4ff;
  75. color: #46a6ff;
  76. }
  77. }
  78. }
  79. }
  80. /* 功能区背景 */
  81. .app-container,.content-container {
  82. background: #fff;
  83. }
  84. /* 底部商标区 */
  85. .footer {
  86. background: #fff;
  87. color: #606266;
  88. }
  89. /* 仪表盘 */
  90. .main {
  91. /* 访问量块 */
  92. .todayIp {
  93. color: #27c6da !important;
  94. }
  95. .todayVisit {
  96. color: #fc573b !important;
  97. }
  98. .totalVisit {
  99. color: #be63f9 !important;
  100. }
  101. }
  102. /* 表格 */
  103. .el-table{
  104. /* 表头 */
  105. & thead {
  106. color: #606266;
  107. }
  108. }
  109. /* 树形选择组件 */
  110. .vue-treeselect__single-value {
  111. color: #606266 !important;
  112. }
  113. /* 表格操作图标 */
  114. .table-operation, .el-icon-{
  115. &view{
  116. color: #87d068;
  117. }
  118. &unlock{
  119. color: #87d068;
  120. }
  121. &setting {
  122. color: #2db7f5;
  123. }
  124. &delete {
  125. color: #f50;
  126. }
  127. }
  128. /* 头部导航栏一级菜单 */
  129. .head-menu-container {
  130. /* 显示区域 */
  131. .el-submenu__title {
  132. /* 图标 */
  133. i {
  134. color: #909399;
  135. }
  136. &:active {
  137. color:#000 !important;
  138. }
  139. &:hover {
  140. background-color: #f0f0f0 !important;
  141. }
  142. }
  143. /* 激活项 */
  144. .el-submenu.is-active .el-submenu__title {
  145. color: #000 !important;
  146. }
  147. }
  148. /* 头部导航栏子菜单 */
  149. .el-menu--horizontal {
  150. /* 头部导航栏子菜单 */
  151. >.el-menu {
  152. background: #fff !important;
  153. }
  154. .headMenu-wrapper {
  155. /* 显示区域 */
  156. .el-menu-item, .el-submenu__title {
  157. color: #909399;
  158. background-color: white;
  159. /* 激活项 */
  160. &.is-active {
  161. color:#000 !important;
  162. background-color: #f0f0f0 !important;
  163. }
  164. &:hover {
  165. background-color: #f0f0f0 !important;
  166. }
  167. }
  168. }
  169. }