leftNav-height

src/assets/css/base.css

@@ -12,4 +12,13 @@
 	display:-webkit-box; 
 	-webkit-box-orient:vertical;
 	-webkit-line-clamp:2;
-}
+}
+
+html {
+  overflow-y: scroll;
+}
+
+/* 鼠标显示为手 */
+.hand {
+	cursor:pointe;
+}

src/components/leftNav/LeftNav.vue

@@ -0,0 +1,72 @@
+<template>
+	<div class="left-nav" :style="{height: navHeight}">
+		<div class="nav-title">善行共参与</div>
+		<div class="nav-item" v-for="item in navList" :key="item.id">
+			<div class="item-name">
+				{{item.name}}
+			</div>
+			<div class="item-icon">
+				>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			navList: {
+				type: Array,
+				default:[]
+			}
+		},
+		computed: {
+			navHeight() {
+				return this.navList.length*51 + 52 + 'px'
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.left-nav {
+		width: 265px;
+		// height: 154px;
+		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+		.nav-title {
+			height: 52px;
+			background-color: #d82020;
+			line-height: 52px;
+			text-align: center;
+			font-size: 18px;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #FFFFFF;
+			letter-spacing:3px;
+			cursor:default;
+		}
+		.nav-item {
+			cursor:pointer;
+			border-top: 1px #fcfbfb solid;
+			display: flex;
+			height: 50px;
+			background-color: #f2eeef;
+			justify-content: space-between;
+			line-height: 50px;
+			padding: 0 37px 0 26px;
+			.item-name {
+				font-size: 16px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+				letter-spacing:1px
+			}
+			.item-icon {
+				font-size: 16px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #999999;
+			}
+		}
+	}
+</style>

src/components/navBar/NavBar.vue

@@ -49,6 +49,7 @@ export default {
   font-weight: bold;
   color: #ffffff;
   letter-spacing:3px;
+  margin-bottom: 24px;
   .bar-item {
     width: 200px;
     height: 60px;
@@ -56,6 +57,7 @@ export default {
     justify-content: center;
     align-items: center;
     font-family: PingFang SC;
+	cursor:pointer;
     img {
       width: 20px;
       height: 20px;

src/components/topLogo/TopLogo.vue

@@ -31,6 +31,7 @@ export default {};
     display: flex;
     flex-direction: column;
     justify-content: center;
+	cursor:default;
     .nameo {
       // width: 369px;
       height: 48px;

src/views/About.vue

@@ -1,27 +1,24 @@
 <template>
 	<div class="about">
-		<div class="left-nav">
-			<div class="nav-title">善行共参与</div>
-			<div class="nav-item" v-for="item in navList" :key="item.id">
-				<div class="item-name">
-					{{item.name}}
-				</div>
-				<div class="item-icon">
-					>
-				</div>
-			</div>
+		<left-nav :navList="navList"></left-nav>
+		<div class="right-wrapper">
 		</div>
 	</div>
 </template>
 
 <script>
+	import LeftNav from '../components/leftNav/LeftNav.vue'
 	export default {
+		components: {
+			LeftNav
+		},
 		data() {
 			return {
 				navList: [
 					{ id: 1, name: '关于我们'},
 					{ id: 2, name: '联系我们'}
-				]
+				],
+				title: '关于我们'
 			}
 			
 		}
@@ -29,42 +26,15 @@
 </script>
 
 <style lang="scss" scoped>
-	.left-nav {
-		width: 265px;
-		// height: 154px;
-		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-		.nav-title {
-			height: 52px;
-			background-color: #d82020;
-			line-height: 52px;
-			text-align: center;
-			font-size: 18px;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #FFFFFF;
-			letter-spacing:3px
-		}
-		.nav-item {
-			border-top: 1px #fcfbfb solid;
-			display: flex;
-			height: 50px;
-			background-color: #f2eeef;
-			justify-content: space-between;
-			line-height: 50px;
-			padding: 0 37px 0 26px;
-			.item-name {
-				font-size: 16px;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #333333;
-				letter-spacing:1px
-			}
-			.item-icon {
-				font-size: 16px;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #999999;
-			}
+	.about {
+		width: 1200px;
+		margin: 0 auto;
+		display: flex;
+		justify-content: space-between;
+		.right-wrapper {
+			width: 915px;
+			min-height: 776px;
+			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
 		}
 	}
 </style>

src/views/homeChild/ItemTitle.vue

@@ -37,6 +37,9 @@ export default {
     height: 38px;
     line-height: 40px;
     background-color: #d82020;
+	position: relative;
+	top: -1px;
+	letter-spacing:2px
   }
   .more {
     display: inline-block;