yos_web/src/components/newLayout/index.vue

<template>
  <div class="panel">
    <div class="flex-align-stretch">
      <asideTemp @getModules="getModules"></asideTemp>
      <div style="flex:100" class="body__panel">
        <headeTemp></headeTemp>
        <div>
<!--          <menuTemp class="sticky normal-margin" :style="marginTrue ? 'margin-bottom:70px !important' : 'margin-bottom:16px'" ref="menu" style="background: red"></menuTemp>-->
          <menuTemp class="sticky normal-margin"  ref="menu" @switch="debouned"></menuTemp>
          <div class="radius" ref="divContent" :style="{'marginTop':divTop,'height':divHeight}">
            <keep-alive :include="pageCache">
              <router-view></router-view>
            </keep-alive>
          </div>
        </div>
      </div>
      <navTemp  @getModules="getModules"></navTemp>
    </div>
    <socketMessage></socketMessage>
  </div>
</template>

<script>
import headeTemp from './modules/header.vue'
import asideTemp from './modules/aside.vue'
import menuTemp from './modules/menu.vue'
import navTemp from './modules/navRight.vue'
import socketMessage from '@/components/socketMessage/index.vue'

import {mapGetters} from 'vuex'

export default {
  components:{
    headeTemp,
    asideTemp,
    menuTemp,
    navTemp,
    socketMessage,

  },
  computed: {
    ...mapGetters({
      pageCache: 'pageCache'
    })
  },
  data () {
    return {
      timer:null,
      marginTrue:false,
      divHeight:'',
      divTop:''
    }
  },
  methods:{
    getModules (mod,type) {
      // this.$refs['menu'].setModules(mod,type)
    },
    debouned () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        let size = this.$refs.menu.$refs.menuList.$el.clientHeight / 60 -1
        if (this.$refs.menu.$refs.menuList.$el.clientHeight === 120){
          this.divTop =(this.$refs.menu.$refs.menuList.$el.clientHeight - (45 * size))  + 'px'
        }else {
          this.divTop = 0 + 'px'
        }

       /* this.divHeight = (this.$refs.divContent.clientHeight - this.$refs.menu.$refs.menuList.$el.clientHeight + 10) + 'px'*/
       /* if (this.$refs.menu.$el.clientWidth < 1206 && Array.from(this.$refs.menu.$el.getElementsByTagName('li')).filter(item => item.className.indexOf('el-submenu') != -1).length > 8) {
          this.marginTrue = true
        } else {
          this.marginTrue = false
        }*/
      },200)
    }
  },
  mounted() {
    this.debouned()
   /* console.log('长度')
    console.log(this.$refs.menu.$refs.menuList.$el.clientHeight,'高度')
    console.log(this.$refs.menu.$refs.menuList.$el.clientHeight % 60)
    if (this.$refs.menu.$refs.menuList.$el.clientHeight === 120){
      this.divTop =(this.$refs.menu.$refs.menuList.$el.clientHeight - 50)  + 'px'
    }else {
      this.divTop = 0 + 'px'
    }*/
  },
  created() {
    window.addEventListener('resize',this.debouned)
    this.$nextTick(() => {
      this.debouned()
    })
  },
}

</script>
<style>
.panel{
  background: url("../../assets/wallhaven-0pq8gm.jpeg") no-repeat;
  background-size: cover;
}
.el-menu{
  border-right:0
}
</style>
<style scoped>
.body__panel{
  height: 100vh;
  /* padding-right: 16px; */
  padding-right: 60px;
  margin-right: 10px;
  overflow-y: scroll;
}
.body__panel::-webkit-scrollbar{
  display:none !important;

}
.sticky {
  position: sticky;
}
.radius{
  /* margin: 16px 0; */
  border-radius:10px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
  transform: translate3d(0,-2px,0);
  background: #fff;
}

</style>