Compare commits

...

4 Commits

Author SHA1 Message Date
mpaster c37ff7f801
Pre Merge pull request !436 from mpaster/cherry-pick-1759037399 2025-12-18 06:48:48 +00:00
RuoYi 873444dd0b 优化topbar顶部菜单样式 2025-12-18 14:45:57 +08:00
RuoYi 2301280c4d 默认固定头部 2025-12-18 14:42:34 +08:00
mpaster 697d1f0d77 支持菜单修改时图标可置空。 2025-09-28 05:30:32 +00:00
7 changed files with 62 additions and 39 deletions

View File

@ -149,7 +149,7 @@
<if test="visible != null">visible = #{visible},</if>
<if test="status != null">status = #{status},</if>
<if test="perms !=null">perms = #{perms},</if>
<if test="icon !=null and icon != ''">icon = #{icon},</if>
icon = #{icon},
<if test="remark != null and remark != ''">remark = #{remark},</if>
<if test="updateBy != null and updateBy != ''">update_by = #{updateBy},</if>
update_time = sysdate()

View File

@ -130,12 +130,10 @@
border-radius: 4px;
}
/* el menu */
.el-menu-item,
.el-sub-menu {
.svg-icon + span {
margin-left: 5px;
}
/* horizontal el menu */
.el-menu--horizontal .el-menu-item .svg-icon + span,
.el-menu--horizontal .el-submenu__title .svg-icon + span {
margin-left: 3px;
}
.el-menu--horizontal .el-menu--popup {

View File

@ -116,15 +116,17 @@
margin-left: 54px;
}
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
.el-tooltip {
.el-menu:not(.el-menu--horizontal) {
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
.svg-icon {
margin-left: 20px;
.el-tooltip {
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
}
}
}

View File

@ -80,6 +80,39 @@ export default {
min-height: 0px;
}
}
/* 移动端fixed-header优化 */
@media screen and (max-width: 991px) {
.fixed-header + .app-main {
padding-bottom: max(60px, calc(constant(safe-area-inset-bottom) + 40px));
padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 40px));
overscroll-behavior-y: none;
}
.hasTagsView .fixed-header + .app-main {
padding-bottom: max(60px, calc(constant(safe-area-inset-bottom) + 40px));
padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 40px));
overscroll-behavior-y: none;
}
}
@supports (-webkit-touch-callout: none) {
@media screen and (max-width: 991px) {
.fixed-header + .app-main {
padding-bottom: max(17px, calc(constant(safe-area-inset-bottom) + 10px));
padding-bottom: max(17px, calc(env(safe-area-inset-bottom) + 10px));
height: calc(100svh - 50px);
height: calc(100dvh - 50px);
}
.hasTagsView .fixed-header + .app-main {
padding-bottom: max(17px, calc(constant(safe-area-inset-bottom) + 10px));
padding-bottom: max(17px, calc(env(safe-area-inset-bottom) + 10px));
height: calc(100svh - 84px);
height: calc(100dvh - 84px);
}
}
}
</style>
<style lang="scss">

View File

@ -60,36 +60,22 @@ export default {
</script>
<style lang="scss">
.topbar-menu.el-menu--horizontal > .el-menu-item {
float: left;
height: 50px !important;
line-height: 50px !important;
color: #303133 !important;
padding: 0 5px !important;
margin: 0 10px !important;
/* menu item */
.topbar-menu.el-menu--horizontal .el-submenu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
padding: 0 10px !important;
}
.el-menu-item.is-active .svg-icon + span, .el-submenu.is-active .svg-icon + span{
color: v-bind(theme);
}
.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title {
color: #303133 !important;
.el-menu--horizontal .el-menu--popup .el-menu-item:hover {
background-color: #f5f7fa !important;
}
/* submenu item */
.topbar-menu.el-menu--horizontal > .el-submenu .el-submenu__title {
float: left;
height: 50px !important;
height: 47px !important;
line-height: 50px !important;
color: #303133 !important;
padding: 0 5px !important;
margin: 0 10px !important;
}
/* 图标右间距 */
.topbar-menu .svg-icon {
margin-right: 4px;
color: #303133;
margin: 0 15px !important;
}
/* topbar more arrow */
@ -103,6 +89,10 @@ export default {
/* menu__title el-menu-item */
.topbar-menu.el-menu--horizontal .el-submenu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
height: 55px;
padding: 0 15px;
}
.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{
color: #303133;
}
</style>

View File

@ -32,7 +32,7 @@ module.exports = {
/**
* 是否固定头部
*/
fixedHeader: false,
fixedHeader: true,
/**
* 是否显示logo

View File

@ -139,7 +139,7 @@
@show="$refs['iconSelect'].reset()"
>
<IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" clearable>
<svg-icon
v-if="form.icon"
slot="prefix"