<template>
    <div class="aside-menu">
      <ul>
        <li>
          <router-link  to="summary">
            <i class="iconfont icon-zonglan"></i>
            <span>安全总览</span>
          </router-link>
        </li>
        <li>
          <router-link  to="detail">
            <i class="iconfont icon-anquancanshu"></i>
            <span>安全参数详情</span>
          </router-link>
        </li>
        <li>
          <router-link  to="history">
            <i class="iconfont icon-dangqianbaojing"></i>
            <span>安全报警历史</span>
          </router-link>
        </li>
        <li>
          <router-link  to="statistics">
            <i class="iconfont icon-tongjifenxiblue"></i>
            <span>报警数据统计分析</span>
          </router-link>
        </li>
      </ul>
    </div>
</template>

<script>
export default {
  components: {},

  mixins: [],

  props: {},

  data() {
    return {};
  },

  computed: {},

  mounted() {},

  methods: {}
};
</script>

<style scoped lang="less" >
.aside-menu {
  ul {
    > li {
      &:hover {
        background: #eee;
      }
      a {
        display: inline-block;
        white-space: nowrap;
        padding: 10px 30px;
        width: 100%;
        color: #b6bccb;
        span {
          padding-left: 37px;
          color: black;
          font-size: 15px;
        }
      }
      .router-link-active {
        color: #57a4f7;
      }
    }
  }
}
</style>
