《前端》自定义的tab样式框--2020年8月5日

想要实现这种功能：

 

demo献上：

主要是css可以在用的时候复制上：

 .tab {
            display: flex;
            justify-content: space-between;
            text-align: center;
            margin-bottom: 10px;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        
        .tab-item {
            box-sizing: border-box;
            width: 45%;
            background-color: #fff;
            padding: 4px 10px;
            border-radius: 6px;
            line-height: 15x;
            color: #666;
            font-size: 12px;
            border: 1px solid #eee;
            margin-bottom: 10px;
        }

html：

<div class="tab">
    <div class="tab-item" v-for="(item, index) in tabInfo">
        <div class="number">{{item.data || 0}}</div>
        <div class="name">{{item.name}}</div>
    </div>
</div>

js：

var vm = new Vue({
    el: "#app",
    data: {
          tabInfo: [{
               "name": "总计划",
               "data": "44"
                }, {
               "name": "完成数量",
               "data": "10"
                }, {
               "name": "待开工",
               "data": "10"
                }, {
                "name": "进行中",
                "data": "10"
                }]
            },
    }
})