| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <script lang="ts" setup> |
| H | 2 | import { propTypes } from '@/utils/propTypes' |
| 3 | import { useDesign } from '@/hooks/web/useDesign' | |
| 4 | ||
| 5 | defineOptions({ name: 'ContentDetailWrap' }) | |
| 6 | ||
| 7 | const { t } = useI18n() | |
| 8 | ||
| 9 | const { getPrefixCls } = useDesign() | |
| 10 | ||
| 11 | const prefixCls = getPrefixCls('content-detail-wrap') | |
| 12 | ||
| 13 | defineProps({ | |
| 14 | title: propTypes.string.def(''), | |
| 15 | message: propTypes.string.def('') | |
| 16 | }) | |
| 17 | const emit = defineEmits(['back']) | |
| 18 | const offset = ref(85) | |
| 19 | const contentDetailWrap = ref() | |
| 20 | onMounted(() => { | |
| 21 | offset.value = contentDetailWrap.value.getBoundingClientRect().top | |
| 22 | }) | |
| 23 | </script> | |
| 24 | ||
| 25 | <template> | |
| 26 | <div ref="contentDetailWrap" :class="[`${prefixCls}-container`]"> | |
| 27 | <Sticky :offset="offset"> | |
| 28 | <div | |
| 29 | :class="[ | |
| 30 | `${prefixCls}-header`, | |
| 31 | 'flex b-b-1 h-50px items-center text-center bg-white pr-10px' | |
| 32 | ]" | |
| 33 | > | |
| 34 | <div :class="[`${prefixCls}-header__back`, 'flex pl-10px pr-10px ']"> | |
| 35 | <ElButton @click="emit('back')"> | |
| 36 | <Icon class="mr-5px" icon="ep:arrow-left" /> | |
| 37 | {{ t('common.back') }} | |
| 38 | </ElButton> | |
| 39 | </div> | |
| 40 | <div :class="[`${prefixCls}-header__title`, 'flex flex-1 justify-center']"> | |
| 41 | <slot name="title"> | |
| 42 | <label class="text-16px font-700">{{ title }}</label> | |
| 43 | </slot> | |
| 44 | </div> | |
| 45 | <div :class="[`${prefixCls}-header__right`, 'flex pl-10px pr-10px']"> | |
| 46 | <slot name="right"></slot> | |
| 47 | </div> | |
| 48 | </div> | |
| 49 | </Sticky> | |
| 50 | <div style="padding: var(--app-content-padding)"> | |
| 51 | <ElCard :class="[`${prefixCls}-body`, 'mb-20px']" shadow="never"> | |
| 52 | <div> | |
| 53 | <slot></slot> | |
| 54 | </div> | |
| 55 | </ElCard> | |
| 56 | </div> | |
| 57 | </div> | |
| 58 | </template> | |
