element-ui_el-card-卡片

element-ui_el-card-卡片

---

目录

---

---

内容

---

1、简介

一种卡片容器。

• 应用场景：用于立体，有层次感的容器
• 效果图1-1：

2、使用

2.1、常用属性

• el-card

属性名	类型	可接受值	默认	描述
header	string	-	-	字符串标题或者slot#header插槽自定义
body-style	object	-	{padding: ‘20px’}	card主体的css样式
shadow	string	always/hover/never	always	什么时候显示卡片阴影 always-一直，hover-鼠标悬停显示，never-不显示

2.2、效果图源码

<el-row>
  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
	<el-card :body-style="{ padding: '0px' }">
	  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
	  <div style="padding: 14px;">
		<span>Yummy hamburger</span>
		<div class="bottom clearfix">
		  <time class="time">{{ currentDate }}</time>
		  <el-button type="text" class="button">Operating</el-button>
		</div>
	  </div>
	</el-card>
  </el-col>
</el-row>

<style>
  .time {
	font-size: 13px;
	color: #999;
  }

  .bottom {
	margin-top: 13px;
	line-height: 12px;
  }

  .button {
	padding: 0;
	float: right;
  }

  .image {
	width: 100%;
	display: block;
  }

  .clearfix:before,
  .clearfix:after {
	  display: table;
	  content: "";
  }

  .clearfix:after {
	  clear: both
  }
</style>

<script>
export default {
  data() {
	return {
	  currentDate: new Date()
	};
  }
}
</script>

后记 ：

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/ly-bms    // 前端后台管理系统
后端JAVA源代码地址:https://gitee.com/gaogzhen/ly-backend        // 后端项目