modify

src/components/Awards.vue

@@ -1,5 +1,7 @@
 <template>
-    <div class="awards"/>
+    <div class="awards">
+        Awards
+    </div>
 </template>
 
 <script>

src/components/Matches.vue

@@ -1,5 +1,7 @@
 <template>
-    <div class="matches"/>
+    <div class="matches">
+        Matches
+    </div>
 </template>
 
 <script>

src/components/News.vue

@@ -1,5 +1,7 @@
 <template>
-    <div class="news"/>
+    <div class="news">
+        News
+    </div>
 </template>
 
 <script>

src/components/Ranks.vue

@@ -1,5 +1,7 @@
 <template>
-    <div class="ranks"/>
+    <div class="ranks">
+        Ranks
+    </div>
 </template>
 
 <script>

src/views/Home.vue

@@ -1,12 +1,30 @@
 <template>
     <div class="home">
-        Home
+        <div class="btn" @click="goMy">我的</div>
+        <div class="btn" @click="goIndex">开始竞猜</div>
     </div>
 </template>
 
 <script>
 export default {
-  name: 'home'
+  name: 'home',
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+    goMy () {
+      this.$router.push({
+        path: '/my'
+      })
+    },
+    goIndex () {
+      this.$router.push({
+        path: '/index/matches'
+      })
+    }
+  }
 }
 </script>
 
@@ -16,4 +34,14 @@ export default {
   height: 100%;
   background-color: red;
 }
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 3.888888rem;
+  height: 2rem;
+  margin: auto;
+  color: #fff;
+  border: 1px #fff solid;
+}
 </style>

src/views/Index.vue

@@ -1,12 +1,48 @@
 <template>
     <div class="index">
-        Index
+        <ul class="tabs">
+            <li>赛事</li>
+            <li>排行榜</li>
+            <li>活动</li>
+            <li>兑换</li>
+        </ul>
+        <div class="container">
+            <template v-if="'matches'===tabActive">
+                <Matches />
+            </template>
+            <template v-else-if="'ranks'===tabActive">
+                <Ranks />
+            </template>
+            <template v-else-if="'news'===tabActive">
+                <News />
+            </template>
+            <template v-else-if="'awards'===tabActive">
+                <Awards />
+            </template>
+        </div>
     </div>
 </template>
 
 <script>
+import Matches from '@/components/Matches'
+import Ranks from '@/components/Ranks'
+import News from '@/components/News'
+import Awards from '@/components/Awards'
 export default {
-  name: 'index'
+  name: 'index',
+  components: {Matches, Ranks, News, Awards},
+  data () {
+    return {
+      tabActive: 'matches' /* matches,ranks,news,awards */
+    }
+  },
+  created: function () {
+    let {tabActive} = this.$route.params
+    this.tabActive = tabActive
+  },
+  methods: {
+
+  }
 }
 </script>
 
@@ -16,4 +52,13 @@ export default {
   height: 100%;
   background-color: blue;
 }
+.tabs{
+  height: 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+}
+.container {
+  height: 6rem;
+}
 </style>