| 提交 | 用户 | age | ||
| ba068b | 1 | <template> |
| 31ff05 | 2 | <div :class="prefixCls" :style="{ width: getCalcContentWidth }"> |
| V | 3 | <div :class="`${prefixCls}__left`"> |
| 9edc28 | 4 | <slot name="left"></slot> |
| ba068b | 5 | </div> |
| 9edc28 | 6 | <slot></slot> |
| 31ff05 | 7 | <div :class="`${prefixCls}__right`"> |
| 9edc28 | 8 | <slot name="right"></slot> |
| ba068b | 9 | </div> |
| V | 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', |
| ce93e4 | 20 | inheritAttrs: false, |
| ba068b | 21 | setup() { |
| 31ff05 | 22 | const { prefixCls } = useDesign('page-footer'); |
| ba068b | 23 | const { getCalcContentWidth } = useMenuSetting(); |
| 31ff05 | 24 | return { prefixCls, getCalcContentWidth }; |
| ba068b | 25 | }, |
| V | 26 | }); |
| 27 | </script> | |
| 28 | <style lang="less" scoped> | |
| 31ff05 | 29 | @prefix-cls: ~'@{namespace}-page-footer'; |
| a65ad9 | 30 | |
| 31ff05 | 31 | .@{prefix-cls} { |
| ba068b | 32 | position: fixed; |
| V | 33 | right: 0; |
| 34 | bottom: 0; | |
| a65ad9 | 35 | z-index: @page-footer-z-index; |
| ba068b | 36 | display: flex; |
| V | 37 | width: 100%; |
| 38 | align-items: center; | |
| 39 | padding: 0 24px; | |
| 40 | line-height: 44px; | |
| 5b8eb4 | 41 | background: @component-background; |
| V | 42 | border-top: 1px solid @border-color-base; |
| ba068b | 43 | box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), |
| V | 44 | 0 -12px 48px 16px rgba(0, 0, 0, 0.03); |
| 5eac9b | 45 | transition: width 0.2s; |
| ba068b | 46 | |
| V | 47 | &__left { |
| 48 | flex: 1 1; | |
| 49 | } | |
| 50 | } | |
| 51 | </style> | |
