个人中心切图

pages/index/index.vue

@@ -1,53 +1,43 @@
 <template>
-    <view class="content">
-        <image class="logo" src="/static/logo.png"></image>
-        <view class="text-area">
-            <text class="title">{{ title }}</text>
-        </view>
-    </view>
-</template>
+    <Cn-page :loading="loading">
+        <view slot="body">
+            <view class="index">
+                <Cn-grid title="实时消息">
+                    <Cn-grid-item background="#fff" src="/static/message.png" text="暂态事件"
+                        @click="jump('/pages/home/zantaishijian')"></Cn-grid-item>
+                    <Cn-grid-item background="#fff" src="/static/message.png" text="稳态越限"
+                        @click="jump('/pages/home/wentaiyuexian')"></Cn-grid-item>
+                    <Cn-grid-item background="#fff" src="/static/message.png" text="终端状态"
+                        @click="jump('/pages/home/zhongduanzhuangtai')"></Cn-grid-item>
+                </Cn-grid>
 
+            </view>
+        </view>
+    </Cn-page>
+</template>
 <script>
-const mqtt = require('mqtt')
 export default {
     data () {
         return {
-            title: '灿能'
+            loading: true
         }
     },
-    onLoad () {
-        console.log(mqtt);
-    },
     methods: {
-
+        jump (url) {
+            uni.navigateTo({
+                url: url
+            })
+        },
+    },
+    onShow () {
+        setTimeout(() => {
+            this.loading = false
+        }, 500);
     }
 }
 </script>
-
-<style>
-.content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.logo {
-    height: 200rpx;
-    width: 200rpx;
-    margin-top: 200rpx;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 50rpx;
-}
-
-.text-area {
-    display: flex;
-    justify-content: center;
-}
-
-.title {
-    font-size: 36rpx;
-    color: #8f8f94;
+<style lang="scss">
+.index {
+    padding: 34rpx;
 }
 </style>