调整页面结构

src/App.vue

@@ -1,17 +1,14 @@
 <template>
   <div id="app">
-    <top-menu></top-menu>
     <router-view />
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import TopMenu from '@/components/TopMenu.vue'
 
 @Component({
   name: 'App',
   components: {
-    TopMenu
   }
 })
 export default class extends Vue {

src/components/market/CardList.vue

@@ -8,8 +8,8 @@
 </template>
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import Pagination from '@/components/Pagination.vue'
-import Card from '@/components/Card.vue'
+import Pagination from '@/components/market/Pagination.vue'
+import Card from '@/components/market/Card.vue'
 
 @Component({
   name: 'CardList',

src/components/market/ItemDetail.vue

@@ -94,11 +94,11 @@
 </template>
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import HeroLevel from '@/components/HeroLevel.vue'
-import HeroClass from '@/components/HeroClass.vue'
-import HeroTrophy from '@/components/HeroTrophy.vue'
-import RarityCard from '@/components/RarityCard.vue'
-import SkinRarityCard from '@/components/SkinRarityCard.vue'
+import HeroLevel from '@/components/market/HeroLevel.vue'
+import HeroClass from '@/components/market/HeroClass.vue'
+import HeroTrophy from '@/components/market/HeroTrophy.vue'
+import RarityCard from '@/components/market/RarityCard.vue'
+import SkinRarityCard from '@/components/market/SkinRarityCard.vue'
 
 @Component({
   name: 'ItemDetail',

src/components/market/SearchPanel.vue

@@ -139,10 +139,10 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import FilterItem from '@/components/FilterItem.vue'
-import SelectSection from '@/components/SelectSection.vue'
-import RangeNumberSlider from '@/components/RangeNumberSlider.vue'
-import RangeMarkSlider from '@/components/RangeMarkSlider.vue'
+import FilterItem from '@/components/market/FilterItem.vue'
+import SelectSection from '@/components/market/SelectSection.vue'
+import RangeNumberSlider from '@/components/market/RangeNumberSlider.vue'
+import RangeMarkSlider from '@/components/market/RangeMarkSlider.vue'
 
 @Component({
   name: 'SearchPanel',

src/components/market/SearchResult.vue

@@ -12,9 +12,9 @@
 </template>
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import SortSelect from '@/components/SortSelect.vue'
-import CardList from '@/components/CardList.vue'
-import ResultNo from '@/components/ResultNo.vue'
+import SortSelect from '@/components/market/SortSelect.vue'
+import CardList from '@/components/market/CardList.vue'
+import ResultNo from '@/components/market/ResultNo.vue'
 
 @Component({
   name: 'SearchResult',

src/router/index.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
-import Home from '../views/Home.vue'
+import Main from '../views/Main.vue'
+import Market from '../views/Market.vue'
 import Item from '../views/Item.vue'
 
 Vue.use(VueRouter)
@@ -8,8 +9,13 @@ Vue.use(VueRouter)
 const routes: Array<RouteConfig> = [
   {
     path: '/',
-    name: 'Home',
-    component: Home
+    name: 'Main',
+    component: Main
+  },
+  {
+    path: '/market',
+    name: 'Market',
+    component: Market
   },
   {
     path: '/item',

src/views/Item.vue

@@ -1,16 +1,21 @@
 <template>
-  <div class="root">
-    <item-detail></item-detail>
+  <div>
+    <top-menu></top-menu>
+    <div class="root">
+      <item-detail></item-detail>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import ItemDetail from '@/components/ItemDetail.vue'
+import ItemDetail from '@/components/market/ItemDetail.vue'
+import TopMenu from '@/components/market/TopMenu.vue'
 
 @Component({
   components: {
-    ItemDetail
+    ItemDetail,
+    TopMenu
   }
 })
 export default class Item extends Vue {}

src/views/Main.vue

@@ -0,0 +1,17 @@
+<template>
+  <section class="root">
+    <div class="container">
+    </div>
+  </section>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+@Component({
+  components: {
+  }
+})
+export default class Index extends Vue {}
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/Market.vue

@@ -1,24 +1,29 @@
 <template>
+  <div>
+  <top-menu></top-menu>
   <section class="root">
     <div class="container">
       <search-panel></search-panel>
       <search-result></search-result>
     </div>
   </section>
+  </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import SearchPanel from '@/components/SearchPanel.vue'
-import SearchResult from '@/components/SearchResult.vue'
+import SearchPanel from '@/components/market/SearchPanel.vue'
+import SearchResult from '@/components/market/SearchResult.vue'
+import TopMenu from '@/components/market/TopMenu.vue'
 
 @Component({
   components: {
     SearchResult,
-    SearchPanel
+    SearchPanel,
+    TopMenu
   }
 })
-export default class Home extends Vue {}
+export default class Market extends Vue {}
 </script>
 <style lang="scss" scoped>
 .root {