el‐card - daniel-qa/Vue GitHub Wiki
el-card 是 Element Plus 框架中的一個基礎組件，它提供了一個簡潔美觀的容器，可以用來包裹內容，並支持多種樣式和功能。
<template>
<el-card
header="標題文字"
shadow="always">
<div>這是卡片的主要內容</div>
</el-card>
</template>
shadow="always" 讓卡片始終顯示陰影。
卡片內的內容是通過插槽直接放置。
可以使用插槽來進一步自定義卡片的內容和標題：
<template>
<el-card shadow="hover">
<template #header>
<div style="font-weight: bold;">自定義標題區域</div>
</template>
<div>這是卡片的主要內容，可以放圖片、文字等。</div>
</el-card>
</template>
使用 #header 插槽完全自定義標題內容。
當鼠標懸停在卡片上時才會顯示陰影。
- 設定高寬
<el-card
header="標題文字"
style="width: 300px; height: 200px;">
- el-card 的 header 區域有一個默認的 CSS 類名 .el-card__header，可以通過自定義樣式進行覆蓋：
.header-container {
height: 162px; /* 固定 header 的高度 */
}
- EX
<el-row gutter="20">
<el-col>
<el-card>區塊 1</el-card>
</el-col>
<el-col>
<el-card>區塊 2</el-card>
</el-col>
<el-col>
<el-card>區塊 3</el-card>
</el-col>
</el-row>
如果你想為 el-card 加上自定義的樣式，class="box-card" 就會派上用場。例如：
/* 自定義 .box-card 樣式 */
.box-card {
border: 1px solid #ddd;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 10px;
border-radius: 8px;
}
box-card 是一個常見的自定義類別，用來為 el-card 添加自定義樣式。即使不使用 box-card 類別，el-card 本身也會有預設的樣式，例如：邊框、陰影效果, 頭部區域（如果使用了 slot="header"）, 內容區域的排版等。
gutter="20" 是 Element Plus 中 el-row 元件的一個屬性，用於設定列元素之間的間距。
EX2
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>區塊 1</span>
</div>
<div>內容區域 1</div>
</el-card>
在 Element UI（或 Element Plus）中，< div slot="header" class="clearfix"> 是一個常見的用法，通常出現在使用 el-card 組件時。這段程式碼是用來設置卡片（el-card）的標題區域（header）的內容和樣式。
EX3
<!-- 第二张子卡片，标题为 接收名單 -->
<el-card class="card">
<template #header>
<span class="head-text">接收名單</span>
</template>
<!-- 其他内容 -->
<div class="card-content">
內容區域
</div>
</el-card>
/* CSS */
.outer-head-text {
font-size: 23px; /* 外层卡片标题字体 */
font-weight: bold;
text-align: center;
color: #333;
}
-
template #header 是 Element Plus（或較新版本的 Element UI）中的插槽寫法。這裡使用了 #header 插槽來插入標題，這種寫法更加現代化和靈活，支持多個插槽和更複雜的內容。
-
slot="header" 用來定義卡片的標題區域。這是 Element UI 的原生方式。
/* 自定義 .box-card 樣式 */
.box-card {
border: 1px solid #ddd;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 10px;
border-radius: 8px;
display: flex; /* 使用 Flexbox 布局 */
flex-direction: column; /* 子元素按列方向（纵向）排列 */
}