<template>
  <div class="aside">
    <ul>
      <router-link tag="li" :to="item.link" v-for="(item,i) in list" :key="i">
        <i class="iconfont" :class="item.icon"></i>{{item.name}}
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return {
      list:[{
        name:'全景图片',
        id:'pano',
        link:{path:'/pano'},
        icon:'iconbs_nav_panorama'
      },{
        name:'图片',
        id:'image',
        link:{path:'/image'},
        icon:'iconbs_nav_photo'
      },{
        name:'音频',
        id:'audio',
        link:{path:'/audio'},
        icon:'iconbs_nav_sound'
      },{
        name:'视频',
        id:'video',
        link:{path:'/video'},
        icon:'iconbs_nav_video'
      }]
    }
  },
  methods:{
    handleItem(data){
      this.active = data
      this.$router.push(data.link)
    }
  }
}
</script>

<style lang="less" scoped>
.aside{
  color: #161A1A;
  background: #fff;
  width: 274px;
  margin-right: 30px;
  flex-shrink: 0;
  max-height: 252px;
  >ul{
    padding: 30px 0;
    >li{
      padding-left: 50px;
      cursor: pointer;
      line-height: 48px;
      height: 48px;
      font-size: 16px;
      &:hover, &.router-link-exact-active,
      &.router-link-active {
        background: #EBEBEB;
        font-weight: bold;
      }
      .iconfont{
        margin-right: 10px;
      }
    }
  }
}
</style>