111

src/components/leftNav/LeftNav.vue

@@ -1,28 +1,19 @@
 <template>
 	<div class="wrapper">
 		<div class="left-nav" :style="{height: navHeight}">
-			<div class="nav-title">善行共参与</div>
+			<div class="nav-title">关于我们</div>
 			<div class="nav-item" v-for="item in navList" :key="item.id" :class="{'action': currentUrl.indexOf(item.path) !== -1 }" @click="navTo(item.path)">
 				<div class="item-name">
+					<div class="yuan">
+					</div>
 					{{item.name}}
 				</div>
 				<div class="item-icon">
-					>
+					
 				</div>
 			</div>
 		</div>
 		<div class="right-content">
-			<div class="title moren" v-if="isShow">
-				{{rightTitle}}
-			</div>
-			<template v-else>
-				<div class="title hand" style="display: inline-block;" :class="{'action': currentIndex !== 0}" @click="changeClik(0)">
-					基础知识
-				</div>
-				<div class="title hand" style="display: inline-block;" :class="{'action': currentIndex !== 1}" @click="changeClik(1)">
-					如何报名
-				</div>
-			</template>
 			<div style="padding: 35px 50px 35px 50px;" class="line">
 				<slot></slot>
 			</div>
@@ -133,9 +124,11 @@
 
 <style lang="scss" scoped>
 	.wrapper {
-		width: 1200px;
+		margin-top: 20px;
+		max-width: 1920px;
+		min-width: 1080px;
 		display: flex;
-		justify-content: space-between;
+		justify-content: flex-start;
 		
 	}
 	.left-nav {
@@ -144,7 +137,7 @@
 		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
 		.nav-title {
 			height: 52px;
-			background-color: #d82020;
+			background-color: #0165B5;
 			line-height: 52px;
 			text-align: center;
 			font-size: 18px;
@@ -156,7 +149,7 @@
 		}
 		.nav-item {
 			cursor:pointer;
-			border-top: 1px #fcfbfb solid;
+			margin-top: 5px;
 			display: flex;
 			height: 50px;
 			background-color: #f2eeef;
@@ -164,11 +157,20 @@
 			line-height: 50px;
 			padding: 0 37px 0 26px;
 			.item-name {
+				display: flex;
 				font-size: 16px;
 				font-family: PingFang SC;
 				font-weight: bold;
 				color: #333333;
-				letter-spacing:1px
+				letter-spacing:1px;
+				align-items: center;
+				.yuan {
+					width: 10px;
+					height: 10px;
+					border-radius: 50%;
+					background: #98B6CE;
+					margin-right: 10px;
+				}
 			}
 			.item-icon {
 				font-size: 16px;
@@ -178,32 +180,14 @@
 			}
 		}
 		.action {
-			background-color: #f7dfdf;
+			background-color: #0165B5;
 		}
 	}
 	.right-content {
+		margin-left: 20px;
 		width: 915px;
-		min-height: 706px;
-		border-top: 2px solid #D82020;
-		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-		.title {
-			border: 2px #d82020 solid;
-			width: 156px;
-			height: 50px;
-			line-height: 50px;
-			text-align: center;
-			background: #D82020;
-			font-size: 18px;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #FFFFFF;
-			position: relative;
-			top: -2px;
-		}
-		.action {
-			background: #FFFFFF;
-			color: #D82020;
-		}
+		min-height: 700px;
+		
 	}
 	.line {
 		line-height: 1.5;

src/components/navBar/NavBar.vue

@@ -61,7 +61,8 @@ export default {
 			  console.log("1")
 			 this.currentIndex = index
 			 console.log(this.currentIndex)
-			 this.$router.push(url) 
+			 console.log(url,55555555555555)
+			 this.$router.push('/about') 
 		  }
 		  
 		  

src/router.js

@@ -1,65 +0,0 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-
-const routerPush = Router.prototype.push  
-
-Router.prototype.push = function push(location) {
- 
-  // if(typeof(location)=="string"){
-  //   var Separator = "&";
-  //   if(location.indexOf('?')==-1) { Separator='?'; }
-  //   location = location + Separator + "random=" + Math.random();
-  // }
-
-  return routerPush.call(this, location).catch(error => error)
-}
-
-Vue.use(Router)
-
-export default new Router({
-  // mode: 'history',
-  base: process.env.BASE_URL,
-  routes: [
-    {
-      path: '/',
-      redirect: '/home'
-    },
-    {
-      path: '/home',
-      name: 'home',
-      component: () => import('./views/Home.vue'),
-      meta: {
-        title: '添利'
-      }
-    },
-	{
-	  path: '/about',
-	  name: 'about',
-	  component: () => import('./views/About.vue'),
-	  meta: {
-	    title: '关于我们'
-	  }
-	},
-	{
-	  path: '/product',
-	  name: 'product',
-	  component: () => import('./views/Product.vue'),
-	  meta: {
-	    title: '产品介绍'
-	  }
-	},
-	{
-	  path: '/concat',
-	  name: 'concat',
-	  component: () => import('./views/Concat.vue'),
-	  meta: {
-	    title: '联系我们'
-	  }
-	},
-	
-	{
-		path: '*',
-		redirect: '/home'
-	}
-  ]
-})

src/router/index.js

@@ -1,32 +1,62 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-const routerPush = Router.prototype.push  
+const routerPush = Router.prototype.push
 Vue.use(Router)
-const ter =  new Router({
-  // mode: 'history',
-  base: process.env.BASE_URL,
-  routes: [
-    {
-      path: '/',
-      redirect: '/home'
-    },
-    {
-      path: '/home',
-      name: 'home',
-      component: () => import('../views/Home.vue'),
-      meta: {
-        title: '添利'
-      }
-    },
-	
-	{
-		path: '*',
-		redirect: '/home'
-	}
-  ]
-})
-
-
+const ter = new Router({
+	// mode: 'history',
+	base: process.env.BASE_URL,
+	routes: [{
+			path: '/',
+			redirect: '/home'
+		},
+		{
+			path: '/home',
+			name: 'home',
+			component: () => import('../views/Home.vue'),
+			meta: {
+				title: '添利'
+			}
+		},
+		{
+			path: '/about',
+			name: 'about',
+			component: () => import('../views/About.vue'),
+			redirect: '/about/company',
+			meta: {
+				title: '关于我们'
+			},
+			children: [{
+					path: 'company',
+					name: 'company',
+					component: () => import('../views/about/Company.vue'),
+					meta: {
+						title: '公司介绍'
+					}
+				},
+				{
+					path: 'concat',
+					name: 'concat',
+					component: () => import('../views/about/Concat.vue'),
+					meta: {
+						title: '联系我们'
+					}
+				},
+				{
+					path: 'product',
+					name: 'product',
+					component: () => import('../views/about/Product.vue'),
+					meta: {
+						title: '产品介绍'
+					}
+				}
+			]
+		},
 
+		{
+			path: '*',
+			redirect: '/home'
+		}
+	]
+})
 
 export default ter

src/utils/request.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import router from '../router.js'
+import router from '../router/index.js'
 import {
 	Message
 } from 'element-ui'

src/views/About.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="about">
-		<left-nav :navList="navList">
+		<left-nav :navList="navList" :rightTitle="rightTitle" :currentIndex="currentIndex">
 			<div id="" v-html="content">
-				
+				<router-view></router-view>
 			</div>
 		</left-nav>
 	</div>
@@ -16,7 +16,9 @@ export default {
 	},
 	data(){
 		return {
-			navList:[{index:0,name:'公司介绍',path:'/about'},{index:1,name:'产品介绍',path:'/product'},{index:2,name:'联系我们',path:'/concat'}]
+			navList:[{index:0,name:'公司介绍',path:'/about/Company'},{index:1,name:'产品介绍',path:'/about/Product'},{index:2,name:'联系我们',path:'/about/Concat'}],
+			rightTitle:'关于我们',
+			currentIndex: 0
 		}
 	}
 }

src/views/about/Product.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>