CommunityApp/pagesM/comps/foot_toolbar.vue

<template>
  <view>
    <view
      class="dt-foot-toolbar"
      :style="footToolbar"
    >
      <slot name="main"></slot>
    </view>
    <view class="foot-toolbar-fix" :style="footToolbar2"></view>
  </view>
</template>

<script>
export default {
  props:{
    bgColor:{
      type:String,
      default:''
    }
  },
  data() {
    return {};
  },
  computed:{
    footToolbar2(){
      return `padding-bottom:${this.safeAreaBottom}px`;
    },
    footToolbar(){
      return `
        padding-bottom:${this.safeAreaBottom}px;
        background-color:${this.bgColor};
      `;
    },
  },
};
</script>

<style lang="scss">
.dt-foot-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100upx;
  background-color: #fff;
  display: flex;
  align-items: center;
  z-index: 200;
}
.foot-toolbar-fix{
  height:100upx;
}
</style>