<template>
    <div class="aside-menu">
      <ul class="floor1">
        <li>
          <router-link to="/main">
           <i class="iconfont icon-home"></i>
            <span >首页</span>
          </router-link>
          <!-- <ul class="floor2" :class="{left300: isSpread}" >
            <li>11111</li>
            <li>22222</li>
            <li>11111</li>
            <li>22222</li>
          </ul> -->
        </li>
        <li>
          <router-link to="/equipment">
           <i class="iconfont icon-zonglan"></i>
            <span >设备详情</span>
          </router-link>
           <!-- <ul class="floor2" :class="{left300: isSpread}" style="top:94px;">
            <li>dsa</li>
            <li>dasd</li>
            <li>dasd</li>
            <li>222dasd22</li>
          </ul> -->
        </li>

        <li>
          <router-link to="/rooms">
           <i class="iconfont icon-anquancanshu"></i>
            <span >空间详情</span>
          </router-link>
        </li>
        <li>
          <router-link to="/vr">
           <i class="iconfont icon-qushi"></i>
            <span >空间</span>
          </router-link>
        </li>
         <!-- <li>
          <router-link to="/spread">
           <i class="iconfont icon-anquancanshu"></i>
            <span >设备</span>
          </router-link>
        </li> -->
         <li>
          <router-link to="/asset">
           <i class="iconfont icon-anquancanshu"></i>
            <span >资产</span>
          </router-link>
        </li>
         <li>
          <router-link to="/system">
           <i class="iconfont icon-qiangdianzhuanyexitong"></i>
            <span >系统详情</span>
          </router-link>
        </li>
      </ul>
    </div>
</template>

<script>
// import axios from 'axios'
export default {
  components: {},

  mixins: [],

  props: {
    isSpread: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {

    }
  },

  computed: {},

  mounted () {

  },

  methods: {

  }
}
</script>

<style scoped lang="less" >
.aside-menu {
  z-index:99999;
  box-shadow: 2px 0 4px 0 rgba(44,48,62,0.06);
  ul.floor1 {
    > li {
      position: relative;
      ul.floor2{
        display: none;
        position: fixed;
        top: 50px;
        left: 80px;
        background: #fff;
        transition: all 0.3s ease-in-out;
        z-index: 2;
      }
      ul.left200 {
        left: 200px;
      }
      &:hover {
        background: #eee;
        > ul.floor2 {
          display: block;
        }
      }
      > a {
        display: inline-block;
        white-space: nowrap;
        padding: 10px 23px;
        width: 100%;
        color: #b6bccb;
        span {
          padding-left: 37px;
          color: black;
          font-size: 15px;
        }
      }
      .router-link-active {
        color: #57a4f7;
      }
      .iconfont{
        padding-left: 4px;
        font-size: 22px;
      }
    }
  }
}
</style>
