<template>
  <div>
    <sb-card :style="{ width: '360px' }" title="sb-card" bordered>
      <template #extra>
        <a-link>More</a-link>
      </template>
      Seven-Bit-UI 连接轻盈体验 更快开发和构建项目产品，适用于 Vue 项目的组件库
    </sb-card>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped></style>

<template>
  <div class="box">
    <sb-card :style="{ width: '220px' }" title="sb-card" bordered>
      <template #extra>
        <a-link>More</a-link>
      </template>
      Seven-Bit-UI 连接轻盈体验 更快开发和构建项目产品，适用于 Vue 项目的组件库
    </sb-card>

    <sb-card :style="{ width: '220px' }" title="sb-card" hoverable bordered>
      <template #extra>
        <a-link>More</a-link>
      </template>
      Seven-Bit-UI 连接轻盈体验 更快开发和构建项目产品，适用于 Vue 项目的组件库
    </sb-card>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.box {
  display: flex;
  justify-content: space-between;
}
.sb-card {
  margin: 10px;
}
</style>

<template>
  <div class="box">
    <sb-card :style="{ width: '220px' }" title="sb-card" bordered>
      <template #extra>
        <a-link>More</a-link>
      </template>
      Seven-Bit-UI 连接轻盈体验 更快开发和构建项目产品，适用于 Vue 项目的组件库
    </sb-card>

    <sb-card :style="{ width: '220px' }" title="sb-card">
      <template #extra>
        <a-link>More</a-link>
      </template>
      Seven-Bit-UI 连接轻盈体验 更快开发和构建项目产品，适用于 Vue 项目的组件库
    </sb-card>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.box {
  display: flex;
  justify-content: space-between;
  background-color: #f2f3f5;
}
.sb-card {
  margin: 10px;
}
</style>

<template>
  <div>
    <sb-card :style="{ width: '360px' }" bordered>
      Seven-Bit-UI 连接轻盈体验 更快开发和构建项目产品，适用于 Vue 项目的组件库
    </sb-card>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped></style>

<template>
  <div>
    <sb-card :style="{ width: '360px' }" title="sb-card" bordered>
      <template #extra>
        <a-link>More</a-link>
      </template>
      Seven-Bit-UI 连接轻盈体验 更快开发和构建项目产品，适用于 Vue 项目的组件库
      <sb-card :style="{ width: '260px' }" title="sb-card" bordered>
        <template #extra>
          <a-link>More</a-link>
        </template>
        Seven-Bit-UI 连接轻盈体验 更快开发和构建项目产品，适用于 Vue
        项目的组件库
        <sb-card :style="{ width: '160px' }" title="sb-card" bordered>
          <template #extra>
            <a-link>More</a-link>
          </template>
          Seven-Bit-UI 连接轻盈体验 更快开发和构建项目产品，适用于 Vue
          项目的组件库
        </sb-card>
      </sb-card>
    </sb-card>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped></style>