mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-10-29 22:10:49 +00:00
604 lines
17 KiB
SCSS
604 lines
17 KiB
SCSS
/* 防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）
|
||
------------------------------- */
|
||
.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-select__wrapper {
|
||
font-size: 12px !important;
|
||
}
|
||
|
||
.el-autocomplete-suggestion__wrap {
|
||
max-height: 280px !important;
|
||
}
|
||
|
||
/* Button 按钮
|
||
------------------------------- */
|
||
.el-button {
|
||
font-weight: 400 !important;
|
||
font-size: 12px !important;
|
||
padding: 9px 15px !important;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.el-button.is-loading {
|
||
}
|
||
|
||
.el-button + .el-button {
|
||
margin-left: 14px !important;
|
||
}
|
||
|
||
// 第三方字体图标大小
|
||
.el-button i.iconfont,
|
||
.el-button i.fa {
|
||
font-size: 14px !important;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.el-button i.iconfont,
|
||
.el-button 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--small i.iconfont,
|
||
.el-button--small i.fa {
|
||
font-size: 12px !important;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
/* Dialog 对话框
|
||
------------------------------- */
|
||
.el-dialog__body {
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
max-height: 720px;
|
||
padding: 15px 15px 15px 15px !important;
|
||
}
|
||
|
||
.el-dialog {
|
||
/* EP2.9 起根元素自带 16px 内边距，会与 header/body 的 15px 叠成双重边距 */
|
||
padding: 0 !important;
|
||
box-shadow: unset !important;
|
||
border-radius: 6px !important;
|
||
// left: 50%;
|
||
// top: 50%;
|
||
// transform: translate(-50%);
|
||
}
|
||
|
||
.el-dialog__header {
|
||
border-bottom: 1px solid var(--prev-border-color-lighter);
|
||
padding: 15px !important;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.el-dialog__title {
|
||
font-size: 14px !important;
|
||
font-weight: 500;
|
||
color: var(--prev-color-text-regular);
|
||
line-height: 14px !important;
|
||
}
|
||
|
||
.el-dialog__headerbtn {
|
||
position: initial !important;
|
||
/* EP 默认 48px，流内布局时会撑高标题栏 */
|
||
height: auto !important;
|
||
width: auto !important;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.el-dialog__footer {
|
||
/* 根内边距归零后，底部留白由 footer 自身补足 */
|
||
padding: 10px 15px 15px !important;
|
||
}
|
||
|
||
.el-dialog__body > img {
|
||
// max-width: 600px;
|
||
max-height: 600px;
|
||
}
|
||
|
||
/* 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 {
|
||
// color: #f7ba1e;
|
||
// background-color: #fef8e8;
|
||
// // 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: 1 !important;
|
||
}
|
||
|
||
/* 下拉选择器/时间选择器滚动条
|
||
------------------------------- */
|
||
.el-table__body tr.current-row > td.el-table__cell,
|
||
.vxe-table--render-default .vxe-body--row.row--current {
|
||
background-color: var(--prev-bg-color) !important;
|
||
}
|
||
|
||
.hover-row .el-select-dropdown .el-scrollbar__wrap,
|
||
.el-picker-panel .el-scrollbar__wrap {
|
||
overflow-x: scroll !important;
|
||
}
|
||
|
||
.el-table--enable-row-transition .el-table__body td {
|
||
// display: flex;
|
||
// align-items: center;
|
||
height: 50px;
|
||
}
|
||
|
||
.vxe-table--body-wrapper .vxe-cell {
|
||
min-height: 24px;
|
||
}
|
||
|
||
/* Tabs 标签页
|
||
------------------------------- */
|
||
.el-tabs {
|
||
/* 页面页签高度 54px（2026-09-23 用户以「实物订单」页效果重新裁定，文档 4.4 同步） */
|
||
--el-tabs-header-height: 54px;
|
||
}
|
||
|
||
.el-tabs__item {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.el-tabs__item.is-active {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.el-tabs__active-bar {
|
||
height: 3px;
|
||
}
|
||
|
||
/* 弹窗/抽屉内页签维持紧凑规格 */
|
||
.el-dialog .el-tabs,
|
||
.el-drawer .el-tabs {
|
||
--el-tabs-header-height: 40px;
|
||
}
|
||
|
||
.el-dialog .el-tabs__item,
|
||
.el-drawer .el-tabs__item {
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* NavMenu 导航菜单
|
||
------------------------------- */
|
||
// 默认样式修改
|
||
.el-menu {
|
||
border-right: none !important;
|
||
}
|
||
|
||
.el-menu-item,
|
||
.el-sub-menu__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-sub-menu.is-active .el-sub-menu__title {
|
||
border-bottom: 3px solid !important;
|
||
border-bottom-color: var(--prev-color-primary) !important;
|
||
// color: var(--prev-color-primary) !important;
|
||
}
|
||
|
||
// 横向顶栏一级叶子菜单选中时：文字保持顶栏文字色，选中态由主题色下划线标识。
|
||
// EP 默认激活色（--el-menu-active-color = 主题色）优先级更高，会把选中文字染成主题色，
|
||
// 在深色顶栏或浅色选中底上与背景同色系导致看不清
|
||
.el-menu--horizontal > .el-menu-item.is-active {
|
||
color: var(--prev-bg-topBarColor) !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-sub-menu:focus .el-sub-menu__title,
|
||
.el-menu--horizontal > .el-sub-menu:hover .el-sub-menu__title,
|
||
.el-menu--horizontal .el-menu .el-menu-item.is-active,
|
||
.el-menu--horizontal .el-menu .el-sub-menu.is-active > .el-sub-menu__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-sub-menu .el-sub-menu__title {
|
||
padding: 0 14px;
|
||
color: var(--prev-bg-topBarColor) !important;
|
||
}
|
||
|
||
// 横向顶栏一级子菜单标题：重新给展开箭头预留右侧空间。
|
||
// 上方的 padding: 0 14px 覆盖了 EP 为箭头预留的 padding-right，
|
||
// 而箭头是绝对定位（right: --el-menu-base-level-padding），会压在菜单名称上
|
||
.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
|
||
padding-right: 32px;
|
||
}
|
||
.el-menu--horizontal > .el-sub-menu .el-sub-menu__title .el-sub-menu__icon-arrow {
|
||
right: 14px;
|
||
}
|
||
|
||
// 外部链接时
|
||
.el-menu-item a,
|
||
.el-menu-item a:hover,
|
||
.el-menu-item i,
|
||
.el-sub-menu__title i {
|
||
color: var(--prev-bg-menuBarColor) !important;
|
||
text-decoration: none;
|
||
margin-right: 8px;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.el-menu-item a {
|
||
width: 86%;
|
||
display: inline-block;
|
||
}
|
||
|
||
// 默认 hover 时：中性半透明底色、文字颜色不变，避免与选中态主题色混淆
|
||
.el-menu-item:hover,
|
||
.el-sub-menu__title:hover {
|
||
background-color: color-mix(in srgb, var(--prev-bg-menuBarColor) 10%, transparent) !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;
|
||
@extend .el-menu-hover-bg-color;
|
||
|
||
// background-color: var(--prev-bg-menu-hover-ba-color) !important;
|
||
.el-sub-menu__title i {
|
||
color: var(--prev-MenuActiveColor) !important;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.columns-round {
|
||
.el-menu-item {
|
||
margin: 5px 5px 0px 5px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.el-sub-menu {
|
||
border-radius: 5px;
|
||
|
||
.el-sub-menu__title {
|
||
margin: 5px 5px;
|
||
}
|
||
|
||
.el-sub-menu__title:hover {
|
||
border-radius: 5px;
|
||
}
|
||
}
|
||
|
||
.el-sub-menu .el-menu-item {
|
||
min-width: min-content !important;
|
||
width: 94%;
|
||
}
|
||
}
|
||
|
||
// 菜单层级对齐：带图标嵌套项（二级菜单/子分组）回到 EP 原生级差缩进（padding-left 40px，
|
||
// 图标起点 45px，与一级图标起点 25px 拉开层级差，避免图标同轴分不清级数）；
|
||
// 无图标叶子项（三级页面）文字对齐直接上级带图标项的文字起点（padding + 图标 16px + 间距 10px）：
|
||
// 一层嵌套（分栏第二列，上级 padding 20px）→ 46px；两层嵌套（默认/经典侧栏，上级 padding 40px）→ 66px。
|
||
// EP 原生按级数递增缩进且不区分有无图标，此处统一覆盖。
|
||
// 注意：规则全部限定在侧栏容器 .layout-aside 内——弹出层（el-menu--popup-container，
|
||
// 含横向顶栏「···」ellipsis 收纳层、侧栏收起悬停层）由 EP 原生样式管理，弹层内各项
|
||
// 原生统一 padding 20px 天然对齐，若被内联规则命中会出现 title 与叶子错位。
|
||
.layout-aside .el-menu .el-sub-menu .el-menu-item {
|
||
padding-left: 40px !important;
|
||
}
|
||
|
||
// 顶层分组标题（根菜单直接子级，如布局一「设置」、布局二第二列「管理权限」）：
|
||
// 与顶层叶子菜单同轴（padding 20px，图标起点 25px）
|
||
.layout-aside .el-menu > .el-sub-menu > .el-sub-menu__title {
|
||
padding-left: 20px !important;
|
||
}
|
||
|
||
// 深层分组标题（有父级分组的组菜单，即二级分组）：与二级叶子同缩进（40px）
|
||
.layout-aside .el-menu .el-sub-menu .el-sub-menu > .el-sub-menu__title {
|
||
padding-left: 40px !important;
|
||
}
|
||
|
||
// 无图标叶子：模板中不含任何 <i> 图标元素，用 :has() 与带图标项区分
|
||
.layout-aside .el-menu .el-sub-menu .el-menu-item:not(:has(i)) {
|
||
padding-left: 46px !important;
|
||
}
|
||
|
||
.layout-aside .el-menu .el-sub-menu .el-sub-menu .el-menu-item:not(:has(i)) {
|
||
padding-left: 66px !important;
|
||
}
|
||
|
||
// 菜单收起（默认/经典布局 64px 窄条）：一级图标水平居中。
|
||
// EP 原生收起态居中只命中 class 以 el-icon 开头的图标（.el-menu--collapse>… [class^=el-icon]，
|
||
// 给 24px 图标位 + margin 清零），项目 iconfont 图标（.crmeb-icon.menu-icon）与旧版 .ivu-icon
|
||
// 前缀类匹配不上，沿用展开态 width:1em + margin-right:5px，图标偏左约 4px；此处补齐同样式。
|
||
// 同上限定在 .layout-aside 内，不影响收起悬停弹层（EP 原生展开态对齐）。
|
||
.layout-aside .el-menu--collapse > .el-menu-item .menu-icon,
|
||
.layout-aside .el-menu--collapse > .el-menu-item .ivu-icon,
|
||
.layout-aside .el-menu--collapse > .el-sub-menu > .el-sub-menu__title .menu-icon,
|
||
.layout-aside .el-menu--collapse > .el-sub-menu > .el-sub-menu__title .ivu-icon {
|
||
width: var(--el-menu-icon-width, 24px);
|
||
margin: 0;
|
||
text-align: center;
|
||
}
|
||
|
||
// 收起 + 分栏圆角/卡片风格（columns-round/columns-card 给菜单项左右各 5px 外边距，项宽 64→54px）：
|
||
// 图标位仍按 64px 项的 padding-left 20px 排布，24px 图标整体右偏 5px（实测 iconCenterX=+5）。
|
||
// 收起态文字已隐藏（EP visibility:hidden + width:0）、箭头 display:none；两侧内边距一并清零后
|
||
// 内容居中即可自适应项宽。叶子项图标外还有一层 tooltip trigger 包装 div（块级、占满内容盒），
|
||
// 需让其内部也居中，否则图标贴在 padding 起点。
|
||
.layout-aside .el-menu--collapse.columns-round > .el-menu-item,
|
||
.layout-aside .el-menu--collapse.columns-round > .el-sub-menu > .el-sub-menu__title,
|
||
.layout-aside .el-menu--collapse.columns-card > .el-menu-item,
|
||
.layout-aside .el-menu--collapse.columns-card > .el-sub-menu > .el-sub-menu__title {
|
||
justify-content: center;
|
||
padding-left: 0 !important;
|
||
padding-right: 0 !important;
|
||
}
|
||
|
||
.layout-aside .el-menu--collapse.columns-round > .el-menu-item > div,
|
||
.layout-aside .el-menu--collapse.columns-card > .el-menu-item > div {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
// 收起态选中二/三级页面（路由落在分组内）时，所属一级分组与叶子项一样高亮：
|
||
// EP 会把 is-active 向上传播到 rail 的一级 sub-menu，但原生只有文字变色（无底色），
|
||
// 窄条上辨识不出当前所在模块。叶子项高亮同样式（背景/文字变量一致，深色模式随变量自动适配）；
|
||
// 展开态父级维持原设计不做选中标识，故限定收起态。
|
||
.layout-aside .el-menu--collapse > .el-sub-menu.is-active > .el-sub-menu__title {
|
||
color: var(--prev-MenuActiveColor) !important;
|
||
background-color: var(--prev-bg-menu-hover-ba-color) !important;
|
||
}
|
||
|
||
// 圆角风格下补内缩圆角：叶子项的圆角由 .columns-round 自带，分组标题只有 margin
|
||
.layout-aside .el-menu--collapse.columns-round > .el-sub-menu.is-active > .el-sub-menu__title {
|
||
border-radius: 5px;
|
||
}
|
||
|
||
// 小屏侧栏抽屉（layout/aside.vue）：清零全局抽屉 body 的 20px 35px 内边距——
|
||
// 该内边距面向详情/编辑抽屉内容；侧栏菜单需占满抽屉宽度，
|
||
// 否则 180px 抽屉被左右各吃 35px 后仅剩 110px，二级菜单（缩进 40 + 图标 + 文字）被截断
|
||
.layout-aside-drawer .el-drawer__body {
|
||
padding: 0;
|
||
}
|
||
|
||
#add-is-active {
|
||
// @extend .el-active-extend;
|
||
// &:hover {
|
||
// @extend .el-active-extend;
|
||
// }
|
||
}
|
||
|
||
// 菜单收起时且是a链接
|
||
.is-dark a {
|
||
color: #ffffff !important;
|
||
text-decoration: none;
|
||
}
|
||
|
||
// 二级菜单展开抖动修复：EP 的 ElCollapseTransition 动画在 overflow visible/hidden 间切换，
|
||
// .columns-round 给菜单项加的 margin 在 visible 时向外塌陷、hidden 时被包含，导致 scrollHeight
|
||
// 测量值与实际内容高度不一致，动画起止瞬间高度突变（肉眼可见的上跳）。
|
||
// flow-root 让内联子菜单始终成为 BFC，margin 全程被包含，三者高度一致；间隙视觉不变。
|
||
.layout-aside .el-menu .el-menu--inline {
|
||
display: flow-root;
|
||
}
|
||
|
||
// 菜单收起时鼠标经过背景颜色/字体颜色
|
||
.el-menu--vertical {
|
||
background: var(--prev-bg-menuBar) !important;
|
||
}
|
||
|
||
.el-menu--horizontal {
|
||
.el-menu {
|
||
background: var(--prev-bg-topBar) !important;
|
||
}
|
||
|
||
.el-menu-item,
|
||
.el-sub-menu__title {
|
||
color: var(--prev-bg-topBarColor) !important;
|
||
}
|
||
}
|
||
|
||
// 第三方图标字体间距/大小设置
|
||
.el-menu-item .iconfont,
|
||
.el-sub-menu .iconfont,
|
||
.el-menu-item .fa,
|
||
.el-sub-menu__title .fa {
|
||
font-size: 14px !important;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-right: 5px;
|
||
width: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
// element plus 本身字体图标
|
||
.el-sub-menu [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;
|
||
}
|
||
|
||
// tooltip（边框/箭头同色，用令牌：深色下自动变暗）
|
||
.el-popper.is-light {
|
||
border-color: var(--prev-border-color-light) !important;
|
||
}
|
||
|
||
.el-popper .el-popper__arrow,
|
||
.el-popper .el-popper__arrow::after {
|
||
color: var(--prev-border-color-light) !important;
|
||
}
|
||
|
||
.el-popper .el-popper__arrow {
|
||
border-bottom-color: var(--prev-border-color-light) !important;
|
||
}
|
||
|
||
// 下拉菜单
|
||
.el-dropdown {
|
||
font-size: 12px !important;
|
||
line-height: inherit;
|
||
}
|
||
|
||
.el-dropdown-link {
|
||
cursor: pointer;
|
||
color: var(--prev-color-primary);
|
||
}
|
||
|
||
.el-icon-arrow-down {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.el-message {
|
||
min-width: 100px !important;
|
||
padding-right: 25px !important;
|
||
}
|
||
|
||
.el-message-box {
|
||
position: absolute;
|
||
top: 20%;
|
||
left: 50%;
|
||
-webkit-transform: translate(-50%);
|
||
transform: translate(-50%);
|
||
}
|
||
|
||
.el-message-box__wrapper {
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.el-notification__content {
|
||
color: var(--prev-color-text-regular);
|
||
|
||
p {
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
// input
|
||
|
||
// 取消input的上下箭头
|
||
input::-webkit-inner-spin-button {
|
||
-webkit-appearance: none !important;
|
||
}
|
||
|
||
input::-webkit-outer-spin-button {
|
||
-webkit-appearance: none !important;
|
||
}
|
||
|
||
.el-radio__input.is-checked .el-radio__inner {
|
||
background-color: var(--prev-color-primary) !important;
|
||
border-color: var(--prev-color-primary) !important;
|
||
}
|
||
|
||
// primary
|
||
.el-button--primary {
|
||
color: var(--prev-color-text-white) !important;
|
||
background: var(--prev-color-primary) !important;
|
||
border-color: var(--prev-color-primary) !important;
|
||
|
||
&:hover,
|
||
&:focus {
|
||
color: var(--prev-color-text-white);
|
||
background: var(--prev-color-primary-light-3) !important;
|
||
border-color: var(--prev-color-primary-light-3) !important;
|
||
}
|
||
}
|
||
|
||
// loading
|
||
.vxe-loading > .vxe-loading--chunk {
|
||
color: var(--prev-color-primary) !important;
|
||
}
|
||
|
||
.el-form-item--small .el-form-item__label {
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* 表单行内的日期/时间范围选择器不被 flex 拉伸：EP 的 .el-range-editor 复用 .el-input__wrapper
|
||
自带 flex-grow: 1，在 .el-form-item__content（flex 容器）内即使写了 width 也会占满整行剩余空间；
|
||
置 0 后写了宽度按宽度显示，未写的回落 EP 默认（daterange 350px / datetimerange 640px），
|
||
width: 100% 的场景不受影响 */
|
||
.el-form-item__content .el-range-editor {
|
||
flex-grow: 0;
|
||
}
|
||
|
||
/* 数字输入框统一默认宽 180px：EP 默认 150px（small 120px）放不下带单位后缀的数字，
|
||
页面显式宽度类（scoped）与 form-create 的 100% 仍正常覆盖 */
|
||
.el-input-number {
|
||
width: 180px;
|
||
}
|