布局内容修改

longyvfengyun

2023-06-17 8314896662be6eb3ceec24aa59c2a59cd1a50e86

布局内容修改

 src/components/FlexLayout.vue

@@ -22,6 +22,10 @@
        type: Boolean,
        default: false
    },
    xNoHidden: {
        type: Boolean,
        default: false
    }
});

const svg = `
@@ -61,7 +65,7 @@
        <div class="flex-layout-header">
            <slot name="header"></slot>
        </div>
        <div class="flex-layout-body" :class="{ 'no-bg': noBg }">
        <div class="flex-layout-body" :class="{ 'no-bg': noBg, 'x-no-hidden': xNoHidden }">
            <slot></slot>
        </div>
        <div class="flex-layout-footer">

 src/views/home/index.vue

@@ -47,7 +47,7 @@
</script>

<template>
    <flex-layout>
    <flex-layout x-no-hidden>
        <div class="home-content" ref="homeContentDom">
            <map-pin
                name="培养间"

 src/views/mainLayout/components/PageHeader.vue

@@ -62,11 +62,13 @@
    display: flex;
    align-items: center;
    padding-right: 150px;
    min-width: 12em;
    min-width: 12rem;
    background-image: url("@/assets/images/page-header-left-bg.png");
    background-repeat: no-repeat;
    background-size: 150% 100%;
    color: @font-color-high-light;
    width: 100vh;
    overflow: hidden;
    span {
        font-size: 24px;
        font-weight: bold;

 src/views/mainLayout/index.vue

@@ -9,14 +9,18 @@
        <template v-slot:header>
            <slide-menu></slide-menu>
        </template>
        <flex-layout no-bg>
            <template v-slot:header>
                <page-header></page-header>
            </template>
            <div class="page-content">
                <router-view></router-view>
        <div class="main-layout-content">
            <div class="main-layout-absolute">
                <flex-layout no-bg>
                    <template v-slot:header>
                        <page-header></page-header>
                    </template>
                    <div class="page-content">
                        <router-view></router-view>
                    </div>
                </flex-layout>
            </div>
        </flex-layout>
        </div>
    </flex-layout>
</template>

@@ -24,4 +28,15 @@
.page-content {
    height: 100%;
}
.main-layout-content {
    position: relative;
    height: 100%;
    .main-layout-absolute {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}
</style>