index.vue

<template>
  <section :class="cusClass" class="h-bottom-tab">
    <slot/>
  </section>
</template>

<script>
import TabButton from './tab-button'

export default {
  name: 'BottomTab',
  component: {TabButton},
  props: {
    showDivider: {
      type: Boolean,
      default: false,
    },
    cusClass: {
      type: String,
      default: '',
    },
  },
  data () {
    return {}
  },
}
</script>

<style lang="less">
  .h-bottom-tab {
    height: 44px;
    width: 100%;
    background-color: #fff;
    position: fixed;
    z-index: 10;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0px -1px 3px 0px rgba(0,0,0,.1)
  }
  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      .h-bottom-tab {
        height: 78px;
        padding-bottom: 34px;
      }
    }
  }
  @media (device-width: 414px) and (device-height: 896px){
    .platform-ios {
      .h-bottom-tab {
        height: 78px;
        padding-bottom: 34px;
      }
    }
  }

</style>