93 lines
1.9 KiB
Vue
93 lines
1.9 KiB
Vue
|
<!--综合布局 -->
|
||
|
|
<script lang="ts" setup>
|
||
|
|
defineProps({
|
||
|
|
collapse: {
|
||
|
|
type: Boolean,
|
||
|
|
default() {
|
||
|
|
return false
|
||
|
|
},
|
||
|
|
},
|
||
|
|
hasMenu: {
|
||
|
|
type: Boolean,
|
||
|
|
default() {
|
||
|
|
return true
|
||
|
|
},
|
||
|
|
},
|
||
|
|
fixedHeader: {
|
||
|
|
type: Boolean,
|
||
|
|
default() {
|
||
|
|
return true
|
||
|
|
},
|
||
|
|
},
|
||
|
|
showTabs: {
|
||
|
|
type: Boolean,
|
||
|
|
default() {
|
||
|
|
return true
|
||
|
|
},
|
||
|
|
},
|
||
|
|
device: {
|
||
|
|
type: String,
|
||
|
|
default() {
|
||
|
|
return 'desktop'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
class="vab-layout-hv"
|
||
|
|
:class="{
|
||
|
|
fixed: fixedHeader,
|
||
|
|
'no-tabs-bar': !showTabs,
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<div class="vab-layout-header" :class="{ 'fixed-header': fixedHeader }">
|
||
|
|
<div class="vab-layout-header-header">
|
||
|
|
<vab-logo />
|
||
|
|
<vab-nav layout="comprehensive" />
|
||
|
|
</div>
|
||
|
|
<div class="vab-layout-header-tabs" :class="{ 'is-collapse': collapse, 'is-hasMenu': !hasMenu }">
|
||
|
|
<vab-tabs v-show="showTabs" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="vab-main" :class="{ 'is-collapse-main': collapse, 'is-hasMenu-main': !hasMenu }">
|
||
|
|
<vab-side-bar layout="hv" />
|
||
|
|
|
||
|
|
<vab-app-main />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.vab-layout-hv {
|
||
|
|
.vab-layout-header {
|
||
|
|
&-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
//水平布局
|
||
|
|
.vab-nav {
|
||
|
|
flex: 1;
|
||
|
|
margin-left: 20px;
|
||
|
|
}
|
||
|
|
.logo-container-hv {
|
||
|
|
z-index: 2001;
|
||
|
|
width: var(--el-left-menu-width);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-tabs {
|
||
|
|
// position: relative;
|
||
|
|
width: auto;
|
||
|
|
min-height: 100%;
|
||
|
|
margin-left: var(--el-left-menu-width);
|
||
|
|
&.is-collapse {
|
||
|
|
margin-left: $base-left-menu-width-min;
|
||
|
|
}
|
||
|
|
&.is-hasMenu {
|
||
|
|
margin-left: 0px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|