65 lines
1.5 KiB
Vue
65 lines
1.5 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* C 端菜单分组：分组标题 + 内容槽位。
|
||
* layout=grid 时子项宫格排列；通过 provide 告知 ArtMenuItem 切换样式。
|
||
*/
|
||
import { computed, provide, toRef } from 'vue'
|
||
|
||
const props = withDefaults(defineProps<{
|
||
title?: string
|
||
eyebrow?: string
|
||
/** list 纵向列表；grid 宫格（默认 list 兼容其它页） */
|
||
layout?: 'list' | 'grid'
|
||
}>(), {
|
||
title: '',
|
||
eyebrow: '',
|
||
layout: 'list',
|
||
})
|
||
|
||
provide('artMenuLayout', toRef(props, 'layout'))
|
||
|
||
const bodyClass = computed(() => (
|
||
props.layout === 'grid' ? 'group-body group-body--grid' : 'group-body'
|
||
))
|
||
</script>
|
||
|
||
<template>
|
||
<view class="art-menu-group">
|
||
<view v-if="title || eyebrow" class="group-head">
|
||
<text v-if="eyebrow" class="hero-eyebrow">{{ eyebrow }}</text>
|
||
<text v-if="title" class="group-title">{{ title }}</text>
|
||
</view>
|
||
<view :class="bodyClass">
|
||
<slot />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.art-menu-group {
|
||
margin-bottom: 40rpx;
|
||
}
|
||
.group-head {
|
||
margin-bottom: 20rpx;
|
||
padding: 0 8rpx;
|
||
}
|
||
.group-title {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: rgb(var(--art-text));
|
||
font-family: 'Playfair Display', 'Noto Serif SC', serif;
|
||
font-style: italic;
|
||
}
|
||
.group-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
}
|
||
/* 三列宫格；窄屏仍可读，卡片自带最小高度 */
|
||
.group-body--grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16rpx;
|
||
}
|
||
</style>
|