diff --git a/template/admin/src/theme/element.scss b/template/admin/src/theme/element.scss index a7cce51c4..79c2cfca4 100644 --- a/template/admin/src/theme/element.scss +++ b/template/admin/src/theme/element.scss @@ -1,240 +1,61 @@ /* 防止页面切换时,滚动条高度不变的问题(滚动条高度非滚动条滚动高度) ------------------------------- */ -.el-scrollbar { - overflow: hidden; - position: relative; - height: 100%; -} -.el-scrollbar__wrap { - overflow: auto !important; - overflow-x: hidden !important; - max-height: 100%; /*防止页面切换时,滚动条高度不变的问题(滚动条高度非滚动条滚动高度)*/ -} -.el-select-dropdown .el-scrollbar__wrap { - overflow-x: scroll !important; -} -.el-select-dropdown__wrap { - max-height: 274px !important; /*修复Select 选择器高度问题*/ -} -.el-autocomplete-suggestion__wrap { - max-height: 280px !important; + +.ivu-btn-primary { + background-color: var(--prev-color-primary) !important; + border-color: var(--prev-color-primary) !important; } -/* Button 按钮 -------------------------------- */ -// 第三方字体图标大小 -.el-button i.iconfont, -.el-button i.fa { - font-size: 14px !important; - margin-right: 5px; -} -.el-button--medium i.iconfont, -.el-button--medium i.fa { - font-size: 14px !important; - margin-right: 5px; -} -.el-button--small i.iconfont, -.el-button--small i.fa { - font-size: 12px !important; - margin-right: 5px; -} -.el-button--mini i.iconfont, -.el-button--mini i.fa { - font-size: 12px !important; - margin-right: 5px; +// tab 标签 +.ivu-tabs-nav .ivu-tabs-tab-active { + color: var(--prev-color-primary); } -/* Dialog 对话框 -------------------------------- */ -.el-overlay, -.el-dialog__wrapper { - display: flex; - align-items: center; - justify-content: center; - .el-dialog { - margin: 0 auto !important; - .el-dialog__body { - padding: 20px !important; - } - } +.ivu-tabs-ink-bar { + background-color: var(--prev-color-primary); } -.el-dialog__body { - max-height: calc(90vh - 111px) !important; - overflow-y: auto; - overflow-x: hidden; +.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active { + color: var(--prev-color-primary); } -/* Alert 警告 -------------------------------- */ -.el-alert--warning.is-light { - border: 1px solid rgba(230, 162, 60, 0.3) !important; +// 单选卡 +.ivu-radio-group-button .ivu-radio-wrapper-checked:first-child { + border-color: var(--prev-color-primary); } -.el-alert--success.is-light { - border: 1px solid rgba(103, 194, 58, 0.3) !important; -} -.el-alert--info.is-light { - border: 1px solid rgba(144, 147, 153, 0.3) !important; -} -.el-alert--error.is-light { - border: 1px solid rgba(245, 108, 108, 0.3) !important; +.ivu-radio-group-button .ivu-radio-wrapper-checked { + color: var(--prev-color-primary); } -/* Table 表格 -------------------------------- */ -.el-table-column--selection { - .el-checkbox { - margin-right: unset !important; - } -} -.el-table::before, -.el-table--group::after, -.el-table--border::after { - z-index: 99 !important; +// input +.ivu-input-search { + background-color: var(--prev-color-primary) !important; + border-color: var(--prev-color-primary) !important; } -/* 下拉选择器/时间选择器滚动条 -------------------------------- */ -.el-select-dropdown .el-scrollbar__wrap, -.el-picker-panel .el-scrollbar__wrap { - overflow-x: scroll !important; +// radio +.ivu-radio-checked .ivu-radio-inner { + border-color: var(--prev-color-primary); +} +.ivu-radio-inner:after { + background-color: var(--prev-color-primary); } -/* NavMenu 导航菜单 -------------------------------- */ -// 默认样式修改 -.el-menu { - border-right: none !important; +//cheakbox +.ivu-checkbox-checked .ivu-checkbox-inner { + background-color: var(--prev-color-primary); + border-color: var(--prev-color-primary); } -.el-menu-item, -.el-submenu__title { - height: 50px !important; - line-height: 50px !important; - color: var(--prev-bg-menuBarColor) !important; - transition: none !important; -} -// horizontal 水平方向时 -.el-menu--horizontal > .el-menu-item.is-active, -.el-menu--horizontal > .el-submenu.is-active .el-submenu__title { - border-bottom: 3px solid !important; - border-bottom-color: var(--prev-color-primary) !important; - // color: var(--prev-color-primary) !important; -} -.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, -.el-menu--horizontal .el-menu-item:not(.is-disabled):hover, -.el-menu--horizontal > .el-submenu:focus .el-submenu__title, -.el-menu--horizontal > .el-submenu:hover .el-submenu__title, -.el-menu--horizontal .el-menu .el-menu-item.is-active, -.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title { - color: var(--prev-MenuActiveColor) !important; -} -.el-menu.el-menu--horizontal { - border-bottom: none !important; -} -.el-menu--horizontal > .el-menu-item, -.el-menu--horizontal > .el-submenu .el-submenu__title { - padding: 0 14px; - color: var(--prev-bg-topBarColor) !important; -} -// 外部链接时 -.el-menu-item a, -.el-menu-item a:hover, -.el-menu-item i, -.el-submenu__title i { - color: var(--prev-bg-menuBarColor) !important; - text-decoration: none; - margin-right: 8px; -} -.el-menu-item a { - width: 86%; - display: inline-block; -} -// 默认 hover 时 -.el-menu-item:hover, -.el-submenu__title:hover { - color: var(--prev-MenuActiveColor) !important; - background-color: var(--prev-bg-menu-hover-ba-color) !important; - i { - color: var(--prev-MenuActiveColor) !important; - } -} -// 鼠标 hover 时颜色 -.el-menu-hover-bg-color { - background-color: var(--prev-bg-menu-hover-ba-color) !important; -} -// 高亮时 -.el-menu-item.is-active { - color: var(--prev-MenuActiveColor) !important; - // background-color: var(--prev-bg-menu-hover-ba-color) !important; - .el-submenu__title i { - color: var(--prev-MenuActiveColor) !important; - } -} -.el-menu-item.is-active, -.el-sub-menu.is-active .el-sub-menu__title, -.el-sub-menu:not(.is-opened):hover .el-sub-menu__title { - @extend .el-menu-hover-bg-color; -} -.el-menu-item:hover { - @extend .el-menu-hover-bg-color; +//switch +.ivu-switch-checked { + background-color: var(--prev-color-primary); + border-color: var(--prev-color-primary); } -.el-active-extend { - color: #ffffff !important; - // background-color: var(--prev-color-primary) !important; - // background-color: var(--prev-bg-menu-hover-ba-color) !important; - - i { - color: #ffffff !important; - } +// page +.ivu-page-item-active { + border-color: var(--prev-color-primary); } -#add-is-active { - // @extend .el-active-extend; - // &:hover { - // @extend .el-active-extend; - // } -} -// 菜单收起时且是a链接 -.is-dark a { - color: #ffffff !important; - text-decoration: none; -} -// 菜单收起时鼠标经过背景颜色/字体颜色 -.el-menu--vertical { - background: var(--prev-bg-menuBar) !important; -} -.el-menu--horizontal { - .el-menu { - background: var(--prev-bg-topBar) !important; - } - .el-menu-item, - .el-submenu__title { - color: var(--prev-bg-topBarColor) !important; - } -} -// 第三方图标字体间距/大小设置 -.el-menu-item .iconfont, -.el-submenu .iconfont, -.el-menu-item .fa, -.el-submenu__title .fa { - font-size: 14px !important; - display: inline-block; - vertical-align: middle; - margin-right: 5px; - width: 24px; - text-align: center; -} -// element plus 本身字体图标 -.el-submenu [class^='el-icon-'], -.el-menu-item [class^='el-icon-'] { - font-size: 14px !important; -} -// 去掉离开浏览器时,菜单的默认高亮 -.el-menu-item:focus { - // background-color: transparent !important; -} - -/* Alert 警告 -------------------------------- */ -.el-alert__title { - word-break: break-all; +.ivu-page-item-active a, +.ivu-page-item-active:hover a { + color: var(--prev-color-primary); } diff --git a/template/admin/src/theme/index.scss b/template/admin/src/theme/index.scss index 9d49e0d4a..6ea3e1fb9 100644 --- a/template/admin/src/theme/index.scss +++ b/template/admin/src/theme/index.scss @@ -2,6 +2,7 @@ @import './app.scss'; @import './other.scss'; @import './element.scss'; +@import './iview.scss'; @import './media/media.scss'; @import './variables.scss'; @import './dark.scss'; diff --git a/template/admin/src/theme/iview.scss b/template/admin/src/theme/iview.scss new file mode 100644 index 000000000..a7cce51c4 --- /dev/null +++ b/template/admin/src/theme/iview.scss @@ -0,0 +1,240 @@ +/* 防止页面切换时,滚动条高度不变的问题(滚动条高度非滚动条滚动高度) +------------------------------- */ +.el-scrollbar { + overflow: hidden; + position: relative; + height: 100%; +} +.el-scrollbar__wrap { + overflow: auto !important; + overflow-x: hidden !important; + max-height: 100%; /*防止页面切换时,滚动条高度不变的问题(滚动条高度非滚动条滚动高度)*/ +} +.el-select-dropdown .el-scrollbar__wrap { + overflow-x: scroll !important; +} +.el-select-dropdown__wrap { + max-height: 274px !important; /*修复Select 选择器高度问题*/ +} +.el-autocomplete-suggestion__wrap { + max-height: 280px !important; +} + +/* Button 按钮 +------------------------------- */ +// 第三方字体图标大小 +.el-button i.iconfont, +.el-button i.fa { + font-size: 14px !important; + margin-right: 5px; +} +.el-button--medium i.iconfont, +.el-button--medium i.fa { + font-size: 14px !important; + margin-right: 5px; +} +.el-button--small i.iconfont, +.el-button--small i.fa { + font-size: 12px !important; + margin-right: 5px; +} +.el-button--mini i.iconfont, +.el-button--mini i.fa { + font-size: 12px !important; + margin-right: 5px; +} + +/* Dialog 对话框 +------------------------------- */ +.el-overlay, +.el-dialog__wrapper { + display: flex; + align-items: center; + justify-content: center; + .el-dialog { + margin: 0 auto !important; + .el-dialog__body { + padding: 20px !important; + } + } +} +.el-dialog__body { + max-height: calc(90vh - 111px) !important; + overflow-y: auto; + overflow-x: hidden; +} + +/* Alert 警告 +------------------------------- */ +.el-alert--warning.is-light { + border: 1px solid rgba(230, 162, 60, 0.3) !important; +} +.el-alert--success.is-light { + border: 1px solid rgba(103, 194, 58, 0.3) !important; +} +.el-alert--info.is-light { + border: 1px solid rgba(144, 147, 153, 0.3) !important; +} +.el-alert--error.is-light { + border: 1px solid rgba(245, 108, 108, 0.3) !important; +} + +/* Table 表格 +------------------------------- */ +.el-table-column--selection { + .el-checkbox { + margin-right: unset !important; + } +} +.el-table::before, +.el-table--group::after, +.el-table--border::after { + z-index: 99 !important; +} + +/* 下拉选择器/时间选择器滚动条 +------------------------------- */ +.el-select-dropdown .el-scrollbar__wrap, +.el-picker-panel .el-scrollbar__wrap { + overflow-x: scroll !important; +} + +/* NavMenu 导航菜单 +------------------------------- */ +// 默认样式修改 +.el-menu { + border-right: none !important; +} +.el-menu-item, +.el-submenu__title { + height: 50px !important; + line-height: 50px !important; + color: var(--prev-bg-menuBarColor) !important; + transition: none !important; +} +// horizontal 水平方向时 +.el-menu--horizontal > .el-menu-item.is-active, +.el-menu--horizontal > .el-submenu.is-active .el-submenu__title { + border-bottom: 3px solid !important; + border-bottom-color: var(--prev-color-primary) !important; + // color: var(--prev-color-primary) !important; +} +.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, +.el-menu--horizontal .el-menu-item:not(.is-disabled):hover, +.el-menu--horizontal > .el-submenu:focus .el-submenu__title, +.el-menu--horizontal > .el-submenu:hover .el-submenu__title, +.el-menu--horizontal .el-menu .el-menu-item.is-active, +.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title { + color: var(--prev-MenuActiveColor) !important; +} +.el-menu.el-menu--horizontal { + border-bottom: none !important; +} +.el-menu--horizontal > .el-menu-item, +.el-menu--horizontal > .el-submenu .el-submenu__title { + padding: 0 14px; + color: var(--prev-bg-topBarColor) !important; +} +// 外部链接时 +.el-menu-item a, +.el-menu-item a:hover, +.el-menu-item i, +.el-submenu__title i { + color: var(--prev-bg-menuBarColor) !important; + text-decoration: none; + margin-right: 8px; +} +.el-menu-item a { + width: 86%; + display: inline-block; +} +// 默认 hover 时 +.el-menu-item:hover, +.el-submenu__title:hover { + color: var(--prev-MenuActiveColor) !important; + background-color: var(--prev-bg-menu-hover-ba-color) !important; + i { + color: var(--prev-MenuActiveColor) !important; + } +} +// 鼠标 hover 时颜色 +.el-menu-hover-bg-color { + background-color: var(--prev-bg-menu-hover-ba-color) !important; +} +// 高亮时 +.el-menu-item.is-active { + color: var(--prev-MenuActiveColor) !important; + // background-color: var(--prev-bg-menu-hover-ba-color) !important; + .el-submenu__title i { + color: var(--prev-MenuActiveColor) !important; + } +} +.el-menu-item.is-active, +.el-sub-menu.is-active .el-sub-menu__title, +.el-sub-menu:not(.is-opened):hover .el-sub-menu__title { + @extend .el-menu-hover-bg-color; +} +.el-menu-item:hover { + @extend .el-menu-hover-bg-color; +} + +.el-active-extend { + color: #ffffff !important; + // background-color: var(--prev-color-primary) !important; + // background-color: var(--prev-bg-menu-hover-ba-color) !important; + + i { + color: #ffffff !important; + } +} +#add-is-active { + // @extend .el-active-extend; + // &:hover { + // @extend .el-active-extend; + // } +} +// 菜单收起时且是a链接 +.is-dark a { + color: #ffffff !important; + text-decoration: none; +} +// 菜单收起时鼠标经过背景颜色/字体颜色 +.el-menu--vertical { + background: var(--prev-bg-menuBar) !important; +} +.el-menu--horizontal { + .el-menu { + background: var(--prev-bg-topBar) !important; + } + .el-menu-item, + .el-submenu__title { + color: var(--prev-bg-topBarColor) !important; + } +} +// 第三方图标字体间距/大小设置 +.el-menu-item .iconfont, +.el-submenu .iconfont, +.el-menu-item .fa, +.el-submenu__title .fa { + font-size: 14px !important; + display: inline-block; + vertical-align: middle; + margin-right: 5px; + width: 24px; + text-align: center; +} +// element plus 本身字体图标 +.el-submenu [class^='el-icon-'], +.el-menu-item [class^='el-icon-'] { + font-size: 14px !important; +} +// 去掉离开浏览器时,菜单的默认高亮 +.el-menu-item:focus { + // background-color: transparent !important; +} + +/* Alert 警告 +------------------------------- */ +.el-alert__title { + word-break: break-all; +} diff --git a/template/admin/src/theme/variables.scss b/template/admin/src/theme/variables.scss index aa05e716c..01da603b0 100644 --- a/template/admin/src/theme/variables.scss +++ b/template/admin/src/theme/variables.scss @@ -100,15 +100,15 @@ .el-checkbox { color: var(--prev-color-text-regular); } -.el-radio__input.is-checked + .el-radio__label, -.el-radio-button__inner:hover { +.el-radio-button .el-radio__input.is-checked + .el-radio__label, +.el-radio-button .el-radio-button__inner:hover { color: var(--prev-color-primary); } .el-radio__input.is-checked .el-radio__inner { background-color: var(--prev-color-primary); border-color: var(--prev-color-primary); } -.el-radio-button__orig-radio:checked + .el-radio-button__inner { +.el-radio-button .el-radio-button__orig-radio:checked + .el-radio-button__inner { color: var(--prev-color-text-white); background-color: var(--prev-color-primary); border-color: var(--prev-color-primary);