第二次提交

src/App.vue

@@ -0,0 +1,40 @@
+<template>
+<div id="app">
+  <transition name="fade" mode="out-in">
+    <router-view></router-view>
+  </transition>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'app',
+  components: {}
+}
+</script>
+
+<style>
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+    font-size: 14px;
+    -webkit-font-smoothing: antialiased;
+}
+ 
+#app {
+    top: 0;
+    bottom: 0;
+    width: 100%;
+}
+ 
+.fade-enter-active,
+.fade-leave-active {
+    transition: all 0.2s ease;
+}
+ 
+.fade-enter,
+.fade-leave-active {
+    opacity: 0;
+}
+</style>

src/components/Main.vue

@@ -0,0 +1,139 @@
+<template>
+<section>
+<header>
+	<div>
+		<img src="@/assets/logo.jpg" />
+        <ul :default-active="$route" :collapse="collapsed">
+            <template v-for="(item,index) in menus">
+                <li v-if="!item.hide"  :key="item.desc" @click="getChildren(index)">{{item.desc}}</li>
+            </template>
+        </ul>
+	</div>
+</header>
+<div id="child_menu">
+	<div class="left">
+		<label>行数</label>
+		<input type="text" style="width: 40px"/>
+		<label>确认</label>
+	</div>
+	<ul>
+		<template v-for="item in child_menus">
+			<li :key="item.desc">{{item.desc}}</li>
+		</template>
+	</ul>
+</div>
+<router-view>
+
+</router-view>
+</section>
+</template>
+
+<script>
+let data = () => {
+  return {
+    collapsed: false,
+	menus: [],
+	child_menus: []
+  }
+}
+
+let initMenu = function() {
+	for (let i in this.$router.options.routes) {
+		let root = this.$router.options.routes[i]
+		this.menus.push(root)
+	}
+}
+
+let getChildren = function(index){
+	this.child_menus = []
+	for (let i in this.menus[index].children) {
+		let root = this.menus[index].children[i]
+		this.child_menus.push(root)
+	}
+}
+
+export default {
+  data: data,
+  methods: {
+	initMenu,
+	getChildren
+  },
+  mounted: function() {
+    this.initMenu()
+  }
+}
+</script>
+
+<style scoped>
+header {
+	height: 58px;
+	background: #befae0;
+	border-top:1px solid #00cd72;
+	border-bottom:1px solid #00cd72;
+}
+
+header div{
+	overflow: hidden;
+	width:1200px;
+	margin: 0 auto;
+}
+
+header div ul{
+	margin: 0 auto;
+	overflow: hidden;
+	padding: 0;
+	float: left;
+}
+
+header div img{
+	float: left;
+}
+
+header div ul li{
+	float: left;
+	list-style: none;
+	width: 80px;
+	text-align: center;
+	line-height: 58px;
+	font-size: 14px;
+	cursor: pointer;
+}
+
+.is-active{
+	color: red;
+}
+
+header div ul li:nth-child(1){
+	width: 285px;
+}
+
+header div ul li:nth-child(8){
+	margin-left: 216px;
+}
+
+#child_menu{
+	overflow: hidden;
+	width: 1200px;
+	margin: 0 auto;
+}
+
+#child_menu ul {
+	margin: 5px auto;
+	overflow: hidden;
+	padding: 0;
+	float: left;
+}
+
+#child_menu ul li{
+	float: left;
+	list-style: none;
+	text-align: center;
+	margin-left: 20px;
+	cursor: pointer;
+}
+
+#child_menu .left{
+	float: left;
+	padding: 5px;
+}
+</style>

src/main.js

@@ -0,0 +1,17 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import axios from 'axios'
+
+Vue.config.productionTip = false
+Vue.prototype.$ajax = axios
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

src/router/index.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Main from '@/components/Main'
+
+Vue.use(Router)
+
+let _router = [
+  { path: '/', component: Main, name: 'Main', desc: '', hide: true },
+  { path: '/1', component: Main, name: 'Main', desc: '制表' },
+  { path: '/2', component: Main, name: 'Main', desc: '配件', 
+    children: [
+    { path: '/', name: 'Main', desc: '按钮' },
+    { path: '/', name: 'Main', desc: '单号' },
+    { path: '/', name: 'Main', desc: '页码' },
+    { path: '/', name: 'Main', desc: '方框' },
+    { path: '/', name: 'Main', desc: '小页面' }
+    ]
+  },
+  { path: '/3', component: Main, name: 'Main', desc: '分列' },
+  { path: '/4', component: Main, name: 'Main', desc: '抬头' },
+  { path: '/5', component: Main, name: 'Main', desc: '导航条' },
+  { path: '/6', component: Main, name: 'Main', desc: '表外行' },
+  { path: '/7', component: Main, name: 'Main', desc: '背景图' },
+  { path: '/8', component: Main, name: 'Main', desc: '组合' },
+  { path: '/9', component: Main, name: 'Main', desc: '档案' }
+]
+
+const router = new Router({
+  mode: 'hash',
+  routes: _router
+})
+
+export default router