From c02e7a8fe42de2a5796e95e573f9e6b6735e4d0d Mon Sep 17 00:00:00 2001 From: zhengyiming <540361168@qq.com> Date: 星期二, 25 三月 2025 17:06:43 +0800 Subject: [PATCH] fix: 四期需求 --- apps/h5/src/components/PageFooter/PageFooter.vue | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 56 insertions(+), 0 deletions(-) diff --git a/apps/h5/src/components/PageFooter/PageFooter.vue b/apps/h5/src/components/PageFooter/PageFooter.vue new file mode 100644 index 0000000..7a3f326 --- /dev/null +++ b/apps/h5/src/components/PageFooter/PageFooter.vue @@ -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> -- Gitblit v1.9.1