el-card 公告样式
时间: 2023-06-30 15:21:05 浏览: 79
el-card 是 Element UI 中的一个卡片组件,可以用来展示一些内容。下面是一个 el-card 公告样式的示例代码:
```html
<el-card class="announcement-card">
<div slot="header" class="announcement-header">
<i class="el-icon-information"></i>
<span class="announcement-title">公告标题</span>
</div>
<div class="announcement-content">
<p>这里是公告内容。</p>
</div>
</el-card>
```
其中,`.announcement-card` 是整个卡片的样式类,`.announcement-header` 是卡片头部的样式类,`.announcement-title` 是卡片标题的样式类,`.announcement-content` 是卡片内容的样式类。你可以根据自己的需要修改这些样式类的样式。
相关问题
el-card选中样式
el-card 是 Element UI 组件库中的一个卡片组件,它提供了多种选中样式,可以通过设置不同的类名来实现不同的效果。
以下是几种常见的选中样式:
1. 设置边框样式:可以通过设置 card 的 :class 属性,增加一个选中时的边框样式类名,如:
```html
<el-card :class="{ 'selected': isSelected }"></el-card>
```
然后在样式表中定义选中时的边框样式:
```css
.selected {
border: 2px solid #409EFF;
}
```
2. 设置背景色:可以通过设置 card 的 :style 属性,增加一个选中时的背景色样式,如:
```html
<el-card :style="{ backgroundColor: isSelected ? '#f0f0f0' : '' }"></el-card>
```
3. 设置阴影样式:可以通过设置 card 的 :class 属性,增加一个选中时的阴影样式类名,如:
```html
<el-card :class="{ 'box-shadow': isSelected }"></el-card>
```
然后在样式表中定义选中时的阴影样式:
```css
.box-shadow {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
```
以上只是几种常见的选中样式,你也可以根据自己的需求自定义其他样式。
el-card 样式
el-card 是饿了么团队开发的一个 Vue 组件库中的卡片组件,可用于展示一些简单的信息,比如商品信息、新闻信息等。以下是 el-card 组件的一些样式:
1. 卡片边框颜色:
```css
.el-card {
border-color: #ebeef5;
}
```
2. 卡片阴影:
```css
.el-card {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
```
3. 卡片标题字体:
```css
.el-card__header {
font-size: 16px;
}
```
4. 卡片内容边距:
```css
.el-card__body {
padding: 20px;
}
```
5. 卡片底部边框:
```css
.el-card__footer {
border-top: 1px solid #ebeef5;
}
```
以上是 el-card 组件的一些常用样式,你可以根据自己的需求进行调整和更改。