zym2525
2025-03-09 c4db0ed5c4218dba29c9924511dc2bbcf169d468
apps/h5/src/components/PageFooter/PageFooter.vue
New file
@@ -0,0 +1,56 @@
<template>
  <div :class="['page-footer', { isOnlyAction }]">
    <div class="page-footer-inner">
      <slot></slot>
    </div>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: 'PageFooter',
});
type Props = {
  isOnlyAction?: boolean;
};
const props = withDefaults(defineProps<Props>(), {
  isOnlyAction: true,
});
</script>
<style lang="scss" scoped>
@use '@/style/common.scss' as *;
.page-footer {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0px -5px 20px 0px rgba(0, 0, 0, 0.15);
  &::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #ffffff;
    content: '';
    transform: translateY(100%);
  }
  .page-footer-inner {
    display: flex;
    align-items: center;
    padding: 12px 0;
    width: 100%;
    box-sizing: border-box;
  }
}
</style>
<style lang="scss"></style>