提交内容

whychdw

2021-05-25 1426657d8a2542f6afd55fca2af4a92802267009

 src/pages/index.vue

@@ -1,76 +1,80 @@
<template>
  <div class="pageLayout">
    <div class="pageSlideMenuCon" :style="{ zIndex: hover?3:1}">
      <div class="pageSlideMenu" @mouseover="pageMouseover" @mouseleave="pageMouseleave">
        <page-menu></page-menu>
      </div>
    <div class="pageLayout">
        <div class="pageSlideMenuCon" :style="{ zIndex: hover?3:1}">
            <div class="pageSlideMenu" @mouseover="pageMouseover" @mouseleave="pageMouseleave">
                <page-menu></page-menu>
            </div>
        </div>
        <div class="pageConten">
            <page-header></page-header>
            <div class="viewCon">
                <!--这里的router-view用来渲染子页面-->
                <router-view></router-view>
            </div>
        </div>
    </div>
    <div class="pageConten">
      <page-header></page-header>
      <div class="viewCon">
        <!--这里的router-view用来渲染子页面-->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
  import PageMenu from '@/components/PageMenu'
  import PageHeader from '@/components/PageHeader'
  export default {
import PageMenu from '@/components/PageMenu'
import PageHeader from '@/components/PageHeader'

export default {
    components: {
      PageMenu,
      PageHeader
        PageMenu,
        PageHeader
    },
    data() {
      return {
        hover: false
      }
        return {
            hover: false
        }
    },
    methods: {
      pageMouseover() {
        this.hover = true
      },
      pageMouseleave() {
        this.hover = false
      }
        pageMouseover() {
            this.hover = true
        },
        pageMouseleave() {
            this.hover = false
        }
    },
  }
    mounted() {

    }
}
</script>

<style scoped>
  .pageLayout {
.pageLayout {
    width: 100%;
    height: 100%;
    display: flex;
  }
}

  .pageSlideMenuCon {
.pageSlideMenuCon {
    width: 100%;
    min-height: 100%;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

  .pageSlideMenu {
.pageSlideMenu {
    width: 220px;
    height: 100%;
  }
}

  .pageConten {
.pageConten {
    width: calc(100% - 220px);
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
  }
}

  .viewCon {
.viewCon {
    padding: 8px 8px 0 18px;
    width: 100%;
    height: calc(100% - 108px);
  }
}
</style>