<template>
  <div class="viewBody">

    <div class="topMenuBar">
      <span>{{ $store.state.platformName }}</span>
      <div class="userInformationBar">
        <div style="margin-right:10px;">
          <span>用户权限</span>
          <span class="iconfont icon-xiajiantou xiajiantou" style="font-size:18px;"></span>
        </div>
        <div style="margin-right:10px;">
          <span>{{userName}}</span>
          <span class="iconfont icon-xiajiantou xiajiantou" style="font-size:18px;"></span>
        </div>
        <img src="../imgs/yonghu.png">
      </div>
    </div>

    <div class="mainBody">
      <div class="leftMenuBar">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu class="el-menu-vertical-demo" 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="iconfont icon-solid-home" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span slot="title">矿区监控</span>
              </el-menu-item>
              <el-menu-item index="/homepage/videoSurveillance">
                  <i class="iconfont icon-diannao" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span slot="title">视频监控</span>
              </el-menu-item>
              <el-submenu index="3">
                <template slot="title">
                  <i class="iconfont icon-wenjianjia" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span>生产自动化系统</span>
                </template>
                <el-menu-item index="/homepage/AutomationHomepage">系统首页</el-menu-item>
                <el-menu-item index="/homepage/AutomatedNowData">实时数据</el-menu-item>
                <el-menu-item index="/homepage/AutomationHistory">历史数据</el-menu-item>
                <el-menu-item index="/homepage/AutomaticAlarm">报警记录</el-menu-item>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="iconfont icon-wenjian" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span>生产报表系统</span>
                </template>
                <el-menu-item index="/homepage/ReportHomePage">系统首页</el-menu-item>
                <el-menu-item index="/homepage/ReportNowData">实时数据</el-menu-item>
                <el-menu-item index="/homepage/ReportHistory">历史数据</el-menu-item>
              </el-submenu>
              <el-menu-item index="/homepage/PersonnelPositioning">
                  <i class="iconfont icon-dingwei" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span slot="title">人员定位系统</span>
              </el-menu-item>
              <el-menu-item index="/homepage/CarPositioning">
                  <i class="iconfont icon-car-fill" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span slot="title">车辆定位系统</span>
              </el-menu-item>
              <el-submenu index="7">
                <template slot="title">
                  <i class="iconfont icon-bianpo" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span>边坡在线监测</span>
                </template>
                <el-menu-item index="/homepage/SlopeHomePage">系统首页</el-menu-item>
                <el-menu-item index="/homepage/SlopeNowData">实时数据</el-menu-item>
                <el-menu-item index="/homepage/SlopeHistory">历史数据</el-menu-item>
                <el-menu-item index="/homepage/SlopeAlarm">报警记录</el-menu-item>
              </el-submenu>
              <el-submenu index="8">
                <template slot="title">
                  <i class="iconfont icon-yezi" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span>环境在线监测</span>
                </template>
                <el-menu-item index="/homepage/EnvironmentHomepage">系统首页</el-menu-item>
                <el-menu-item index="/homepage/EnvironmentNowData">实时数据</el-menu-item>
                <el-menu-item index="/homepage/EnvironmentHistory">历史数据</el-menu-item>
                <el-menu-item index="/homepage/EnvironmentAlarm">报警记录</el-menu-item>
              </el-submenu>
              <el-menu-item index="reservesHomepage">
                  <i class="iconfont icon-kuaizhuanggengduo" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span slot="title">数字化储量管理</span>
              </el-menu-item>
              <el-menu-item index="AccessHomepage">
                  <i class="iconfont icon-IOTtubiao_huabanfuben" style="margin-right:10px;color:rgb(3,156,205);"></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 {
  data(){
    return{
      userName:"qwqwqw",
    }
  },
  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;
  align-items: center;
}
.userInformationBar i {
  width: 21px;
  height: 21px;
}
.mainBody{
    min-height: 100vh;
    display: flex;
}
.leftMenuBar{
  width: 12%;
  overflow: hidden;
}
.rightBody{
  width: 88%;
  overflow: hidden;
}
.leftMenuBar>.tac>.el-col>ul{
    width: 240px;
    height: 100vh;
    letter-spacing: 2px;
    font-weight: 600;
}
.el-menu .el-menu-item{
  font-size: 18px;
}
.el-menu .el-submenu__title{
  font-size: 18px;
}
.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>