element.scss 9.7 KB

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