Element-UI的el-card常用操作

1.鼠标放上去有一个动画效果：

.el-card {
    min-width: 380px;
    margin-right: 20px;
    transition: all .5s;
  }
  .el-card:hover{
    margin-top: -5px;
  }

2.第三个卡片中的按钮，做到水平垂直效果 ：继承原来的布局属性，加上自己的布局设置

<el-card class="box-card " style="min-height: 200px;" align="middle" οnclick="">
        <div class="el-card__body mid">
          <el-button  icon="el-icon-circle-plus" circle></el-button>
          <el-button style="margin-left: 0;color: #505458" type="text">添加APP</el-button>
      </div>

.mid{
    margin-top: 25%;
    height: 50%;
  }

3.当显示多个卡片时，一直水平排列 ，不能够自动换行，这时候 只能在外层使用 Layout 布局中的分栏布局，会根据设置的列数自动布局

引用：
https://codeantenna.com/a/YoA9l1fJgd#:~:text=el-card%20%E6%98%AFElement-UI%20%E5%86%85%E7%BD%AE%E7%9A%84%E5%8D%A1%E7%89%87%E7%BB%84%E4%BB%B6%EF%BC%8C%E4%BD%BF%E7%94%A8%E8%B5%B7%E6%9D%A5%E5%BE%88%E6%96%B9%E4%BE%BF%EF%BC%8C%E4%BD%86%E6%98%AF%E5%AF%B9Vuejs%E5%92%8Chtml,%E4%B8%8D%E6%98%AF%E7%B2%BE%E9%80%9A%E7%9A%84%E8%AF%9D%EF%BC%8C%E6%A0%B9%E6%8D%AE%E8%87%AA%E5%B7%B1%E7%9A%84%E8%A6%81%E6%B1%82%E5%B8%83%E5%B1%80%EF%BC%8C%E4%BC%9A%E5%87%BA%E7%8E%B0%E8%87%AA%E5%B7%B1%E7%9A%84%E5%B0%8F%E5%9B%B0%E6%83%91%EF%BC%8C%E5%BF%85%E9%A1%BB%E6%B7%BB%E5%8A%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%EF%BC%8C%E6%8C%89%E7%85%A7CSS%20%E5%B8%83%E5%B1%80%E8%AE%BE%E7%BD%AE%EF%BC%8C%E6%80%BB%E6%98%AF%20%E4%B8%8D%E8%B5%B7%E4%BD%9C%E7%94%A8%EF%BC%8C%E4%B8%8E%E5%85%B6%E8%B4%B9%E5%8A%9B%E6%90%9C%E5%AF%BB%E5%8A%9E%E6%B3%95%EF%BC%8C%E4%B8%8D%E5%A6%82%E8%87%AA%E5%B7%B1%E7%AE%80%E5%8D%95%E7%99%BD%E7%97%B4%E7%9A%84%E5%8E%BB%E8%AE%BE%E7%BD%AE%E4%B8%80%E4%B8%8B