| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="page-header-wrapper"> |
| | | <el-page-header @back="handleBack" :content="content"> |
| | | <template #icon v-if="$slots.icon"> |
| | | <slot name="icon"></slot> |
| | | </template> |
| | | <template #title v-if="$slots.title"> |
| | | <slot name="title"></slot> |
| | | </template> |
| | | <template #content v-if="$slots.content"> |
| | | <slot name="content"></slot> |
| | | </template> |
| | | <template #extra> |
| | | <slot name="extra"> |
| | | <slot name="right-button"></slot> |
| | | </slot> |
| | | </template> |
| | | </el-page-header> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { useRouter } from 'vue-router' |
| | | |
| | | const props = defineProps({ |
| | | content: { |
| | | type: String, |
| | | default: '' |
| | | } |
| | | }) |
| | | |
| | | const emit = defineEmits(['back']) |
| | | |
| | | const router = useRouter() |
| | | |
| | | const handleBack = () => { |
| | | emit('back') |
| | | // é»è®¤è¿åå°ä¸ä¸çº§ |
| | | router.back() |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .page-header-wrapper { |
| | | margin-bottom: 16px; |
| | | padding: 16px 18px; |
| | | border: 1px solid var(--surface-border); |
| | | border-radius: var(--radius-md); |
| | | background: rgba(255, 255, 255, 0.82); |
| | | box-shadow: var(--shadow-sm); |
| | | } |
| | | |
| | | .page-header-wrapper :deep(.el-page-header__extra) { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .page-header-wrapper :deep(.el-page-header__content) { |
| | | font-weight: 600; |
| | | color: var(--text-primary); |
| | | } |
| | | </style> |