|
|
|
@ -3,7 +3,7 @@ |
|
|
|
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> |
|
|
|
<!-- iframe 全屏模式：隐藏侧边栏、标签栏、路由内容，只保留导航栏 + iframe --> |
|
|
|
<template v-if="permissionStore.iframeMode"> |
|
|
|
<div class="main-container" style="margin-left: 0;"> |
|
|
|
<div class="main-container iframe-mode" style="margin-left: 0;"> |
|
|
|
<div :class="{ 'fixed-header': fixedHeader }" style="width: 100%;"> |
|
|
|
<navbar ref="navbarRef" @set-layout="setLayout" /> |
|
|
|
</div> |
|
|
|
@ -16,10 +16,14 @@ |
|
|
|
</template> |
|
|
|
<!-- 正常菜单模式 --> |
|
|
|
<template v-else> |
|
|
|
<!-- 顶部头部整行 --> |
|
|
|
<div class="top-header"> |
|
|
|
<navbar ref="navbarRef" @set-layout="setLayout" /> |
|
|
|
</div> |
|
|
|
<!-- 下方：左侧边栏 + 右内容 --> |
|
|
|
<side-bar v-if="!sidebar.hide" class="sidebar-container" /> |
|
|
|
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container"> |
|
|
|
<div :class="{ 'fixed-header': fixedHeader }"> |
|
|
|
<navbar ref="navbarRef" @set-layout="setLayout" /> |
|
|
|
<tags-view v-if="needTagsView" /> |
|
|
|
</div> |
|
|
|
<app-main /> |
|
|
|
@ -125,9 +129,25 @@ const setLayout = () => { |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
.fixed-header { |
|
|
|
.top-header { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 50px; |
|
|
|
z-index: 1002; |
|
|
|
background: $fixed-header-bg; |
|
|
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); |
|
|
|
} |
|
|
|
|
|
|
|
.main-container { |
|
|
|
padding-top: 50px; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.fixed-header { |
|
|
|
position: fixed; |
|
|
|
top: 50px; |
|
|
|
right: 0; |
|
|
|
z-index: 9; |
|
|
|
width: calc(100% - #{$base-sidebar-width}); |
|
|
|
@ -147,6 +167,14 @@ const setLayout = () => { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.iframe-mode { |
|
|
|
padding-top: 0; |
|
|
|
|
|
|
|
.fixed-header { |
|
|
|
top: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.iframe-main { |
|
|
|
width: 100%; |
|
|
|
position: relative; |
|
|
|
@ -169,4 +197,48 @@ const setLayout = () => { |
|
|
|
min-height: calc(100vh - 50px); |
|
|
|
overflow: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.iframe-mode .navbar { |
|
|
|
background: linear-gradient(180deg, #0d1d3a 0%, #0a1628 100%); |
|
|
|
border-bottom: 1px solid rgba(58, 174, 251, 0.2); |
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); |
|
|
|
} |
|
|
|
|
|
|
|
.iframe-mode .navbar .right-menu-item, |
|
|
|
.iframe-mode .navbar .breadcrumb-container, |
|
|
|
.iframe-mode .navbar .topmenu-container { |
|
|
|
color: rgba(255, 255, 255, 0.85); |
|
|
|
} |
|
|
|
|
|
|
|
.iframe-mode .navbar .right-menu-item:hover, |
|
|
|
.iframe-mode .navbar .avatar-wrapper:hover { |
|
|
|
background: rgba(58, 174, 251, 0.15); |
|
|
|
} |
|
|
|
|
|
|
|
.iframe-mode .navbar .user-avatar { |
|
|
|
border: 2px solid rgba(58, 174, 251, 0.4); |
|
|
|
} |
|
|
|
|
|
|
|
.iframe-mode .navbar .system-tab { |
|
|
|
color: rgba(255, 255, 255, 0.75); |
|
|
|
|
|
|
|
.el-icon { |
|
|
|
color: rgba(255, 255, 255, 0.6); |
|
|
|
} |
|
|
|
|
|
|
|
&:hover { |
|
|
|
color: #fff; |
|
|
|
background: rgba(255, 255, 255, 0.08); |
|
|
|
} |
|
|
|
|
|
|
|
&.is-active { |
|
|
|
background: rgba(58, 174, 251, 0.25); |
|
|
|
color: #fff; |
|
|
|
box-shadow: 0 0 12px rgba(58, 174, 251, 0.3); |
|
|
|
|
|
|
|
.el-icon { |
|
|
|
color: #3aaefb; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
