<template>
  <div class="navbar">
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        :class="{ 'active': activeIndex == index}"
        @click="activate(index)"
      >
        <!-- <i :class="['iconfont', activeIndex == index ? item.activename: item.classname]"></i> -->
        <img class="tab-icon" :src="[activeIndex == index ? item.activeUrl: item.iconUrl]" alt="">
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Navbar",
  data() {
    return {
      list: [
        {
          name: "保险",
          iconUrl: require('../assets/tab_bx.png'),
          activeUrl: require('../assets/tab_bx_active.png'),
          url: "/bx"
        },
        {
          name: "合同签署",
          iconUrl: require('../assets/tab_contract.png'),
          activeUrl: require('../assets/tab_contract_active.png'),
          url: "/bjdc"
        },
        {
          name: "我的",
          iconUrl: require('../assets/tab_user.png'),
          activeUrl: require('../assets/tab_user_active.png'),
          url: "/user"
        }
      ]
    };
  },
  props: {
    activeIndex: Number
  },
  methods: {
    activate(index) {
      this.$router.push(this.list[index].url);
    }
  }
};
</script>

<style  scoped>

.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 1rem;
  /* border-top: 1px solid #acacac; */
  background: #f8f8f8;
  font-size:10px;
}
.navbar::before{
  content: '';
  height: 1px;
  background: #acacac;
  transform: scaleY(0.5);
  width:100%;
  position: absolute;
}
ul {
  display: flex;
  height: 100%;
}
li {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #505050;
  cursor: pointer;
  padding-top:0.04rem;
}
.tab-icon{
  width:0.48rem;
  height: 0.48rem;
  object-fit: contain;
}

span {
  display: block;
  font-size: 0.2rem;
  margin-top: 0.04rem;
}
li.active {
  color: #0EAEFC;
}
</style>
