|
@@ -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>
|