效果如下：
样式
<style lang="scss">body{background-color: #f4f7fb;}#home{height: 100%;.main{padding: 20px;height:75%;.home_content{height: 100%;background-color: #fff;border-radius: 5px;padding: 0 50px;.backlog{height: 100px;line-height: 100px;.matter{margin-right: 60px;span{color: #ef8e8b;font-weight:700;}}}.home_nav{width: 100%;margin: 0 auto;.classify{display: flex;flex-direction:row;.nav_content{flex: 1;margin-right: 20px;height:140px;background:rgba(255,255,255,1);box-shadow:0px 2px 8px 0px rgba(222,222,222,0.5);margin-bottom: 20px;line-height: 140px;text-align: center;span{margin-left: 20px;}}.nav_content:nth-child(4){margin-right: 0;}.r_20{margin-right: 0px;}}}}}}</style>
结构
<div class="main"><div class="home_content"><div class="backlog" ><strong>待办事项：</strong><span v-for="(item,i) in backlogList" :key="i" class="matter">{{item.name}} <span>{{item.number}}</span></span></div><div class="home_nav"><div class="classify" ><div class="nav_content" v-if="i<4" v-for="(item,i) in classifyList" :key="i"><img :src="item.classifyImg" alt=""><span>{{item.name}}</span></div></div><div class="classify"><div class="nav_content" v-if="i>=4" v-for="(item,i) in classifyList" :key="i"><img :src="item.classifyImg" alt=""><span>{{item.name}}</span></div></div></div> </div></div>
vue数据
data(){return {backlogList:[{name:'资源上报审核',number:'2'},{name:'新增角色权限',number:'13'},{name:'成员审核',number:'23'}],classifyList:[{name:'基本信息管理',classifyImg:require("../assets/images/home/baseMessage.png"),},{name:'展现管理',classifyImg:require("../assets/images/home/emerge.png"),},{name:'内容管理',classifyImg:require("../assets/images/home/content.png"),},{name:'用户管理',classifyImg:require("../assets/images/home/users.png"),},{name:'权限管理',classifyImg:require("../assets/images/home/jurisdiction.png"),},{name:'班级管理',classifyImg:require("../assets/images/home/class.png"),},{name:'校资管理',classifyImg:require("../assets/images/home/school.png"),},{name:'信息统计管理',classifyImg:require("../assets/images/home/statistics.png"),}],logo:require('../assets/images/home/logo.png'),circleUrl:require('../assets/images/home/user.jpg'),}},
总结：
这里用了两个盒子，每个4个，每个一等份，写了右边距和下边距同为20px，通过伪类控制每个盒子里最后一个元素的右边距为0；
数据我写了8个通过v-if条件判断来控制v-for循环输出的个数，保证每个盒子输出四个。。。
可能有更好的方法，此例子可当借鉴！
