Section.vue
1.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<script setup>
/** 页面区块。页面 = PageHeader + N 个 Section，Section 不嵌套。 */
defineProps({
/** 区块标题。不给就不渲染标题栏。 */
title: { type: String, default: '' },
/** 表格类内容自己带边框和内边距，这里就不要再加一层。 */
padded: { type: Boolean, default: true },
})
</script>
<template>
<section class="drama-section">
<header
v-if="title || $slots.actions"
class="drama-section__header"
>
<h2 v-if="title">{{ title }}</h2>
<div
v-if="$slots.actions"
class="drama-section__actions"
>
<slot name="actions" />
</div>
</header>
<div :class="['drama-section__body', { 'is-padded': padded }]">
<slot />
</div>
</section>
</template>
<style scoped>
.drama-section {
background-color: var(--drama-color-surface);
border: 1px solid var(--drama-color-border);
border-radius: var(--drama-radius-lg);
overflow: hidden;
}
/* 不带外边距:块与块之间的距离归页面容器(见 admin 的 `.vga-page`)。组件自己伸手管周围的间距,
页面再叠一层 gap,两者就会互相加码。 */
.drama-section__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--drama-space-lg);
padding: var(--drama-space-lg) var(--drama-space-xl);
border-bottom: 1px solid var(--drama-color-border);
}
h2 {
margin: 0;
color: var(--drama-color-text);
font-family: var(--drama-font-family-heading);
font-size: var(--drama-font-size-lg);
font-weight: var(--drama-font-weight-medium);
line-height: var(--drama-line-height-tight);
}
.drama-section__actions {
display: flex;
align-items: center;
gap: var(--drama-space-sm);
}
.drama-section__body.is-padded {
padding: var(--drama-space-xl);
}
</style>