个人中心切图

components/Cn-grid-item/Cn-grid-item.vue

@@ -0,0 +1,70 @@
+
+<template>
+    <view class="grid-card-content-item" @click="$emit('click')">
+        <view class="grid-card-content-item-icon" :style="{background:background}">
+            <image class="grid-card-content-item-icon-2" mode="aspectFit" :src="src" />
+            <view class="grid-card-badge" v-if="badge > 0">{{badge}}</view>
+        </view>
+        <view class="grid-card-content-item-text">{{text || ''}}</view>
+    </view>
+</template>
+<script>
+export default {
+    props: ["src", "text", "badge", 'background'],
+    data () {
+        return {};
+    },
+    components: {}
+};
+</script>
+<style lang='scss'>
+.grid-card-content-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: #fff;
+    height: 236rpx;
+
+    .grid-card-content-item-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        width: 80rpx;
+        height: 80rpx;
+        background: rgba(78, 159, 255, 1);
+        border-radius: 20rpx;
+
+        .grid-card-content-item-icon-2 {
+            width: 40rpx;
+            height: 40rpx;
+        }
+
+        .grid-card-badge {
+            box-sizing: border-box;
+            position: absolute;
+            right: -14rpx;
+            top: -14rpx;
+            height: 30rpx;
+            min-width: 30rpx;
+            padding: 0 6rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: red;
+            font-size: 20rpx;
+            color: #fff;
+            border-radius: 20rpx;
+        }
+    }
+
+    .grid-card-content-item-text {
+        max-width: 80%;
+        text-align: center;
+        margin-top: 16rpx;
+        color: #111;
+        font-size: 28rpx;
+    }
+}
+</style>    

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>    

components/Cn-page/Cn-page.vue

@@ -1,7 +1,7 @@
 <template>
     <view class="Cn-page">
         <template v-if="showLoginMsk && !login">
-            <navigator url="/pages/login/login" hover-class="none" class="page-login-btn">登录</navigator>
+            <navigator url="/pages/user/login" hover-class="none" class="page-login-btn">登录</navigator>
         </template>
         <template v-else>
             <view class="loading" v-if="loading">