<template>
  <div class="tb-toolbar-container">
    <router-link to="/agriculturalTrusteeship/buyerIndex" class="tab" active-class="active" exact>
      <span class="icon"><van-icon name="shopping-cart-o" size="25" /></span>
      <p class="text">寻找服务</p>
    </router-link>
    <router-link to="/agriculturalTrusteeship/buyerWaitBill" class="tab" active-class="active">
      <span class="icon"><van-icon name="todo-list-o" size="25" /></span>
      <p class="text">等待处理</p>
    </router-link>
    <router-link to="/agriculturalTrusteeship/buyerAllBill" class="tab" active-class="active">
      <span class="icon"><van-icon name="bill-o" size="25" /></span>
      <p class="text">所有订单</p>
    </router-link>
  </div>
</template>
<script>
export default {
  name: "toolbar",
  data(){
    return{
      text:"我是子组件数据，我要发送给父组件",
      num:12
    }
  },
  methods:{
  },
};
</script>
<style scoped lang="scss">
.tb-toolbar-container {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1001;
  background-color: #fff;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #f8f8f8;
  -webkit-box-pack: justify;
  /*justify-content: space-around;*/
  -webkit-box-align: center;
  align-items: center;
  position: fixed;
  padding: 10px 3%;
  justify-content: space-around;
  .tab {
    color: #5d656b;
    text-align: center;
    width: 20%;
    &.active {
      color: #3E6CCD;
    }
    .icon {
      padding-bottom: 3px;
    }
  }
  .add_btn{
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,-40%);
  }
}
</style>
