charge-java/charge-front/src/components/style-bottom-view/style-bottom-view.vue

<template>
  <view class="fixed-bottom-view-placeholder"></view>
  <view
    class="fixed-bottom-view"
    :class="{
      'fixed-bottom-view-shadow ': shadow,
      'fixed-bottom-view-hidden': hidden,
    }"
    :style="{
      zIndex,
      background,
    }"
  >
    <slot></slot>
  </view>
</template>

<script lang="ts">
export default {
  props: {
    shadow: Boolean,
    hidden: Boolean,
    background: {
      type: String,
      default: "#ffffff",
    },
    zIndex: {
      type: Number,
      default: 999,
    },
  },
};
</script>

<style lang="scss">
.fixed-bottom-view {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  transition: all 0.3s linear;
  box-sizing: content-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.fixed-bottom-view-placeholder {
  box-sizing: content-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.fixed-bottom-view-shadow {
  box-shadow: 0px 0px 40rpx 0px rgba(157, 147, 142, 0.36);
}

.fixed-bottom-view-hidden {
  transform: translateY(100%);
}
</style>