<template>
  <div class="tab" ref="tabs">
    <div class="tab_item" v-for="(item, index) in msg" :key="index" @click="switchToTab(item.path)">
      <img :src="item.normal" alt="" />
      <span :class="$route.path === item.path ? 'active' : ''">{{
        item.title
      }}</span>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  name: "Tabbar",
  props: {
    msg: Array,
    requirdd: true,
  },
  data () {
    return {

    };
  },
  methods: {

    switchToTab (path) {

      // this.$router.replace(path);
    },
  },
};
</script>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
.tab {
  width: 100%;
  height: 10vh;
  display: flex;
  border-top: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  background: #fff;
  z-index: 999;
  /* color: midnightblue; */
}
.tab_item {
  /* background: white; */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}
.tab_item img {
  margin-top: 5px;
  width: 30px;
  height: 30px;
}
.tab_item span {
  margin-top: -10px;
}
.active {
  color: blue;
}
</style>
