Element-UI 使用el-row 分栏布局
https://blog.csdn.net/kangguang/article/details/104880967
使用多个卡片显示的时候,并且要求当列数到一定数目的时候,要自动换行,el-container 布局就满足了需求了,就要用到el-row 布局做分栏处理,
代码如下
- <template>
- <el-row :gutter="20" class="el-row" type="flex" >
- <el-col :span="8" v-for = "(item,index) in apps" :key="item.id" class="el-col" >
- <el-card class="el-card" :key="index" onclick="">
- <div slot="header" class="clearfix">
- <span>{{item.appname}}</span>
- </div>
- <div >
- <div class="text item">
- <div class="item_tag" >
- <span >用户标签:</span>
- </div>
- <div class="item_desr">
- <span > {{item.tag}}</span>
- </div>
- </div>
- <div class="text item">
- <div class="item_tag">
- <span>搜索标签:</span>
- </div>
- <div class="item_desr">
- {{item.seatag}}
- </div>
- </div>
- <div class="text item">
- <div class="item_tag">
- <span>短信签名:</span>
- </div>
- <div class="item_desr">
- <span>
- {{item.wxname}}
- </span>
- </div>
- </div>
- <div class="text item">
- <div class="item_tag">
- <span>客服QQ:</span>
- </div>
- <div class="item_desr">
- {{item.qq}}
- </div>
- </div>
- <div class="text item">
- <div class="item_tag">
- <span>商务合作:</span>
- </div>
- <div class="item_desr">
- {{item.buscoo}}
- </div>
- </div>
- </div>
- </el-card>
- </el-col>
- <el-col :span="8">
- <el-card class="box-card" style="min-height: 200px;" align="middle" onclick="">
- <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>
- </el-card>
- </el-col>
- </el-row>
- </template>
- <script>
css
- <style type="text/css">
- .all{
- margin-top: -30px;
- word-break: break-all;
- height: 100%;
- }
- .mid{
- margin-top: 25%;
- height: 50%;
- }
- .mid_item{
- justify-content: center;
- align-items: center;
- }
- .item {
- margin-bottom: 10px;
- }
- .item_tag{
- float:left;
- text-align:left;
- }
- .item_desr{
- margin-left: 40%;
- min-height: 30px;
- text-align:left;
- }
- .text {
- width: 100%;
- font-size: 12px;
- font-family: "Microsoft YaHei";
- color: #909399;
- }
- .clearfix:before,
- .clearfix:after {
- display: table;
- content: "";
- }
- .clearfix:after {
- clear: both
- }
-
- .el-card {
- min-width: 100%;
- height: 100%;
- margin-right: 20px;
- /*transition: all .5s;*/
- }
- .el-card:hover{
- margin-top: -5px;
- }
- .el-row {
- margin-bottom: 20px;
- display: flex;
- flex-wrap: wrap
- }
- .el-col {
- border-radius: 4px;
- align-items: stretch;
- margin-bottom: 40px;
- }
- </style>