个人中心切图

components/Cn-grid/Cn-grid.vue

@@ -0,0 +1,52 @@
+
+<template>
+    <view class="grid-card">
+        <view class="grid-card-title" v-if="title">{{title}}</view>
+        <view class="grid-card-content">
+            <slot />
+            <Rc-grid-item background="#fff" v-for="item in seat" :key="item"></Rc-grid-item>
+        </view>
+    </view>
+</template>
+<script>
+export default {
+    props: ["title"],
+    data () {
+        return {
+            seat: [] // 占位
+        };
+    },
+    mounted () {
+        console.warn(this.$slots.default.length);
+        let num = this.$slots.default.length;
+        let yushu = num % 3;
+        if (yushu > 0) {
+            for (let i = 0; i < 3 - yushu; i++) {
+                this.seat.push(i);
+            }
+        }
+    },
+    components: {}
+};
+</script>
+<style lang='scss'>
+.grid-card {
+    border-radius: 12rpx;
+    overflow: hidden;
+    background: #fff;
+    .grid-card-title {
+        height: 80rpx;
+        line-height: 80rpx;
+        text-indent: 40rpx;
+        border-bottom: 2rpx solid #f6f7f8;
+        color: #999;
+        font-size: 28rpx;
+    }
+    .grid-card-content {
+        background: #f6f7f8;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-gap: 2rpx;
+    }
+}
+</style>