67 lines
1.2 KiB
Vue
67 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* 通用页面卡片容器
|
|
* 用于表单页、详情页等需要统一卡片样式的场景
|
|
*/
|
|
withDefaults(
|
|
defineProps<{
|
|
title?: string
|
|
subtitle?: string
|
|
bordered?: boolean
|
|
}>(),
|
|
{
|
|
bordered: false,
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<el-card shadow="never" class="page-card">
|
|
<div v-if="title || $slots.header" class="page-card-header">
|
|
<slot name="header">
|
|
<div>
|
|
<h2 class="page-card-title">{{ title }}</h2>
|
|
<p v-if="subtitle" class="page-card-subtitle">{{ subtitle }}</p>
|
|
</div>
|
|
</slot>
|
|
<div v-if="$slots.extra" class="page-card-extra">
|
|
<slot name="extra" />
|
|
</div>
|
|
</div>
|
|
<div class="page-card-body">
|
|
<slot />
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.page-card {
|
|
border-radius: 8px;
|
|
margin-bottom: 24px;
|
|
|
|
.page-card-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.page-card-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #303133;
|
|
margin: 0;
|
|
}
|
|
|
|
.page-card-subtitle {
|
|
font-size: 13px;
|
|
color: #909399;
|
|
margin: 4px 0 0;
|
|
}
|
|
|
|
:deep(.el-card__body) {
|
|
padding: 24px;
|
|
}
|
|
}
|
|
</style>
|