wms-antdvue/.svn/pristine/e3/e37c376273574fc74ecfc3295d37f0ad2b3ac782.svn-base
2024-11-07 16:33:03 +08:00

40 lines
1.0 KiB
Plaintext

<template>
<a-card
:bordered="false"
bodyStyle="padding: 0;width: 100%"
class="page-wrapper-footer"
:class="{ 'dark-bg': getDarkTheme }"
>
<div class="flex items-center w-full">
<div class="flex-1 page-wrapper-footer-left"><slot name="left"></slot></div>
<div class="page-wrapper-footer-right"><slot name="right"></slot></div>
</div>
</a-card>
</template>
<script lang="ts" setup>
import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
const { getDarkTheme } = useProjectSetting();
</script>
<style lang="less" scoped>
.page-wrapper-footer {
position: fixed;
right: 0;
bottom: 0;
z-index: 999;
display: flex;
width: 100%;
align-items: center;
padding: 15px 24px;
box-shadow: -3px 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.08),
-3px 5px 12px 4px rgba(0, 0, 0, 0.08);
transition: width 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
background: #fff;
}
.dark-bg {
background: rgb(24, 24, 28);
}
</style>