<template>
  <div class="page-item-card">
    <div class="page-item-card-header">
      <div class="page-item-card-header-title">{{ title }}</div>
      <slot name="header"></slot>
    </div>
    <PageItemWrapper>
      <slot></slot>
    </PageItemWrapper>
  </div>
</template>

<script>
// 页面卡片式内容容器组件
import PageItemWrapper from './PageItemWrapper'

export default {
  name: 'PageItemCard',
  components: {
    PageItemWrapper
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang="scss">
.page-item-card {
  background: #fff;

  &:not(:first-of-type) {
    margin-top: 20px;
  }

  .page-item-card-header {
    padding: 10px 20px;
    border-bottom: 1px solid #f5f5f5;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .page-item-card-header-title {
      font-size: 14px;
      line-height: 32px;
    }
  }
}
</style>
