4 years ago · fbc2c9e54a
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 
				 <!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				+<html lang="zh-CN">
			
 
				   <head>
			
 
				     <meta charset="utf-8">
			
 
				     <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,10 @@
 
				 <template>
			
 
				   <div id="app">
			
 
				     <top-logo></top-logo>
			
 
				-    <nav-bar></nav-bar>
			
 
				-    <router-view />

			
 
				+    <nav-bar></nav-bar>

			
 
				+	<div class="main-wrapper">

			
 
				+		<router-view />

			
 
				+	</div>

			
 
				 	<page-bottom></page-bottom>
			
 
				   </div>
			
 
				 </template>
			
@@ -18,6 +20,9 @@ export default {
 
				   }
			
 
				 }
			
 
				 </script>
			
 
				-<style lang="scss">
			
 
				-
			
 
				+<style lang="scss" scoped>
			
 
				+.main-wrapper {

			
 
				+	width: 1200px;

			
 
				+	margin: 0 auto;

			
 
				+}
			
 
				 </style>
			
--- a/src/assets/css/base.css
+++ b/src/assets/css/base.css
@@ -20,5 +20,8 @@ html {
 
				 

			
 
				 /* 鼠标显示为手 */

			
 
				 .hand {

			
 
				-	cursor:pointe;

			
 
				-}
			
 
				+	cursor:pointer;

			
 
				+}

			
 
				+.moren {

			
 
				+	cursor: default;

			
 
				+}
			
--- a/src/components/leftNav/LeftNav.vue
+++ b/src/components/leftNav/LeftNav.vue
@@ -1,13 +1,30 @@
 
				 <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 class="wrapper">

			
 
				+		<div class="left-nav" :style="{height: navHeight}">

			
 
				+			<div class="nav-title">善行共参与</div>

			
 
				+			<div class="nav-item" v-for="item in navList" :key="item.id" :class="{'action': currentUrl === item.path}" @click="navTo(item.path)">

			
 
				+				<div class="item-name">

			
 
				+					{{item.name}}

			
 
				+				</div>

			
 
				+				<div class="item-icon">

			
 
				+					>

			
 
				+				</div>

			
 
				 			</div>

			
 
				-			<div class="item-icon">

			
 
				-				>

			
 
				+		</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>

			
 
				+			

			
 
				+			<slot></slot>

			
 
				 		</div>

			
 
				 	</div>
			
 
				 </template>
			
@@ -21,14 +38,85 @@
 
				 			}

			
 
				 		},

			
 
				 		computed: {

			
 
				+			isShow() {

			
 
				+				return this.$route.path !== '/donation/Hpc'

			
 
				+			},

			
 
				 			navHeight() {

			
 
				 				return this.navList.length*51 + 52 + 'px'

			
 
				+			},

			
 
				+			currentUrl() {

			
 
				+				return this.$route.path

			
 
				+			},

			
 
				+			rightTitle() {

			
 
				+				let title = ''

			
 
				+				switch(this.currentUrl) {

			
 
				+				     case '/donation/contribution':

			
 
				+				        title = '我要捐款'

			
 
				+				        break;

			
 
				+				     case '/donation/organDonation':

			
 
				+				         title = '我要捐献器官'

			
 
				+				        break;

			
 
				+					case '/join/rescue':

			
 
				+					    title = '我要成为救护员'

			
 
				+					   break;

			
 
				+					case '/join/member':

			
 
				+						title = '我要成为会员'

			
 
				+						break

			
 
				+					case '/join/volunteer':

			
 
				+						title = '我要成为志愿者'

			
 
				+						break

			
 
				+					case '/join/train':

			
 
				+						title = '报名普及培训'

			
 
				+						break

			
 
				+					case '/about':

			
 
				+						title = '关于我们'

			
 
				+						break

			
 
				+					case '/concat':

			
 
				+						title = '联系我们'

			
 
				+						break

			
 
				+					case '/popularScience/list':

			
 
				+						title = '红会科普'

			
 
				+						break

			
 
				+					case '/popularScience/detail':

			
 
				+						title = '红会科普'

			
 
				+						break

			
 
				+				     default:

			
 
				+				        title = ''

			
 
				+				}

			
 
				+				return title

			
 
				+			}

			
 
				+		},

			
 
				+		data() {

			
 
				+			return {

			
 
				+				currentIndex: 0

			
 
				+			}

			
 
				+		},

			
 
				+		methods: {

			
 
				+			navTo(path) {

			
 
				+				console.log(path)

			
 
				+				let currentUrl = this.$route.path

			
 
				+				if(currentUrl === path){

			
 
				+					return

			
 
				+				}else {

			
 
				+					this.$router.push(path)

			
 
				+				}

			
 
				+			},

			
 
				+			changeClik(index) {

			
 
				+				this.currentIndex = index

			
 
				+				this.$router.push('/donation/Hpc?id=' + index)

			
 
				+				console.log(index)

			
 
				 			}

			
 
				 		}

			
 
				 	}
			
 
				 </script>
			
 
				 
			
 
				 <style lang="scss" scoped>

			
 
				+	.wrapper {

			
 
				+		width: 1200px;

			
 
				+		display: flex;

			
 
				+		justify-content: space-between;

			
 
				+		

			
 
				+	}

			
 
				 	.left-nav {

			
 
				 		width: 265px;

			
 
				 		// height: 154px;

			
@@ -68,5 +156,32 @@
 
				 				color: #999999;

			
 
				 			}

			
 
				 		}

			
 
				+		.action {

			
 
				+			background-color: #f7dfdf;

			
 
				+		}

			
 
				+	}

			
 
				+	.right-content {

			
 
				+		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;

			
 
				+		}

			
 
				 	}
			
 
				 </style>
			
--- a/src/components/navBar/NavBar.vue
+++ b/src/components/navBar/NavBar.vue
@@ -1,29 +1,9 @@
 
				 <template>

			
 
				   <div>

			
 
				     <div class="top-bar">

			
 
				-      <div class="bar-item">

			
 
				-        <img src="" alt="" />

			
 
				-        <div>首页</div>

			
 
				-      </div>

			
 
				-      <div class="bar-item">

			
 
				-        <img src="" alt="" />

			
 
				-        <div>捐赠平台</div>

			
 
				-      </div>

			
 
				-      <div class="bar-item">

			
 
				-        <img src="" alt="" />

			
 
				-        <div>爱心榜</div>

			
 
				-      </div>

			
 
				-      <div class="bar-item">

			
 
				-        <img src="" alt="" />

			
 
				-        <div>我要参与</div>

			
 
				-      </div>

			
 
				-      <div class="bar-item">

			
 
				-        <img src="" alt="" />

			
 
				-        <div>关于我们</div>

			
 
				-      </div>

			
 
				-      <div class="bar-item">

			
 
				-        <img src="" alt="" />

			
 
				-        <div>联系我们</div>

			
 
				+      <div class="bar-item" v-for="( item, index ) in navList" :key="index" @click="navClick(item.path,index)" :class="{'action':currentUrl.indexOf(item.path) !=-1}">

			
 
				+        <img :src="item.imgUrl" alt="" />

			
 
				+        <div>{{item.title}}</div>

			
 
				       </div>

			
 
				     </div>

			
 
				   </div>

			
@@ -32,8 +12,61 @@
 
				 <script>

			
 
				 export default {

			
 
				   data() {

			
 
				-    return {};

			
 
				+    return {

			
 
				+		navList: [

			
 
				+			{

			
 
				+				path: '/home',

			
 
				+				title: '首页',

			
 
				+				imgUrl: '',

			
 
				+			},

			
 
				+			{

			
 
				+				path: '/donation',

			
 
				+				title: '捐赠平台',

			
 
				+				imgUrl: '',

			
 
				+			},

			
 
				+			{

			
 
				+				path: '/loveList',

			
 
				+				title: '爱心榜',

			
 
				+				imgUrl: '',

			
 
				+			},

			
 
				+			{

			
 
				+				path: '/join',

			
 
				+				title: '我要参与',

			
 
				+				imgUrl: '',

			
 
				+			},

			
 
				+			{

			
 
				+				path: '/about',

			
 
				+				title: '关于我们',

			
 
				+				imgUrl: '',

			
 
				+			},

			
 
				+			{

			
 
				+				path: '/concat',

			
 
				+				title: '联系我们',

			
 
				+				imgUrl: '',

			
 
				+			}

			
 
				+		],

			
 
				+		currentIndex: 0

			
 
				+	};

			
 
				+  },

			
 
				+  computed: {

			
 
				+	  currentUrl() {

			
 
				+		  return this.$route.path

			
 
				+	  }

			
 
				   },

			
 
				+  methods: {

			
 
				+	  navClick(url,index) {

			
 
				+		  let currentUrl = this.$route.path

			
 
				+		  if(currentUrl === url) {

			
 
				+			  return 

			
 
				+		  }else {

			
 
				+			  console.log(url,currentUrl)

			
 
				+			 this.currentIndex = index

			
 
				+			 this.$router.push(url) 

			
 
				+		  }

			
 
				+		  

			
 
				+		  

			
 
				+	  }

			
 
				+  }

			
 
				 };

			
 
				 </script>

			
 
				 

			
@@ -51,12 +84,13 @@ export default {
 
				   letter-spacing:3px;

			
 
				   margin-bottom: 24px;

			
 
				   .bar-item {

			
 
				-    width: 200px;

			
 
				+	flex-grow: 1;

			
 
				     height: 60px;

			
 
				     display: flex;

			
 
				     justify-content: center;

			
 
				     align-items: center;

			
 
				     font-family: PingFang SC;

			
 
				+	font-size: 18px;

			
 
				 	cursor:pointer;

			
 
				     img {

			
 
				       width: 20px;

			
@@ -65,5 +99,8 @@ export default {
 
				       margin-right: 6px;

			
 
				     }

			
 
				   }

			
 
				+  .action {

			
 
				+  	background-color: #c2191c;

			
 
				+  }

			
 
				 }

			
 
				 </style>
			
--- a/src/components/pageTitle/PageTitle.vue
+++ b/src/components/pageTitle/PageTitle.vue
@@ -0,0 +1,36 @@
 
				+<template>

			
 
				+	<div class="title-wrapper">

			
 
				+		<div class="title">

			
 
				+			{{title}}

			
 
				+		</div>

			
 
				+	</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>

			
 
				+	export default {

			
 
				+		props: {

			
 
				+			title: {

			
 
				+				type: String,

			
 
				+				default:''

			
 
				+			}

			
 
				+		}

			
 
				+	}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>

			
 
				+	.title-wrapper {

			
 
				+		width: 100%;

			
 
				+		border-top: 2px solid #D82020;

			
 
				+		.title {

			
 
				+			width: 156px;

			
 
				+			height: 50px;

			
 
				+			line-height: 50px;

			
 
				+			text-align: center;

			
 
				+			background: #D82020;

			
 
				+			font-size: 18px;

			
 
				+			font-family: PingFang SC;

			
 
				+			font-weight: bold;

			
 
				+			color: #FFFFFF;

			
 
				+		}

			
 
				+	}
			
 
				+</style>
			
--- a/src/components/topLogo/TopLogo.vue
+++ b/src/components/topLogo/TopLogo.vue
@@ -17,7 +17,7 @@ export default {};
 
				   width: 1200px;

			
 
				   height: 178px;

			
 
				   display: flex;

			
 
				-  justify-content: start;

			
 
				+  justify-content: flex-start;

			
 
				   align-items: center;

			
 
				   margin: 0 auto;

			
 
				   .logo {

			
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,11 @@ import 'element-ui/lib/theme-chalk/index.css';
 
				 Vue.config.productionTip = false

			
 
				 Vue.use(ElementUI);

			
 
				 

			
 
				+//页面跳转时，页面位置重置为顶部

			
 
				+ router.afterEach((to,from,next) => {
			
 
				+      window.scrollTo(0,0);
			
 
				+ })

			
 
				+

			
 
				 new Vue({

			
 
				   router,

			
 
				   store,

			
--- a/src/router.js
+++ b/src/router.js
@@ -23,6 +23,92 @@ export default new Router({
 
				         title: '首页'
			
 
				       }
			
 
				     },

			
 
				+	{

			
 
				+		path: '/donation',

			
 
				+		name: 'donation',

			
 
				+		component: () => import('./views/Donation.vue'),

			
 
				+		redirect: '/donation/contribution',

			
 
				+		meta: {

			
 
				+			title: '捐赠平台'

			
 
				+		},

			
 
				+		children: [

			
 
				+			{

			
 
				+				path: 'contribution',

			
 
				+				name: 'contribution',

			
 
				+				component: () => import('./views/donation/Contribution.vue'),

			
 
				+				meta: {

			
 
				+					title: '捐款'

			
 
				+				}

			
 
				+			},

			
 
				+			{

			
 
				+				path: 'organDonation',

			
 
				+				name: 'organDonation',

			
 
				+				component: () => import('./views/donation/OrganDonation.vue'),

			
 
				+				meta: {

			
 
				+					title: '器官捐献'

			
 
				+				}

			
 
				+			},

			
 
				+			{

			
 
				+				path: 'HPC',

			
 
				+				name: 'HPC',

			
 
				+				component: () => import('./views/donation/Hpc.vue'),

			
 
				+				meta: {

			
 
				+					title: '捐献造血干细胞'

			
 
				+				}

			
 
				+			},

			
 
				+		]

			
 
				+	},

			
 
				+	{

			
 
				+		path: '/loveList',

			
 
				+		name: 'loveList',

			
 
				+		component: () => import('./views/LoveList.vue'),

			
 
				+		meta: {

			
 
				+			title: '爱心榜'

			
 
				+		}

			
 
				+	},

			
 
				+	{

			
 
				+		path: '/join',

			
 
				+		name: 'join',

			
 
				+		component: () => import('./views/Join.vue'),

			
 
				+		redirect: '/join/volunteer',

			
 
				+		meta: {

			
 
				+			title: '我要参与'

			
 
				+		},

			
 
				+		children: [

			
 
				+			{

			
 
				+				path: 'volunteer',

			
 
				+				name: 'volunteer',

			
 
				+				component: () => import('./views/join/Volunteer.vue'),

			
 
				+				meta: {

			
 
				+					title: '登记志愿者'

			
 
				+				}

			
 
				+			},

			
 
				+			{

			
 
				+				path: 'member',

			
 
				+				name: 'member',

			
 
				+				component: () => import('./views/join/Member.vue'),

			
 
				+				meta: {

			
 
				+					title: '登记个人会员'

			
 
				+				}

			
 
				+			},

			
 
				+			{

			
 
				+				path: 'train',

			
 
				+				name: 'train',

			
 
				+				component: () => import('./views/join/Train.vue'),

			
 
				+				meta: {

			
 
				+					title: '参与普及培训'

			
 
				+				}

			
 
				+			},

			
 
				+			{

			
 
				+				path: 'rescue',

			
 
				+				name: 'rescue',

			
 
				+				component: () => import('./views/join/Rescue.vue'),

			
 
				+				meta: {

			
 
				+					title: '登记救护员'

			
 
				+				}

			
 
				+			}

			
 
				+		]

			
 
				+	},

			
 
				 	{

			
 
				 		path: '/about',

			
 
				 		name: 'about',

			
@@ -30,6 +116,45 @@ export default new Router({
 
				 		meta: {

			
 
				 			title: '关于我们'

			
 
				 		}

			
 
				+	},

			
 
				+	{

			
 
				+		path: '/concat',

			
 
				+		name: 'concat',

			
 
				+		component: () => import('./views/Concat.vue'),

			
 
				+		meta: {

			
 
				+			title: '联系我们'

			
 
				+		}

			
 
				+	},

			
 
				+	{

			
 
				+		path: '/popularScience',

			
 
				+		name: 'popularScience',

			
 
				+		component: () => import('./views/PopularScience.vue'),

			
 
				+		meta: {

			
 
				+			title: '红会科普'

			
 
				+		},

			
 
				+		redirect: '/popularScience/list',

			
 
				+		children: [

			
 
				+			{

			
 
				+				path: 'list',

			
 
				+				name: 'list',

			
 
				+				component: () => import('./views/popularScience/List.vue'),

			
 
				+				meta: {

			
 
				+					title: '红会科普'

			
 
				+				}

			
 
				+			},

			
 
				+			{

			
 
				+				path: 'detail',

			
 
				+				name: 'detail',

			
 
				+				component: () => import('./views/popularScience/Detail.vue'),

			
 
				+				meta: {

			
 
				+					title: '红会科普'

			
 
				+				}

			
 
				+			}

			
 
				+		]

			
 
				+	},

			
 
				+	{

			
 
				+		path: '*',

			
 
				+		redirect: '/home'

			
 
				 	}
			
 
				   ]
			
 
				 })
			
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,24 +1,23 @@
 
				 <template>

			
 
				 	<div class="about">

			
 
				 		<left-nav :navList="navList"></left-nav>

			
 
				-		<div class="right-wrapper">

			
 
				-		</div>

			
 
				 	</div>
			
 
				 </template>
			
 
				 
			
 
				 <script>

			
 
				 	import LeftNav from '../components/leftNav/LeftNav.vue'

			
 
				+	// import PageTitle from '../components/pageTitle/PageTitle.vue'

			
 
				 	export default {

			
 
				 		components: {

			
 
				-			LeftNav

			
 
				+			LeftNav,

			
 
				+			// PageTitle

			
 
				 		},

			
 
				 		data() {

			
 
				 			return {

			
 
				 				navList: [

			
 
				-					{ id: 1, name: '关于我们'},

			
 
				-					{ id: 2, name: '联系我们'}

			
 
				+					{ index: 0, name: '关于我们', path: '/about'},

			
 
				+					{ index: 1, name: '联系我们', path: '/concat'}

			
 
				 				],

			
 
				-				title: '关于我们'

			
 
				 			}

			
 
				 			

			
 
				 		}

			
--- a/src/views/Concat.vue
+++ b/src/views/Concat.vue
@@ -0,0 +1,39 @@
 
				+<template>

			
 
				+	<div class="concat">

			
 
				+		<left-nav :navList="navList"></left-nav>

			
 
				+	</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>

			
 
				+	import LeftNav from '../components/leftNav/LeftNav.vue'

			
 
				+

			
 
				+	export default {

			
 
				+		components: {

			
 
				+			LeftNav,

			
 
				+			// PageTitle

			
 
				+		},

			
 
				+		data() {

			
 
				+			return {

			
 
				+				navList: [

			
 
				+					{ index: 0, name: '关于我们', path: '/about'},

			
 
				+					{ index: 1, name: '联系我们', path: '/concat'}

			
 
				+				],

			
 
				+			}

			
 
				+			

			
 
				+		}

			
 
				+	}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>

			
 
				+	.concat {

			
 
				+		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>
			
--- a/src/views/Donation.vue
+++ b/src/views/Donation.vue
@@ -0,0 +1,36 @@
 
				+<template>

			
 
				+	<div class="donation">

			
 
				+		<left-nav :navList="navList" :rightTitle="rightTitle" :currentIndex="currentIndex">

			
 
				+			<router-view></router-view>

			
 
				+		</left-nav>

			
 
				+	</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>

			
 
				+	import LeftNav from '../components/leftNav/LeftNav.vue'

			
 
				+	import PageTitle from '../components/pageTitle/PageTitle.vue'

			
 
				+	export default {

			
 
				+		components: {

			
 
				+			LeftNav,

			
 
				+			PageTitle

			
 
				+		},

			
 
				+		data() {

			
 
				+			return {

			
 
				+				navList: [

			
 
				+					{ index: 0, name: '我要捐款', path: '/donation/contribution' },

			
 
				+					{ index: 1, name: '我要器官捐献', path: '/donation/organDonation' },

			
 
				+					{ index: 2, name: '我要造血干细胞捐献', path: '/donation/Hpc' },

			
 
				+					{ index: 3, name: '我要登记救护员', path: '/join/rescue' },

			
 
				+					{ index: 4, name: '我要登记个人会员', path: '/join/member' },

			
 
				+					{ index: 5, name: '我要登记志愿者', path: '/join/volunteer' },

			
 
				+					{ index: 6, name: '我要报名普及培训', path: '/join/train' },

			
 
				+				],

			
 
				+				rightTitle: '我要捐款',

			
 
				+				currentIndex: 0

			
 
				+			}

			
 
				+		}

			
 
				+	}
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+</style>
			
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -8,7 +8,7 @@
 
				 		<div class="home-body">

			
 
				 			<div class="body-left">

			
 
				 				<div class="rsp">

			
 
				-					<item-title title="红色科普"></item-title>

			
 
				+					<item-title title="红色科普" :topath="'/popularScience'"></item-title>

			
 
				 					<div class="sp-item" v-for="item in spList" :key="item.id">

			
 
				 						<img :src="item.image" class="sp-img">

			
 
				 						<div class="item-right">

			
@@ -21,7 +21,7 @@
 
				 			</div>

			
 
				 			<div class="body-right">

			
 
				 				<div class="join">

			
 
				-					<item-title title="善行参与"></item-title>

			
 
				+					<item-title title="善行参与" :topath="'/donation'"></item-title>

			
 
				 					<div class="join-main">

			
 
				 						<div class="join-item">

			
 
				 							<div class="logo"><img src="" /></div>

			
@@ -54,7 +54,7 @@
 
				 					</div>

			
 
				 				</div>

			
 
				 				<div class="list">

			
 
				-					<item-title title="爱心榜"></item-title>

			
 
				+					<item-title title="爱心榜" :topath="'/loveList'"></item-title>

			
 
				 					<el-table :data="jxList" style="width: 100%">

			
 
				 						<el-table-column prop="time" label="捐献时间"></el-table-column>

			
 
				 						<el-table-column prop="name" label="捐献者"></el-table-column>

			
--- a/src/views/Join.vue
+++ b/src/views/Join.vue
@@ -0,0 +1,44 @@
 
				+<template>

			
 
				+	<div class="join">

			
 
				+		<left-nav :navList="navList">

			
 
				+			<router-view></router-view>

			
 
				+		</left-nav>

			
 
				+	</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>

			
 
				+	import LeftNav from '../components/leftNav/LeftNav.vue'

			
 
				+	export default {

			
 
				+		components: {

			
 
				+			LeftNav

			
 
				+		},

			
 
				+		data() {

			
 
				+			return {

			
 
				+				navList: [

			
 
				+					{ index: 0, name: '我要捐款', path: '/donation/contribution' },

			
 
				+					{ index: 1, name: '我要器官捐献', path: '/donation/organDonation' },

			
 
				+					{ index: 2, name: '我要造血干细胞捐献', path: '/donation/Hpc' },

			
 
				+					{ index: 3, name: '我要登记救护员', path: '/join/rescue' },

			
 
				+					{ index: 4, name: '我要登记个人会员', path: '/join/member' },

			
 
				+					{ index: 5, name: '我要登记志愿者', path: '/join/volunteer' },

			
 
				+					{ index: 6, name: '我要报名普及培训', path: '/join/train' },

			
 
				+				],

			
 
				+				rightTitle: '我要登记志愿者',

			
 
				+			}

			
 
				+		}

			
 
				+	}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>

			
 
				+	.join {

			
 
				+		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>
			
--- a/src/views/LoveList.vue
+++ b/src/views/LoveList.vue
@@ -0,0 +1,159 @@
 
				+<template>

			
 
				+	<div class="love-list">

			
 
				+		<el-table :data="tableData" border style="width: 100%">

			
 
				+			<el-table-column prop="time" label="捐献时间" width="154" align="center"></el-table-column>

			
 
				+			<el-table-column prop="name" label="捐献者" width="409" align="center"></el-table-column>

			
 
				+			<el-table-column prop="num" label="捐献金额" width="140" align="center"></el-table-column>

			
 
				+			<el-table-column prop="status" label="捐献意向" width="356" align="center"></el-table-column>

			
 
				+			<el-table-column prop="mark" label="备注" align="center"></el-table-column>

			
 
				+		</el-table>

			
 
				+		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页" @current-change="currentChange"></el-pagination>

			
 
				+	</div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+export default {

			
 
				+	data() {

			
 
				+		return {

			
 
				+			tableData: [

			
 
				+				{

			
 
				+					time: '2021/05/30',

			
 
				+					name: '荆州XX公司',

			
 
				+					num: '100.00',

			
 
				+					status: '爱心捐赠',

			
 
				+					mark: ''

			
 
				+				},

			
 
				+				{

			
 
				+					time: '2021/05/30',

			
 
				+					name: '荆州XX公司',

			
 
				+					num: '300.00',

			
 
				+					status: '爱心捐赠',

			
 
				+					mark: ''

			
 
				+				},

			
 
				+				{

			
 
				+					time: '2021/05/30',

			
 
				+					name: '荆州XX公司',

			
 
				+					num: '200.00',

			
 
				+					status: '爱心捐赠',

			
 
				+					mark: ''

			
 
				+				},

			
 
				+				{

			
 
				+					time: '2021/05/30',

			
 
				+					name: '荆州XX公司',

			
 
				+					num: '100.00',

			
 
				+					status: '爱心捐赠',

			
 
				+					mark: ''

			
 
				+				},

			
 
				+				{

			
 
				+					time: '2021/05/30',

			
 
				+					name: '荆州XX公司',

			
 
				+					num: '300.00',

			
 
				+					status: '爱心捐赠',

			
 
				+					mark: ''

			
 
				+				},

			
 
				+				{

			
 
				+					time: '2021/05/30',

			
 
				+					name: '荆州XX公司',

			
 
				+					num: '200.00',

			
 
				+					status: '爱心捐赠',

			
 
				+					mark: ''

			
 
				+				},

			
 
				+				{

			
 
				+					time: '2021/05/30',

			
 
				+					name: '荆州XX公司',

			
 
				+					num: '100.00',

			
 
				+					status: '爱心捐赠',

			
 
				+					mark: ''

			
 
				+				},

			
 
				+				{

			
 
				+					time: '2021/05/30',

			
 
				+					name: '荆州XX公司',

			
 
				+					num: '300.00',

			
 
				+					status: '爱心捐赠',

			
 
				+					mark: ''

			
 
				+				},

			
 
				+				{

			
 
				+					time: '2021/05/30',

			
 
				+					name: '荆州XX公司',

			
 
				+					num: '200.00',

			
 
				+					status: '爱心捐赠',

			
 
				+					mark: ''

			
 
				+				},

			
 
				+				{

			
 
				+					time: '2021/05/30',

			
 
				+					name: '荆州XX公司',

			
 
				+					num: '100.00',

			
 
				+					status: '爱心捐赠',

			
 
				+					mark: ''

			
 
				+				},

			
 
				+				{

			
 
				+					time: '2021/05/30',

			
 
				+					name: '荆州XX公司',

			
 
				+					num: '300.00',

			
 
				+					status: '爱心捐赠',

			
 
				+					mark: ''

			
 
				+				},

			
 
				+				{

			
 
				+					time: '2021/05/30',

			
 
				+					name: '荆州XX公司',

			
 
				+					num: '200.00',

			
 
				+					status: '爱心捐赠',

			
 
				+					mark: ''

			
 
				+				},

			
 
				+				{

			
 
				+					time: '2021/05/30',

			
 
				+					name: '荆州XX公司',

			
 
				+					num: '100.00',

			
 
				+					status: '爱心捐赠',

			
 
				+					mark: ''

			
 
				+				},

			
 
				+				{

			
 
				+					time: '2021/05/30',

			
 
				+					name: '荆州XX公司',

			
 
				+					num: '300.00',

			
 
				+					status: '爱心捐赠',

			
 
				+					mark: ''

			
 
				+				}

			
 
				+			],

			
 
				+			total: 100,

			
 
				+			page:1,

			
 
				+			limit: 14

			
 
				+		};

			
 
				+	},

			
 
				+	methods: {

			
 
				+		//分页页码改变触发事件

			
 
				+		currentChange(e) {

			
 
				+			console.log(e);

			
 
				+			this.page = e

			
 
				+		}

			
 
				+	}

			
 
				+};

			
 
				+</script>

			
 
				+

			
 
				+<style lang="scss" scoped="">

			
 
				+.love-list {

			
 
				+	height: 870px;

			
 
				+	position: relative;

			
 
				+}

			
 
				+/deep/ .el-table thead th {

			
 
				+	font-size: 18px;

			
 
				+	font-family: PingFang SC;

			
 
				+	font-weight: bold;

			
 
				+	color: #d82020;

			
 
				+}

			
 
				+/deep/ .el-table tr td {

			
 
				+	font-size: 16px;

			
 
				+	font-family: PingFang SC;

			
 
				+	font-weight: bold;

			
 
				+	color: #101010;

			
 
				+	padding: 11px 0;

			
 
				+	line-height: 1;

			
 
				+}

			
 
				+/deep/ .el-pagination {

			
 
				+	position: absolute;

			
 
				+	display: inline-block;

			
 
				+	bottom: 75px;

			
 
				+	right: 0;

			
 
				+	padding-right: 0;

			
 
				+}

			
 
				+</style>
			
--- a/src/views/PopularScience.vue
+++ b/src/views/PopularScience.vue
@@ -0,0 +1,27 @@
 
				+<template>

			
 
				+	<div class="join">

			
 
				+		<left-nav :navList="navList" :rightTitle="rightTitle">

			
 
				+			<router-view></router-view>

			
 
				+		</left-nav>

			
 
				+	</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>

			
 
				+	import LeftNav from '../components/leftNav/LeftNav.vue'

			
 
				+	export default {

			
 
				+		components: {

			
 
				+			LeftNav

			
 
				+		},

			
 
				+		data() {

			
 
				+			return {

			
 
				+				navList: [

			
 
				+					{ index: 0, name: '红会科普', path: '/popularScience/list' },

			
 
				+				],

			
 
				+				rightTitle: '红会科普',

			
 
				+			}

			
 
				+		}

			
 
				+	}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+</style>
			
--- a/src/views/donation/Contribution.vue
+++ b/src/views/donation/Contribution.vue
@@ -0,0 +1,11 @@
 
				+<template>

			
 
				+	<div class="contribution">

			
 
				+		contribution

			
 
				+	</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+</style>
			
--- a/src/views/donation/Hpc.vue
+++ b/src/views/donation/Hpc.vue
@@ -0,0 +1,41 @@
 
				+<template>

			
 
				+	<div class="hpc">

			
 
				+		{{iid}}

			
 
				+	</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>

			
 
				+	export default {

			
 
				+		data() {

			
 
				+			return {

			
 
				+				content: ''

			
 
				+			}

			
 
				+		},

			
 
				+		created() {

			
 
				+			this.getData()

			
 
				+		},

			
 
				+		computed: {

			
 
				+			iid() {

			
 
				+				return this.$route.query.id || 0

			
 
				+			}

			
 
				+		},

			
 
				+		watch: {

			
 
				+			iid(val) {

			
 
				+				console.log(val)

			
 
				+				this.getData(val)

			
 
				+			}

			
 
				+		},

			
 
				+		methods: {

			
 
				+			getData(val) {

			
 
				+				if(val==0){

			
 
				+					console.log('获取基础知识')

			
 
				+				}else {

			
 
				+					console.log('获取报名')

			
 
				+				}

			
 
				+			}

			
 
				+		}

			
 
				+	}
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+</style>
			
--- a/src/views/donation/OrganDonation.vue
+++ b/src/views/donation/OrganDonation.vue
@@ -0,0 +1,11 @@
 
				+<template>

			
 
				+	<div class="organ-donation">

			
 
				+		organDonation

			
 
				+	</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+</style>
			
--- a/src/views/homeChild/ItemTitle.vue
+++ b/src/views/homeChild/ItemTitle.vue
@@ -1,7 +1,7 @@
 
				 <template>

			
 
				   <div class="item-title">

			
 
				-    <div class="title">{{title}}</div>

			
 
				-    <div class="more" v-if="isShow === '1'">【查看更多】</div>

			
 
				+    <div class="title hand">{{title}}</div>

			
 
				+    <div class="more hand" v-if="isShow === '1'" @click="loadMore" >【查看更多】</div>

			
 
				   </div>

			
 
				 </template>

			
 
				 

			
@@ -15,7 +15,16 @@ export default {
 
				 	isShow: {

			
 
				 		type: String,

			
 
				 		default: '1'

			
 
				+	},

			
 
				+	topath: {

			
 
				+		type: String,

			
 
				+		default: '/home'

			
 
				 	}

			
 
				+  },

			
 
				+  methods: {

			
 
				+	  loadMore() {

			
 
				+		 this.$router.push(this.topath) 

			
 
				+	  }

			
 
				   }

			
 
				 };

			
 
				 </script>

			
--- a/src/views/join/Member.vue
+++ b/src/views/join/Member.vue
@@ -0,0 +1,11 @@
 
				+<template>

			
 
				+	<div class="member">

			
 
				+		登记会员

			
 
				+	</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+</style>
			
--- a/src/views/join/Rescue.vue
+++ b/src/views/join/Rescue.vue
@@ -0,0 +1,11 @@
 
				+<template>

			
 
				+	<div class="rescue">

			
 
				+		rescue

			
 
				+	</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+</style>
			
--- a/src/views/join/Train.vue
+++ b/src/views/join/Train.vue
@@ -0,0 +1,11 @@
 
				+<template>

			
 
				+	<div class="train">

			
 
				+		train

			
 
				+	</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+</style>
			
--- a/src/views/join/Volunteer.vue
+++ b/src/views/join/Volunteer.vue
@@ -0,0 +1,11 @@
 
				+<template>

			
 
				+	<div class="volunteer">

			
 
				+		volunteer

			
 
				+	</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+</style>
			
--- a/src/views/popularScience/Detail.vue
+++ b/src/views/popularScience/Detail.vue
@@ -0,0 +1,11 @@
 
				+<template>

			
 
				+	<div class="detail">

			
 
				+		detail

			
 
				+	</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+</style>
			
--- a/src/views/popularScience/List.vue
+++ b/src/views/popularScience/List.vue
@@ -0,0 +1,11 @@
 
				+<template>

			
 
				+	<div class="list">

			
 
				+		red List

			
 
				+	</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+</style>