现在是这个样式
<div class="mycards">
<div class="card_item">
<i class="el-icon-plus icon"></i>
<div class="menu_name">更多</div>
</div>
</div>
CSS样式:
.mycards {
// 大盒子
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// 校正
margin-left: -8px;
margin-top: -8px;
}
.card_item {
flex: 1;
width: 22%;
min-width: 22%;
max-width: 22%;
height: 12vh;
background: #f6f8fe;
margin: 1%;
display: flex;
justify-content: center;
align-items: center;
.icon {
font-size: 40px;
color: #a5b7f4;
}
.menu_name {
font-size: 14px;
}
}
.card_item:hover {
-webkit-box-shadow: #ccc 0px 10px 10px;
-moz-box-shadow: #ccc 0px 10px 10px;
box-shadow: #ccc 0px 10px 10px;
cursor: pointer;
background: #ffffff;
}