toor
7408591fac
新增 ledger.css 设计令牌与桌面端布局，AppRail 左导航、PageHead 桌面页头、ResultsColumn 常驻结果栏；做菜/菜谱/发现/我的/设置/帮助/关于各页做桌面窄屏双形态适配，窄屏仍走原有底部标签栏与弹层交互。
71 lines
1.6 KiB
Vue
71 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
|
/**
|
|
* iOS 分组：灰色小标题 + 白色圆角卡片，卡片里是一组可换行的按钮
|
|
*/
|
|
defineProps<{
|
|
title: string
|
|
/** 标题右侧的说明，例如「已选 2 种」 */
|
|
note?: string
|
|
/** 桌面端把按钮排成网格（厨具一栏用） */
|
|
grid?: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<section class="ingredient-section" :aria-label="title">
|
|
<h2 class="cook-group-header ingredient-section-header">
|
|
<span>{{ title }}</span>
|
|
<span v-if="note" class="ingredient-section-note">{{ note }}</span>
|
|
</h2>
|
|
<div class="ingredient-section-card" :class="{ 'is-grid': grid }">
|
|
<slot />
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.ingredient-section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.ingredient-section-note {
|
|
color: var(--ion-color-primary);
|
|
}
|
|
.ingredient-section-card {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin: 0 16px;
|
|
padding: 12px;
|
|
border-radius: 10px;
|
|
background: var(--ion-item-background, #fff);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.ingredient-section {
|
|
margin-bottom: 24px;
|
|
}
|
|
.ingredient-section-header {
|
|
margin: 0 0 12px;
|
|
padding: 0;
|
|
color: var(--ledger-text);
|
|
font: 600 var(--ledger-t-18) / 1.3 var(--ledger-font-display);
|
|
}
|
|
.ingredient-section-note {
|
|
color: var(--ledger-text-mute);
|
|
font: 400 var(--ledger-t-13) / 1.3 var(--ledger-font-body);
|
|
}
|
|
.ingredient-section-card {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
.ingredient-section-card.is-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
}
|
|
</style>
|