宽度

src/App.vue

@@ -80,13 +80,15 @@ import { getList,getSearch,getgrey,index } from '@/request/api.js'
 		},
 		mounted() {
 			index().then(res => {
-				console.log(res);
+				// console.log(res);
+					console.log(getTime(res.time));
 			})
+			// 页面灰化
 			getgrey().then(res => {
-				console.log(res);
 				const time = new Date().getTime()
 				if (getTime(time) == getTime(res.time)) {
 					// this.isGrey = true
+					console.log(getTime(res.time));
 					console.log(this.isGrey);
 				} else{
 					console.log(time);
@@ -163,6 +165,7 @@ import { getList,getSearch,getgrey,index } from '@/request/api.js'
 		position: absolute;
 		top: 0;
 		z-index: -1;
+		width: 100%;
 		img {
 			width: 100%;
 		}
@@ -173,7 +176,7 @@ import { getList,getSearch,getgrey,index } from '@/request/api.js'
 	$red: #D82020;
 	.app {
 		font-family: PingFang-SC-Bold;
-		max-width: 1000px;
+		width: 1100px;
 		margin: 0 auto;
 		.boxHeader {
 			display: flex;
@@ -190,10 +193,11 @@ import { getList,getSearch,getgrey,index } from '@/request/api.js'
 			.boxSearch {
 				position: relative;
 				input {
-					min-width: 200px;
+					min-width: 180px;
 					border-radius: 20px;
 					border: solid 2px $red;
 					padding: 5px 10px;
+					padding-right: 30px;
 					height: 15px;
 				    outline: none; // 设置点击后无效果
 				}
@@ -216,11 +220,13 @@ import { getList,getSearch,getgrey,index } from '@/request/api.js'
 				flex: 1;
 				text-align: center;
 				color: #fff;
-				font-size: 14px;
+				font-size: 16px;
 				font-family: PingFang-SC-Bold;
+				// font-weight: Bold;
+				letter-spacing: 2px;
 				.navImg {
-					width: 24px;
-					height: 20px;
+					width: 26px;
+					height: 24px;
 					margin: 2px;
 				}
 			}
@@ -230,6 +236,7 @@ import { getList,getSearch,getgrey,index } from '@/request/api.js'
 		}
 	}
 		.footer {
+			min-width: 1100px;
 			margin-top: 100px;
 			background-color: $red;
 			width: 100%;

src/components/box.vue

@@ -5,7 +5,7 @@
 				<div class="title" :title="n.title">
 					{{ n.title }}
 				</div>
-				<div class="">
+				<div class="you" style="">
 					>
 				</div>
 			</div>
@@ -14,42 +14,70 @@
 			<div class="head nawarp" v-if="isShowHeader">
 				当前位置：
 				<div @click="urlTo('index')">首页</div> 
-				> <div @click="listBack">
-				{{ navList.title }}
-				> {{ navList.list[navChoose].title }}</div>
+					> 
+				<div @click="listBack">
+					{{ navList.title }}
+					> {{ navList.list[navChoose].title }}
+				</div>
 				<span v-show="!(!content) && this.navList.listinlist"> > 信息详情</span>
 			</div>
 			<div class="head" v-else>
 				当前位置：<div @click="urlTo('index')">首页</div> 
-				> <div @click="listBack">{{ navList.title }}</div>
+					> 
+				<div @click="listBack">
+					{{ navList.title }}
+				</div>
 				<span v-show="!(!content) && this.navList.listinlist"> > 信息详情</span>
 			</div>
-			<slot v-if="navChoose == 0 && !isShowSon"></slot>
+			<slot v-if="!isShowSon"></slot>
 			<div class="contentbox">
 				<div class="content">
 					<div class="load" v-show="loadingType == 'loadmore'">
 						----- 加载中 -----
 					</div>
-					<div v-html="content" v-show="isShowSon">
+					<div v-html="content" v-show="isShowSon" class="text">
 						
 					</div>
 					
 					<div class="contentList chooseitem" v-show="!isShowSon">
-						<div class="item" v-for="c in contentList" @click="listChoose(c)">
+						<div class="item" v-for="c in contentList" @click="listChoose(c)" :title="c.title">
+							<span class="title-icon"></span>
 							<div class="title nawarp">
-								{{ c.title }}
+								<div class="">
+								</div>
+								<div class="">
+									{{ c.title }}
+								</div>
+								
 							</div>
 							<div class="time">
 								 {{ getTime(c.releasetime) }}
 							</div>
 						</div>
-						
-						<div class="pagec" v-if="sum != 0">
+						<!-- 页数大于一时显示分页 -->
+						<div class="pagec" v-if="totalPage >1">
 							<div class="fristPage" @click="page = 1">
 								第一页
 							</div>
+							<div class="pagetoomuch" v-show="totalPage>10">
+								<div class="nextPage" v-show="page-4>0">
+									...
+								</div>
+								<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
+								:class="{isChoose:count == page}" v-if="count>page-5&&count<page+4 &&count!=totalPage">
+									{{ count }}
+								</div>
+								<div class="nextPage" v-show="page+4<totalPage">
+									...
+								</div>
+								<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
+								:class="{isChoose:count == page}" v-show="totalPage>2" v-if="count==totalPage">
+									{{ count }}
+								</div>
+							</div>
+							
 							<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
-							:class="{isChoose:count == page}">
+							:class="{isChoose:count == page}" v-show="totalPage<=10">
 								{{ count }}
 							</div>
 							<div class="nextPage" @click='nextPage'>
@@ -72,18 +100,18 @@ import { details,getArticList } from '@/request/api.js'
 		props: ['navList'],
 		data() {
 			return {
-				page: 1,
-				limit: 10,
-				sum: 0,
-				path: this.$route.path,
-				navChoose: this.$route.params.navChoose || this.$route.query.navChoose || 0,
+				page: 1, // 当前页
+				limit: 10, // 每页数量
+				sum: 0, // 文章列表总数
+				loadingType: 'loadmore', // 是否在加载
+				path: this.$route.path, // 路由
+				navChoose: this.$route.params.navChoose || this.$route.query.navChoose || 0, //左侧导航栏选择
 				timeOut: '',// 不断获取初始显示数据直至显示
 				content: '', // 文章
 				contentList: [], // 二级列表
-				contentId: this.$route.params.contentId || this.$route.query.contentId || 0,
-				isShowSon: true,
-				pageId: 0,
-				loadingType: 'loadmore',
+				contentId: this.$route.params.contentId || this.$route.query.contentId || 0, // 文章详情id
+				isShowSon: true, // 是否显示文章而不显示列表
+				pageId: 0, //文章列表id
 			}
 		},
 		mounted() {
@@ -92,20 +120,30 @@ import { details,getArticList } from '@/request/api.js'
 			}
 		},
 		methods: {
-			// 初始化
+			// 查询数据默认
 			init() {
 				this.navC(this.navChoose,this.navList.list[this.navChoose])
 			},
 			navC(index,data) {
-				this.loadingType = 'loadmore'
-				this.page = 1
-				this.isShowSon = true
-				this.content = ''
-				this.contentList = []
-				this.pageId = data.id
-				this.getlistslist()
-				this.navChoose = index
-				this.$emit('navListC',index)
+				// 组织介绍中各区县红十字会单独页面
+				const pd1 = this.path == '/introduce' && index == 2 
+				if (pd1) {
+					this.isShowSon = false
+					this.content = ''
+					this.loadingType == 'nomore'
+					this.contentList = []
+				} else{
+					this.loadingType = 'loadmore' // 加载中
+					this.page = 1
+					this.isShowSon = true
+					this.content = ''
+					this.contentList = []
+					this.pageId = data.id
+					this.getlistslist()
+				}
+					this.navChoose = index
+					this.$emit('navListC',index)
+				
 			},
 			listChoose(data) {
 				this.loadingType = 'loadmore'
@@ -126,36 +164,45 @@ import { details,getArticList } from '@/request/api.js'
 					this.loadingType = 'nomore'
 				})
 			},
+			// 获取文章列表
 			getlistslist() {
-				getArticList({},this.pageId,this.page,this.limit).then(res => {
+				getArticList({page: this.page,limit: this.limit},this.pageId).then(res => {
 					this.sum = res.data.count
 					if(res.data.count > 0) {
+						// 但文章数量为一时显示第一篇文章
 						if(res.data.count == 1 ) {
 							this.isShowSon = true
 							this.contentId = res.data.list[0].id
 							this.getData()
+						// 但点进页面时有指定文章跳至文章详情
 						}else if(this.contentId != 0) {
 							this.isShowSon = true
 							this.getData()
+						// 但文章数量大于一时显示列表
 						}else if(res.data.count > 1) {
 							this.isShowSon = false
 							this.loadingType = 'nomore'
 						}
 						this.contentList = res.data.list
 						
-						
 					}else {
 						this.loadingType = 'nomore'
 					}
 				})
 			},
+			// 改变当前页
 			pageChoose(page) {
 				this.page = page
 			},
+			// 文章详情转文章列表
 			listBack() {
-				this.loadingType = 'nomore'
-				this.content = ''
-				this.isShowSon = false
+				if (this.path == '/introduce' && this.navChoose == 2) {
+				}else {
+					this.loadingType = 'nomore'
+					this.content = ''
+					this.isShowSon = false
+				}
+				
 			},
 			
 			// 下一页
@@ -171,6 +218,7 @@ import { details,getArticList } from '@/request/api.js'
 					name: name
 				})
 			},
+			// 时间戳准换
 			getTime(time) {
 				return time.substring(0,10)
 			},
@@ -184,9 +232,11 @@ import { details,getArticList } from '@/request/api.js'
 			totalPage() {
 				return Math.ceil(this.sum/this.limit)
 			},
+			// 是否有文章列表
 			isShownav() {
 				return !(!this.navList.list)
 			},
+			// 文章列表是否大于数量一
 			isShowHeader() {
 				if(this.isShownav) {
 					if (this.navList.list.length > 1) {
@@ -238,14 +288,24 @@ $red: #D82020;
 			}
 		}
 		.nav {
+			font-size: 16px;
+			font-family: PingFang-SC-Medium;
+			font-weight: Medium;
+			color: #333333;
 			background-color: #fff;
 			display: flex;
 			justify-content: space-between;
 			padding: 10px 20px;
+			.you {
+				color: #333333;
+			}
 		}
 		.navC {
 			background-color: #F7DFDF;
 			color: $red;
+			.you {
+				color: $red;
+			}
 		}
 		.right {
 			flex: 7;
@@ -262,11 +322,15 @@ $red: #D82020;
 				position: relative;
 			}
 			.content {
-					position: relative;
+				position: relative;
 				height: 800px;
 				overflow: auto;
-				padding: 0 10px;
+				padding: 25px 40px;
 				background-color: #fff;
+				.text {
+					padding: 0 10px;
+					padding-bottom: 30px;
+				}
 				.original {
 					position: absolute;
 					color: $red;
@@ -284,6 +348,7 @@ $red: #D82020;
 	.load {
 		text-align: center;
 		margin: 20px 0;
+		color: #989898;
 	}
 	.contentList {
 		.item {
@@ -292,15 +357,21 @@ $red: #D82020;
 			height: 40px;
 			display: flex;
 			justify-content: space-between;
-			color: #3e3e3e;
+			color: #666666;
 			border-bottom: solid 1px #F2F2F2;
-				overflow: hidden;
+			overflow: hidden;
+				img {
+					width: 20px;
+					height: 20px;
+					margin: auto 0;
+				}
 			.title {
 				width: calc(100% - 120px);
 				text-overflow: ellipsis;
 				display: -webkit-box;
 				-webkit-box-orient: vertical;
 				-webkit-line-clamp: 1;
+				
 			}
 			.time {
 				min-width: 100px;
@@ -308,10 +379,26 @@ $red: #D82020;
 		}
 	}
 	.chooseitem  {
-		color: #999999;		
+		color: #666;	
+			.title-icon {
+				display: inline-block;
+				width: 0;
+				height: 0;
+				margin: auto 0;
+				border-top: 6px solid transparent;
+				border-left: 8px solid #d2d2d2;
+				border-bottom: 6px solid transparent;
+			}
 	}
 	.chooseitem :hover {
-		color: #d8272a;		
+		color: #d8272a;	
+		.title-icon {
+			border-left-color: #d8272a;
+		}
+	}
+	
+	.pagetoomuch {
+		display: flex;
 	}
 	.pagec {
 		color: #333333;

src/components/slideLaR.vue

@@ -74,7 +74,7 @@
 		.list {
 			height: 100%;
 			flex-wrap: nowrap;
-			overflow: auto;
+			// overflow: auto;
 			display: flex;
 			.listBox {
 				display: flex;

src/components/slideUpd.vue

@@ -5,7 +5,7 @@
 		@mouseleave="mouseLeave"
 		:style="{'margin-top': -marginTop+'px'}">
 			<div class="listBox" id="listBoxH">
-				<slot></slot><slot></slot>
+				<slot></slot><slot></slot><slot></slot><slot></slot>
 			</div>
 		</div>
 	</div>
@@ -29,7 +29,7 @@
 				this.automatic()
 			},
 			getslot() {
-				this.listHeight = document.getElementById("listBoxH").clientHeight/2
+				this.listHeight = document.getElementById("listBoxH").clientHeight/4
 				this.boxHeight = this.$refs.boxH.clientHeight
 			},
 			// 自动滑动

src/request/api.js

@@ -25,11 +25,11 @@ export function details(data,id) {
 }
 
 // 获取文章列表
-export function getArticList(data,id,page,limit) {
+export function getArticList(data,id) {
 	return request({
 		url: '/api/Article/lst?ifyid='+id+'&order=releasetime desc',
 		method: 'get',
-		data
+		params: data
 	});
 }
 
@@ -38,7 +38,7 @@ export function getList(data,id) {
 	return request({
 		url: '/api/Article/ify?pid='+id,
 		method: 'get',
-		data
+		params: data
 	});
 }
 
@@ -47,7 +47,15 @@ export function getlaveList(data) {
 	return request({
 		url: '/api/lave/lst',
 		method: 'get',
-		data
+		params: data
+	});
+}
+// 搜索爱心榜
+export function getlaveListsearch(data,key) {
+	return request({
+		url: '/api/lave/lst?key='+key,
+		method: 'get',
+		params: data
 	});
 }
 
@@ -56,23 +64,23 @@ export function getvolunteerList(data) {
 	return request({
 		url: '/api/lave/lst',
 		method: 'get',
-		data
+		params: data
 	});
 }
 
 // 搜索
-export function getSearch(data) {
+export function getSearch(data,value) {
 	return request({
-		url: '/api/Article/lst?ifyid=0&order=releasetime',
+		url: '/api/Article/lst?ifyid=0&key='+value+'&order=releasetime desc',
 		method: 'get',
-		data
+		params: data
 	});
 }
 // 志愿者搜索
-export function getvSearch(data,value,page,limit) {
+export function getvSearch(data,value) {
 	return request({
-		url: '/api/Article/lst?ifyid=21&key='+value+'&page='+page+'&limit='+limit+'&order=releasetime',
+		url: '/api/Article/lst?ifyid=21&key='+value+'&order=releasetime desc',
 		method: 'get',
-		data
+		params: data
 	});
 }

src/request/request.js

@@ -52,7 +52,6 @@ service.interceptors.request.use(
 			config.headers['sys-token'] = sys_token
 			config.headers['token'] = token
 		}
-		console.log(config);
 		return config
 	},
 	error => {

src/views/business/business.vue

@@ -1,26 +1,42 @@
 <template>
 	<div class="business">
 		<jm-box :navList='navList' @navListC='navListC'>
-			<div class="about">
-				<div class="title">
-					应急救援
-				</div>
-				<p>备灾救灾是红十字会四大核心工作之一，是《中华人民共和国红十字会法》赋予红十字会的重要职责，是红十字会“人道、博爱、
-				奉献”精神的具体体现，是为社会扶危济困、行善积德的救助工程。</p>
-				<P>在特大自然灾害和突发公共事件面前，人总显得非常脆弱，当鲜活的生命遭受摧残，当巨额的财产蒙受损失的时候，红十字一-个 神圣的标志就会成为人们的旗帜，
-				它将汇聚八方力量，为灾难中的人们提供人道主义援助，帮助其度过难关，重建物质和精神家园。</P>
+			<div class="abbbb">
+				<about1 v-if="navChoose == 0"></about1>
+				<about2 v-if="navChoose == 1"></about2>
+				<about3 v-if="navChoose == 2"></about3>
+				<about4 v-if="navChoose == 3"></about4>
+				<about5 v-if="navChoose == 4"></about5>
+				<about6 v-if="navChoose == 5"></about6>
+				<about7 v-if="navChoose == 6"></about7>
 			</div>
+			
 		</jm-box>
 	</div>
 </template>
 
 <script>
+import about1 from './chlid/about1.vue'
+import about2 from './chlid/about2.vue'
+import about3 from './chlid/about3.vue'
+import about4 from './chlid/about4.vue'
+import about5 from './chlid/about5.vue'
+import about6 from './chlid/about6.vue'
+import about7 from './chlid/about7.vue'
+	
 import { getArticList,getList } from '@/request/api.js'
 
 import jmBox from '@/components/box.vue'
 	export default {
 		components: {
 			jmBox,
+			about1,
+			about2,
+			about3,
+			about4,
+			about5,
+			about6,
+			about7
 		},
 		data() {
 			return {
@@ -56,16 +72,4 @@ import jmBox from '@/components/box.vue'
 </script>
 
 <style lang="scss" scoped>
-	.about {
-		background-color: #fff;
-		padding: 20px;
-		.title {
-			text-align: center;
-			color: red;
-			font-size: 18px;
-		}
-		p {
-			text-indent: 1cm;
-		}
-	}
 </style>

src/views/business/chlid/about1.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="about">
+		<div class="title">
+				应急救援
+		</div>
+			<p>备灾救灾是红十字会四大核心工作之一，是《中华人民共和国红十字会法》赋予红十字会的重要职责，是红十字会“人道、博爱、 奉献”精神的具体体现，是为社会扶危济困、行善积德的救助工程。</p>
+			<P>在特大自然灾害和突发公共事件面前，人总显得非常脆弱，当鲜活的生命遭受摧残，当巨额的财产蒙受损失的时候，红十字一-个 神圣的标志就会成为人们的旗帜， 它将汇聚八方力量，为灾难中的人们提供人道主义援助，帮助其度过难关，重建物质和精神家园。</P>
+		<div class="down">
+			相关新闻报道
+		</div>
+	</div>
+</template>
+
+<script>
+	
+</script>
+
+<style lang="scss" scoped>
+.about {
+	font-family: PingFang-SC-Medium;
+	padding: 30px 50px;
+	background-color: #fff;
+	line-height: 25px;
+	padding-bottom: 0;
+	.title {
+		text-align: center;
+		color: red;
+		font-size: 22px;
+		font-weight: bold;
+	}
+	p {
+		font-size: 14px;
+		text-indent: 1cm;
+	}
+}
+.down {
+	font-size: 18px;
+	font-weight: bold;
+	padding: 0 20px;
+	padding-top: 80px;
+}
+</style>

src/views/business/chlid/about2.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="about">
+		<div class="title">
+				应急救护
+			</div>
+			<p> 灾害、事故、车祸如影随行着我们的生活，无情地吞噬着人们的生命、健康和财产安全。据统计，我国每年仅道路交通事故造成的死亡人数就达十万左右，每年受伤的人数更相当于一个中等县市的人口。当一个人心跳呼吸骤停或大出血时，黄金救命时间只有短短4-6分钟。然当救护车到达事故发生现场时，有50％以上的重伤员因为错过了最佳抢救时间而失去了生命。所以，当事故无法避免，灾难随时可能发生时，如果你经过救护培训，能有效开展现场救护，那么，在事发现场的你就是最能挽救伤员性命的那个人。</p>
+			<P> 现场救护是红十字运动的起源，是红十字会与红新月会国际联合会四项核心任务之一，是《中华人民共和国红十字会法》赋予红十字组织的七项职责之一，也是中国红十字会“生命工程”的重要内容。开展现场救护知识的培训，增强群众自救互救能力，是社会文明的需要，是红十字会工作的特色。在有人身伤害事故的现场，就有经过红十字会培训的红十字救护员开展现场救护，这是红十字会经过若干年努力要实现的目标。</P>
+		<div class="down">
+			相关新闻报道
+		</div>
+	</div>
+</template>
+
+<script>
+	
+</script>
+
+<style lang="scss" scoped>
+.about {
+	font-family: PingFang-SC-Medium;
+	padding: 30px 50px;
+	background-color: #fff;
+	line-height: 25px;
+	padding-bottom: 0;
+	.title {
+		text-align: center;
+		color: red;
+		font-size: 22px;
+		font-weight: bold;
+	}
+	p {
+		font-size: 14px;
+		text-indent: 1cm;
+	}
+}
+.down {
+	font-size: 18px;
+	font-weight: bold;
+	padding: 0 20px;
+	padding-top: 80px;
+}
+</style>

src/views/business/chlid/about3.vue

@@ -0,0 +1,44 @@
+<template>
+	<div class="about">
+		<div class="title">
+				志愿服务
+			</div>
+			<p>志愿服务是国际红十字运动七项基本原则之一，是红十字运动的重要组成部分。</p>
+			<P> 红十字志愿服务是指红十字志愿工作者在红十字会的组织和指导下，利用自己的时间、技能、资源、爱心，为他人、社区、社会提供非营利、无偿、非职业化援助的行为。</P>
+			<p> 红十字志愿工作者是指在红十字会注册，以改善最易受损害群体的境况为己任，自愿贡献个人的时间、技能、款物和爱心，无偿参与红十字会组织的志愿服务的个人。志愿者以“不图报酬、志愿奉献、关心社会、助人为乐”为服务宗旨。</p>
+			<p> 我们热忱欢迎社会各界热爱红十字事业，愿意奉献爱心的同仁加入红十字志愿工作者队伍，为构建社会主义和谐社会做出自己的贡献。</p>
+		<div class="down">
+			相关新闻报道
+		</div>
+	</div>
+</template>
+
+<script>
+	
+</script>
+
+<style lang="scss" scoped>
+.about {
+	font-family: PingFang-SC-Medium;
+	padding: 30px 50px;
+	background-color: #fff;
+	line-height: 25px;
+	padding-bottom: 0;
+	.title {
+		text-align: center;
+		color: red;
+		font-size: 22px;
+		font-weight: bold;
+	}
+	p {
+		font-size: 14px;
+		text-indent: 1cm;
+	}
+}
+.down {
+	font-size: 18px;
+	font-weight: bold;
+	padding: 0 20px;
+	padding-top: 80px;
+}
+</style>

src/views/business/chlid/about4.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="about">
+		<div class="title">
+				无偿献血
+			</div>
+			<p> 无偿献血是指符合献血条件的公民，无任何代价地志愿献出自己的血液。无偿献血是人类文明进步的象征，是救死扶伤的高尚行为，是无私奉献精神的体现，也是社会精神文明建设的重要标志之一，由于无偿献血坚持严格的科学标准及规定，能够保证血液的质量。</p>
+			<P>无偿献血是《中华人民共和国红十字会法》赋予的职责之一，嘉兴市红十字会依法开展无偿献血的宣传、动员工作，使群众参与无偿献血的意识逐步增强。 2001年起，嘉兴市的所有临床用血全部来源于无偿献血。每年“五·八世界红十字日”市红十会都会组织相关部门开展无偿献血宣传活动。</P>
+		<div class="down">
+			相关新闻报道
+		</div>
+	</div>
+</template>
+
+<script>
+	
+</script>
+
+<style lang="scss" scoped>
+.about {
+	font-family: PingFang-SC-Medium;
+	padding: 30px 50px;
+	background-color: #fff;
+	line-height: 25px;
+	padding-bottom: 0;
+	.title {
+		text-align: center;
+		color: red;
+		font-size: 22px;
+		font-weight: bold;
+	}
+	p {
+		font-size: 14px;
+		text-indent: 1cm;
+	}
+}
+.down {
+	font-size: 18px;
+	font-weight: bold;
+	padding: 0 20px;
+	padding-top: 80px;
+}
+</style>

src/views/business/chlid/about5.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="about">
+		<div class="title">
+				 遗体和人体器官捐献
+			</div>
+			<p> 人体器官移植技术是20世纪医学领域取得的重大进展之一，给许多终末期脏器衰竭的患者带来了治愈的希望，挽救了成千上万患者的生命。 随着我国人体器官移植事业的迅速发展，解决移植器官的来源成为摆在我们面前的一个最大考验。我国每年约有150万患者需要器官移植，而实施的器官移植手术仅有1万余例，远远不能满足临床治疗的需要。更多的患者在焦急和苦苦的中离开了这个世界。</p>
+			<P>红十字会是从事人道主义工作的社会救助团体。长期以来，红十字会开展遗体（组织）、造血干细胞捐献等工作，为保护人的生命和健康作出了积极贡献。永续生命，大爱永恒。为使那些期盼得到器官移植的患者早日重获新生，为了挽救更多宝贵的生命，让我们积极行动起来吧！用我们的爱心和奉献，使生命得到延续和传承！</P>
+		<div class="down">
+			相关新闻报道
+		</div>
+	</div>
+</template>
+
+<script>
+	
+</script>
+
+<style lang="scss" scoped>
+.about {
+	font-family: PingFang-SC-Medium;
+	padding: 30px 50px;
+	background-color: #fff;
+	line-height: 25px;
+	padding-bottom: 0;
+	.title {
+		text-align: center;
+		color: red;
+		font-size: 22px;
+		font-weight: bold;
+	}
+	p {
+		font-size: 14px;
+		text-indent: 1cm;
+	}
+}
+.down {
+	font-size: 18px;
+	font-weight: bold;
+	padding: 0 20px;
+	padding-top: 80px;
+}
+</style>

src/views/business/chlid/about6.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="about">
+		<div class="title">
+				 造血干细胞捐献 
+			</div>
+			<p> 患白血病等恶性血液疾病的不断增多和年轻化使得越来越多的患者饱受病痛的折磨，无数次与死神搏斗。对他们来说，唯一有效的办法就是接受骨髓移植，又叫造血干细胞移植。然要成功地进行造血干细胞移植治疗，捐献者与患者之间的HLA型特别要相合。如果不合，移植后就会产生严重的移植物抗宿主反应，甚至危及患者生命。在HLA（人类白细胞抗原）配型相合的条件下，健康人的10克造血干细胞就能挽救一个患者的生命。我国等待造血干细胞移植的患者有数百万，仅白血病患者每年就新增4万以上。中华骨髓库现有登记资料100多万人份，远远满足不了移植需要。为了不让如花的生命在等待中凋谢，让我们一起加入到捐献造血干细胞的队伍中来吧。</p>
+			
+		<div class="down">
+			相关新闻报道
+		</div>
+	</div>
+</template>
+
+<script>
+	
+</script>
+
+<style lang="scss" scoped>
+.about {
+	font-family: PingFang-SC-Medium;
+	padding: 30px 50px;
+	background-color: #fff;
+	line-height: 25px;
+	padding-bottom: 0;
+	.title {
+		text-align: center;
+		color: red;
+		font-size: 22px;
+		font-weight: bold;
+	}
+	p {
+		font-size: 14px;
+		text-indent: 1cm;
+	}
+}
+.down {
+	font-size: 18px;
+	font-weight: bold;
+	padding: 0 20px;
+	padding-top: 80px;
+}
+</style>

src/views/business/chlid/about7.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="about">
+		<div class="title">
+				红十字青少年
+			</div>
+			<p> 红十字青少年是红十字运动的一支重要力量，一支生力军。开展红十字青少年活动是红十字事业的重要组成部分，是《中华人民共和国红十字会法》规定的红十字会履行的七项职责之一，有助于加强青少年的人道主义教育，树立正确的人生观、世界观。</p>
+			<P> 根据中国红十字会、中华人民共和国教育部制定的《学校红十字会工作规则》，在大、中、小学校组织开展红十字青少年活动是各级红十字会的一项重要工作。各地红十字会加强红十字青少年工作的制度化、规范化、知识化、趣味化。把红十字青少年工作提到精神文明建设和培养一代新人，加强素质教育的高度认识，积极开展丰富多彩、生动活泼适合青少年特点的活动。以红十字人道、博爱、奉献精神，在学校和青少年当中广泛开展救死扶伤、扶贫济困、敬老助残等助人为乐精神以及有利于青少年身心健康的夏（冬）令营等活动，为开辟德育教育第二课堂，对促进学校精神文明建设、培养一代新人有很大意义。</P>
+		<div class="down">
+			相关新闻报道
+		</div>
+	</div>
+</template>
+
+<script>
+	
+</script>
+
+<style lang="scss" scoped>
+.about {
+	font-family: PingFang-SC-Medium;
+	padding: 30px 50px;
+	background-color: #fff;
+	line-height: 25px;
+	padding-bottom: 0;
+	.title {
+		text-align: center;
+		color: red;
+		font-size: 22px;
+		font-weight: bold;
+	}
+	p {
+		font-size: 14px;
+		text-indent: 1cm;
+	}
+}
+.down {
+	font-size: 18px;
+	font-weight: bold;
+	padding: 0 20px;
+	padding-top: 80px;
+}
+</style>

src/views/contribution.vue

@@ -3,6 +3,10 @@
 			<div class="boxtitle">
 				当前位置：首页 > 爱心榜
 			</div>
+			<div class="boxSearch">
+				<input type="text" v-model="searchValue" placeholder="请输入捐赠者" required />
+				<img src="@/assets/img/nsearch.png" class="searchImg" @click="search">
+			</div>
 		<div class="jmbox">
 			<div class="center">
 				<div class="title">
@@ -12,12 +16,15 @@
 					<div class="intention"> 捐赠意向 </div>
 					<div class="remarks"> 备注 </div>
 				</div>
+				<div style="padding: 10px;color: #999999;" v-show="sum == 0">
+					------暂无更多数据------
+				</div>
 				<div class="list" v-for="l in list">
 					<div class="item">
 						<div class="time"> {{ getTime(l.createtime) }} </div>
 						<div class="name"> {{ l.contact }} </div>
 						<div class="price"> {{ l.amount }} </div>
-						<div class="intention"> {{ l.order_name }} </div>
+						<div class="intention"> {{ getCategory(l.category_id) }} </div>
 						<div class="remarks"> {{ l.remarks }} </div>
 					</div>
 				</div>
@@ -26,8 +33,25 @@
 				<div class="fristPage" @click="page = 1">
 					第一页
 				</div>
+				<div class="pagetoomuch" v-show="totalPage>10">
+					<div class="nextPage" v-show="page-4>0">
+						...
+					</div>
+					<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
+					:class="{isChoose:count == page}" v-if="count>page-5&&count<page+4 &&count!=totalPage">
+						{{ count }}
+					</div>
+					<div class="nextPage" v-show="page+4<totalPage">
+						...
+					</div>
+					<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
+					:class="{isChoose:count == page}" v-if="count==totalPage">
+						{{ count }}
+					</div>
+				</div>
+				
 				<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
-				:class="{isChoose:count == page}">
+				:class="{isChoose:count == page}" v-show="totalPage<=10">
 					{{ count }}
 				</div>
 				<div class="nextPage" @click='nextPage'>
@@ -40,7 +64,7 @@
 
 <script>
 import { getTime } from '../utils/utils.js'
-import { getlaveList } from '@/request/api.js'
+import { getlaveList,getlaveListsearch } from '@/request/api.js'
 
 import jmBox from '@/components/box.vue'
 	export default {
@@ -49,6 +73,8 @@ import jmBox from '@/components/box.vue'
 		},
 		data() {
 			return {
+				loadingType: 'loadmore',
+				searchValue: '',
 				navList: {
 					title: '爱心榜',
 				},
@@ -68,6 +94,12 @@ import jmBox from '@/components/box.vue'
 			this.getlave()
 		},
 		methods: {
+			search() {
+				getlaveListsearch({page:this.page,limit:this.limit},this.searchValue).then(res => {
+					this.list = res.data.data
+					this.sum = res.data.count
+				})
+			},
 			pageChoose(count) {
 				this.page = count
 			},
@@ -83,11 +115,20 @@ import jmBox from '@/components/box.vue'
 			},
 			// 爱心榜
 			getlave() {
-				getlaveList({},this.page,this.limit).then(res => {
+				getlaveList({page:this.page,limit:this.limit}).then(res => {
 					this.list = res.data.data
 					this.sum = res.data.count
 				})
 			},
+			getCategory(id) {
+				if (id == 20) {
+					return '疫情防控'
+				} else if(id == 21){
+					return 'AED救护及科普'
+				} else if(id == 22){
+					return '红十字会人道事业（非定向捐款）'
+				}
+			}
 		},
 		watch: {
 			page() {
@@ -99,9 +140,36 @@ import jmBox from '@/components/box.vue'
 
 <style lang="scss" scoped>
 $red: #D82020;
+.pagetoomuch {
+	display: flex;
+}
+.boxSearch {
+	padding-right: 10px;
+	position: relative;
+	top: 20px;
+	input {
+		padding-right: 10px;
+		position: absolute;
+		right: 10px;
+		min-width: 180px;
+		border-radius: 10px;
+		border: solid 1px #CCCCCC;
+		padding: 5px 10px;
+		padding-right: 30px;
+		height: 15px;
+		outline: none; // 设置点击后无效果
+	}
+	.searchImg {
+		width: 15px;
+		margin: auto 0;
+		position: absolute;
+		top: 5px;
+		right: 20px;
+	}
+}
 .jmbox {
 	height: 600px;
-	padding: 30px 0;
+	padding: 70px 0;
 }
 .contribution {
 	box-shadow: 1px 1px 6px #e1e1e1;

src/views/details.vue

@@ -59,7 +59,7 @@ $red: #D82020;
 .jmbox {
 	min-height: 600px;
 	padding: 30px 0;
-			box-shadow: 1px 1px 6px #e1e1e1;
+	box-shadow: 1px 1px 6px #e1e1e1;
 }
 .details {
 	border-top: solid 2px $red;
@@ -69,7 +69,7 @@ $red: #D82020;
 		background-color: #F2F2F2;
 	}
 	.center {
-		text-align: center;
+		padding: 25px 40px;
 		.time,.price,.remarks,.name,.intention {
 			border: solid 1px #F2F2F2;
 			padding: 5px;

src/views/index.vue

@@ -4,7 +4,7 @@
 			<div class="swiper">
 				<el-carousel :interval="5000" type="card" height="200px" class="swiper-box">
 				    <el-carousel-item v-for="(r,index) in rotation" :key="index" class="swiper-box-item">
-					    	<img :src="image(r.image)" class="swiper-img" @click="newsTo(0,r)">
+					    	<img :src="r.image" class="swiper-img" @click="newsTo(0,r)">
 					    	<div class="title">
 					    		{{ r.title }}
 					    	</div>
@@ -17,7 +17,7 @@
 				</div>
 				<div class="list">
 					<div class="item" v-for="(n,index) in partakeList" @click="navTo(index)">
-						<img :src="image(n.image)" class="iNimg">
+						<img :src="n.image" class="iNimg">
 						<div class="name">
 							{{ n.title }}
 						</div>
@@ -29,8 +29,8 @@
 					市红十字会新闻 <div class="more" @click="urlTo('news')">【查看更多】</div>
 				</div>
 				<div class="list chooseitem">
-					<div class="item" v-for="c in cityNewsList" @click="newsTo(0,c)">
-						<div class="title" :title="c.title">
+					<div class="item" v-for="c in cityNewsList" @click="newsTo(0,c)" :title="c.title">
+						<div class="title">
 							<div class="spot"></div>
 							<div class="nowarp">
 								{{ c.title }}
@@ -80,8 +80,8 @@
 					县市区红十字新闻 <div class="more" @click="urlTo('news',1)">【查看更多】</div>
 				</div>
 				<div class="list chooseitem">
-					<div class="item" v-for="c in countyNewsList" @click="newsTo(1,c)">
-						<div class="title" :title="c.title">
+					<div class="item" v-for="c in countyNewsList" @click="newsTo(1,c)" :title="c.title">
+						<div class="title">
 							<div class="spot"></div>
 							<div class="nowarp">
 								{{ c.title }}
@@ -95,11 +95,11 @@
 			</div>
 			<div class="box">
 				<div class="title title2">
-					公示/公告 <div class="more" @click="urlTo('news',3)">【查看更多】</div>
+					公示/公告 <div class="more" @click="urlTo('news',2)">【查看更多】</div>
 				</div>
 				<div class="list chooseitem">
-					<div class="item" v-for="p in publicityList" @click="newsTo(3,p)">
-						<div class="title" :title="p.title">
+					<div class="item" v-for="p in publicityList" @click="newsTo(3,p)" :title="p.title">
+						<div class="title">
 							<div class="spot"></div>
 							<div class="nowarp">
 								{{ p.title }}
@@ -127,7 +127,7 @@
 					</div>
 					<slideLaR class="slideLaR">
 						<div class="item" v-for="(l,index) in wallList" @click="volunteerTo(l.id)">
-							<img :src="image(l.image)" >
+							<img :src="l.image" >
 						</div>
 					</slideLaR>
 				</div>
@@ -137,8 +137,8 @@
 					微信公众号
 				</div>
 				<div class="qrcode">
-					<div class="">
-						<img src="../assets/img/scanning.png" class="scanning">
+					<div class="header">
+						<img src="../assets/img/sm.png" class="scanning">
 						<div> 请扫码关注<br>荆门市红十字会<br>官方微信公众号 </div>
 					</div>
 					<div class="qrcodeImg">
@@ -196,11 +196,11 @@ import slideLaR from '../components/slideLaR.vue'
 					},
 					{
 						img: require('@/assets/img/yq4.png'),
-						url: 'http://www.hbmdp.org.cn/'
+						url: 'http://www.hbqgjx.com/'
 					},
 					{
 						img: require('@/assets/img/yq5.png'),
-						url: 'http://www.hbqgjx.com/'
+						url: 'http://www.hbmdp.org.cn/'
 					},
 					
 				]
@@ -230,7 +230,7 @@ import slideLaR from '../components/slideLaR.vue'
 			},
 			// 优秀志愿者
 			getWallList() {
-				getArticList({page:1,limit:15},21).then(({data}) => {
+				getArticList({page:1,limit:30},21).then(({data}) => {
 					this.wallList = data.list
 					this.$store.commit('setWallList',data.list)
 				})
@@ -241,7 +241,7 @@ import slideLaR from '../components/slideLaR.vue'
 			},
 			// 爱心榜
 			getlaveListson() {
-				getlaveList({page:1,limit:2}).then(res => {
+				getlaveList({page:1,limit:10}).then(res => {
 					this.rankingList = res.data.data
 					this.$store.commit('setRankingList',res.data.data)
 				})
@@ -249,33 +249,51 @@ import slideLaR from '../components/slideLaR.vue'
 			// 新闻
 			getNewsList() {
 				// 市红十字会新闻
-				getArticList({},27,1,10).then(({data}) => {
+				getArticList({page:1,limit:10},27).then(({data}) => {
 					this.cityNewsList = data.list
 					this.$store.commit('setCityNewsList',data.list)
 				})
 				// 县市区红十字新闻
-				getArticList({},28,1,10).then(({data}) => {
+				getArticList({page:1,limit:5},28).then(({data}) => {
 					this.countyNewsList = data.list
 					this.$store.commit('setCountyNewsList',data.list)
 				})
 				// 公示/公告
-				getArticList({},30,1,10).then(({data}) => {
-					this.publicityList = data.list
-					this.$store.commit('setPublicityList',data.list)
+				getArticList({page:1,limit:10},30,29).then(e => {
+					const data = e.data.list
+					getArticList({page:1,limit:10},29).then(res => {
+						const lastData = data.concat(res.data.list)
+						this.publicityList = lastData.sort( this.compare( "releasetime"));
+						this.$store.commit('setPublicityList',this.publicityList)
+					})
 				})
 				this.toTop()
 			},
+			//定义一个比较器
+			compare( propertyName) {
+			    return  function( object1,  object2) {
+			        var value1  = object1[propertyName];
+			        var value2  = object2[propertyName];
+			        if (value2  > value1) {
+						return  1;
+					} else  if (value2  < value1) {
+						return  - 1;
+					} else {
+						return  0;
+					}
+			    }
+			},
 			// 跳转页面
 			urlTo(name,navChoose) {
 				this.$router.push({
 					name: name,
-					params:{navChoose :navChoose || 0}
+					params:{navChoose: navChoose || 0}
 				})
 				this.toTop()
 			},
 			// 跳外部链接
 			toRescue(url) {
-				window.location.href = url;
+				window.open(url)
 			},
 			volunteerTo(id) {
 				this.$router.push({
@@ -369,16 +387,18 @@ import slideLaR from '../components/slideLaR.vue'
 				height: 420px;
 				overflow: hidden;
 				.swiper-box {
-					margin: 0 -230px;
-					width: calc(100% + 300px);
+					margin: 0 -270px;
+					width: calc(100% + 430px);
 					height: 420px;
 					.swiper-box-item {
-						width: calc(100% + 300px);
+						width: calc(100% + 410px);
 						height: 420px;
 						.swiper-img {
-							margin: auto auto;
-							min-width: 600px;
-							min-height: 420px;
+							// margin-left:auto;
+							display:table-cell;
+							vertical-align:middle;
+							height: 100%;
+							min-width: 650px;
 						}
 					}
 				}
@@ -439,6 +459,9 @@ import slideLaR from '../components/slideLaR.vue'
 						display: flex;
 						justify-content: space-between;
 						font-size: 14px;
+						overflow: hidden;
+						height: 28px;
+						line-height: 28px;
 						.title {
 							display: flex;
 							line-height: 25px;
@@ -450,13 +473,9 @@ import slideLaR from '../components/slideLaR.vue'
 								width: 5px;
 								height: 5px;
 								border-radius: 50%;
-								background-color: #D8D8D8;
 								margin: auto 8px;
 							}
 						}
-							overflow: hidden;
-							height: 25px;
-							line-height: 25px;
 						.time {
 							padding: 0 10px;
 						}
@@ -516,7 +535,7 @@ import slideLaR from '../components/slideLaR.vue'
 				flex: 1;
 				position: relative;
 				border-top: solid 2px $red;
-				height: 320px;
+				height: 300px;
 				overflow: hidden;
 				box-shadow: 1px 1px 6px #e1e1e1;
 				.more {
@@ -528,33 +547,31 @@ import slideLaR from '../components/slideLaR.vue'
 					font-size: 11px;
 				}
 				.list {
-					.title {
-							line-height: 25px;
-							overflow: hidden;
-							height: 25px;
+					.item {
+						font-size: 14px;
+						padding: 5px 0;
+						line-height: 28px;
+						height: 28px;
 						display: flex;
-						.nowarp {
-							max-width: 350px;
-						}
-						.spot {
-							width: 5px;
-							height: 5px;
-							border-radius: 50%;
-							background-color: #D8D8D8;
-							margin: auto 8px;
+						justify-content: space-between;
+						.title {
+								display: flex;
+							.nowarp {
+								max-width: 350px;
+							}
+							.spot {
+								width: 5px;
+								height: 5px;
+								border-radius: 50%;
+								margin: auto 8px;
+							}
 						}
 					}
 					.time {
-						// padding: 0 10px;
+						padding: 0 10px;
 					}
 				}
 				.list {
-					.item {
-						font-size: 14px;
-						padding: 10px;
-						display: flex;
-						justify-content: space-between;
-					}
 				}
 			}
 		}
@@ -568,7 +585,7 @@ import slideLaR from '../components/slideLaR.vue'
 			display: flex;
 			.wall {
 				box-shadow: 1px 1px 6px #e1e1e1;
-				flex: 4;
+				flex: 3;
 				border-top: solid 1px $red;
 				min-width: 50%;
 				margin-right: 10px;
@@ -585,10 +602,11 @@ import slideLaR from '../components/slideLaR.vue'
 						float: right;
 						position: relative;
 						input {
-							min-width: 200px;
+							min-width: 180px;
 							border-radius: 20px;
 							border: solid 1px $red;
 							padding: 5px 10px;
+							padding-right: 30px;
 							height: 15px;
 						    outline: none; // 设置点击后无效果
 						}
@@ -602,9 +620,9 @@ import slideLaR from '../components/slideLaR.vue'
 					.slideLaR {
 						margin-top: 20px;
 						.item {
-							margin: 5px 10px;
+							margin: 10px;
 							img {
-								height: 90px
+								height: 120px
 							}
 						}
 					}
@@ -631,14 +649,23 @@ import slideLaR from '../components/slideLaR.vue'
 					color: #333333;
 					font-size: 14px;
 					line-height: 20px;
+					.header {
+						height: 140px;
+						display: grid;
+						justify-content: space-around;
+						margin: auto ;
+					}
 					.scanning {
-						width: 50px;
-						height: 50px;
+						margin: auto ;
+						width: 40px;
+						height: 40px;
 					}
 					.qrcodeImg {
+						height: 140px;
 						img {
-							width: 100px;
-							height: 100px;
+							width: 140px;
+							height: calc(100%);
+							margin-top: -7px;
 						}
 						
 					}
@@ -664,9 +691,15 @@ import slideLaR from '../components/slideLaR.vue'
 		}
 	}
 	.chooseitem  {
-		color: #333333;		
+		color: #333333;
+		.spot {
+			background-color: #D8D8D8;
+		}
 	}
 	.chooseitem :hover {
-		color: $pink;		
+		color: $pink;
+		.spot {
+			background-color: $pink;
+		}
 	}
 </style>

src/views/introduce/introduce.vue

@@ -1,21 +1,50 @@
 <template>
 	<div class="introduce">
 		<jm-box :navList='navList' @navListC='navListC'>
-			<!-- <div class="center"> -->
-				<!-- <county v-show="navChoose == 2"></county> -->
-			<!-- </div> -->
+			<div class="boooox">
+				
+			</div>
+			<div class="center" v-if="navChoose == 2">
+				<div class="inlist">
+					<div class="initem" v-for="(q,index) in qxlist" @click="isShowQx = index">
+						<div class="titley" :class="{title: isShowQx == index}">
+							{{ q.title }}
+							<div class="img">
+								<img src="../../assets/img/up.png"  v-show="isShowQx == index">
+							</div>
+							<div class="img">
+								<img src="../../assets/img/down.png" v-show="isShowQx != index">
+							</div>
+						</div>
+						<transition name="slide-fade">
+							<div class="nr" v-html="q.content" v-show="index==isShowQx">
+							</div>
+						</transition>
+					</div>
+				</div>
+			</div>
 		</jm-box>
 	</div>
 </template>
 
 <script>
-import { getArticList,getList } from '@/request/api.js'
+import { getArticList,getList,details } from '@/request/api.js'
 
 import jmBox from '@/components/box.vue'
 	export default {
 		components: {
 			jmBox,
 		},
+		data() {
+			return {
+				list: [
+					{
+						name: '沙洋县红十字会',
+						phone: ''
+					}
+				]
+			}
+		},
 		mounted() {
 			this.init()
 		},
@@ -26,12 +55,15 @@ import jmBox from '@/components/box.vue'
 					title: '组织介绍',
 					url: 'introduce',
 					list: this.$store.state.introduce || []
-				}
+				},
+				qxlist: [],
+				isShowQx: 0
 			}
 		},
 		methods: {
 			init() {
 				this.getdataList()
+				this.getGqx()
 			},
 			getdataList() {
 				getList({},14).then(res => {
@@ -40,6 +72,17 @@ import jmBox from '@/components/box.vue'
 				})
 				
 			},
+			getGqx() {
+				getArticList({},35).then(res => {
+					console.log(res);
+					this.qxlist = res.data.list
+					for(let i = 0; i<res.data.count; i++) {
+						details({},res.data.list[i].id).then(e => {
+							this.qxlist[i].content = e.data.content
+						})
+					}
+				})
+			},
 			navListC(index) {
 				this.navChoose = index
 			}
@@ -47,5 +90,45 @@ import jmBox from '@/components/box.vue'
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	// .slide-fade-enter-active {
+		// 	transition: all .8s ease;
+	// }
+	// .slide-fade-enter, .slide-fade-leave-to {
+		// 	transform: translateY(-20px);
+		// 	opacity: 0;
+	// }
+	.center {
+		background-color: #F9F9F9;
+		.inlist {
+			.initem {
+				width: 100%;
+				.titley {
+					position: relative;
+					border-bottom: solid 1px #EEEEEE;
+					background-color: #fff;
+					padding: 0 25px;
+					height: 50px;
+					line-height: 50px;
+					font-weight: bold;
+					.img {
+						position: absolute;
+						top: 7px;
+						right: 30px;
+						img {
+							width: 25px;
+						}
+					}
+				}
+				.title {
+					background-color: #333333;
+					color: #fff;
+				}
+				.nr {
+					background-color: #F9F9F9;
+					padding: 10px 0;
+				}
+			}
+		}
+	}
 </style>

src/views/partake/new_file.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+	</head>
+	<body>
+	</body>
+</html>

src/views/searchList.vue

@@ -6,7 +6,7 @@
 		<div class="jmbox">
 			<div class="list chooseitem">
 				<div class="item" v-for="l in list" @click="navto(l.id)">
-					
+					<span class="title-icon"></span>
 					<div class="title nowarp" :title="l.title">
 						{{ l.title }}
 					</div>
@@ -15,12 +15,32 @@
 					</div>
 				</div>
 			</div>
-			<div class="pagec">
+			<div class="nodata" v-show="sum == 0">
+				---暂无更多数据---
+			</div>
+			<div class="pagec" v-show="totalPage>1">
 				<div class="fristPage" @click="page = 1">
 					第一页
 				</div>
+				<div class="pagetoomuch" v-show="totalPage>10">
+					<div class="nextPage" v-show="page-4>0">
+						...
+					</div>
+					<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
+					:class="{isChoose:count == page}" v-if="count>page-5&&count<page+4 &&count!=totalPage">
+						{{ count }}
+					</div>
+					<div class="nextPage" v-show="page+4<totalPage">
+						...
+					</div>
+					<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
+					:class="{isChoose:count == page}" v-show="totalPage>2" v-if="count==totalPage">
+						{{ count }}
+					</div>
+				</div>
+				
 				<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
-				:class="{isChoose:count == page}">
+				:class="{isChoose:count == page}" v-show="totalPage<=10">
 					{{ count }}
 				</div>
 				<div class="nextPage" @click='nextPage'>
@@ -43,7 +63,7 @@ import jmBox from '@/components/box.vue'
 			return {
 				page: 1,
 				limit: 15,
-				sum: 0,
+				sum: 1,
 				list: [],
 				value: this.$route.params.value || this.$route.query.value || 0,
 			}
@@ -64,7 +84,12 @@ import jmBox from '@/components/box.vue'
 			},
 			getData() {
 				const value = this.$route.query.value
-				getSearch({},value,this.page,this.limit).then(res => {
+				const data = {
+					page:this.page,
+					limit:this.limit,
+					// order:"releasetime desc"
+				}
+				getSearch(data,value).then(res => {
 					console.log(res.data);
 					this.sum = res.data.count
 					this.list = res.data.list
@@ -99,13 +124,17 @@ import jmBox from '@/components/box.vue'
 
 <style lang="scss" scoped>
 $red: #D82020;
+.nodata {
+	color: #999999;
+	text-align: center;
+}
 .jmbox {
 	box-shadow: 1px 1px 6px #e1e1e1;
 	min-height: 600px;
 	padding: 30px 20px;
 	.list {
 		.item {
-			padding: 0 30px;
+			padding: 0 20px;
 			display: flex;
 			justify-content: space-between;
 			line-height: 35px;
@@ -152,6 +181,9 @@ $red: #D82020;
 		}
 	}
 }
+.pagetoomuch {
+	display: flex;
+}
 .pagec {
 	color: #333333;
 	display: flex;
@@ -177,10 +209,22 @@ $red: #D82020;
 	}
 }
 	.chooseitem  {
-		color: #333333;		
+		color: #666;	
+			.title-icon {
+				display: inline-block;
+				width: 0;
+				height: 0;
+				margin: auto 0;
+				border-top: 6px solid transparent;
+				border-left: 8px solid #d2d2d2;
+				border-bottom: 6px solid transparent;
+			}
 	}
 	.chooseitem :hover {
-		color: #d8272a;		
+		color: #d8272a;	
+		.title-icon {
+			border-left-color: #d8272a;
+		}
 	}
 </style>
 

src/views/vList.vue

@@ -6,7 +6,7 @@
 		<div class="jmbox">
 			<div class="list chooseitem">
 				<div class="item" v-for="l in list" @click="navto(l.id)">
-					
+					<span class="title-icon"></span>
 					<div class="title nowarp" :title="l.title">
 						{{ l.title }}
 					</div>
@@ -15,12 +15,32 @@
 					</div>
 				</div>
 			</div>
-			<div class="pagec">
+			<div class="nodata" v-show="sum == 0">
+				---暂无更多数据---
+			</div>
+			<div class="pagec" v-show="totalPage>1">
 				<div class="fristPage" @click="page = 1">
 					第一页
 				</div>
+				<div class="pagetoomuch" v-show="totalPage>10">
+					<div class="nextPage" v-show="page-4>0">
+						...
+					</div>
+					<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
+					:class="{isChoose:count == page}" v-if="count>page-5&&count<page+4 &&count!=totalPage">
+						{{ count }}
+					</div>
+					<div class="nextPage" v-show="page+4<totalPage">
+						...
+					</div>
+					<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
+					:class="{isChoose:count == page}" v-show="totalPage>2" v-if="count==totalPage">
+						{{ count }}
+					</div>
+				</div>
+				
 				<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
-				:class="{isChoose:count == page}">
+				:class="{isChoose:count == page}" v-show="totalPage<=10">
 					{{ count }}
 				</div>
 				<div class="nextPage" @click='nextPage'>
@@ -43,7 +63,7 @@ import jmBox from '@/components/box.vue'
 			return {
 				page: 1,
 				limit: 15,
-				sum: 0,
+				sum: 1,
 				list: [],
 				value: this.$route.params.value || this.$route.query.value || 0,
 			}
@@ -64,7 +84,11 @@ import jmBox from '@/components/box.vue'
 			},
 			getData() {
 				const value = this.$route.query.value
-				getvSearch({},value,this.page,this.limit).then(res => {
+				const data = {
+					page: this.page,
+					limit: this.limit
+				}
+				getvSearch(data,value).then(res => {
 					this.sum = res.data.count
 					this.list = res.data.list
 				})
@@ -98,13 +122,17 @@ import jmBox from '@/components/box.vue'
 
 <style lang="scss" scoped>
 $red: #D82020;
+.nodata {
+	color: #999999;
+	text-align: center;
+}
 .jmbox {
 	box-shadow: 1px 1px 6px #e1e1e1;
 	min-height: 600px;
 	padding: 30px 20px;
 	.list {
 		.item {
-			padding: 0 30px;
+			padding: 0 20px;
 			display: flex;
 			justify-content: space-between;
 			line-height: 35px;
@@ -149,7 +177,11 @@ $red: #D82020;
 			}
 		}
 	}
-}.pagec {
+}
+.pagetoomuch {
+	display: flex;
+}
+.pagec {
 	color: #333333;
 	display: flex;
 	float: right;
@@ -174,10 +206,22 @@ $red: #D82020;
 	}
 }
 	.chooseitem  {
-		color: #333333;		
+		color: #666;	
+			.title-icon {
+				display: inline-block;
+				width: 0;
+				height: 0;
+				margin: auto 0;
+				border-top: 6px solid transparent;
+				border-left: 8px solid #d2d2d2;
+				border-bottom: 6px solid transparent;
+			}
 	}
 	.chooseitem :hover {
-		color: #d8272a;		
+		color: #d8272a;	
+		.title-icon {
+			border-left-color: #d8272a;
+		}
 	}
 </style>
 

src/views/volunteer.vue

@@ -68,7 +68,7 @@ $red: #D82020;
 		background-color: #F2F2F2;
 	}
 	.center {
-		text-align: center;
+		padding: 25px 40px;
 		.time,.price,.remarks,.name,.intention {
 			border: solid 1px #F2F2F2;
 			padding: 5px;

vue.config.js

@@ -2,10 +2,10 @@
 const path = require('path')
 const port = process.env.port || process.env.npm_config_port || 9527 // dev port
 module.exports = {
-	publicPath: '/wap',
+	publicPath: '/',
 	outputDir: 'dist',
 	indexPath: process.env.NODE_ENV === 'development' ? 'mer.html' : 'index.html',
-	lintOnSave: false,
+	lintOnSave: process.env.NODE_ENV === 'development',
 	productionSourceMap: false,
 	devServer: {
 		port: port,
@@ -16,7 +16,7 @@ module.exports = {
 		},
 		// proxy: 'http://red.liuniu946.com'
 		proxy: {
-			'/api': {
+			'/api': {	
 				target: `http://red.liuniu946.com`, // 需要代理到的地址               
 				changeOrigin: true,
 				// ws: true,