11-5

src/components/leftNav/LeftNav.vue

@@ -43,7 +43,7 @@
 			},
 			topTitle: {
 				type: String,
-				default: '善行共参与'
+				default: '公众参与'
 			}
 		},
 		computed: {
@@ -75,7 +75,7 @@
 						title = '志愿者报名'
 						break
 					case '/join/train':
-						title = '救护员培训报名'
+						title = '普及培训报名'
 						break
 					case '/about/chineseRedCross':
 						title = '关于中国红十字会'
@@ -197,6 +197,54 @@
 					case '/organs/list':
 						title = '器官/遗体捐献名录'
 						break
+					case '/cause/cells/list':
+						title = '造血干细胞捐献'
+						break
+					case '/cause/cells/detail':
+						title = '造血干细胞捐献'
+						break
+					case '/cause/emergency/detail':
+						title = '应急救护'
+						break
+					case '/cause/emergency/list':
+						title = '应急救护'
+						break
+					case '/cause/free/detail':
+						title = '无偿献血'
+						break
+					case '/cause/free/list':
+						title = '无偿献血'
+						break
+					case '/cause/humanity/detail':
+						title = '人道救助'
+						break
+					case '/cause/humanity/list':
+						title = '人道救助'
+						break
+					case '/cause/remains/detail':
+						title = '遗体和人体器官捐献'
+						break
+					case '/cause/remains/list':
+						title = '遗体和人体器官捐献'
+						break
+					case '/cause/rescue/detail':
+						title = '应急救援'
+						break
+					case '/cause/rescue/list':
+						title = '应急救援'
+						break
+					case '/cause/service/detail':
+						title = '志愿服务'
+						break
+					case '/cause/service/list':
+						title = '志愿服务'
+						break
+					case '/cause/teenagers/detail':
+						title = '红十字青少年'
+						break
+					case '/cause/teenagers/list':
+						title = '红十字青少年'
+						break
 					default:
 						title = ''
 				}

src/router.js

@@ -135,14 +135,14 @@ export default new Router({
 			title: '政策法规'
 		},
 	},
-	{
-		path: '/cause',
-		name: 'cause',
-		component: () => import('./views/Cause.vue'),
-		meta: {
-			title: '政策法规'
-		},
-	},
+	// {
+	// 	path: '/cause',
+	// 	name: 'cause',
+	// 	component: () => import('./views/Cause.vue'),
+	// 	meta: {
+	// 		title: '政策法规'
+	// 	},
+	// },
 	{
 		path: '/concat',
 		name: 'concat',
@@ -470,6 +470,233 @@ export default new Router({
 			}
 		]
 	},
+	{
+		path: '/cause',
+		name: 'cause',
+		component: () => import('./views/Cause.vue'),
+		meta: {
+			title: '红十字事业'
+		},
+		redirect: '/cause/rescue',
+		children: [
+			{
+				path: 'rescue',
+				name: 'rescue',
+				component: () => import('./views/cause/Rescue.vue'),
+				meta: {
+					title: '应急救援'
+				},
+				redirect: '/cause/rescue/list',
+				children: [
+					{
+						path: 'list',
+						name: 'jlxList',
+						component: () => import('./views/cause/rescue/List.vue'),
+						meta: {
+							title: '应急救援'
+						}
+					},
+					{
+						path: 'detail',
+						name: 'jlxdetail',
+						component: () => import('./views/cause/rescue/Detail.vue'),
+						meta: {
+							title: '应急救援'
+						}
+					}
+				]
+			},
+			{
+				path: 'emergency',
+				name: 'emergency',
+				component: () => import('./views/cause/Emergency.vue'),
+				meta: {
+					title: '应急救护'
+				},
+				redirect: '/cause/emergency/list',
+				children: [
+					{
+						path: 'list',
+						name: 'cellsList',
+						component: () => import('./views/cause/emergency/List.vue'),
+						meta: {
+							title: '应急救护'
+						}
+					},
+					{
+						path: 'detail',
+						name: 'cellsdetail',
+						component: () => import('./views/cause/emergency/Detail.vue'),
+						meta: {
+							title: '应急救护'
+						}
+					}
+				]
+			},
+			{
+				path: 'humanity',
+				name: 'humanity',
+				component: () => import('./views/cause/Humanity.vue'),
+				meta: {
+					title: '人道救助'
+				},
+				redirect: '/cause/humanity/list',
+				children: [
+					{
+						path: 'list',
+						name: 'humanityList',
+						component: () => import('./views/cause/humanity/List.vue'),
+						meta: {
+							title: '人道救助'
+						}
+					},
+					{
+						path: 'detail',
+						name: 'humanitydetail',
+						component: () => import('./views/cause/humanity/Detail.vue'),
+						meta: {
+							title: '人道救助'
+						}
+					}
+				]
+			},
+			{
+				path: 'cells',
+				name: 'cells',
+				component: () => import('./views/cause/Cells.vue'),
+				meta: {
+					title: '造血干细胞捐献'
+				},
+				redirect: '/cause/cells/list',
+				children: [
+					{
+						path: 'list',
+						name: 'cellsList',
+						component: () => import('./views/cause/cells/List.vue'),
+						meta: {
+							title: '造血干细胞捐献'
+						}
+					},
+					{
+						path: 'detail',
+						name: 'cellsdetail',
+						component: () => import('./views/cause/cells/Detail.vue'),
+						meta: {
+							title: '造血干细胞捐献'
+						}
+					}
+				]
+			},
+			{
+				path: 'free',
+				name: 'free',
+				component: () => import('./views/cause/Free.vue'),
+				meta: {
+					title: '无偿献血'
+				},
+				redirect: '/cause/free/list',
+				children: [
+					{
+						path: 'list',
+						name: 'freeList',
+						component: () => import('./views/cause/free/List.vue'),
+						meta: {
+							title: '无偿献血'
+						}
+					},
+					{
+						path: 'detail',
+						name: 'freedetail',
+						component: () => import('./views/cause/free/Detail.vue'),
+						meta: {
+							title: '无偿献血'
+						}
+					}
+				]
+			},
+			{
+				path: 'remains',
+				name: 'remains',
+				component: () => import('./views/cause/Remains.vue'),
+				meta: {
+					title: '遗体和人体器官捐献'
+				},
+				redirect: '/cause/remains/list',
+				children: [
+					{
+						path: 'list',
+						name: 'remainsList',
+						component: () => import('./views/cause/remains/List.vue'),
+						meta: {
+							title: '遗体和人体器官捐献'
+						}
+					},
+					{
+						path: 'detail',
+						name: 'remainsdetail',
+						component: () => import('./views/cause/remains/Detail.vue'),
+						meta: {
+							title: '遗体和人体器官捐献'
+						}
+					}
+				]
+			},
+			{
+				path: 'teenagers',
+				name: 'teenagers',
+				component: () => import('./views/cause/Teenagers.vue'),
+				meta: {
+					title: '红十字青少年'
+				},
+				redirect: '/cause/teenagers/list',
+				children: [
+					{
+						path: 'list',
+						name: 'teenagersList',
+						component: () => import('./views/cause/teenagers/List.vue'),
+						meta: {
+							title: '红十字青少年'
+						}
+					},
+					{
+						path: 'detail',
+						name: 'teenagersdetail',
+						component: () => import('./views/cause/teenagers/Detail.vue'),
+						meta: {
+							title: '红十字青少年'
+						}
+					}
+				]
+			},
+			{
+				path: 'service',
+				name: 'service',
+				component: () => import('./views/cause/Service.vue'),
+				meta: {
+					title: '志愿服务'
+				},
+				redirect: '/cause/service/list',
+				children: [
+					{
+						path: 'list',
+						name: 'serviceList',
+						component: () => import('./views/cause/service/List.vue'),
+						meta: {
+							title: '志愿服务'
+						}
+					},
+					{
+						path: 'detail',
+						name: 'servicedetail',
+						component: () => import('./views/cause/service/Detail.vue'),
+						meta: {
+							title: '志愿服务'
+						}
+					}
+				]
+			}
+		]
+	},
 	{
 		path: '/popularScience',
 		name: 'popularScience',

src/views/Cause.vue

@@ -1,185 +1,63 @@
 <template>
-	<div class="about">
-		<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.uid" :class="{'action': currentIndex == item.uid }" @click="navClick(item.uid)">
-					<!-- :class="{'action': currentUrl.indexOf(item.path) !== -1 }"> -->
-					<div class="item-name">
-						{{item.name}}
-					</div>
-					<div class="item-icon">
-						>
-					</div>
-				</div>
-			</div>
-			<div class="right-content">
-				<!-- <div class="title moren" v-if="isShow">
-					{{rightTitle}}
-				</div> -->
-				<div style="padding: 35px 50px 35px 50px;" class="line">
-					<div class="new-detail">
-						<div class="content" v-html="content"></div>
-					</div>
-				</div>
-		
-			</div>
-		</div>
+	<div class="news">
+		<router-view></router-view>
 	</div>
 </template>
 
 <script>
-import LeftNav from '../components/leftNav/LeftNav.vue';
-import { details, getArticleList } from '../request/api.js';
-export default {
-	components: {
-		LeftNav
-	},
-	data() {
-		return {
-			content: '',
-			currentIndex: '',
-			rightTitle: '',
-			navList: [],
-		};
-	},
-	computed: {
-		navHeight() {
-			return this.navList.length * 51 + 52 + 'px'
-		},
-	},
-	mounted() {
-		this.getList()
-	},
-	methods:{
-		compare(attribute) {
-			return function(obj1, obj2) {				
-				let val1 = obj1[attribute]
-				var val2 = obj2[attribute]
-				if (val1 > val2) {
-					return 1;
-				} else if (val1 < val2) {
-					return -1;
-				} else {
-					return 0;
-				}
-			}
-		},
-		getList() {
-			let that = this
-			getArticleList({},46).then(({data}) => {
-				// console.log(data)
-				let arr = data.list.reverse()
-				arr.forEach(item => {
-					let obj = {}
-					obj.name = item.title
-					obj.uid = item.id
-					obj.ps = item.synopsis
-					that.navList.push(obj)
-					// console.log(that.navList,'55555')
-				})
-				that.navList = that.navList.sort(this.compare('ps'))
-				this.navClick(that.navList[0].uid)
-			}).catch( err => {
-				console.log(err)
-			})
+	// import LeftNav from '../components/leftNav/LeftNav.vue';
+
+	export default {
+		components: {
+			// LeftNav
 		},
-		navClick(id) {
-			this.currentIndex = id
-			details({},id).then(({data})=> {
-				this.content = data.content
-			})
-		}
-	}
-};
+		// data() {
+		// 	return {
+		// 		navList: [{
+		// 				index: 0,
+		// 				name: '应急救援',
+		// 				path: '/rescue'
+		// 			},
+		// 			{
+		// 				index: 1,
+		// 				name: '应急救护',
+		// 				path: '/emergency'
+		// 			},
+		// 			{
+		// 				index: 2,
+		// 				name: '人道救助',
+		// 				path: '/humanity'
+		// 			},
+		// 			{
+		// 				index: 3,
+		// 				name: '造血干细胞捐献',
+		// 				path: '/cells'
+		// 			},
+		// 			{
+		// 				index: 4,
+		// 				name: '无偿献血',
+		// 				path: '/free'
+		// 			},
+		// 			{
+		// 				index: 5,
+		// 				name: '遗体和人体器官捐献',
+		// 				path: '/remains'
+		// 			},
+		// 			{
+		// 				index: 6,
+		// 				name: '红十字青少年',
+		// 				path: '/teenagers'
+		// 			},
+		// 			{
+		// 				index: 7,
+		// 				name: '志愿服务',
+		// 				path: '/service'
+		// 			}
+		// 		],
+		// 	};
+		// }
+	};
 </script>
 
-<style lang="scss" scoped>
-	.wrapper {
-		width: 1200px;
-		display: flex;
-		justify-content: space-between;
-	
-	}
-	
-	.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;
-			}
-		}
-	
-		.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;
-		}
-	}
-	
-	.line {
-		line-height: 1.5;
-	}
+<style>
 </style>
-

src/views/Donation.vue

@@ -23,7 +23,7 @@
 					// { index: 3, name: '加入就在身边志愿者', path: '/join/rescue' },
 					{ index: 3, name: '会员入会登记', path: '/join/member' },
 					{ index: 4, name: '志愿者报名', path: '/join/volunteer' },
-					{ index: 5, name: '救护员培训报名', path: '/join/train' },
+					{ index: 5, name: '普及培训报名', path: '/join/train' },
 					{ index: 6, name: '加入救在身边志愿者', path: '/join/rescue' },
 				],
 				rightTitle: '爱心捐赠',

src/views/Home.vue

@@ -59,8 +59,11 @@
 				<div class="new-open">
 					<item-title title="县市区红会动态" :topath="'/newContent'"></item-title>
 					<div class="item-wrapper">
+						<div v-if="xsqList.length == 0" class="new-item hand">
+							数据加载中...
+						</div>
 						<div class="new-item hand" v-for="item in xsqList" :key="item.id"
-							@click="navTo('/newContent/jlx/detail?id=' + item.id)">
+							 @click="newsClick(item)">
 							<div class="title clamp">
 								<span></span>
 								{{ item.title }}
@@ -84,9 +87,9 @@
 					<div class="table-empty" v-if="jxList.length == 0">暂无更多捐赠数据</div>
 					<template v-else>
 						<div class="list-item flex" v-for="(item, index) in jxList" :key="index">
-							<div class="clamp">{{ item.release_time }}</div>
-							<div class="clamp">{{ item.title }}</div>
-							<div class="clamp">{{ item.synopsis }}</div>
+							<div class="clamp">{{ item.pay_time | getTime }}</div>
+							<div class="clamp">{{ item.donate_er }}</div>
+							<div class="clamp">{{ item.money + '元' }}</div>
 							<!-- <div class="clamp">{{ item.intention }}</div> -->
 						</div>
 					</template>
@@ -164,7 +167,7 @@
 					},
 					{
 						path: '/join/train',
-						title: '救护员培训报名',
+						title: '普及培训报名',
 						image: require('@/assets/img/i7.png')
 					},
 					{
@@ -235,13 +238,64 @@
 			this.getXsqList()
 		},
 		methods: {
+			newsClick(item) {
+				let path = ''
+				switch (item.path) {
+					case 53:
+						path = 'jlx'
+						break;
+					case 54:
+						path = 'sss'
+						break;
+					case 55:
+						path = 'sss'
+						break;
+					case 56:
+						path = 'jzq'
+						break;
+					case 57:
+						path = 'ssq'
+						break;
+					case 58:
+						path = 'szs'
+						break;
+					case 59:
+						path = 'jls'
+						break;
+					default:
+						break;
+				}
+				// let url = '/newContent/' + path + '/detail?id=' + item.id
+				console.log(path)
+				
+				this.navTo('/newContent/' + path + '/detail?id=' + item.id);
+			},
 			getXsqList() {
-				getList({
-					page: 1,
-					limit: 6
-				},53).then( ({data}) => {
-					this.xsqList = data.list
-				})
+				let list = []
+				let d = 0
+				for (let i = 53; i < 60; i++) {
+					getList({
+						page: 1,
+						limit: 6
+					}, i).then(({
+						data
+					}) => {
+						d++
+						console.log(i)
+						console.log(data.list)
+						data.list.forEach(item => {
+							item.path = i
+							return item
+						})
+						list = list.concat(data.list)
+						if (i == 59) {
+							console.log(list)
+							this.xsqList = list.sort(this.comparet('release_time')).slice(0, 6)
+						}
+					})
+
+				}
+
 			},
 			lookm() {
 				// console.log('newCenter')
@@ -275,25 +329,17 @@
 					page: 1,
 					limit: 20
 				};
-				getList(data,62).then(({data}) => {
-					obj.moreJxList = data.list
-					obj.gundong();
-				})
-				// loveList(data).then(res => {
-				// 	obj.moreJxList = res.data.list.map(item => {
-				// 		if (item.intention === '') {
-				// 			item.intention = '非定向捐款';
-				// 		}
-				// 		let date = new Date(item.add_time * 1000);
-				// 		let Y = date.getFullYear();
-				// 		let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() +
-				// 			1;
-				// 		let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
-				// 		item.time = Y + '/' + M + '/' + D;
-				// 		return item;
-				// 	});
+				// getList(data, 62).then(({
+				// 	data
+				// }) => {
+				// 	obj.moreJxList = data.list
 				// 	obj.gundong();
-				// });
+				// })
+				loveList(data).then(res => {
+					console.log(res)
+					obj.moreJxList = res.data.list
+					obj.gundong();
+				});
 			},
 			gundong() {
 				let obj = this;
@@ -352,7 +398,20 @@
 						return 0;
 					}
 				}
-			}
+			},
+			comparet(attribute) {
+				return function(obj1, obj2) {
+					let val1 = obj1[attribute].split('.').join('') * 1
+					var val2 = obj2[attribute].split('.').join('') * 1;
+					if (val1 < val2) {
+						return 1;
+					} else if (val1 > val2) {
+						return -1;
+					} else {
+						return 0;
+					}
+				}
+			},
 		}
 	};
 </script>
@@ -558,6 +617,7 @@
 
 			.loadmore {
 				width: 350px;
+
 				// background-color: red;
 				img {
 					width: 100%;

src/views/Join.vue

@@ -21,7 +21,7 @@
 					// { index: 3, name: '加入就在身边志愿者', path: '/join/rescue' },
 					{ index: 3, name: '会员入会登记', path: '/join/member' },
 					{ index: 4, name: '志愿者报名', path: '/join/volunteer' },
-					{ index: 5, name: '救护员培训报名', path: '/join/train' },
+					{ index: 5, name: '普及培训报名', path: '/join/train' },
 					{ index: 6, name: '加入救在身边志愿者', path: '/join/rescue' },
 				],
 				rightTitle: '志愿者报名',

src/views/LoveList.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="love-list">
 		<div class="search">
-			<input type="text" v-model="keyword" placeholder="请输入内容进行搜索" class="" @keyup.enter="getLiveList(keyword)" />
+			<input type="text" v-model="keyword" placeholder="请输入捐献者进行搜索" class="" @keyup.enter="getLiveList(keyword)" />
 			<img src="../assets/img/search.png" class="hand" @click="getLiveList(keyword)">
 		</div>
 		<div class="list-title flex">
@@ -12,9 +12,9 @@
 			<div  style="width: 133px">备注</div> -->
 		</div>
 		<div class="list-item flex" v-for="(item, index) in tableData" :key="index">
-			<div class="clamp" style="width: 350px">{{item.release_time}}</div>
-			<div class="clamp" style="width: 500px">{{item.title}}</div>
-			<div class="clamp" style="width: 350px">{{item.synopsis}}</div>
+			<div class="clamp" style="width: 350px">{{item.pay_time | getTime}}</div>
+			<div class="clamp" style="width: 500px">{{item.donate_er}}</div>
+			<div class="clamp" style="width: 350px">{{item.money + '元'}}</div>
 			<!-- <div class="clamp" style="width: 356px">{{item.intention}}</div>
 			<div class="clamp" style="width: 133px">{{item.mask}}</div> -->
 		</div>
@@ -41,6 +41,15 @@
 				keyword: ''
 			};
 		},
+		filters: {
+			getTime(val) {
+				let date = new Date(val * 1000);
+				let Y = date.getFullYear();
+				let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
+				let D = date.getDate() < 10 ? '0' + date.getDay() : date.getDate();
+				return Y + '.' + M + '.' + D;
+			},
+		},
 		created() {
 			this.getLiveList()
 		},
@@ -76,14 +85,14 @@
 				let data = {
 					page: obj.page,
 					limit: obj.limit,
-					name: obj.keyword
+					key: obj.keyword
 				}
-				getList(data, 62).then(({
+				loveList(data).then(({
 					data
 				}) => {
 					// console.log(data)
 					this.total = data.count
-					this.tableData = data.list.sort(this.compare('release_time'))
+					this.tableData = data.list
 					// console.log(this.tableData)
 				})
 			}

src/views/cause/Cells.vue

@@ -0,0 +1,65 @@
+<template>
+	<div class="news">
+		<left-nav :navList="navList" :topTitle="'红十字事业'">
+			<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: '/cause/rescue'
+					},
+					{
+						index: 1,
+						name: '应急救护',
+						path: '/cause/emergency'
+					},
+					{
+						index: 2,
+						name: '人道救助',
+						path: '/cause/humanity'
+					},
+					{
+						index: 3,
+						name: '造血干细胞捐献',
+						path: '/cause/cells'
+					},
+					{
+						index: 4,
+						name: '无偿献血',
+						path: '/cause/free'
+					},
+					{
+						index: 5,
+						name: '遗体和人体器官捐献',
+						path: '/cause/remains'
+					},
+					{
+						index: 6,
+						name: '红十字青少年',
+						path: '/cause/teenagers'
+					},
+					{
+						index: 7,
+						name: '志愿服务',
+						path: '/cause/service'
+					}
+				],
+			};
+		}
+	};
+</script>
+
+<style>
+</style>

src/views/cause/Emergency.vue

@@ -0,0 +1,65 @@
+<template>
+	<div class="news">
+		<left-nav :navList="navList" :topTitle="'红十字事业'">
+			<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: '/cause/rescue'
+					},
+					{
+						index: 1,
+						name: '应急救护',
+						path: '/cause/emergency'
+					},
+					{
+						index: 2,
+						name: '人道救助',
+						path: '/cause/humanity'
+					},
+					{
+						index: 3,
+						name: '造血干细胞捐献',
+						path: '/cause/cells'
+					},
+					{
+						index: 4,
+						name: '无偿献血',
+						path: '/cause/free'
+					},
+					{
+						index: 5,
+						name: '遗体和人体器官捐献',
+						path: '/cause/remains'
+					},
+					{
+						index: 6,
+						name: '红十字青少年',
+						path: '/cause/teenagers'
+					},
+					{
+						index: 7,
+						name: '志愿服务',
+						path: '/cause/service'
+					}
+				],
+			};
+		}
+	};
+</script>
+
+<style>
+</style>

src/views/cause/Free.vue

@@ -0,0 +1,65 @@
+<template>
+	<div class="news">
+		<left-nav :navList="navList" :topTitle="'红十字事业'">
+			<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: '/cause/rescue'
+					},
+					{
+						index: 1,
+						name: '应急救护',
+						path: '/cause/emergency'
+					},
+					{
+						index: 2,
+						name: '人道救助',
+						path: '/cause/humanity'
+					},
+					{
+						index: 3,
+						name: '造血干细胞捐献',
+						path: '/cause/cells'
+					},
+					{
+						index: 4,
+						name: '无偿献血',
+						path: '/cause/free'
+					},
+					{
+						index: 5,
+						name: '遗体和人体器官捐献',
+						path: '/cause/remains'
+					},
+					{
+						index: 6,
+						name: '红十字青少年',
+						path: '/cause/teenagers'
+					},
+					{
+						index: 7,
+						name: '志愿服务',
+						path: '/cause/service'
+					}
+				],
+			};
+		}
+	};
+</script>
+
+<style>
+</style>

src/views/cause/Humanity.vue

@@ -0,0 +1,65 @@
+<template>
+	<div class="news">
+		<left-nav :navList="navList" :topTitle="'红十字事业'">
+			<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: '/cause/rescue'
+					},
+					{
+						index: 1,
+						name: '应急救护',
+						path: '/cause/emergency'
+					},
+					{
+						index: 2,
+						name: '人道救助',
+						path: '/cause/humanity'
+					},
+					{
+						index: 3,
+						name: '造血干细胞捐献',
+						path: '/cause/cells'
+					},
+					{
+						index: 4,
+						name: '无偿献血',
+						path: '/cause/free'
+					},
+					{
+						index: 5,
+						name: '遗体和人体器官捐献',
+						path: '/cause/remains'
+					},
+					{
+						index: 6,
+						name: '红十字青少年',
+						path: '/cause/teenagers'
+					},
+					{
+						index: 7,
+						name: '志愿服务',
+						path: '/cause/service'
+					}
+				],
+			};
+		}
+	};
+</script>
+
+<style>
+</style>

src/views/cause/Remains.vue

@@ -0,0 +1,65 @@
+<template>
+	<div class="news">
+		<left-nav :navList="navList" :topTitle="'红十字事业'">
+			<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: '/cause/rescue'
+					},
+					{
+						index: 1,
+						name: '应急救护',
+						path: '/cause/emergency'
+					},
+					{
+						index: 2,
+						name: '人道救助',
+						path: '/cause/humanity'
+					},
+					{
+						index: 3,
+						name: '造血干细胞捐献',
+						path: '/cause/cells'
+					},
+					{
+						index: 4,
+						name: '无偿献血',
+						path: '/cause/free'
+					},
+					{
+						index: 5,
+						name: '遗体和人体器官捐献',
+						path: '/cause/remains'
+					},
+					{
+						index: 6,
+						name: '红十字青少年',
+						path: '/cause/teenagers'
+					},
+					{
+						index: 7,
+						name: '志愿服务',
+						path: '/cause/service'
+					}
+				],
+			};
+		}
+	};
+</script>
+
+<style>
+</style>

src/views/cause/Rescue.vue

@@ -0,0 +1,65 @@
+<template>
+	<div class="news">
+		<left-nav :navList="navList" :topTitle="'红十字事业'">
+			<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: '/cause/rescue'
+					},
+					{
+						index: 1,
+						name: '应急救护',
+						path: '/cause/emergency'
+					},
+					{
+						index: 2,
+						name: '人道救助',
+						path: '/cause/humanity'
+					},
+					{
+						index: 3,
+						name: '造血干细胞捐献',
+						path: '/cause/cells'
+					},
+					{
+						index: 4,
+						name: '无偿献血',
+						path: '/cause/free'
+					},
+					{
+						index: 5,
+						name: '遗体和人体器官捐献',
+						path: '/cause/remains'
+					},
+					{
+						index: 6,
+						name: '红十字青少年',
+						path: '/cause/teenagers'
+					},
+					{
+						index: 7,
+						name: '志愿服务',
+						path: '/cause/service'
+					}
+				],
+			};
+		}
+	};
+</script>
+
+<style>
+</style>

src/views/cause/Service.vue

@@ -0,0 +1,65 @@
+<template>
+	<div class="news">
+		<left-nav :navList="navList" :topTitle="'红十字事业'">
+			<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: '/cause/rescue'
+					},
+					{
+						index: 1,
+						name: '应急救护',
+						path: '/cause/emergency'
+					},
+					{
+						index: 2,
+						name: '人道救助',
+						path: '/cause/humanity'
+					},
+					{
+						index: 3,
+						name: '造血干细胞捐献',
+						path: '/cause/cells'
+					},
+					{
+						index: 4,
+						name: '无偿献血',
+						path: '/cause/free'
+					},
+					{
+						index: 5,
+						name: '遗体和人体器官捐献',
+						path: '/cause/remains'
+					},
+					{
+						index: 6,
+						name: '红十字青少年',
+						path: '/cause/teenagers'
+					},
+					{
+						index: 7,
+						name: '志愿服务',
+						path: '/cause/service'
+					}
+				],
+			};
+		}
+	};
+</script>
+
+<style>
+</style>

src/views/cause/Teenagers.vue

@@ -0,0 +1,65 @@
+<template>
+	<div class="news">
+		<left-nav :navList="navList" :topTitle="'红十字事业'">
+			<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: '/cause/rescue'
+					},
+					{
+						index: 1,
+						name: '应急救护',
+						path: '/cause/emergency'
+					},
+					{
+						index: 2,
+						name: '人道救助',
+						path: '/cause/humanity'
+					},
+					{
+						index: 3,
+						name: '造血干细胞捐献',
+						path: '/cause/cells'
+					},
+					{
+						index: 4,
+						name: '无偿献血',
+						path: '/cause/free'
+					},
+					{
+						index: 5,
+						name: '遗体和人体器官捐献',
+						path: '/cause/remains'
+					},
+					{
+						index: 6,
+						name: '红十字青少年',
+						path: '/cause/teenagers'
+					},
+					{
+						index: 7,
+						name: '志愿服务',
+						path: '/cause/service'
+					}
+				],
+			};
+		}
+	};
+</script>
+
+<style>
+</style>

src/views/cause/cells/Detail.vue

@@ -0,0 +1,37 @@
+<template>
+	<div class="new-detail">
+		<dcontent :content="content"></dcontent>
+	</div>
+</template>
+
+<script>
+	import { details } from '../../../request/api.js'
+	export default {
+		data() {
+			return {
+				content: '',
+				detail: {},
+				idd:0
+			}
+		},
+		created() {
+			this.getContent()
+		},
+		methods:{
+			getContent() {
+				let obj = this
+				this.idd = this.$route.query.id
+				obj.getDetail()
+			},
+			getDetail() {
+				let obj = this
+				details({},this.idd).then(res => {
+					obj.content = res.data.content
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/cause/cells/List.vue

@@ -0,0 +1,178 @@
+<template>
+	<div class="new-list">
+		<div class="serch-wrapper">
+			<div class="search">
+				<input type="text" v-model="keyword" placeholder="请输入内容进行搜索" class="" @keyup.enter="getList(keyword)" />
+				<img src="../../../assets/img/search.png" class="hand" @click="getList(keyword)">
+			</div>
+		</div>
+		<div class="empty" v-if="newList.length == 0">
+			暂无数据
+		</div>
+		<div class="new-item  hand" v-for="item in newList" :key="item.id" @click="navTo('/cause/cells/detail?id='+ item.id)">
+			<div class="title clamp">
+				<span class="title-icon"></span>
+				{{ item.title }}
+			</div>
+			<div class="time">{{ item.release_time?item.release_time:item.add_time | time }}</div>
+		</div>
+		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页"
+			@current-change="currentChange" :page-size="15" hide-on-single-page></el-pagination>
+	</div>
+</template>
+
+<script>
+	import {
+		getList
+	} from '../../../request/api.js';
+	export default {
+		data() {
+			return {
+				newList: [],
+				total: 0,
+				page: 1,
+				limit: 15,
+				keyword: ''
+			};
+		},
+		filters: {
+			time(val) {
+				let arr = val.split(' ')
+				let str = arr[0]
+				str = str.replace(/-/g, '.')
+				return str
+			}
+		},
+		created() {
+			this.getList()
+		},
+		methods: {
+			navTo(url) {
+				this.$router.push(url);
+			},
+			currentChange(e) {
+				this.page = e
+				this.getList()
+			},
+			getList(keyword) {
+				let obj = this
+				if (keyword) {
+					obj.page = 1
+				}
+				getList({
+					page: obj.page,
+					limit: obj.limit,
+					name: obj.keyword
+				},67).then(res => {
+					obj.newList = res.data.list.sort(this.compare('id'))
+					obj.total = res.data.count
+				})
+			},
+			compare(attribute) {
+				return function(obj1, obj2) {
+					var val1 = obj1[attribute];
+					var val2 = obj2[attribute];
+					if (val1 < val2) {
+						return 1;
+					} else if (val1 > val2) {
+						return -1;
+					} else {
+						return 0;
+					}
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.new-list {
+
+		position: relative;
+		
+		.empty {
+			text-align: center;
+			color: #999;
+			height: 400px;
+			line-height: 400px;
+		}
+		.new-item {
+			display: flex;
+			justify-content: space-between;
+			font-size: 18px;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #666666;
+			height: 40px;
+			border-bottom: 1px solid #E5E5E5;
+			line-height: 40px;
+
+			&:hover {
+				color: red;
+
+				.title {
+					.title-icon {
+						border-left-color: red;
+					}
+				}
+			}
+
+			.title {
+				width: 500px;
+
+				.title-icon {
+					display: inline-block;
+					width: 0;
+					height: 0;
+					width: 0;
+					height: 0;
+					border-top: 6px solid transparent;
+					border-left: 8px solid #d2d2d2;
+					border-bottom: 6px solid transparent;
+				}
+			}
+		}
+	}
+
+	/deep/ .el-pagination {
+		margin-top: 50px;
+		text-align: center;
+	}
+	.serch-wrapper {
+		display: flex;
+		height: 33px;
+		position: absolute;
+		top: -80px;
+		right: -50px;
+	
+		.search {
+	
+			padding-left: 13px;
+			padding-right: 13px;
+			width: 295px;
+			height: 33px;
+			line-height: 33px;
+			background: #FFFFFF;
+			border: 1px solid #CCCCCC;
+			border-radius: 10px;
+			// margin-bottom: 10px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+	
+			input {
+				width: 235px;
+				font-size: 16px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				outline: none;
+				border: none;
+			}
+	
+			img {
+				width: 20px;
+				height: 20px;
+			}
+		}
+	}
+</style>

src/views/cause/emergency/Detail.vue

@@ -0,0 +1,37 @@
+<template>
+	<div class="new-detail">
+		<dcontent :content="content"></dcontent>
+	</div>
+</template>
+
+<script>
+	import { details } from '../../../request/api.js'
+	export default {
+		data() {
+			return {
+				content: '',
+				detail: {},
+				idd:0
+			}
+		},
+		created() {
+			this.getContent()
+		},
+		methods:{
+			getContent() {
+				let obj = this
+				this.idd = this.$route.query.id
+				obj.getDetail()
+			},
+			getDetail() {
+				let obj = this
+				details({},this.idd).then(res => {
+					obj.content = res.data.content
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/cause/emergency/List.vue

@@ -0,0 +1,178 @@
+<template>
+	<div class="new-list">
+		<div class="serch-wrapper">
+			<div class="search">
+				<input type="text" v-model="keyword" placeholder="请输入内容进行搜索" class="" @keyup.enter="getList(keyword)" />
+				<img src="../../../assets/img/search.png" class="hand" @click="getList(keyword)">
+			</div>
+		</div>
+		<div class="empty" v-if="newList.length == 0">
+			暂无数据
+		</div>
+		<div class="new-item  hand" v-for="item in newList" :key="item.id" @click="navTo('/cause/emergency/detail?id='+ item.id)">
+			<div class="title clamp">
+				<span class="title-icon"></span>
+				{{ item.title }}
+			</div>
+			<div class="time">{{ item.release_time?item.release_time:item.add_time | time }}</div>
+		</div>
+		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页"
+			@current-change="currentChange" :page-size="15" hide-on-single-page></el-pagination>
+	</div>
+</template>
+
+<script>
+	import {
+		getList
+	} from '../../../request/api.js';
+	export default {
+		data() {
+			return {
+				newList: [],
+				total: 0,
+				page: 1,
+				limit: 15,
+				keyword: ''
+			};
+		},
+		filters: {
+			time(val) {
+				let arr = val.split(' ')
+				let str = arr[0]
+				str = str.replace(/-/g, '.')
+				return str
+			}
+		},
+		created() {
+			this.getList()
+		},
+		methods: {
+			navTo(url) {
+				this.$router.push(url);
+			},
+			currentChange(e) {
+				this.page = e
+				this.getList()
+			},
+			getList(keyword) {
+				let obj = this
+				if (keyword) {
+					obj.page = 1
+				}
+				getList({
+					page: obj.page,
+					limit: obj.limit,
+					name: obj.keyword
+				},65).then(res => {
+					obj.newList = res.data.list.sort(this.compare('id'))
+					obj.total = res.data.count
+				})
+			},
+			compare(attribute) {
+				return function(obj1, obj2) {
+					var val1 = obj1[attribute];
+					var val2 = obj2[attribute];
+					if (val1 < val2) {
+						return 1;
+					} else if (val1 > val2) {
+						return -1;
+					} else {
+						return 0;
+					}
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.new-list {
+
+		position: relative;
+		
+		.empty {
+			text-align: center;
+			color: #999;
+			height: 400px;
+			line-height: 400px;
+		}
+		.new-item {
+			display: flex;
+			justify-content: space-between;
+			font-size: 18px;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #666666;
+			height: 40px;
+			border-bottom: 1px solid #E5E5E5;
+			line-height: 40px;
+
+			&:hover {
+				color: red;
+
+				.title {
+					.title-icon {
+						border-left-color: red;
+					}
+				}
+			}
+
+			.title {
+				width: 500px;
+
+				.title-icon {
+					display: inline-block;
+					width: 0;
+					height: 0;
+					width: 0;
+					height: 0;
+					border-top: 6px solid transparent;
+					border-left: 8px solid #d2d2d2;
+					border-bottom: 6px solid transparent;
+				}
+			}
+		}
+	}
+
+	/deep/ .el-pagination {
+		margin-top: 50px;
+		text-align: center;
+	}
+	.serch-wrapper {
+		display: flex;
+		height: 33px;
+		position: absolute;
+		top: -80px;
+		right: -50px;
+	
+		.search {
+	
+			padding-left: 13px;
+			padding-right: 13px;
+			width: 295px;
+			height: 33px;
+			line-height: 33px;
+			background: #FFFFFF;
+			border: 1px solid #CCCCCC;
+			border-radius: 10px;
+			// margin-bottom: 10px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+	
+			input {
+				width: 235px;
+				font-size: 16px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				outline: none;
+				border: none;
+			}
+	
+			img {
+				width: 20px;
+				height: 20px;
+			}
+		}
+	}
+</style>

src/views/cause/free/Detail.vue

@@ -0,0 +1,37 @@
+<template>
+	<div class="new-detail">
+		<dcontent :content="content"></dcontent>
+	</div>
+</template>
+
+<script>
+	import { details } from '../../../request/api.js'
+	export default {
+		data() {
+			return {
+				content: '',
+				detail: {},
+				idd:0
+			}
+		},
+		created() {
+			this.getContent()
+		},
+		methods:{
+			getContent() {
+				let obj = this
+				this.idd = this.$route.query.id
+				obj.getDetail()
+			},
+			getDetail() {
+				let obj = this
+				details({},this.idd).then(res => {
+					obj.content = res.data.content
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/cause/free/List.vue

@@ -0,0 +1,178 @@
+<template>
+	<div class="new-list">
+		<div class="serch-wrapper">
+			<div class="search">
+				<input type="text" v-model="keyword" placeholder="请输入内容进行搜索" class="" @keyup.enter="getList(keyword)" />
+				<img src="../../../assets/img/search.png" class="hand" @click="getList(keyword)">
+			</div>
+		</div>
+		<div class="empty" v-if="newList.length == 0">
+			暂无数据
+		</div>
+		<div class="new-item  hand" v-for="item in newList" :key="item.id" @click="navTo('/cause/free/detail?id='+ item.id)">
+			<div class="title clamp">
+				<span class="title-icon"></span>
+				{{ item.title }}
+			</div>
+			<div class="time">{{ item.release_time?item.release_time:item.add_time | time }}</div>
+		</div>
+		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页"
+			@current-change="currentChange" :page-size="15" hide-on-single-page></el-pagination>
+	</div>
+</template>
+
+<script>
+	import {
+		getList
+	} from '../../../request/api.js';
+	export default {
+		data() {
+			return {
+				newList: [],
+				total: 0,
+				page: 1,
+				limit: 15,
+				keyword: ''
+			};
+		},
+		filters: {
+			time(val) {
+				let arr = val.split(' ')
+				let str = arr[0]
+				str = str.replace(/-/g, '.')
+				return str
+			}
+		},
+		created() {
+			this.getList()
+		},
+		methods: {
+			navTo(url) {
+				this.$router.push(url);
+			},
+			currentChange(e) {
+				this.page = e
+				this.getList()
+			},
+			getList(keyword) {
+				let obj = this
+				if (keyword) {
+					obj.page = 1
+				}
+				getList({
+					page: obj.page,
+					limit: obj.limit,
+					name: obj.keyword
+				},68).then(res => {
+					obj.newList = res.data.list.sort(this.compare('id'))
+					obj.total = res.data.count
+				})
+			},
+			compare(attribute) {
+				return function(obj1, obj2) {
+					var val1 = obj1[attribute];
+					var val2 = obj2[attribute];
+					if (val1 < val2) {
+						return 1;
+					} else if (val1 > val2) {
+						return -1;
+					} else {
+						return 0;
+					}
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.new-list {
+
+		position: relative;
+		
+		.empty {
+			text-align: center;
+			color: #999;
+			height: 400px;
+			line-height: 400px;
+		}
+		.new-item {
+			display: flex;
+			justify-content: space-between;
+			font-size: 18px;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #666666;
+			height: 40px;
+			border-bottom: 1px solid #E5E5E5;
+			line-height: 40px;
+
+			&:hover {
+				color: red;
+
+				.title {
+					.title-icon {
+						border-left-color: red;
+					}
+				}
+			}
+
+			.title {
+				width: 500px;
+
+				.title-icon {
+					display: inline-block;
+					width: 0;
+					height: 0;
+					width: 0;
+					height: 0;
+					border-top: 6px solid transparent;
+					border-left: 8px solid #d2d2d2;
+					border-bottom: 6px solid transparent;
+				}
+			}
+		}
+	}
+
+	/deep/ .el-pagination {
+		margin-top: 50px;
+		text-align: center;
+	}
+	.serch-wrapper {
+		display: flex;
+		height: 33px;
+		position: absolute;
+		top: -80px;
+		right: -50px;
+	
+		.search {
+	
+			padding-left: 13px;
+			padding-right: 13px;
+			width: 295px;
+			height: 33px;
+			line-height: 33px;
+			background: #FFFFFF;
+			border: 1px solid #CCCCCC;
+			border-radius: 10px;
+			// margin-bottom: 10px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+	
+			input {
+				width: 235px;
+				font-size: 16px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				outline: none;
+				border: none;
+			}
+	
+			img {
+				width: 20px;
+				height: 20px;
+			}
+		}
+	}
+</style>

src/views/cause/humanity/Detail.vue

@@ -0,0 +1,37 @@
+<template>
+	<div class="new-detail">
+		<dcontent :content="content"></dcontent>
+	</div>
+</template>
+
+<script>
+	import { details } from '../../../request/api.js'
+	export default {
+		data() {
+			return {
+				content: '',
+				detail: {},
+				idd:0
+			}
+		},
+		created() {
+			this.getContent()
+		},
+		methods:{
+			getContent() {
+				let obj = this
+				this.idd = this.$route.query.id
+				obj.getDetail()
+			},
+			getDetail() {
+				let obj = this
+				details({},this.idd).then(res => {
+					obj.content = res.data.content
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/cause/humanity/List.vue

@@ -0,0 +1,178 @@
+<template>
+	<div class="new-list">
+		<div class="serch-wrapper">
+			<div class="search">
+				<input type="text" v-model="keyword" placeholder="请输入内容进行搜索" class="" @keyup.enter="getList(keyword)" />
+				<img src="../../../assets/img/search.png" class="hand" @click="getList(keyword)">
+			</div>
+		</div>
+		<div class="empty" v-if="newList.length == 0">
+			暂无数据
+		</div>
+		<div class="new-item  hand" v-for="item in newList" :key="item.id" @click="navTo('/cause/humanity/detail?id='+ item.id)">
+			<div class="title clamp">
+				<span class="title-icon"></span>
+				{{ item.title }}
+			</div>
+			<div class="time">{{ item.release_time?item.release_time:item.add_time | time }}</div>
+		</div>
+		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页"
+			@current-change="currentChange" :page-size="15" hide-on-single-page></el-pagination>
+	</div>
+</template>
+
+<script>
+	import {
+		getList
+	} from '../../../request/api.js';
+	export default {
+		data() {
+			return {
+				newList: [],
+				total: 0,
+				page: 1,
+				limit: 15,
+				keyword: ''
+			};
+		},
+		filters: {
+			time(val) {
+				let arr = val.split(' ')
+				let str = arr[0]
+				str = str.replace(/-/g, '.')
+				return str
+			}
+		},
+		created() {
+			this.getList()
+		},
+		methods: {
+			navTo(url) {
+				this.$router.push(url);
+			},
+			currentChange(e) {
+				this.page = e
+				this.getList()
+			},
+			getList(keyword) {
+				let obj = this
+				if (keyword) {
+					obj.page = 1
+				}
+				getList({
+					page: obj.page,
+					limit: obj.limit,
+					name: obj.keyword
+				},66).then(res => {
+					obj.newList = res.data.list.sort(this.compare('id'))
+					obj.total = res.data.count
+				})
+			},
+			compare(attribute) {
+				return function(obj1, obj2) {
+					var val1 = obj1[attribute];
+					var val2 = obj2[attribute];
+					if (val1 < val2) {
+						return 1;
+					} else if (val1 > val2) {
+						return -1;
+					} else {
+						return 0;
+					}
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.new-list {
+
+		position: relative;
+		
+		.empty {
+			text-align: center;
+			color: #999;
+			height: 400px;
+			line-height: 400px;
+		}
+		.new-item {
+			display: flex;
+			justify-content: space-between;
+			font-size: 18px;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #666666;
+			height: 40px;
+			border-bottom: 1px solid #E5E5E5;
+			line-height: 40px;
+
+			&:hover {
+				color: red;
+
+				.title {
+					.title-icon {
+						border-left-color: red;
+					}
+				}
+			}
+
+			.title {
+				width: 500px;
+
+				.title-icon {
+					display: inline-block;
+					width: 0;
+					height: 0;
+					width: 0;
+					height: 0;
+					border-top: 6px solid transparent;
+					border-left: 8px solid #d2d2d2;
+					border-bottom: 6px solid transparent;
+				}
+			}
+		}
+	}
+
+	/deep/ .el-pagination {
+		margin-top: 50px;
+		text-align: center;
+	}
+	.serch-wrapper {
+		display: flex;
+		height: 33px;
+		position: absolute;
+		top: -80px;
+		right: -50px;
+	
+		.search {
+	
+			padding-left: 13px;
+			padding-right: 13px;
+			width: 295px;
+			height: 33px;
+			line-height: 33px;
+			background: #FFFFFF;
+			border: 1px solid #CCCCCC;
+			border-radius: 10px;
+			// margin-bottom: 10px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+	
+			input {
+				width: 235px;
+				font-size: 16px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				outline: none;
+				border: none;
+			}
+	
+			img {
+				width: 20px;
+				height: 20px;
+			}
+		}
+	}
+</style>

src/views/cause/remains/Detail.vue

@@ -0,0 +1,37 @@
+<template>
+	<div class="new-detail">
+		<dcontent :content="content"></dcontent>
+	</div>
+</template>
+
+<script>
+	import { details } from '../../../request/api.js'
+	export default {
+		data() {
+			return {
+				content: '',
+				detail: {},
+				idd:0
+			}
+		},
+		created() {
+			this.getContent()
+		},
+		methods:{
+			getContent() {
+				let obj = this
+				this.idd = this.$route.query.id
+				obj.getDetail()
+			},
+			getDetail() {
+				let obj = this
+				details({},this.idd).then(res => {
+					obj.content = res.data.content
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/cause/remains/List.vue

@@ -0,0 +1,178 @@
+<template>
+	<div class="new-list">
+		<div class="serch-wrapper">
+			<div class="search">
+				<input type="text" v-model="keyword" placeholder="请输入内容进行搜索" class="" @keyup.enter="getList(keyword)" />
+				<img src="../../../assets/img/search.png" class="hand" @click="getList(keyword)">
+			</div>
+		</div>
+		<div class="empty" v-if="newList.length == 0">
+			暂无数据
+		</div>
+		<div class="new-item  hand" v-for="item in newList" :key="item.id" @click="navTo('/cause/remains/detail?id='+ item.id)">
+			<div class="title clamp">
+				<span class="title-icon"></span>
+				{{ item.title }}
+			</div>
+			<div class="time">{{ item.release_time?item.release_time:item.add_time | time }}</div>
+		</div>
+		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页"
+			@current-change="currentChange" :page-size="15" hide-on-single-page></el-pagination>
+	</div>
+</template>
+
+<script>
+	import {
+		getList
+	} from '../../../request/api.js';
+	export default {
+		data() {
+			return {
+				newList: [],
+				total: 0,
+				page: 1,
+				limit: 15,
+				keyword: ''
+			};
+		},
+		filters: {
+			time(val) {
+				let arr = val.split(' ')
+				let str = arr[0]
+				str = str.replace(/-/g, '.')
+				return str
+			}
+		},
+		created() {
+			this.getList()
+		},
+		methods: {
+			navTo(url) {
+				this.$router.push(url);
+			},
+			currentChange(e) {
+				this.page = e
+				this.getList()
+			},
+			getList(keyword) {
+				let obj = this
+				if (keyword) {
+					obj.page = 1
+				}
+				getList({
+					page: obj.page,
+					limit: obj.limit,
+					name: obj.keyword
+				},69).then(res => {
+					obj.newList = res.data.list.sort(this.compare('id'))
+					obj.total = res.data.count
+				})
+			},
+			compare(attribute) {
+				return function(obj1, obj2) {
+					var val1 = obj1[attribute];
+					var val2 = obj2[attribute];
+					if (val1 < val2) {
+						return 1;
+					} else if (val1 > val2) {
+						return -1;
+					} else {
+						return 0;
+					}
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.new-list {
+
+		position: relative;
+		
+		.empty {
+			text-align: center;
+			color: #999;
+			height: 400px;
+			line-height: 400px;
+		}
+		.new-item {
+			display: flex;
+			justify-content: space-between;
+			font-size: 18px;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #666666;
+			height: 40px;
+			border-bottom: 1px solid #E5E5E5;
+			line-height: 40px;
+
+			&:hover {
+				color: red;
+
+				.title {
+					.title-icon {
+						border-left-color: red;
+					}
+				}
+			}
+
+			.title {
+				width: 500px;
+
+				.title-icon {
+					display: inline-block;
+					width: 0;
+					height: 0;
+					width: 0;
+					height: 0;
+					border-top: 6px solid transparent;
+					border-left: 8px solid #d2d2d2;
+					border-bottom: 6px solid transparent;
+				}
+			}
+		}
+	}
+
+	/deep/ .el-pagination {
+		margin-top: 50px;
+		text-align: center;
+	}
+	.serch-wrapper {
+		display: flex;
+		height: 33px;
+		position: absolute;
+		top: -80px;
+		right: -50px;
+	
+		.search {
+	
+			padding-left: 13px;
+			padding-right: 13px;
+			width: 295px;
+			height: 33px;
+			line-height: 33px;
+			background: #FFFFFF;
+			border: 1px solid #CCCCCC;
+			border-radius: 10px;
+			// margin-bottom: 10px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+	
+			input {
+				width: 235px;
+				font-size: 16px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				outline: none;
+				border: none;
+			}
+	
+			img {
+				width: 20px;
+				height: 20px;
+			}
+		}
+	}
+</style>

src/views/cause/rescue/Detail.vue

@@ -0,0 +1,37 @@
+<template>
+	<div class="new-detail">
+		<dcontent :content="content"></dcontent>
+	</div>
+</template>
+
+<script>
+	import { details } from '../../../request/api.js'
+	export default {
+		data() {
+			return {
+				content: '',
+				detail: {},
+				idd:0
+			}
+		},
+		created() {
+			this.getContent()
+		},
+		methods:{
+			getContent() {
+				let obj = this
+				this.idd = this.$route.query.id
+				obj.getDetail()
+			},
+			getDetail() {
+				let obj = this
+				details({},this.idd).then(res => {
+					obj.content = res.data.content
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/cause/rescue/List.vue

@@ -0,0 +1,178 @@
+<template>
+	<div class="new-list">
+		<div class="serch-wrapper">
+			<div class="search">
+				<input type="text" v-model="keyword" placeholder="请输入内容进行搜索" class="" @keyup.enter="getList(keyword)" />
+				<img src="../../../assets/img/search.png" class="hand" @click="getList(keyword)">
+			</div>
+		</div>
+		<div class="empty" v-if="newList.length == 0">
+			暂无数据
+		</div>
+		<div class="new-item  hand" v-for="item in newList" :key="item.id" @click="navTo('/cause/rescue/detail?id='+ item.id)">
+			<div class="title clamp">
+				<span class="title-icon"></span>
+				{{ item.title }}
+			</div>
+			<div class="time">{{ item.release_time?item.release_time:item.add_time | time }}</div>
+		</div>
+		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页"
+			@current-change="currentChange" :page-size="15" hide-on-single-page></el-pagination>
+	</div>
+</template>
+
+<script>
+	import {
+		getList
+	} from '../../../request/api.js';
+	export default {
+		data() {
+			return {
+				newList: [],
+				total: 0,
+				page: 1,
+				limit: 15,
+				keyword: ''
+			};
+		},
+		filters: {
+			time(val) {
+				let arr = val.split(' ')
+				let str = arr[0]
+				str = str.replace(/-/g, '.')
+				return str
+			}
+		},
+		created() {
+			this.getList()
+		},
+		methods: {
+			navTo(url) {
+				this.$router.push(url);
+			},
+			currentChange(e) {
+				this.page = e
+				this.getList()
+			},
+			getList(keyword) {
+				let obj = this
+				if (keyword) {
+					obj.page = 1
+				}
+				getList({
+					page: obj.page,
+					limit: obj.limit,
+					name: obj.keyword
+				},64).then(res => {
+					obj.newList = res.data.list.sort(this.compare('id'))
+					obj.total = res.data.count
+				})
+			},
+			compare(attribute) {
+				return function(obj1, obj2) {
+					var val1 = obj1[attribute];
+					var val2 = obj2[attribute];
+					if (val1 < val2) {
+						return 1;
+					} else if (val1 > val2) {
+						return -1;
+					} else {
+						return 0;
+					}
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.new-list {
+
+		position: relative;
+		
+		.empty {
+			text-align: center;
+			color: #999;
+			height: 400px;
+			line-height: 400px;
+		}
+		.new-item {
+			display: flex;
+			justify-content: space-between;
+			font-size: 18px;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #666666;
+			height: 40px;
+			border-bottom: 1px solid #E5E5E5;
+			line-height: 40px;
+
+			&:hover {
+				color: red;
+
+				.title {
+					.title-icon {
+						border-left-color: red;
+					}
+				}
+			}
+
+			.title {
+				width: 500px;
+
+				.title-icon {
+					display: inline-block;
+					width: 0;
+					height: 0;
+					width: 0;
+					height: 0;
+					border-top: 6px solid transparent;
+					border-left: 8px solid #d2d2d2;
+					border-bottom: 6px solid transparent;
+				}
+			}
+		}
+	}
+
+	/deep/ .el-pagination {
+		margin-top: 50px;
+		text-align: center;
+	}
+	.serch-wrapper {
+		display: flex;
+		height: 33px;
+		position: absolute;
+		top: -80px;
+		right: -50px;
+	
+		.search {
+	
+			padding-left: 13px;
+			padding-right: 13px;
+			width: 295px;
+			height: 33px;
+			line-height: 33px;
+			background: #FFFFFF;
+			border: 1px solid #CCCCCC;
+			border-radius: 10px;
+			// margin-bottom: 10px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+	
+			input {
+				width: 235px;
+				font-size: 16px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				outline: none;
+				border: none;
+			}
+	
+			img {
+				width: 20px;
+				height: 20px;
+			}
+		}
+	}
+</style>

src/views/cause/service/Detail.vue

@@ -0,0 +1,37 @@
+<template>
+	<div class="new-detail">
+		<dcontent :content="content"></dcontent>
+	</div>
+</template>
+
+<script>
+	import { details } from '../../../request/api.js'
+	export default {
+		data() {
+			return {
+				content: '',
+				detail: {},
+				idd:0
+			}
+		},
+		created() {
+			this.getContent()
+		},
+		methods:{
+			getContent() {
+				let obj = this
+				this.idd = this.$route.query.id
+				obj.getDetail()
+			},
+			getDetail() {
+				let obj = this
+				details({},this.idd).then(res => {
+					obj.content = res.data.content
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/cause/service/List.vue

@@ -0,0 +1,178 @@
+<template>
+	<div class="new-list">
+		<div class="serch-wrapper">
+			<div class="search">
+				<input type="text" v-model="keyword" placeholder="请输入内容进行搜索" class="" @keyup.enter="getList(keyword)" />
+				<img src="../../../assets/img/search.png" class="hand" @click="getList(keyword)">
+			</div>
+		</div>
+		<div class="empty" v-if="newList.length == 0">
+			暂无数据
+		</div>
+		<div class="new-item  hand" v-for="item in newList" :key="item.id" @click="navTo('/cause/service/detail?id='+ item.id)">
+			<div class="title clamp">
+				<span class="title-icon"></span>
+				{{ item.title }}
+			</div>
+			<div class="time">{{ item.release_time?item.release_time:item.add_time | time }}</div>
+		</div>
+		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页"
+			@current-change="currentChange" :page-size="15" hide-on-single-page></el-pagination>
+	</div>
+</template>
+
+<script>
+	import {
+		getList
+	} from '../../../request/api.js';
+	export default {
+		data() {
+			return {
+				newList: [],
+				total: 0,
+				page: 1,
+				limit: 15,
+				keyword: ''
+			};
+		},
+		filters: {
+			time(val) {
+				let arr = val.split(' ')
+				let str = arr[0]
+				str = str.replace(/-/g, '.')
+				return str
+			}
+		},
+		created() {
+			this.getList()
+		},
+		methods: {
+			navTo(url) {
+				this.$router.push(url);
+			},
+			currentChange(e) {
+				this.page = e
+				this.getList()
+			},
+			getList(keyword) {
+				let obj = this
+				if (keyword) {
+					obj.page = 1
+				}
+				getList({
+					page: obj.page,
+					limit: obj.limit,
+					name: obj.keyword
+				},71).then(res => {
+					obj.newList = res.data.list.sort(this.compare('id'))
+					obj.total = res.data.count
+				})
+			},
+			compare(attribute) {
+				return function(obj1, obj2) {
+					var val1 = obj1[attribute];
+					var val2 = obj2[attribute];
+					if (val1 < val2) {
+						return 1;
+					} else if (val1 > val2) {
+						return -1;
+					} else {
+						return 0;
+					}
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.new-list {
+
+		position: relative;
+		
+		.empty {
+			text-align: center;
+			color: #999;
+			height: 400px;
+			line-height: 400px;
+		}
+		.new-item {
+			display: flex;
+			justify-content: space-between;
+			font-size: 18px;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #666666;
+			height: 40px;
+			border-bottom: 1px solid #E5E5E5;
+			line-height: 40px;
+
+			&:hover {
+				color: red;
+
+				.title {
+					.title-icon {
+						border-left-color: red;
+					}
+				}
+			}
+
+			.title {
+				width: 500px;
+
+				.title-icon {
+					display: inline-block;
+					width: 0;
+					height: 0;
+					width: 0;
+					height: 0;
+					border-top: 6px solid transparent;
+					border-left: 8px solid #d2d2d2;
+					border-bottom: 6px solid transparent;
+				}
+			}
+		}
+	}
+
+	/deep/ .el-pagination {
+		margin-top: 50px;
+		text-align: center;
+	}
+	.serch-wrapper {
+		display: flex;
+		height: 33px;
+		position: absolute;
+		top: -80px;
+		right: -50px;
+	
+		.search {
+	
+			padding-left: 13px;
+			padding-right: 13px;
+			width: 295px;
+			height: 33px;
+			line-height: 33px;
+			background: #FFFFFF;
+			border: 1px solid #CCCCCC;
+			border-radius: 10px;
+			// margin-bottom: 10px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+	
+			input {
+				width: 235px;
+				font-size: 16px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				outline: none;
+				border: none;
+			}
+	
+			img {
+				width: 20px;
+				height: 20px;
+			}
+		}
+	}
+</style>

src/views/cause/teenagers/Detail.vue

@@ -0,0 +1,37 @@
+<template>
+	<div class="new-detail">
+		<dcontent :content="content"></dcontent>
+	</div>
+</template>
+
+<script>
+	import { details } from '../../../request/api.js'
+	export default {
+		data() {
+			return {
+				content: '',
+				detail: {},
+				idd:0
+			}
+		},
+		created() {
+			this.getContent()
+		},
+		methods:{
+			getContent() {
+				let obj = this
+				this.idd = this.$route.query.id
+				obj.getDetail()
+			},
+			getDetail() {
+				let obj = this
+				details({},this.idd).then(res => {
+					obj.content = res.data.content
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/cause/teenagers/List.vue

@@ -0,0 +1,178 @@
+<template>
+	<div class="new-list">
+		<div class="serch-wrapper">
+			<div class="search">
+				<input type="text" v-model="keyword" placeholder="请输入内容进行搜索" class="" @keyup.enter="getList(keyword)" />
+				<img src="../../../assets/img/search.png" class="hand" @click="getList(keyword)">
+			</div>
+		</div>
+		<div class="empty" v-if="newList.length == 0">
+			暂无数据
+		</div>
+		<div class="new-item  hand" v-for="item in newList" :key="item.id" @click="navTo('/cause/teenagers/detail?id='+ item.id)">
+			<div class="title clamp">
+				<span class="title-icon"></span>
+				{{ item.title }}
+			</div>
+			<div class="time">{{ item.release_time?item.release_time:item.add_time | time }}</div>
+		</div>
+		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页"
+			@current-change="currentChange" :page-size="15" hide-on-single-page></el-pagination>
+	</div>
+</template>
+
+<script>
+	import {
+		getList
+	} from '../../../request/api.js';
+	export default {
+		data() {
+			return {
+				newList: [],
+				total: 0,
+				page: 1,
+				limit: 15,
+				keyword: ''
+			};
+		},
+		filters: {
+			time(val) {
+				let arr = val.split(' ')
+				let str = arr[0]
+				str = str.replace(/-/g, '.')
+				return str
+			}
+		},
+		created() {
+			this.getList()
+		},
+		methods: {
+			navTo(url) {
+				this.$router.push(url);
+			},
+			currentChange(e) {
+				this.page = e
+				this.getList()
+			},
+			getList(keyword) {
+				let obj = this
+				if (keyword) {
+					obj.page = 1
+				}
+				getList({
+					page: obj.page,
+					limit: obj.limit,
+					name: obj.keyword
+				},70).then(res => {
+					obj.newList = res.data.list.sort(this.compare('id'))
+					obj.total = res.data.count
+				})
+			},
+			compare(attribute) {
+				return function(obj1, obj2) {
+					var val1 = obj1[attribute];
+					var val2 = obj2[attribute];
+					if (val1 < val2) {
+						return 1;
+					} else if (val1 > val2) {
+						return -1;
+					} else {
+						return 0;
+					}
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.new-list {
+
+		position: relative;
+		
+		.empty {
+			text-align: center;
+			color: #999;
+			height: 400px;
+			line-height: 400px;
+		}
+		.new-item {
+			display: flex;
+			justify-content: space-between;
+			font-size: 18px;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #666666;
+			height: 40px;
+			border-bottom: 1px solid #E5E5E5;
+			line-height: 40px;
+
+			&:hover {
+				color: red;
+
+				.title {
+					.title-icon {
+						border-left-color: red;
+					}
+				}
+			}
+
+			.title {
+				width: 500px;
+
+				.title-icon {
+					display: inline-block;
+					width: 0;
+					height: 0;
+					width: 0;
+					height: 0;
+					border-top: 6px solid transparent;
+					border-left: 8px solid #d2d2d2;
+					border-bottom: 6px solid transparent;
+				}
+			}
+		}
+	}
+
+	/deep/ .el-pagination {
+		margin-top: 50px;
+		text-align: center;
+	}
+	.serch-wrapper {
+		display: flex;
+		height: 33px;
+		position: absolute;
+		top: -80px;
+		right: -50px;
+	
+		.search {
+	
+			padding-left: 13px;
+			padding-right: 13px;
+			width: 295px;
+			height: 33px;
+			line-height: 33px;
+			background: #FFFFFF;
+			border: 1px solid #CCCCCC;
+			border-radius: 10px;
+			// margin-bottom: 10px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+	
+			input {
+				width: 235px;
+				font-size: 16px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				outline: none;
+				border: none;
+			}
+	
+			img {
+				width: 20px;
+				height: 20px;
+			}
+		}
+	}
+</style>