10-16

src/App.vue

@@ -27,7 +27,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 #app {
-	max-width: 1920px;
+	// max-width: 1920px;
 	min-width: 1200px;
 	margin: 0 auto;
 }
@@ -42,13 +42,15 @@ export default {
 	margin: 0 auto;
 	// margin: 0 auto -300px;
 	height: 300px;
-	max-width: 1920px;
-	min-width: 1200px;
+	// max-width: 1920px;
+	// min-width: 1200px;
+	width: 100%;
+	
 	// background-image: url(assets/img/m1.png);
 	// background-size: auto 100%;
 	z-index: -1;
 	img {
-		width: 1920px;
+		width: 100%;
 		
 		height: 300px;
 	}

src/assets/css/base.css

@@ -47,4 +47,9 @@ html {
 }
 .flex {
 	display: flex;
+}
+.content {
+	img {
+		max-width: 100%;
+	}
 }

src/components/leftNav/LeftNav.vue

@@ -2,7 +2,8 @@
 	<div class="wrapper">
 		<div class="left-nav" :style="{height: navHeight}">
 			<div class="nav-title">善行共参与</div>
-			<div class="nav-item" v-for="item in navList" :key="item.id" :class="{'action': currentUrl.indexOf(item.path) !== -1 }" @click="navTo(item.path)">
+			<div class="nav-item" v-for="item in navList" :key="item.id"
+				:class="{'action': currentUrl.indexOf(item.path) !== -1 }" @click="navTo(item.path)">
 				<div class="item-name">
 					{{item.name}}
 				</div>
@@ -16,27 +17,29 @@
 				{{rightTitle}}
 			</div>
 			<template v-else>
-				<div class="title hand" style="display: inline-block;" :class="{'action': currentIndex !== 0}" @click="changeClik(0)">
+				<div class="title hand" style="display: inline-block;" :class="{'action': currentIndex !== 0}"
+					@click="changeClik(0)">
 					基础知识
 				</div>
-				<div class="title hand" style="display: inline-block;" :class="{'action': currentIndex !== 1}" @click="changeClik(1)">
+				<div class="title hand" style="display: inline-block;" :class="{'action': currentIndex !== 1}"
+					@click="changeClik(1)">
 					如何报名
 				</div>
 			</template>
 			<div style="padding: 35px 50px 35px 50px;" class="line">
 				<slot></slot>
 			</div>
-			
+
 		</div>
-	</div>
-</template>
-
+	</div>
+</template>
+
 <script>
 	export default {
 		props: {
 			navList: {
 				type: Array,
-				default:[]
+				default: []
 			}
 		},
 		computed: {
@@ -44,23 +47,23 @@
 				return this.$route.path !== '/donation/Hpc'
 			},
 			navHeight() {
-				return this.navList.length*51 + 52 + 'px'
+				return this.navList.length * 51 + 52 + 'px'
 			},
 			currentUrl() {
 				return this.$route.path
 			},
 			rightTitle() {
 				let title = ''
-				switch(this.currentUrl) {
-				     case '/donation/contribution':
-				        title = '爱心捐赠'
-				        break;
-				     case '/donation/organDonation':
-				         title = '我要捐献器官'
-				        break;
+				switch (this.currentUrl) {
+					case '/donation/contribution':
+						title = '爱心捐赠'
+						break;
+					case '/donation/organDonation':
+						title = '我要捐献器官'
+						break;
 					case '/join/rescue':
-					    title = '我要成为救护员'
-					   break;
+						title = '我要成为救护员'
+						break;
 					case '/join/member':
 						title = '我要成为会员'
 						break
@@ -70,8 +73,17 @@
 					case '/join/train':
 						title = '报名普及培训'
 						break
-					case '/about':
-						title = '关于我们'
+					case '/about/chineseRedCross':
+						title = '关于中国红十字会'
+						break
+					case '/about/matrix':
+						title = '微信矩阵'
+						break
+					case '/about/redCrossLaw':
+						title = '中国红十字会法'
+						break
+					case '/about/redCrossMovement':
+						title = '关于红十字运动'
 						break
 					case '/concat':
 						title = '联系我们'
@@ -103,8 +115,8 @@
 					case '/regulations':
 						title = '政策法规'
 						break
-				     default:
-				        title = ''
+					default:
+						title = ''
 				}
 				return title
 			}
@@ -117,9 +129,9 @@
 		methods: {
 			navTo(path) {
 				let currentUrl = this.$route.path
-				if(currentUrl === path){
+				if (currentUrl === path) {
 					return
-				}else {
+				} else {
 					this.$router.push(path)
 				}
 			},
@@ -128,20 +140,22 @@
 				this.$router.push('/donation/Hpc?id=' + index)
 			}
 		}
-	}
-</script>
-
+	}
+</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;
@@ -151,11 +165,12 @@
 			font-family: PingFang SC;
 			font-weight: bold;
 			color: #FFFFFF;
-			letter-spacing:3px;
-			cursor:default;
+			letter-spacing: 3px;
+			cursor: default;
 		}
+
 		.nav-item {
-			cursor:pointer;
+			cursor: pointer;
 			border-top: 1px #fcfbfb solid;
 			display: flex;
 			height: 50px;
@@ -163,13 +178,15 @@
 			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
+				letter-spacing: 1px
 			}
+
 			.item-icon {
 				font-size: 16px;
 				font-family: PingFang SC;
@@ -177,15 +194,18 @@
 				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;
@@ -200,12 +220,14 @@
 			position: relative;
 			top: -2px;
 		}
+
 		.action {
 			background: #FFFFFF;
 			color: #D82020;
 		}
 	}
+
 	.line {
 		line-height: 1.5;
-	}
+	}
 </style>

src/request/api.js

@@ -84,3 +84,11 @@ export function getDirectoriesList(data) {
 		params: data
 	});
 }
+
+export function getArticleList(data,id) {
+	return request({
+		url: '/api/article/list/' + id,
+		method: 'get',
+		params: data
+	});
+}

src/request/request.js

@@ -23,9 +23,7 @@ service.interceptors.request.use(
 		var timestamp = new Date().getTime();
 		var appSecret = '55dc12c813b6131578780dcd9cfd9d90';
 		var Appid = 'wx9e9cda4611521ed4';
-		console.log(md5,sha1)
 		let Sign = md5(sha1(Appid + timestamp + appSecret + timestamp + Appid + appSecret))
-		console.log(config)
 		if (!config.headers) {
 			config.headers = {
 				"App-id": Appid,

src/router.js

@@ -124,7 +124,41 @@ export default new Router({
 		component: () => import('./views/About.vue'),
 		meta: {
 			title: '关于我们'
-		}
+		},
+		// children: [
+		// 	{
+		// 		path: 'redCrossMovement',
+		// 		neme: 'redCrossMovement',
+		// 		component: () => import('./views/about/RedCrossMovement.vue'),
+		// 		meta: {
+		// 			title: '关于红十字会运动'
+		// 		}
+		// 	},
+		// 	{
+		// 		path: 'chineseRedCross',
+		// 		neme: 'chineseRedCross',
+		// 		component: () => import('./views/about/ChineseRedCross.vue'),
+		// 		meta: {
+		// 			title: '关于中国红十字会'
+		// 		}
+		// 	},
+		// 	{
+		// 		path: 'redCrossLaw',
+		// 		neme: 'redCrossLaw',
+		// 		component: () => import('./views/about/redCrossLaw.vue'),
+		// 		meta: {
+		// 			title: '中国红十字会法'
+		// 		}
+		// 	},
+		// 	{
+		// 		path: 'matrix',
+		// 		neme: 'matrix',
+		// 		component: () => import('./views/about/matrix.vue'),
+		// 		meta: {
+		// 			title: '微信矩阵'
+		// 		}
+		// 	},
+		// ]
 	},
 	{
 		path: '/concat',

src/store.js

@@ -5,7 +5,8 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-	www: "http://www.jzrc.org.cn"
+	// www: "https://www.jzrc.org.cn"
+	www:''
   },
   mutations: {
 

src/views/About.vue

@@ -1,34 +1,83 @@
 <template>
 	<div class="about">
-		<left-nav :navList="navList">
-			<div id="" v-html="content">
-				
+		<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>
-		</left-nav>
+			<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>
 </template>
 
 <script>
 import LeftNav from '../components/leftNav/LeftNav.vue';
-import { details } from '../request/api.js'
+import { details, getArticleList } from '../request/api.js';
 export default {
 	components: {
-		LeftNav,
-		
+		LeftNav
 	},
 	data() {
 		return {
-			navList: [{ index: 0, name: '关于我们', path: '/about' }, { index: 1, name: '联系我们', path: '/concat' }],
-			// radio: '1'
-			content: ''
+			content: '',
+			currentIndex: '',
+			rightTitle: '',
+			navList: [
+				// { index: 0, name: '关于中国红十字会', path: '/about/chineseRedCross' },
+				// { index: 1, name: '中国红十字会法', path: '/about/redCrossLaw' },
+				// { index: 2, name: '关于红十字运动', path: '/about/redCrossMovement' },
+				// // 第十届监事会监事长名单
+				// { index: 3, name: '第十届监事会监事长名单', path: '/about/matrix' },
+			],
 		};
 	},
-	created() {
-		this.getContent()
+	computed: {
+		navHeight() {
+			return this.navList.length * 51 + 52 + 'px'
+		},
+	},
+	mounted() {
+		this.getList()
 	},
 	methods:{
-		getContent() {
-			details({},34).then(({data}) => {
+		getList() {
+			let that = this
+			getArticleList({},43).then(({data}) => {
+				console.log(data)
+				let arr = data.list.reverse()
+				arr.forEach(item => {
+					let obj = {}
+					obj.name = item.title
+					obj.uid = item.id
+					that.navList.push(obj)
+					console.log(that.navList,'55555')
+				})
+				this.navClick(arr[0].id)
+			}).catch( err => {
+				console.log(err)
+			})
+		},
+		navClick(id) {
+			this.currentIndex = id
+			details({},id).then(({data})=> {
 				this.content = data.content
 			})
 		}
@@ -37,5 +86,90 @@ export default {
 </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>

src/views/Concat.vue

@@ -1,29 +1,83 @@
 <template>
-	<div class="concat"><left-nav :navList="navList"><div v-html="content">
+	<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></left-nav></div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
 import LeftNav from '../components/leftNav/LeftNav.vue';
-import { details } from '../request/api.js';
+import { details, getArticleList } from '../request/api.js';
 export default {
 	components: {
 		LeftNav
-		// PageTitle
 	},
 	data() {
 		return {
-			navList: [{ index: 0, name: '关于我们', path: '/about' }, { index: 1, name: '联系我们', path: '/concat' }],
-			content: ''
+			content: '',
+			currentIndex: '',
+			rightTitle: '',
+			navList: [
+				// { index: 0, name: '关于中国红十字会', path: '/about/chineseRedCross' },
+				// { index: 1, name: '中国红十字会法', path: '/about/redCrossLaw' },
+				// { index: 2, name: '关于红十字运动', path: '/about/redCrossMovement' },
+				// // 第十届监事会监事长名单
+				// { index: 3, name: '第十届监事会监事长名单', path: '/about/matrix' },
+			],
 		};
 	},
-	created() {
-		this.getContent()
+	computed: {
+		navHeight() {
+			return this.navList.length * 51 + 52 + 'px'
+		},
+	},
+	mounted() {
+		this.getList()
 	},
 	methods:{
-		getContent() {
-			details({},35).then(({data}) => {
+		getList() {
+			let that = this
+			getArticleList({},44).then(({data}) => {
+				console.log(data)
+				let arr = data.list.reverse()
+				arr.forEach(item => {
+					let obj = {}
+					obj.name = item.title
+					obj.uid = item.id
+					that.navList.push(obj)
+					console.log(that.navList,'55555')
+				})
+				this.navClick(arr[0].id)
+			}).catch( err => {
+				console.log(err)
+			})
+		},
+		navClick(id) {
+			this.currentIndex = id
+			details({},id).then(({data})=> {
 				this.content = data.content
 			})
 		}
@@ -32,15 +86,90 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.concat {
-	width: 1200px;
-	margin: 0 auto;
-	display: flex;
-	justify-content: space-between;
-	.right-wrapper {
+	.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: 776px;
+		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>

src/views/Directories.vue

@@ -2,7 +2,7 @@
 	<div class="regulations">
 		<div class="right-content">
 			<div class="title moren">
-				捐赠名录
+				捐献名录
 			</div>
 			<div style="padding: 35px 50px 35px 50px;" class="line">
 				<router-view></router-view>

src/views/about/ChineseRedCross.vue

@@ -0,0 +1,35 @@
+<template>
+	<div class="new-detail">
+		<div class="content" v-html="content"></div>
+	</div>
+</template>
+
+<script>
+	import { details } from '../../request/api.js'
+	
+	export default {
+		data() {
+			return {
+				content: ''
+			}
+		},
+		created() {
+			this.getContent()
+		},
+		methods: {
+			getContent() {
+				details({},1528).then(({data}) => {
+					this.content = data.content
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	 
+	.content /deep/ img{
+		max-width: 815px;
+		// overflow: hidden;
+	}
+</style>

src/views/about/RedCrossMovement.vue

@@ -0,0 +1,34 @@
+<template>
+	<div class="new-detail">
+		<div class="content" v-html="content"></div>
+	</div>
+</template>
+
+<script>
+	import { details } from '../../request/api.js'
+	
+	export default {
+		data() {
+			return {
+				content: ''
+			}
+		},
+		created() {
+			this.getContent()
+		},
+		methods: {
+			getContent() {
+				details({},1530).then(({data}) => {
+					this.content = data.content
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	// .content {
+	// 	width: 100%;
+	// 	// overflow: hidden;
+	// }
+</style>

src/views/about/matrix.vue

@@ -0,0 +1,34 @@
+<template>
+	<div class="new-detail">
+		<div class="content" v-html="content"></div>
+	</div>
+</template>
+
+<script>
+	import { details } from '../../request/api.js'
+	
+	export default {
+		data() {
+			return {
+				content: ''
+			}
+		},
+		created() {
+			this.getContent()
+		},
+		methods: {
+			getContent() {
+				details({},83).then(({data}) => {
+					this.content = data.content
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	// .content {
+	// 	width: 100%;
+	// 	// overflow: hidden;
+	// }
+</style>

src/views/about/redCrossLaw.vue

@@ -0,0 +1,34 @@
+<template>
+	<div class="new-detail">
+		<div class="content" v-html="content"></div>
+	</div>
+</template>
+
+<script>
+	import { details } from '../../request/api.js'
+	
+	export default {
+		data() {
+			return {
+				content: ''
+			}
+		},
+		created() {
+			this.getContent()
+		},
+		methods: {
+			getContent() {
+				details({},1529).then(({data}) => {
+					this.content = data.content
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	// .content {
+	// 	width: 100%;
+	// 	// overflow: hidden;
+	// }
+</style>

vue.config.js

@@ -2,17 +2,27 @@
 const path = require('path')
 const port = process.env.port || process.env.npm_config_port || 9527 // dev port
 module.exports = {
-  publicPath: '/wap',
-  outputDir: 'dist',
-  indexPath: process.env.NODE_ENV === 'development' ? 'mer.html' : 'index.html',
-  lintOnSave: process.env.NODE_ENV === 'development',
-  productionSourceMap: false,
-  devServer: {
-    port: port,
-    // open: true,
-    overlay: {
-      warnings: false,
-      errors: true
-    }
-  }
-}
+	publicPath: '/wap',
+	outputDir: 'dist',
+	indexPath: process.env.NODE_ENV === 'development' ? 'mer.html' : 'index.html',
+	lintOnSave: process.env.NODE_ENV === 'development',
+	productionSourceMap: false,
+	devServer: {
+		port: port,
+		// open: true,
+		overlay: {
+			warnings: false,
+			errors: true
+		},
+		proxy: {
+			'/api': {
+				target: `https://www.jzrc.org.cn`, // 需要代理到的地址               
+				changeOrigin: true,
+				// ws: true,
+				pathRewrite: {
+					'^/api': '/api'
+				}
+			}
+		}
+	}
+}