<!--
  * props：navlist，
  * svg数据格式：[{title:'全部',icon:'drxx57',to:'', type:'svg'}]
  * iconfont格式：[{title:'全部',icon:'drxx57',to:''}]
-->
<template>
  <nav class="nav">
    <ul>
      <li class="nav_item" v-for="(item,index) in navlist" :key="index">
        <router-link tag="a" :to="item.to" class="nav_item_link">
          <svg-icon :style="'width:'+size+'rem;height:'+size+'rem'" v-if="item.type?item.type == 'svg':false" :icon-class="item.icon" />
          <span v-else :style="'font-size：'+size+'rem'" :class="'iconfont icon-'+item.icon"></span>
          <span class="title">{{item.title}}</span>
        </router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
import SvgIcon from '@/components/SvgIcon'
export default {
  props:['navlist','size'],
  components:{
    SvgIcon
  }
}
</script>

<style scoped>
.nav {
  width: 100%;
}
.nav ul {
  width: 100%;
  padding: .2rem 0 0;
  overflow: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
}
.nav .nav_item {
  margin-bottom: .25rem;
  text-align: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.nav_item .nav_item_link {
  width: 100%;
  height: 100%;
  display: block;
  text-align: center;
  
}
.nav_item .nav_item_link img {
  display: block;
  width: 50%;
  margin: 0 auto .12rem;
}
.nav_item .nav_item_link .iconfont{
  font-size: .5rem;
}
.nav_item .nav_item_link .svg-icon{
  width: .5rem;
  height: .5rem;
  margin: .1rem 0;
  color: #4685fa;
}
.nav_item .nav_item_link .title {
  font-size: .28rem;
  margin-top: .16rem;
  display: block;
  color: #555;
}
</style>