read_opc/chuanyi_client2/src/views/index.vue

<template>
  <el-container>
    <el-aside>
      <left-menu></left-menu>
    </el-aside>
    <el-container>
      <el-main>
        <split-pane :min-percent='minPercent' :default-percent='defaultPercent' split="vertical">
          <template slot="paneL">
            <header-main></header-main>
          </template>
          <template slot="paneR">
            <header-personal></header-personal>
            <router-view></router-view>
          </template>
        </split-pane>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import LeftMenu from '@/components/LeftMenu/index'
import HeaderMain from '@/components/HeaderMain/index'
import HeaderPersonal from '@/components/HeaderPersonal/index'

export default {
  components: {
    LeftMenu,
    HeaderMain,
    HeaderPersonal
  },
  data() {
    return {
      defaultPercent: 20,
      minPercent: 20
    }
  },
  created() {
    this.disableEvent()
  },
  methods: {
    disableEvent() {
      this.$nextTick(() => {
        // 禁用右键
        document.oncontextmenu = new Function("event.returnValue=false");
        // 禁用选择
        document.onselectstart = new Function("event.returnValue=false");
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.el-container {
  height: 100%;
}

.el-main {
  padding: 0;
}

.el-aside {
  width: 80px !important;
  padding: 10px 5px;
  background-color: #2c3e50;
  margin-bottom: 0;
}

.splitter-paneL {
  background-color: #2c3e50;
  padding-right: 0 !important;
}

.splitter-paneR {
  padding-left: 0 !important;
}

.splitter-pane-resizer {
  opacity: unset !important;
  background: #2c3e50 !important;
}

.cqcy-content {
  margin: 20px;
}
</style>