nsgk_mobile/src/components/common/agr_footer.vue

<template>
  <div class="tb-toolbar-container">
    <router-link to="/agriculturalTrusteeship/socializationIndex" 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/socializationProject" class="tab" active-class="active">
      <span class="icon"><van-icon name="shop-o" size="25" /></span>
      <p class="text">产品</p>
    </router-link>
    <img src="../../../static/images/agriculturalTrusteeship/socialization/footer_add.png" alt="" class="add_btn" @click="openDialog">
    <router-link to="/agriculturalTrusteeship/socializationBill" class="tab" active-class="active">
      <span class="icon"><van-icon name="bill-o" size="25" /></span>
      <p class="text">订单</p>
    </router-link>
    <router-link to="/agriculturalTrusteeship/socializationUser" class="tab" active-class="active">
      <span class="icon"><van-icon name="contact" size="25" /></span>
      <p class="text">我的</p>
    </router-link>
  </div>
</template>
<script>
export default {
  name: "toolbar",
  data(){
    return{
      text:"我是子组件数据，我要发送给父组件",
      num:12
    }
  },
  methods:{
    openDialog(){
      this.$parent.openDialog(true)
    }
  },
};
</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%;
  .tab {
    color: #5d656b;
    text-align: center;
    width: 20%;
    &.active {
      color: #3E6CCD;
    }
    .icon {
      padding-bottom: 3px;
    }
    &:nth-child(4){
      margin-left: auto;
    }
  }
  .add_btn{
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,-40%);
  }
}
</style>