<template>
  <div class="viewBody">
    <div class="topMenuBar">
      <span>{{ $store.state.platformName }}</span>
      <div class="userInformationBar">
        <div>
          <span>用户权限</span>
          <span class="iconfont icon-xiajiantou xiajiantou" style="font-size:18px;"></span>
        </div>
        <div>
          <span>131313132</span>
          <i class="el-icon-caret-bottom"></i>
        </div>
      </div>
    </div>
    <div class="mainBody">
      <div class="leftMenuBar">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="rgb(9, 26, 69)"
              text-color="rgb(3,156,205)"
              active-text-color="white"
              :unique-opened="true"
              :router="true"
            >
              <el-menu-item index="/homepage/mineMonitoring">
                  <i class="el-icon-menu"></i>
                  <span slot="title">矿区监控</span>
              </el-menu-item>
              <el-menu-item index="/homepage/videoSurveillance">
                  <i class="el-icon-menu"></i>
                  <span slot="title">视频监控</span>
              </el-menu-item>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>生产自动化系统</span>
                </template>
                <el-menu-item index="3_1">系统首页</el-menu-item>
                <el-menu-item index="3_2">实时数据</el-menu-item>
                <el-menu-item index="3_3">历史数据</el-menu-item>
                <el-menu-item index="3_4">报警记录</el-menu-item>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>生产报表系统</span>
                </template>
                <el-menu-item index="4_1">系统首页</el-menu-item>
                <el-menu-item index="4_2">实时数据</el-menu-item>
                <el-menu-item index="3_3">历史数据</el-menu-item>
              </el-submenu>
              <el-menu-item index="5">
                  <i class="el-icon-menu"></i>
                  <span slot="title">人员定位系统</span>
              </el-menu-item>
              <el-menu-item index="6">
                  <i class="el-icon-menu"></i>
                  <span slot="title">车辆定位系统</span>
              </el-menu-item>
              <el-submenu index="7">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>边坡在线监测</span>
                </template>
                <el-menu-item index="7_1">系统首页</el-menu-item>
                <el-menu-item index="7_2">实时数据</el-menu-item>
                <el-menu-item index="7_3">历史数据</el-menu-item>
                <el-menu-item index="7_4">报警记录</el-menu-item>
              </el-submenu>
              <el-submenu index="8">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>环境在线监测</span>
                </template>
                <el-menu-item index="8_1">系统首页</el-menu-item>
                <el-menu-item index="8_2">实时数据</el-menu-item>
                <el-menu-item index="8_3">历史数据</el-menu-item>
                <el-menu-item index="8_4">报警记录</el-menu-item>
              </el-submenu>
              <el-menu-item index="9">
                  <i class="el-icon-menu"></i>
                  <span slot="title">数字化储量管理</span>
              </el-menu-item>
              <el-menu-item index="10">
                  <i class="el-icon-menu"></i>
                  <span slot="title">门禁系统</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <div class="rightBody">
          <router-view></router-view>
      </div>
      

    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.topMenuBar {
  width: 100%;
  height: 70px;
  background: -webkit-linear-gradient(rgb(14, 35, 94), rgb(9, 26, 69));
  padding: 0px 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topMenuBar > span {
  background-image: -webkit-linear-gradient(
    bottom,
    rgb(182, 205, 249),
    rgb(255, 255, 255)
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 3px;
  line-height: 70px;
  font-size: 31px;
  font-weight: 600;
}
.userInformationBar {
  color: rgb(151, 227, 244);
  display: flex;
}
.userInformationBar i {
  width: 21px;
  height: 21px;
}
.mainBody{
    height: 100vh;
    overflow: hidden;
    display: flex;
}
.rightBody{
  width: 100%;
  height: 100%;
}
.leftMenuBar>.tac>.el-col>ul{
    width: 240px;
    height: 100vh;
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: 600;
}
.el-menu-item{
  height: 50px;
  line-height: 50px;
}
.el-submenu{
  min-height: 50px;
  line-height: 50px;
}
.xiajiantou{
  display: inline-block;
  width: 18px;
  height: 18px;
}
</style>