element.scss 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  1. @import 'mixins/index.scss';
  2. /* Button 按钮
  3. ------------------------------- */
  4. // 第三方字体图标大小
  5. .el-button:not(.is-circle) i.el-icon,
  6. .el-button i.iconfont,
  7. .el-button i.fa,
  8. .el-button--default i.iconfont,
  9. .el-button--default i.fa {
  10. font-size: 14px !important;
  11. margin-right: 5px;
  12. }
  13. .el-button--small i.iconfont,
  14. .el-button--small i.fa {
  15. font-size: 12px !important;
  16. margin-right: 5px;
  17. }
  18. /* Input 输入框、InputNumber 计数器
  19. ------------------------------- */
  20. // 菜单搜索
  21. .el-autocomplete-suggestion__wrap {
  22. max-height: 280px !important;
  23. }
  24. /* Form 表单
  25. ------------------------------- */
  26. .el-form {
  27. // 用于修改弹窗时表单内容间隔太大问题,如系统设置的新增菜单弹窗里的表单内容
  28. .el-form-item:last-of-type {
  29. margin-bottom: 22px !important;
  30. }
  31. // 修复行内表单最后一个 el-form-item 位置下移问题
  32. &.el-form--inline {
  33. .el-form-item--large.el-form-item:last-of-type {
  34. margin-bottom: 22px !important;
  35. }
  36. .el-form-item--default.el-form-item:last-of-type,
  37. .el-form-item--small.el-form-item:last-of-type {
  38. margin-bottom: 18px !important;
  39. }
  40. }
  41. // https://gitee.com/lyt-top/vue-next-admin/issues/I5K1PM
  42. .el-form-item .el-form-item__label .el-icon {
  43. margin-right: 0px;
  44. }
  45. }
  46. /* Alert 警告
  47. ------------------------------- */
  48. .el-alert {
  49. border: 1px solid;
  50. }
  51. .el-alert__title {
  52. word-break: break-all;
  53. }
  54. /* Message 消息提示
  55. ------------------------------- */
  56. .el-message {
  57. min-width: unset !important;
  58. padding: 15px !important;
  59. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.02);
  60. }
  61. /* NavMenu 导航菜单
  62. ------------------------------- */
  63. // 鼠标 hover 时颜色
  64. .el-menu-hover-bg-color {
  65. border-radius: 15px;
  66. background-color:#4fc9da !important;//var(--next-bg-menuBarActiveColor) !important;
  67. }
  68. // 默认样式修改
  69. .el-menu {
  70. background-color: #fff !important;
  71. border-right: none !important;
  72. width: 220px;
  73. }
  74. .el-menu-item {
  75. height: 56px !important;
  76. line-height: 56px !important;
  77. margin: 0 5px;
  78. font-size: 12px;
  79. }
  80. .el-menu-item,
  81. .el-sub-menu__title {
  82. color: rgba(var(--dark), 1);//var(--next-bg-menuBarColor);
  83. margin: 0 5px;
  84. }
  85. // 修复点击左侧菜单折叠再展开时,宽度不跟随问题
  86. .el-menu--collapse {
  87. width: 64px !important;
  88. }
  89. // 外部链接时
  90. .el-menu-item a,
  91. .el-menu-item a:hover,
  92. .el-menu-item i,
  93. .el-sub-menu__title i {
  94. color: inherit;
  95. text-decoration: none;
  96. }
  97. // 第三方图标字体间距/大小设置
  98. .el-menu-item .iconfont,
  99. .el-sub-menu .iconfont,
  100. .el-menu-item .fa,
  101. .el-sub-menu .fa {
  102. @include generalIcon;
  103. }
  104. // 水平菜单、横向菜单高亮 背景色,鼠标 hover 时,有子级菜单的背景色
  105. .el-menu-item.is-active,
  106. .el-sub-menu.is-active .el-sub-menu__title,
  107. .el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
  108. @extend .el-menu-hover-bg-color;
  109. }
  110. .el-menu-item:hover {
  111. @extend .el-menu-hover-bg-color;
  112. }
  113. .el-menu-item.is-active {
  114. border-radius: 15px;
  115. color: #fff !important;
  116. }
  117. .el-sub-menu.is-active.is-opened .el-sub-menu__title {
  118. background-color: unset !important;
  119. }
  120. // 子级菜单背景颜色
  121. // .el-menu--inline {
  122. // background: var(--next-bg-menuBar-light-1);
  123. // }
  124. // 水平菜单、横向菜单折叠 a 标签
  125. .el-popper.is-dark a {
  126. color: var(--el-color-white) !important;
  127. text-decoration: none;
  128. }
  129. // 水平菜单、横向菜单折叠背景色
  130. .el-popper.is-pure.is-light {
  131. // 水平菜单
  132. .el-menu--vertical {
  133. background: var(--next-bg-menuBar);
  134. .el-sub-menu.is-active .el-sub-menu__title {
  135. color:#fff; //var(--el-menu-active-color);
  136. }
  137. .el-popper.is-pure.is-light {
  138. .el-menu--vertical {
  139. .el-sub-menu .el-sub-menu__title {
  140. background-color: unset !important;
  141. color: var(--next-bg-menuBarColor);
  142. }
  143. .el-sub-menu.is-active .el-sub-menu__title {
  144. color: #fff; //var(--el-menu-active-color);
  145. }
  146. }
  147. }
  148. }
  149. // 横向菜单
  150. .el-menu--horizontal {
  151. background: var(--next-bg-topBar);
  152. .el-menu-item,
  153. .el-sub-menu {
  154. height: 50px !important;
  155. line-height: 50px !important;
  156. color: var(--next-bg-topBarColor);
  157. .el-sub-menu__title {
  158. height: 50px !important;
  159. line-height: 50px !important;
  160. color: var(--next-bg-topBarColor);
  161. }
  162. .el-popper.is-pure.is-light {
  163. .el-menu--horizontal {
  164. .el-sub-menu .el-sub-menu__title {
  165. background-color: unset !important;
  166. color: var(--next-bg-topBarColor);
  167. }
  168. .el-sub-menu.is-active .el-sub-menu__title {
  169. color: #fff;// var(--el-menu-active-color);
  170. }
  171. }
  172. }
  173. }
  174. .el-menu-item.is-active,
  175. .el-sub-menu.is-active .el-sub-menu__title {
  176. color: #fff !important;//var(--white);
  177. background: rgba(var(--primary), 1);//var(--el-menu-active-color);
  178. }
  179. }
  180. }
  181. // 横向菜单(经典、横向)布局
  182. .el-menu.el-menu--horizontal {
  183. border-bottom: none !important;
  184. width: 100% !important;
  185. .el-menu-item,
  186. .el-sub-menu__title {
  187. height: 50px !important;
  188. color: var(--next-bg-topBarColor);
  189. }
  190. .el-menu-item:not(.is-active):hover,
  191. .el-sub-menu:not(.is-active):hover .el-sub-menu__title {
  192. color: var(--next-bg-topBarColor);
  193. }
  194. }
  195. /* Tabs 标签页
  196. ------------------------------- */
  197. .el-tabs__nav-wrap::after {
  198. height: 1px !important;
  199. }
  200. /* Dropdown 下拉菜单
  201. ------------------------------- */
  202. .el-dropdown-menu {
  203. list-style: none !important; /*修复 Dropdown 下拉菜单样式问题 2022.03.04*/
  204. }
  205. .el-dropdown-menu .el-dropdown-menu__item {
  206. white-space: nowrap;
  207. &:not(.is-disabled):hover {
  208. background-color: var(--el-dropdown-menuItem-hover-fill);
  209. color: var(--el-dropdown-menuItem-hover-color);
  210. }
  211. }
  212. /* Steps 步骤条
  213. ------------------------------- */
  214. .el-step__icon-inner {
  215. font-size: 30px !important;
  216. font-weight: 400 !important;
  217. }
  218. .el-step__title {
  219. font-size: 14px;
  220. }
  221. /* Dialog 对话框
  222. ------------------------------- */
  223. .el-overlay {
  224. overflow: hidden;
  225. .el-overlay-dialog {
  226. display: flex;
  227. align-items: center;
  228. justify-content: center;
  229. position: unset !important;
  230. width: 100%;
  231. height: 100%;
  232. .el-dialog {
  233. margin: 0 auto !important;
  234. position: absolute;
  235. .el-dialog__body {
  236. padding: 20px !important;
  237. }
  238. }
  239. }
  240. }
  241. .el-dialog__body {
  242. max-height: calc(90vh - 111px) !important;
  243. overflow-y: auto;
  244. overflow-x: hidden;
  245. }
  246. /* Card 卡片
  247. ------------------------------- */
  248. .el-card__header {
  249. padding: 15px 20px;
  250. }
  251. /* Table 表格 element plus 2.2.0 版本
  252. ------------------------------- */
  253. .el-table {
  254. .el-button.is-text {
  255. padding: 0;
  256. }
  257. th.el-table__cell{
  258. -webkit-user-select: text !important;
  259. -moz-user-select: text !important;
  260. -ms-user-select: text !important;
  261. user-select:text !important;
  262. //var(--el-fill-color-lighter)
  263. }
  264. .el-table--enable-row-transition{
  265. .el-table__body{
  266. td.el-table__cell{
  267. background: rgba(var(--dark), 0.03) !important;
  268. }
  269. }
  270. }
  271. }
  272. /* scrollbar
  273. ------------------------------- */
  274. .el-scrollbar__bar {
  275. z-index: 4;
  276. }
  277. /*防止页面切换时,滚动条高度不变的问题(滚动条高度非滚动条滚动高度)*/
  278. .el-scrollbar__wrap {
  279. max-height: 100%;
  280. }
  281. .el-select-dropdown .el-scrollbar__wrap {
  282. overflow-x: scroll !important;
  283. }
  284. /*修复Select 选择器高度问题*/
  285. .el-select-dropdown__wrap {
  286. max-height: 274px !important;
  287. }
  288. /*修复Cascader 级联选择器高度问题*/
  289. .el-cascader-menu__wrap.el-scrollbar__wrap {
  290. height: 204px !important;
  291. }
  292. /*用于界面高度自适应(main.vue),区分 scrollbar__view,防止其它使用 scrollbar 的地方出现滚动条消失*/
  293. .layout-container-view .el-scrollbar__view {
  294. height: 100%;
  295. }
  296. /*防止分栏布局二级菜单很多时,滚动条消失问题*/
  297. .layout-columns-warp .layout-aside .el-scrollbar__view {
  298. height: unset !important;
  299. }
  300. /* Pagination 分页
  301. ------------------------------- */
  302. .el-pagination__editor {
  303. margin-right: 8px;
  304. }
  305. /*深色模式时分页高亮问题*/
  306. .el-pagination.is-background .btn-next.is-active,
  307. .el-pagination.is-background .btn-prev.is-active,
  308. .el-pagination.is-background .el-pager li.is-active {
  309. background-color: var(--el-color-primary) !important;
  310. color: var(--el-color-white) !important;
  311. }
  312. /* Drawer 抽屉
  313. ------------------------------- */
  314. .el-drawer {
  315. --el-drawer-padding-primary: unset !important;
  316. .el-drawer__header {
  317. padding: 0 15px !important;
  318. height: 50px;
  319. display: flex;
  320. align-items: center;
  321. margin-bottom: 0 !important;
  322. border-bottom: 1px solid var(--el-border-color);
  323. color: var(--el-text-color-primary);
  324. }
  325. .el-drawer__body {
  326. width: 100%;
  327. height: 100%;
  328. overflow: auto;
  329. }
  330. }
  331. /* Table 表格样式增强
  332. ------------------------------- */
  333. .el-table {
  334. /* 表头样式 */
  335. th.el-table__cell {
  336. background-color: #f5f7fa !important;
  337. color: #606266;
  338. font-weight: bold;
  339. }
  340. /* 表格行样式 */
  341. .el-table__row {
  342. td.el-table__cell {
  343. padding: 8px 0;
  344. }
  345. }
  346. /* 状态标签样式 */
  347. .active {
  348. display: inline-block;
  349. padding: 2px 10px;
  350. border-radius: 12px;
  351. background-color: #e6f7ff;
  352. color: #1890ff;
  353. font-size: 12px;
  354. }
  355. .pending {
  356. display: inline-block;
  357. padding: 2px 10px;
  358. border-radius: 12px;
  359. background-color: #fff7e6;
  360. color: #faad14;
  361. font-size: 12px;
  362. }
  363. /* 金额样式 */
  364. .salary-column {
  365. color: #52c41a;
  366. font-weight: 500;
  367. }
  368. }
  369. /* 表格头部和内容对齐 */
  370. .el-table th.el-table__cell>.cell {
  371. padding-left: 12px;
  372. padding-right: 12px;
  373. }
  374. .el-table td.el-table__cell>.cell {
  375. padding-left: 12px;
  376. padding-right: 12px;
  377. }
  378. /* 表格边框和分割线颜色 */
  379. .el-table--border, .el-table--group {
  380. border: 1px solid #f0f0f0;
  381. }
  382. .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  383. border-bottom: 1px solid #f0f0f0;
  384. }
  385. /* 表格头部背景色 */
  386. .el-table__header-wrapper th.el-table__cell {
  387. background-color: #fafafa;
  388. }