6-19

src/components/leftNav/LeftNav.vue

@@ -82,6 +82,18 @@
 					case '/popularScience/detail':
 						title = '红会科普'
 						break
+					case '/news/list':
+						title = '红会新闻'
+						break
+					case '/news/detail':
+						title = '红会新闻'
+						break
+					case '/puplicity/list':
+						title = '信息公示'
+						break
+					case '/puplicity/detail':
+						title = '信息公示'
+						break
 				     default:
 				        title = ''
 				}

src/request/api.js

@@ -1,29 +1,37 @@
 import request from "./request.js"
 
 
-// 获取文章列表
-export function article_list(data) {
-	return request({
-		url: "/article_list",
-		method: "get",
-		params: data
-	});
+// 获取轮播图
+export function loadIndexs(data) {
+	return request({
+		url: '/api/index',
+		method: 'get',
+		data
+	});
 }
 
-//获取文章内容
-export function article_info(data, id) {
-	return request({
-		url: "/article_detail/" + id,
-		method: "get",
-		params: data
-	});
+// 获取科普文章列表
+export function splist(data) {
+	return request({
+		url: '/api/article/list/1',
+		method: 'get',
+		params: data
+	});
+}
+// 获取文章详情
+export function details(data,id) {
+	return request({
+		url: '/api/article/details/'+id,
+		method: 'get',
+		data
+	});
+}
+// 获取爱心捐款列表
+export function loveList(data) {
+	return request({
+		url: '/api/bulletin',
+		method: 'get',
+		params: data
+	});
 }
 
-//轮播图
-export function loop(data) {
-	return request({
-		url: "/loop",
-		method: "get",
-		params: data
-	});
-}

src/request/request.js

@@ -1,4 +1,4 @@
-import Axios from 'axios'
+// import Axios from 'axios'
 
 // export function request(config){
 //   const instance = new Axios.create({
@@ -11,7 +11,7 @@ import axios from 'axios'
 
 // 创建一个axios实例
 const service = axios.create({
-    baseURL: "http://ca.liuniu946.com/",
+    baseURL: "http://jz.red.igxys.com",
     timeout: 60000
   });
 

src/router.js

@@ -161,6 +161,60 @@ export default new Router({
 			}
 		]
 	},
+	{
+		path: '/news',
+		name: 'news',
+		component: () => import('./views/News.vue'),
+		meta: {
+			title: '红会新闻'
+		},
+		redirect: '/news/list',
+		children: [
+			{
+				path: 'list',
+				name: 'newslist',
+				component: () => import('./views/news/List.vue'),
+				meta: {
+					title: '红会新闻'
+				}
+			},
+			{
+				path: 'detail',
+				name: 'newsdetail',
+				component: () => import('./views/news/Detail.vue'),
+				meta: {
+					title: '红会新闻'
+				}
+			}
+		]
+	},
+	{
+		path: '/publicity',
+		name: 'publicity',
+		component: () => import('./views/Publicity.vue'),
+		meta: {
+			title: '信息公示'
+		},
+		redirect: '/publicity/list',
+		children: [
+			{
+				path: 'list',
+				name: 'publicitylist',
+				component: () => import('./views/publicity/List.vue'),
+				meta: {
+					title: '信息公示'
+				}
+			},
+			{
+				path: 'detail',
+				name: 'publicitydetail',
+				component: () => import('./views/publicity/Detail.vue'),
+				meta: {
+					title: '信息公示'
+				}
+			}
+		]
+	},
 	// {
 	// 	path: '*',
 	// 	redirect: '/home'

src/views/About.vue

@@ -8,31 +8,30 @@
 
 <script>
 import LeftNav from '../components/leftNav/LeftNav.vue';
-// import PageTitle from '../components/pageTitle/PageTitle.vue'
+
 export default {
 	components: {
 		LeftNav
-		// PageTitle
 	},
 	data() {
 		return {
 			navList: [{ index: 0, name: '关于我们', path: '/about' }, { index: 1, name: '联系我们', path: '/concat' }],
-			radio: '1'
+			// radio: '1'
 		};
 	}
 };
 </script>
 
 <style lang="scss" scoped>
-.about {
-	width: 1200px;
-	margin: 0 auto;
-	display: flex;
-	justify-content: space-between;
-	.right-wrapper {
-		width: 915px;
-		min-height: 776px;
-		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-	}
-}
+// .about {
+// 	width: 1200px;
+// 	margin: 0 auto;
+// 	display: flex;
+// 	justify-content: space-between;
+// 	.right-wrapper {
+// 		width: 915px;
+// 		min-height: 776px;
+// 		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+// 	}
+// }
 </style>

src/views/Home.vue

@@ -1,20 +1,33 @@
 <template>
 	<div class="home">
 		<div class="home-swiper">
-			<el-carousel height="484px">
-				<el-carousel-item v-for="(item, index) in swiperList" :key="index"><el-image :src="item" alt="" /></el-carousel-item>
+			<el-carousel height="484px" :interval="4000">
+				<el-carousel-item v-for="(item, index) in swiperList" :key="index"><el-image :src="item.pic" alt="" class="swiper-img" lazy/></el-carousel-item>
 			</el-carousel>
 		</div>
 		<div class="home-body">
-			<div class="body-left">
-				<div class="rsp">
-					<item-title title="红色科普" :topath="'/popularScience'"></item-title>
-					<div class="sp-item" v-for="item in spList" :key="item.id">
-						<img :src="item.image" class="sp-img">
-						<div class="item-right">
-							<div class="sp-title clamp moren">{{item.title}}</div>
-							<div class="sp-content ellipsis moren">{{item.content}}</div>
-							<div class="more hand" @click="navTo('/popularScience/detail?id='+item.id)">【 MORE 】</div>
+			<div class="body-left moren">
+				<div class="red-new">
+					<item-title title="红会新闻" :topath="'/news'"></item-title>
+					<div class="item-wrapper">
+						<div class="new-item hand" v-for="item in redNews" :key="item.id">
+							<div class="title clamp ">
+								<span></span>
+								{{ item.title }}
+							</div>
+							<div class="time">{{ item.add_time | getTime }}</div>
+						</div>
+					</div>
+				</div>
+				<div class="new-open">
+					<item-title title="信息公示" :topath="'/publicity'"></item-title>
+					<div class="item-wrapper">
+						<div class="new-item hand" v-for="item in openNews" :key="item.id">
+							<div class="title clamp">
+								<span></span>
+								{{ item.title }}
+							</div>
+							<div class="time">{{ item.add_time | getTime }}</div>
 						</div>
 					</div>
 				</div>
@@ -25,7 +38,7 @@
 					<div class="join-main">
 						<div class="join-item" v-for="item in miniNavList" @click="navTo(item.path)" :key="item.title">
 							<div class="logo hand"><img :src="item.image" /></div>
-							<div class="title hand">{{item.title}}</div>
+							<div class="title hand">{{ item.title }}</div>
 						</div>
 					</div>
 				</div>
@@ -33,9 +46,9 @@
 					<item-title title="爱心榜" :topath="'/loveList'"></item-title>
 					<el-table :data="jxList" style="width: 100%">
 						<el-table-column prop="time" label="捐献时间"></el-table-column>
-						<el-table-column prop="name" label="捐献者"></el-table-column>
-						<el-table-column prop="num" label="捐献金额"></el-table-column>
-						<el-table-column prop="status" label="捐献意向"></el-table-column>
+						<el-table-column prop="donate_er" label="捐献者"></el-table-column>
+						<el-table-column prop="money" label="捐献金额"></el-table-column>
+						<el-table-column prop="intention" label="捐献意向"></el-table-column>
 					</el-table>
 				</div>
 			</div>
@@ -44,16 +57,14 @@
 		<div class="show-pic">
 			<item-title title="图片展示" isShow="2"></item-title>
 			<div class="imgs-wrapper">
-				<div class="imgs">
-					<img :src="item" v-for="(item,index) in imgList" :key="index">
-				</div>
+				<div class="imgs"><img v-for="(item, index) in imgList" :key="item.id" :src="item.picture" /></div>
 			</div>
 		</div>
 		<div class="friends">
 			<item-title title="友情链接" isShow="2"></item-title>
 			<div class="friend-list-wrapper">
 				<div class="friend-item" v-for="item in friendList" :key="item.id">
-					<a :href="item.url" class="item-a" target="_blank">{{item.name}}</a>
+					<a :href="item.link" class="item-a" target="_blank">{{ item.name }}</a>
 				</div>
 			</div>
 		</div>
@@ -62,6 +73,8 @@
 
 <script>
 import ItemTitle from './homeChild/ItemTitle.vue';
+
+import { loadIndexs, splist, loveList, friendList } from '../request/api.js';
 export default {
 	components: {
 		ItemTitle
@@ -104,86 +117,108 @@ export default {
 					title: '普及培训报名',
 					image: require('@/assets/img/i7.png')
 				},
-			],
-			swiperList: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'],
-			jxList: [
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '200.00',
-					status: '爱心捐赠'
-				},
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '100.00',
-					status: '爱心捐赠'
-				},
 				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '300.00',
-					status: '爱心捐赠'
+					path: '/popularScience/list',
+					title: '红会科普',
+					image: require('@/assets/img/i7.png')
 				}
 			],
-			spList: [
-				{
-					id: 51,
-					image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-					title: '去年中国医疗救助1.2亿人次',
-					content: '记者从16日召开的国务院政策例行吹风会上获悉，2018年，我国医疗救助惠及1.2亿人次，支出资金399.7亿元记者从16日召开的国务院政策例行吹风会上获悉，2018年，我国医疗救助惠及1.2亿人次，支出资金399.7亿元',
-				},
-				{
-					id: 52,
-					image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-					title: '去年中国医疗救助1.2亿人次',
-					content: '记者从16日召开的国务院政策例行吹风会上获悉，2018年，我国医疗救助惠及1.2亿人次，支出资金399.7亿元记者从16日召开的国务院政策例行吹风会上获悉，2018年，我国医疗救助惠及1.2亿人次，支出资金399.7亿元',
-				},
-				{
-					id: 53,
-					image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-					title: '去年中国医疗救助1.2亿人次',
-					content: '记者从16日召开的国务院政策例行吹风会上获悉，2018年，我国医疗救助惠及1.2亿人次，支出资金399.7亿元记者从16日召开的国务院政策例行吹风会上获悉，2018年，我国医疗救助惠及1.2亿人次，支出资金399.7亿元',
-				},
-				{
-					id: 54,
-					image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-					title: '去年中国医疗救助1.2亿人次',
-					content: '记者从16日召开的国务院政策例行吹风会上获悉，2018年，我国医疗救助惠及1.2亿人次，支出资金399.7亿元记者从16日召开的国务院政策例行吹风会上获悉，2018年，我国医疗救助惠及1.2亿人次，支出资金399.7亿元',
-				},
-				{
-					id: 55,
-					image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-					title: '今年城市养老服务设施覆盖率将超90%今年城市养老服务设施覆盖率将超90%',
-					content: '记者从16日召开的国务院政策例行吹风会上获悉，2018年，我国医疗救助惠及1.2亿人次，支出资金399.7亿元记者从16日召开的国务院政策例行吹风会上获悉，2018年，我国医疗救助惠及1.2亿人次，支出资金399.7亿元',
-				}
+			swiperList: [],
+			// jxList: [],
+			spList: [],
+			imgList: [],
+			friendList: [],
+			redNews: [
+				{ id: 1, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
+				{ id: 2, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
+				{ id: 3, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
+				{ id: 4, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
+				{ id: 5, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
+				{ id: 6, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
+				{ id: 7, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
+				{ id: 8, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
+				{ id: 9, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 }
 			],
-			imgList: [
-				'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
-				'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-				'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
-				'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-				'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
-				'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-				'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
-				'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-				
+			openNews: [
+				{ id: 1, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
+				{ id: 2, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
+				{ id: 3, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
+				{ id: 4, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
+				{ id: 5, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 },
+				{ id: 6, title: '关于《鼓励外商投资产业目录（征求意见稿）》公开征求意见的公告', add_time: 1624084078 }
 			],
-			friendList: [
-				{ name: '中国×××××网站', url: 'https://www.baidu.com', id: 85 },
-				{ name: '中国×××××网站', url: 'https://www.baidu.com', id: 86 },
-				{ name: '中国×××××网站', url: 'https://www.baidu.com', id: 87 },
-				{ name: '中国×××××网站', url: 'https://www.baidu.com', id: 88 },
-				{ name: '中国×××××网站', url: 'https://www.baidu.com', id: 89 },
-				{ name: '中国×××××网站', url: 'https://www.baidu.com', id: 82 },
-				{ name: '中国×××××网站', url: 'https://www.baidu.com', id: 81 },
-				{ name: '中国×××××网站', url: 'https://www.baidu.com', id: 83 }
-			]
+			moreJxList: [],
+			timer: null
 		};
 	},
+	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;
+		}
+	},
+	computed:{
+		jxList() {
+			return this.moreJxList.slice(0,3)
+		}
+	},
+	created() {
+		this.getIndex();
+		this.getFirstAidList();
+		this.getJxList();
+	},
 	methods: {
 		navTo(url) {
-			this.$router.push(url)
+			this.$router.push(url);
+		},
+		getIndex() {
+			loadIndexs().then(({ data }) => {
+				console.log(data);
+				this.swiperList = data.data.banner;
+				this.friendList = data.data.friend_link;
+				this.imgList = data.data.picture_list;
+				console.log(this.swiperList);
+			});
+		},
+		getFirstAidList() {
+			splist({
+				page: 1,
+				limit: 5
+			}).then(({ data }) => {
+				this.spList = data.data.list;
+			});
+		},
+		getJxList() {
+			let obj = this;
+			let data = {
+				page: 1,
+				limit: 20
+			};
+			loveList(data).then(res => {
+				obj.moreJxList = res.data.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;
+				});
+				obj.gundong()
+			});
+		},
+		gundong() {
+			let obj = this
+			obj.timer = setTimeout(()=> {
+				obj.moreJxList.push(obj.moreJxList.shift())
+				// console.log(obj.moreJxList)
+				obj.gundong()
+			},2000)
 		}
 	}
 };
@@ -193,19 +228,19 @@ export default {
 .home-swiper {
 	width: 1200px;
 	height: 484px;
-	background: pink;
-	margin: -24px auto 24px;
+	// background: pink;
+	margin: -20px auto 24px;
 	el-carousel {
 		width: 1200px;
 		el-carousel-item {
 			width: 1200px;
-			el-image {
-				width: 1200px;
-				height: 484px;
-				background: pink;
-			}
+			height: 484px;
 		}
 	}
+	.swiper-img {
+		width: 100%;
+		height: 100%;
+	}
 }
 .home-body {
 	width: 1200px;
@@ -213,46 +248,49 @@ export default {
 	display: flex;
 	justify-content: space-between;
 	.body-left {
-		.rsp {
+		.red-new {
+			width: 588px;
+			height: 344px;
+			background: #ffffff;
+			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+			margin-bottom: 24px;
+			// padding: 20px 15px 0 13px;
+		}
+		.new-open {
+			// padding: 20px 15px 0 13px;
 			width: 588px;
-			height: 630px;
+			height: 262px;
 			background: #ffffff;
 			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-			.sp-item {
-				padding: 10px 13px 10px 12px;
+		}
+		.item-wrapper {
+			padding: 20px 15px 0 13px;
+			.new-item {
 				display: flex;
-				border-bottom: 1px solid #F2F2F2;
-				&:last-child {
-					border: none;
+				justify-content: space-between;
+				margin-bottom: 17px;
+				span {
+					display: inline-block;
+					width: 8px;
+					height: 8px;
+					background: #d8d8d8;
+					// border-radius: 50%;
+					transform: rotate(45deg);
+					margin-right: 8px;
 				}
-				.sp-img {
-					width: 180px;
-					height: 96px;
+				.title {
+					width: 460px;
+					height: 14px;
+					font-size: 14px;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #101010;
 				}
-				.item-right {
-					padding-left: 10px;
-					.sp-title {
-						width: 352px;
-						font-size: 16px;
-						font-family: PingFang SC;
-						font-weight: bold;
-						line-height: 24px;
-						height: 24px;
-					}
-					.sp-content {
-						padding-top: 5px;
-						font-size: 14px;
-						line-height: 20px;
-						width: 372px;
-						color: #666;
-					}
-					.more {
-						text-align: right;
-						font-size: 14px;
-						font-family: PingFang SC;
-						font-weight: bold;
-						padding-top: 10px;
-					}
+				.time {
+					font-size: 14px;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #999999;
 				}
 			}
 		}
@@ -309,18 +347,24 @@ export default {
 				font-size: 17px;
 				font-family: PingFang SC;
 				font-weight: bold;
-				color: #D82020 !important;
+				color: #d82020 !important;
 				text-align: center;
 				// line-height: 54px;
 				height: 54px;
 			}
 			.el-table__row > td {
-					font-size: 17px;
-					font-family: PingFang SC;
-					font-weight: bold;
-					color: #101010;
-					text-align: center;
-					height: 55px;
+				font-size: 17px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #101010;
+				text-align: center;
+				height: 55px;
+				.cell {
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					display: block;
+				}
 			}
 		}
 	}
@@ -342,7 +386,7 @@ export default {
 		padding: 14px 12px;
 		.imgs {
 			width: 1176px;
-			height: 124px;
+			// height: 124px;
 			display: flex;
 			flex-wrap: nowrap;
 			overflow: auto hidden;
@@ -373,7 +417,6 @@ export default {
 			margin-bottom: 15px;
 			.item-a {
 				color: #323131;
-				
 			}
 		}
 	}
@@ -384,14 +427,9 @@ export default {
 	border-radius: 50%;
 }
 
-// .el-carousel__indicator--horizontal {
-// 	.el-carousel__button {
-// 		background-color: rgba(0,0,0,0.9);
-// 	}
-// }
 .is-active {
 	.el-carousel__button {
-		background-color: #D82020 !important;
+		background-color: #d82020 !important;
 	}
 }
 </style>

src/views/LoveList.vue

@@ -2,129 +2,57 @@
 	<div class="love-list">
 		<el-table :data="tableData" border style="width: 100%">
 			<el-table-column prop="time" label="捐献时间" width="154" align="center"></el-table-column>
-			<el-table-column prop="name" label="捐献者" width="409" align="center"></el-table-column>
-			<el-table-column prop="num" label="捐献金额" width="140" align="center"></el-table-column>
-			<el-table-column prop="status" label="捐献意向" width="356" align="center"></el-table-column>
+			<el-table-column prop="donate_er" label="捐献者" width="409" align="center"></el-table-column>
+			<el-table-column prop="money" label="捐献金额" width="140" align="center"></el-table-column>
+			<el-table-column prop="intention" label="捐献意向" width="356" align="center"></el-table-column>
 			<el-table-column prop="mark" label="备注" align="center"></el-table-column>
 		</el-table>
-		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页" @current-change="currentChange"></el-pagination>
+		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页" @current-change="currentChange" :page-size="14"></el-pagination>
 	</div>
 </template>
 
 <script>
+	import { loveList } from '../request/api.js'
 export default {
 	data() {
 		return {
-			tableData: [
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '100.00',
-					status: '爱心捐赠',
-					mark: ''
-				},
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '300.00',
-					status: '爱心捐赠',
-					mark: ''
-				},
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '200.00',
-					status: '爱心捐赠',
-					mark: ''
-				},
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '100.00',
-					status: '爱心捐赠',
-					mark: ''
-				},
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '300.00',
-					status: '爱心捐赠',
-					mark: ''
-				},
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '200.00',
-					status: '爱心捐赠',
-					mark: ''
-				},
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '100.00',
-					status: '爱心捐赠',
-					mark: ''
-				},
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '300.00',
-					status: '爱心捐赠',
-					mark: ''
-				},
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '200.00',
-					status: '爱心捐赠',
-					mark: ''
-				},
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '100.00',
-					status: '爱心捐赠',
-					mark: ''
-				},
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '300.00',
-					status: '爱心捐赠',
-					mark: ''
-				},
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '200.00',
-					status: '爱心捐赠',
-					mark: ''
-				},
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '100.00',
-					status: '爱心捐赠',
-					mark: ''
-				},
-				{
-					time: '2021/05/30',
-					name: '荆州XX公司',
-					num: '300.00',
-					status: '爱心捐赠',
-					mark: ''
-				}
-			],
+			tableData: [],
 			total: 100,
 			page:1,
 			limit: 14
 		};
 	},
+	created() {
+		this.getLiveList()
+	},
 	methods: {
 		//分页页码改变触发事件
 		currentChange(e) {
 			console.log(e);
 			this.page = e
+			this.getLiveList()
+		},
+		getLiveList() {
+			let obj = this
+			let data = {
+				page: obj.page,
+				limit: obj.limit
+			}
+			loveList(data).then( res => {
+				obj.tableData = res.data.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
+				})
+				obj.total = res.data.data.count
+				console.log(obj.tableData)
+			})
 		}
 	}
 };

src/views/News.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="news">
+		<left-nav :navList="navList">
+			news
+		</left-nav>
+	</div>
+</template>
+
+<script>
+	import LeftNav from '../components/leftNav/LeftNav.vue';
+	
+	export default {
+		components: {
+			LeftNav
+		},
+		data() {
+			return {
+				navList: [{ index: 0, name: '红色新闻', path: '/news/list' }, { index: 1, name: '信息公示', path: '/publicity/list' }],
+				// radio: '1'
+			};
+		}
+	};
+</script>
+
+<style>
+</style>

src/views/PopularScience.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="join">
+	<div class="wrapper">
 		<left-nav :navList="navList" :rightTitle="rightTitle">
 			<router-view></router-view>
 		</left-nav>

src/views/Publicity.vue

@@ -0,0 +1,25 @@
+<template>
+	<div class="publicity">
+		<left-nav :navList="navList">
+			publicity
+		</left-nav>
+	</div>
+</template>
+
+<script>
+	import LeftNav from '../components/leftNav/LeftNav.vue';
+	
+	export default {
+		components: {
+			LeftNav
+		},
+		data() {
+			return {
+				navList: [{ index: 0, name: '红色新闻', path: '/news/list' }, { index: 1, name: '信息公示', path: '/publicity/list' }],
+			};
+		}
+	};
+</script>
+
+<style>
+</style>

src/views/donation/Contribution.vue

@@ -1,11 +1,33 @@
 <template>
 	<div class="contribution">
-		contribution
+		<div class="" v-html="content">
+			
+		</div>
 	</div>
 </template>
 
-<script>
+<script>
+	import { details } from '../../request/api.js'
+	
+	export default {
+		data() {
+			return {
+				content: ''
+			}
+		},
+		created() {
+			this.getContent()
+		},
+		methods: {
+			getContent() {
+				details({},25).then(({data}) => {
+					console.log(data.data)
+					this.content = data.data.content
+				})
+			}
+		}
+	}
 </script>
 
-<style>
+<style lang="scss" scoped="">
 </style>

src/views/donation/Hpc.vue

@@ -1,10 +1,14 @@
 <template>
 	<div class="hpc">
-		{{iid}}
+		<!-- {{iid}} -->
+		<div v-html="content">
+			
+		</div>
 	</div>
 </template>
 
 <script>
+	import { details } from '../../request/api.js'
 	export default {
 		data() {
 			return {
@@ -13,6 +17,7 @@
 		},
 		created() {
 			this.getData()
+			this.getContent(27)
 		},
 		computed: {
 			iid() {
@@ -28,10 +33,16 @@
 		methods: {
 			getData(val) {
 				if(val==0){
-					console.log('获取基础知识')
+					this.getContent(27)
 				}else {
-					console.log('获取报名')
+					this.getContent(28)
 				}
+			},
+			getContent(id) {
+				details({},id).then(({data}) => {
+					console.log(data.data)
+					this.content = data.data.content
+				})
 			}
 		}
 	}

src/views/donation/OrganDonation.vue

@@ -1,11 +1,35 @@
 <template>
 	<div class="organ-donation">
-		organDonation
+		<div class="content" v-html="content"></div>
 	</div>
 </template>
 
-<script>
+<script>
+	import { details } from '../../request/api.js'
+	
+	export default {
+		data() {
+			return {
+				content: ''
+			}
+		},
+		created() {
+			this.getContent()
+		},
+		methods: {
+			getContent() {
+				details({},26).then(({data}) => {
+					console.log(data.data)
+					this.content = data.data.content
+				})
+			}
+		}
+	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	// .content {
+	// 	width: 100%;
+	// 	// overflow: hidden;
+	// }
 </style>

src/views/homeChild/ItemTitle.vue

@@ -35,7 +35,7 @@ export default {
   border-top: 2px solid #d82020;
   display: flex;
   justify-content: space-between;
-  padding-right: 14px;
+  padding-right: 8px;
   .title {
 	text-align: center;
     font-size: 16px;

src/views/news/Detail.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/views/news/List.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/views/popularScience/Detail.vue

@@ -1,14 +1,18 @@
 <template>
 	<div class="detail">
-		{{content}}
+		<div class="content" v-html="content"></div>
+		<div class="title">{{detail.title}}</div>
+		<div class="synopsis">{{detail.synopsis}}</div>
 	</div>
 </template>
 
 <script>
+	import { details } from '../../request/api.js'
 	export default {
 		data() {
 			return {
-				content: ''
+				content: '',
+				detail: {}
 			}
 		},
 		created() {
@@ -16,12 +20,36 @@
 		},
 		methods:{
 			getContent() {
+				let obj = this
 				let id = this.$route.query.id
-				this.content = id
+				details({},id).then(res => {
+					
+					obj.content = res.data.data.content.replace(/width="420" height="280"/g, 'width="812" height="327"')
+					console.log(obj.content)
+					obj.detail = res.data.data
+				})
+				
 			}
 		}
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.title {
+		// width: 184px;
+		// height: 20px;
+		font-size: 20px;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #101010;
+		text-align: center;
+		padding-top: 29px;
+	}
+	.synopsis {
+		padding-top: 26px;
+		font-size: 16px;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #333333;
+	}
 </style>

src/views/popularScience/List.vue

@@ -2,78 +2,34 @@
 	<div class="list">
 		<div class="wrapper">
 			<div class="tip"  v-for="item in tipList" :key="item.id" @click="tipClick(item.id)">
-				<img :src="item.image" />
+				<img :src="item.image_input[0]" />
 				<div class="info hand">
 					<div class="title clamp">{{item.title}}</div>
-					<div class="content clamp">{{item.content}}</div>
-					<div class="num">{{item.num}}人已观看</div>
+					<div class="content clamp">{{item.synopsis}}</div>
+					<div class="num">{{item.visit}}人已观看</div>
 				</div>
 			</div>
-			<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页" @current-change="currentChange"></el-pagination>
+			<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页" @current-change="currentChange" :page-size="7"></el-pagination>
 		</div>
 	</div>
 </template>
 
 <script>
+	import { splist } from '../../request/api.js'
+	
 	export default {
 		data() {
 			return {
-				tipList: [
-					{
-						id: 0,
-						image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-						title: '海姆立克急救法',
-						content: '海姆利希急救法即海姆里克腹部冲击法急性呼吸道异物堵塞在生活中海姆利希急救法即海姆里克腹部冲击法急性呼吸道异物堵塞在生活中...',
-						num: 377
-					},
-					{
-						id: 2,
-						image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-						title: '海姆立克急救法',
-						content: '海姆利希急救法即海姆里克腹部冲击法急性呼吸道异物堵塞在生活中海姆利希急救法即海姆里克腹部冲击法急性呼吸道异物堵塞在生活中...',
-						num: 377
-					},
-					{
-						id: 3,
-						image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-						title: '海姆立克急救法',
-						content: '海姆利希急救法即海姆里克腹部冲击法急性呼吸道异物堵塞在生活中海姆利希急救法即海姆里克腹部冲击法急性呼吸道异物堵塞在生活中...',
-						num: 377
-					},
-					{
-						id: 4,
-						image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-						title: '海姆立克急救法',
-						content: '海姆利希急救法即海姆里克腹部冲击法急性呼吸道异物堵塞在生活中海姆利希急救法即海姆里克腹部冲击法急性呼吸道异物堵塞在生活中...',
-						num: 377
-					},
-					{
-						id: 5,
-						image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-						title: '海姆立克急救法',
-						content: '海姆利希急救法即海姆里克腹部冲击法急性呼吸道异物堵塞在生活中海姆利希急救法即海姆里克腹部冲击法急性呼吸道异物堵塞在生活中...',
-						num: 377
-					},
-					{
-						id: 6,
-						image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-						title: '海姆立克急救法',
-						content: '海姆利希急救法即海姆里克腹部冲击法急性呼吸道异物堵塞在生活中海姆利希急救法即海姆里克腹部冲击法急性呼吸道异物堵塞在生活中...',
-						num: 377
-					},
-					{
-						id: 7,
-						image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-						title: '海姆立克急救法',
-						content: '海姆利希急救法即海姆里克腹部冲击法急性呼吸道异物堵塞在生活中海姆利希急救法即海姆里克腹部冲击法急性呼吸道异物堵塞在生活中...',
-						num: 377
-					},
-				],
-				total: 100,
+				tipList: [],
+				alllist: [],
+				total: 0,
 				page: 1,
 				limit: 7
 			}
 		},
+		created() {
+			this.getAllList()
+		},
 		methods: {
 			tipClick(id) {
 				this.$router.push('/popularScience/detail?id=' + id)
@@ -82,6 +38,31 @@
 			currentChange(e) {
 				console.log(e);
 				this.page = e
+				this.getList()
+			},
+			getAllList() {
+				let obj = this
+				let data = {
+					page: this.page,
+					limit: this.limit
+				}
+				splist().then(({data}) => {
+					console.log(data.data)
+					// obj.alllist = data.data
+					obj.total = data.data.count
+					obj.tipList = data.data.list
+				})
+			},
+			getList() {
+				let obj = this
+				let data = {
+					page: this.page,
+					limit: this.limit
+				}
+				splist(data).then(({data}) => {
+					// console.log(data.data)
+					obj.tipList = data.data
+				})
 			}
 		}
 	}

src/views/publicity/Detail.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/views/publicity/List.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>