Mr.Shi

MrShi

2024-01-26 cece17f846dca06261e4b56fb2b9789dec380670

 platform/src/layouts/AppLayout.vue

@@ -1,31 +1,49 @@
<template>
  <el-container class="app-layout">
    <el-aside :class="{collapse:menuData.collapse}">
      <Menu/>
    </el-aside>
    <el-main>
      <header>
        <AppHeader/>
      </header>
      <main>
        <transition name="fade">
          <router-view></router-view>
        </transition>
      </main>
    </el-main>
  </el-container>
  <div>
    <CommonHeader />
    <div style="height:10px; background: #fff"></div>
    <el-container class="app-layout">
      <el-aside :class="{collapse:menuData.collapse}">
        <Menu/>
      </el-aside>
      <el-main>
        <header>
          <AppHeader/>
        </header>
        <div style="height:10px;"></div>
        <main>
          <transition name="fade">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </transition>
        </main>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import Header from '@/components/common/Header'
import CommonHeader from '@/components/common/CommonHeader'
import Menu from '@/components/common/Menu'
export default {
  name: 'DefaultLayout',
  components: { AppHeader: Header, Menu },
  components: { AppHeader: Header, Menu, CommonHeader },
  data() {
    return {
      isFinishData: false
    }
  },
  computed: {
    ...mapState(['menuData'])
  }
    ...mapState(['menuData', 'userInfo'])
  },

  methods: {

  },
}
</script>

@@ -34,17 +52,27 @@
.el-container {
  background: #F7F8F9;
  height: 100%;

  display: flex;
  overflow: hidden;
  // overflow: hidden;
  overflow: scroll;
  // 左边菜单
  .el-aside {
    width: $menu-width !important;
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto;
    // height: 100%;
    // height: 900px;
    height: calc(100vh - 80px);
    overflow-y: scroll;
    overflow-x: hidden;
    background: $primary-color;
    color: #fff;
    transition: width ease .3s;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    &.collapse {
      width: 64px !important;
    }
@@ -52,14 +80,21 @@
  // 右边内容
  .el-main {
    width: 100%;
    height: 100%;
    // height: 100%;
    height: calc(100vh - 90px);
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    & > header {
      height: $header-height;
      height: 48px;
      flex-shrink: 0;
    }
    & > main {
@@ -81,4 +116,33 @@
  transition: all .5s;
  position: absolute;
}
.comfirm {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  .container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #fff;
    width: 500px;
    height: 120px;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .complete {
      display: flex;
      flex-direction: row-reverse;
    }
  }
}
</style>