| 提交 | 用户 | age | ||
| ba068b | 1 | <template> |
| 31ff05 | 2 | <div :class="prefixCls" :style="{ width: getCalcContentWidth }"> |
| V | 3 | <div :class="`${prefixCls}__left`"> |
| ba068b | 4 | <slot name="left" /> |
| V | 5 | </div> |
| 31ff05 | 6 | <slot /> |
| V | 7 | <div :class="`${prefixCls}__right`"> |
| ba068b | 8 | <slot name="right" /> |
| V | 9 | </div> |
| 10 | </div> | |
| 11 | </template> | |
| 12 | <script lang="ts"> | |
| 13 | import { defineComponent } from 'vue'; | |
| 14 | ||
| 15 | import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; | |
| 31ff05 | 16 | import { useDesign } from '/@/hooks/web/useDesign'; |
| ba068b | 17 | |
| V | 18 | export default defineComponent({ |
| 73c8e0 | 19 | name: 'PageFooter', |
| ba068b | 20 | setup() { |
| 31ff05 | 21 | const { prefixCls } = useDesign('page-footer'); |
| ba068b | 22 | const { getCalcContentWidth } = useMenuSetting(); |
| 31ff05 | 23 | return { prefixCls, getCalcContentWidth }; |
| ba068b | 24 | }, |
| V | 25 | }); |
| 26 | </script> | |
| 27 | <style lang="less" scoped> | |
| 31ff05 | 28 | @prefix-cls: ~'@{namespace}-page-footer'; |
| a65ad9 | 29 | |
| 31ff05 | 30 | .@{prefix-cls} { |
| ba068b | 31 | position: fixed; |
| V | 32 | right: 0; |
| 33 | bottom: 0; | |
| a65ad9 | 34 | z-index: @page-footer-z-index; |
| ba068b | 35 | display: flex; |
| V | 36 | width: 100%; |
| 37 | align-items: center; | |
| 38 | padding: 0 24px; | |
| 39 | line-height: 44px; | |
| 40 | background: #fff; | |
| 41 | border-top: 1px solid #f0f0f0; | |
| 42 | box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), | |
| 43 | 0 -12px 48px 16px rgba(0, 0, 0, 0.03); | |
| 44 | transition: width 0.4s; | |
| 45 | ||
| 46 | &__left { | |
| 47 | flex: 1 1; | |
| 48 | } | |
| 49 | } | |
| 50 | </style> | |
