使用Bootstrap-Vue创建复杂的面板

<template>
  <div>
    <!-- 基本面板 -->
    <b-card title="基本面板" img-src="https://placekitten.com/600/300" img-alt="Image" img-top tag="article">
      <b-card-text>
        这是一个基本的面板示例。
      </b-card-text>
      <b-button href="#" variant="primary">更多信息</b-button>
    </b-card>

    <!-- 带有工具栏的面板 -->
    <b-card title="带有工具栏的面板" img-src="https://placekitten.com/600/300" img-alt="Image" img-top tag="article">
      <template #header>
        <h4 class="mb-0">面板标题</h4>
      </template>
      <b-card-text>
        这是一个带有工具栏的面板示例。
      </b-card-text>
      <template #footer>
        <b-button variant="success">保存</b-button>
        <b-button variant="danger">删除</b-button>
      </template>
    </b-card>

    <!-- 带有折叠功能的面板 -->
    <b-collapse id="collapse-1" visible>
      <b-card>
        <b-card-header header-tag="header" class="p-1" role="tab">
          <b-button block href="#" v-b-toggle.collapse-1 variant="info">面板标题</b-button>
        </b-card-header>
        <b-card-body>
          <b-card-text>
            这是一个带有折叠功能的面板示例。
          </b-card-text>
        </b-card-body>
      </b-card>
    </b-collapse>
  </div>
</template>

<script>
export default {
  name: 'ComplexPanel'
}
</script>

<style scoped>
/* 自定义样式 */
</style>