26 lines
897 B
Vue
26 lines
897 B
Vue
<script setup lang="ts">
|
|
withDefaults(defineProps<{
|
|
ariaLabel?: string
|
|
}>(), {
|
|
ariaLabel: '详情页面',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<article class="detail-page-layout" :aria-label="ariaLabel">
|
|
<header v-if="$slots.header" class="detail-page-layout__header"><slot name="header" /></header>
|
|
<div v-if="$slots.summary" class="detail-page-layout__summary"><slot name="summary" /></div>
|
|
<div class="detail-page-layout__content"><slot /></div>
|
|
<footer v-if="$slots.footer" class="detail-page-layout__footer"><slot name="footer" /></footer>
|
|
</article>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.detail-page-layout { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
|
|
.detail-page-layout__header, .detail-page-layout__summary, .detail-page-layout__content, .detail-page-layout__footer { min-width: 0; }
|
|
|
|
@media (min-width: 1920px) {
|
|
.detail-page-layout { gap: 12px; }
|
|
}
|
|
</style>
|