<template>
  <div class="viewBody">
    <div class="topMenuBar">
      <span>{{ $store.state.platformName }}</span>
      <div class="userInformationBar">
        <div>
          <span>用户权限</span>
          <span class="iconfont icon-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="#fff"
              active-text-color="#ffd04b"
              :unique-opened="true"
            >

              <el-menu-item index="1">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航一</span>
              </el-menu-item>
              <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>导航二</span>
                    </template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
              </el-submenu>

            </el-menu>
          </el-col>
        </el-row>
      </div>

      <router-view></router-view>

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

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleId(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;
}
.leftMenuBar>.tac>.el-col>ul{
    width: 240px;
    height: 100vh;
}
</style>