<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:'icon-material_panoramic_picture'
      },{
        name:'图片',
        id:'image',
        link:{path:'/image'},
        icon:'icon-material_image'
      },{
        name:'音频',
        id:'audio',
        link:{path:'/audio'},
        icon:'icon-material_music'
      },{
        name:'视频',
        id:'video',
        link:{path:'/video'},
        icon:'icon-material_video'
      }]
    }
  },
  methods:{
    handleItem(data){
      this.active = data
      this.$router.push(data.link)
    }
  }
}
</script>

<style lang="less" scoped>
.aside{
  color: #969799;
  background: #fff;
  width: 200px;
  margin-right: 30px;
  flex-shrink: 0;
  max-height: 232px;
  >ul{
    padding: 20px 0;
    >li{
      padding-left: 50px;
      cursor: pointer;
      line-height: 48px;
      height: 48px;
      color: #969799;
      font-size: 16px;
      &:hover, &.router-link-exact-active,
      &.router-link-active {
        color: #323233;
        background: #F7F8FA;
      }
      .iconfont{
        margin-right: 10px;
      }
    }
  }
}
</style>