Card 卡片 ​

<template>
  <w-card style="max-width: 480px">
    <template #header>
      <div class="card-header">
        <span>标题</span>
      </div>
    </template>
    <p v-for="o in 2" :key="o" class="text item">{{ '列表 ' + o }}</p>
    <template #footer>Footer content</template>
  </w-card>
</template>

<template>
  <div class="flex flex-wrap gap-4">
    <w-card style="width: 480px" shadow="always">Always</w-card>
    <w-card style="width: 480px" shadow="hover">Hover</w-card>
    <w-card style="width: 480px" shadow="never">Never</w-card>
    <w-card style="width: 480px" shadow="hover" interactive>interactive</w-card>
  </div>
</template>

<template>
  <w-card style="max-width: 480px">
    <p v-for="o in 2" :key="o" class="text item">{{ '选项 ' + o }}</p>
  </w-card>
</template>

<template>
  <w-card style="max-width: 480px" :body-style="{ padding: '0px' }">
    <template #header>患者康复评分趋势</template>
    <img
      src="/imgs/card-report-trend.svg"
      alt="患者康复评分趋势图"
      style="width: 100%; display: block"
    />
  </w-card>
</template>

<template>
  <w-card color>
    <template #header>今日门诊统计</template>
    <p v-for="o in 2" :key="o" class="text item">{{ '接诊记录 ' + o }}</p>
  </w-card>
  <w-card class="mt-4" color :color-style="{ padding: '24px' }">
    <template #header>自定义彩色头部</template>
    <p v-for="o in 2" :key="o" class="text item">{{ '列表 ' + o }}</p>
  </w-card>
</template>

<template>
  <div class="flex flex-wrap gap-4">
    <w-card fill header="充满父容器">
      <p v-for="o in 2" :key="o" class="text item">{{ '列表 ' + o }}</p>
    </w-card>
    <w-card fill :radius="false" header="充满 + 无圆角">
      <p v-for="o in 2" :key="o" class="text item">{{ '列表 ' + o }}</p>
    </w-card>
  </div>
</template>