首页布局显示

src/pages/index.vue

@@ -2,7 +2,10 @@
 <el-container>
     <el-header style="background-color:#545c64">
         <el-row type="flex" style="height:100%;" justify="space-between" align="middle">
-            <div style="color:#fff">椰子后台管理系统</div>
+            <div style="color:#fff">
+                <span>椰子后台管理系统</span>
+                <i class="el-icon-s-home" style="margin-left:100px" @click="$router.push('/')"></i>
+            </div>
             <div>
                 <el-dropdown @command="onUserEdit">
                     <span class="el-dropdown-link">

src/pages/subPages/home.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-card>
+    <el-form ref="form" :model="formData" label-width="120px">
+      <el-form-item label="商户号：">
+        {{formData.admin_id}}
+      </el-form-item>
+      <el-form-item label="账号姓名：">
+        {{formData.name}}
+      </el-form-item>
+      <el-form-item label="实时费率：">
+        {{formData.phone_fate}}
+      </el-form-item>
+    </el-form>
+    <el-form ref="member" :model="member" label-width="120px">
+      <el-form-item label="可用余额：">
+        {{member.available_predeposit}}
+      </el-form-item>
+    </el-form>
+  </el-card>
+</template>
+
+<script>
+import { getUserInfo } from '@/api'
+export default {
+  name: 'home',
+  data() {
+    return {
+      // 表单数据
+      formData: {},
+      member: {}
+      // available_predeposit
+    }
+  },
+  created() {
+    this.getUserInfo()
+  },
+  methods: {
+    async getUserInfo() {
+      const res = await getUserInfo()
+      console.log('个人中心', res);
+      this.formData = res.datas
+      this.member = res.datas.member
+      // this.available_predeposit = res.datas.member.available_predeposit
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>