1

src/router/index.js

@@ -57,6 +57,13 @@ const routes = [
     meta: { title: '创新服务', isleftarrow: true },
     component: () => import('../views/service/detail.vue'),
   },
+  // 个人中心
+  {
+    path: '/user/index',
+    name: 'user_index',
+    meta: { title: '个人中心', isleftarrow: true },
+    component: () => import('../views/user/index.vue'),
+  },
   // // 绑定
   // {
   //   path: '/bind',

src/views/user/index copy.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="one">
+            <el-image :src="imgUrl"></el-image>
+            <p>{{ user.name }}</p>
+          </el-col>
+          <el-col :span="24" class="two">
+            <clickBtn></clickBtn>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import clickBtn from './parts/clickBtn.vue';
+
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    NavBar,
+    footInfo,
+    clickBtn,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      imgUrl: require('@/assets/test.jpg'),
+    };
+  },
+  created() {
+    console.log(this.user.uid);
+  },
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+}
+.main {
+  min-height: 570px;
+  .one {
+    text-align: center;
+    background-color: #fff;
+    padding: 15px 0;
+    margin: 0 0 1px 0;
+    .el-image {
+      width: 80px;
+      height: 80px;
+      border-radius: 90px;
+    }
+    p {
+      font-size: 18px;
+      padding: 15px 0;
+    }
+  }
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+</style>

src/views/user/index.vue

@@ -6,13 +6,7 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          <el-col :span="24" class="one">
-            <el-image :src="imgUrl"></el-image>
-            <p>{{ user.name }}</p>
-          </el-col>
-          <el-col :span="24" class="two">
-            <clickBtn></clickBtn>
-          </el-col>
+          个人中心
         </el-col>
         <el-col :span="24" class="foot">
           <footInfo></footInfo>
@@ -23,18 +17,15 @@
 </template>
 
 <script>
-import { mapState, createNamespacedHelpers } from 'vuex';
 import NavBar from '@/layout/common/topInfo.vue';
 import footInfo from '@/layout/common/footInfo.vue';
-import clickBtn from './parts/clickBtn.vue';
-
+import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
   components: {
     NavBar,
     footInfo,
-    clickBtn,
   },
   data: function() {
     return {
@@ -44,12 +35,9 @@ export default {
       isleftarrow: '',
       // 返回
       navShow: true,
-      imgUrl: require('@/assets/test.jpg'),
     };
   },
-  created() {
-    console.log(this.user.uid);
-  },
+  created() {},
   methods: {},
   computed: {
     ...mapState(['user']),
@@ -58,6 +46,9 @@ export default {
     this.title = this.$route.meta.title;
     this.isleftarrow = this.$route.meta.isleftarrow;
   },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
 };
 </script>
 
@@ -71,26 +62,9 @@ export default {
 .top {
   height: 46px;
   overflow: hidden;
-  position: relative;
-  z-index: 999;
 }
 .main {
   min-height: 570px;
-  .one {
-    text-align: center;
-    background-color: #fff;
-    padding: 15px 0;
-    margin: 0 0 1px 0;
-    .el-image {
-      width: 80px;
-      height: 80px;
-      border-radius: 90px;
-    }
-    p {
-      font-size: 18px;
-      padding: 15px 0;
-    }
-  }
 }
 .foot {
   position: absolute;

src/views/user/parts/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="one">
+            <el-image :src="imgUrl"></el-image>
+            <p>{{ user.name }}</p>
+          </el-col>
+          <el-col :span="24" class="two">
+            <clickBtn></clickBtn>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import clickBtn from './parts/clickBtn.vue';
+
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    NavBar,
+    footInfo,
+    clickBtn,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      imgUrl: require('@/assets/test.jpg'),
+    };
+  },
+  created() {
+    console.log(this.user.uid);
+  },
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+}
+.main {
+  min-height: 570px;
+  .one {
+    text-align: center;
+    background-color: #fff;
+    padding: 15px 0;
+    margin: 0 0 1px 0;
+    .el-image {
+      width: 80px;
+      height: 80px;
+      border-radius: 90px;
+    }
+    p {
+      font-size: 18px;
+      padding: 15px 0;
+    }
+  }
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+</style>