wt_project_web_bak/src/layout/index.vue

<template>
  <div class="full-screen flex flex-justify-start" @scroll="scroll">
    <el-container>
      <el-header class="header">
        <top @openMenu="show = true" />
      </el-header>
      <div class="flex" style="background-color: #f6f7f8">
        <el-aside style="width: 200px; position: fixed; left: 0" v-if="!mini">
          <left />
        </el-aside>
        <el-main class="wt-main hide-scrollbar">
          <el-popover :width="200" trigger="hover" placement="left">
            <template #reference>
              <div class="mp">
                <div class="flex flex-center flex-col">
                  <img src="@/assets/svg/qrcode.svg" style="width: 30px" />
                  <span class="mt-10">小程序</span>
                </div>
              </div>
            </template>
            <div class="ml-20 flex flex-center flex-col">
              <img
                class="icon"
                src="https://wutong-1302848345.cos.ap-chengdu.myqcloud.com/wtzx/23fcdf89312f4c969eeb636d1adf9adc.jpg"
              />
              <div class="mt-20 text-center">
                打开微信扫一扫<br />随时掌握项目动态
              </div>
            </div>
          </el-popover>
          <div class="wrapper mb-20">
            <tips />
          </div>
          <div class="wrapper" @scroll="scroll">
            <router-view v-slot="{ Component, route }">
              <keep-alive :include="keepAlive.list">
                <component :is="Component" :key="route.fullPath" />
              </keep-alive>
            </router-view>
          </div>
        </el-main>
      </div>
    </el-container>
    <el-drawer v-model="show" direction="ltr" :with-header="false" :size="280">
      <div>
        <div class="padding-left flex flex-justify-start">
          <el-button icon="DArrowLeft" circle @click="show = false" />
        </div>
        <left />
      </div>
    </el-drawer>
  </div>
</template>

<script>
import left from './left.vue'
import top from './top.vue'
import tips from './tips.vue'
import keepAliveStore from '../store/keepAlive.js'
import permissionStore from '@/store/permission.js'

export default {
  name: 'index.vue',
  components: { left, top, tips },
  setup() {
    const keepAlive = keepAliveStore()
    const permission = permissionStore()
    return { keepAlive, permission }
  },
  data() {
    return {
      show: false,
      mini: false
    }
  },
  created() {
    this.getPermission()
  },
  mounted() {
    this.setScale()
    this.onresize = this.debounce(() => this.setScale(), 100)
    window.addEventListener('resize', this.onresize)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.onresize)
  },
  methods: {
    getPermission() {
      this.$api.login.getPermission().then(res => {
        if (res.code === 200) {
          this.permission.cleanPermission()
          this.permission.addPermission(res.data)
        }
      })
    },
    scroll(event) {
      this.$bus.emit('scorll', event)
    },
    // 防抖
    debounce(fn, t) {
      const delay = t || 500
      let timer
      return function () {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const that = this
        timer = setTimeout(() => {
          timer = null
          fn.apply(that, args)
        }, delay)
      }
    },

    // 设置缩放比例
    setScale() {
      const width = document.documentElement.clientWidth
      if (width < 1690) {
        this.mini = true
      } else {
        this.mini = false
      }
      this.$bus.emit('sizeChange', width)
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  padding: 0;
}

.wt-main {
  background-color: #f6f7f8;
  overflow-x: scroll;
  padding: 20px 0;
  .mp {
    top: 200px;
    right: 0;
    z-index: 999;
    border-radius: 4px;
    position: fixed;
    background-color: white;
    padding: 20px 10px;
    font-size: 12px;
  }
}
.icon {
  width: 140px;
}
.content {
  overflow-x: scroll;
  height: calc(100vh - 80px);
}

.tips {
  position: fixed;
}

:deep(.el-drawer) {
  --el-drawer-bg-color: #f6f7f8;
}
</style>