ytj

src/common/css/reset.css

@@ -54,4 +54,10 @@ select option {
 	width: 100%;
 	height: 100%;
 	object-fit: contain;
+}
+
+.mainPage{
+	width: 100%;
+	height: 100%;
+	position: relative;
 }

src/module/user/mainPage/coffeeIndex/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="mainPage">
+    城咖啡
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  data () {
+    return {
+      
+    }
+  },
+  computed: {
+    
+  },
+  components: {
+    
+  },
+  created () {
+    
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/module/user/mainPage/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="mainPage flex-v">
+    <div class="subPage flex-item">
+      <div>
+        <router-view></router-view>
+      </div>
+    </div>
+    <nav class="flex-h">
+      <router-link :to="{name:item.pathName,query:{}}" class="flex-item" active-class="active" v-for="(item, index) in tabBar" :key="index">
+        <div>
+          <img v-if="index==0" class="centerLabel" src="../../../common/icon/tabBar-icon-1.png" alt="">
+          <img v-if="index==1" class="centerLabel" src="../../../common/icon/tabBar-icon-2.png" alt="">
+          <img v-if="index==2" class="centerLabel" src="../../../common/icon/tabBar-icon-3.png" alt="">
+        </div>
+        <span>{{item.name}}</span>
+      </router-link>
+    </nav>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  data () {
+    return {
+      tabBar: [{
+        pathName:'indexPage',
+        name:'会所'
+      },{
+        pathName:'coffeeIndex',
+        name:'城咖啡'
+      },{
+        pathName:'userCenter',
+        name:'会员'
+      }]
+    }
+  },
+  computed: {
+    
+  },
+  components: {
+    
+  },
+  created () {
+    
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/module/user/mainPage/indexPage/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="mainPage">
+    首页
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  data () {
+    return {
+      
+    }
+  },
+  computed: {
+    
+  },
+  components: {
+    
+  },
+  created () {
+    
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/module/user/mainPage/page.scss

@@ -0,0 +1,46 @@
+.mainPage{
+  .subPage{
+    &>div{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      z-index: 1;
+    }
+  }
+  &>nav{
+    background: #fff;
+    position: relative;
+    z-index: 100;
+    box-shadow: 0 0 .1rem .02rem rgba(0, 0, 0, .05);
+    a{
+      text-align: center;
+      div{
+        width: 100%;
+        height: .2rem;
+        position: relative;
+        margin-top: .06rem;
+      }
+      img{
+        max-height: .2rem;
+        max-width: .2rem;
+        filter: grayscale(100%);
+        -webkit-filter: grayscale(100%);
+      }
+      span{
+        width: 100%;
+        display: inline-block;
+        text-align: center;
+        line-height: .2rem;
+        font-size: .1rem;
+      }
+    }
+    a.active{
+      img{
+        filter: grayscale(0);
+        -webkit-filter: grayscale(0);
+      }
+    }
+  }
+}

src/module/user/router.js

@@ -1,17 +1,41 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 
-import userCenter from './userCenter/index'
+import mainPage from './mainPage/index' // 主页
+import indexPage from './mainPage/indexPage/index' // 首页
+import coffeeIndex from './mainPage/coffeeIndex/index' // 城咖啡
+import userCenter from './mainPage/userCenter/index' // 个人中心
 
 Vue.use(Router)
 
 const router = new Router({
   routes: [{
-    path: '/userCenter',
-    name: 'userCenter',
-    component: userCenter,
-    children: []
-  }]
+    path: '/mainPage',
+    name: 'mainPage',
+    component: mainPage,
+    children: [{
+      path: 'indexPage',
+      name: 'indexPage',
+      component: indexPage,
+      children: []
+    },{
+      path: 'coffeeIndex',
+      name: 'coffeeIndex',
+      component: coffeeIndex,
+      children: []
+    },{
+      path: 'userCenter',
+      name: 'userCenter',
+      component: userCenter,
+      children: []
+    }]
+  }],
+  linkActiveClass: 'active',
+})
+
+router.beforeEach((to, from, next) => {
+  
+  next()
 })
 
 export default router