样式完成

package-lock.json

@@ -1774,6 +1774,14 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.nlark.com/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
@@ -4754,8 +4762,7 @@
     "follow-redirects": {
       "version": "1.14.1",
       "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz",
-      "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=",
-      "dev": true
+      "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M="
     },
     "for-in": {
       "version": "1.0.2",

package.json

@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^2.6.5",
     "element-ui": "^2.15.2",
     "vue": "^2.6.10",

src/assets/css/base.css

@@ -24,4 +24,4 @@ html {
 }
 .moren {
 	cursor: default;
-}
+}

src/components/leftNav/LeftNav.vue

@@ -23,8 +23,10 @@
 					如何报名
 				</div>
 			</template>
+			<div style="padding: 35px 50px 35px 50px;">
+				<slot></slot>
+			</div>
 			
-			<slot></slot>
 		</div>
 	</div>
 </template>

src/router.js

@@ -152,9 +152,9 @@ export default new Router({
 			}
 		]
 	},
-	{
-		path: '*',
-		redirect: '/home'
-	}
+	// {
+	// 	path: '*',
+	// 	redirect: '/home'
+	// }
   ]
 })

src/views/About.vue

@@ -1,6 +1,8 @@
 <template>
 	<div class="about">
-		<left-nav :navList="navList"></left-nav>
+		<left-nav :navList="navList">
+			about
+		</left-nav>
 	</div>
 </template>
 

src/views/Concat.vue

@@ -1,6 +1,8 @@
 <template>
 	<div class="concat">
-		<left-nav :navList="navList"></left-nav>
+		<left-nav :navList="navList">
+			concat
+		</left-nav>
 	</div>
 </template>
 

src/views/Home.vue

@@ -12,9 +12,9 @@
 					<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">{{item.title}}</div>
-							<div class="sp-content ellipsis">{{item.content}}</div>
-							<div class="more">【 MORE 】</div>
+							<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>
 					</div>
 				</div>
@@ -23,31 +23,31 @@
 				<div class="join">
 					<item-title title="善行参与" :topath="'/donation'"></item-title>
 					<div class="join-main">
-						<div class="join-item">
+						<div class="join-item" @click="navTo('/donation/contribution')">
 							<div class="logo"><img src="" /></div>
 							<div class="title">爱心捐款</div>
 						</div>
-						<div class="join-item">
+						<div class="join-item" @click="navTo('/donation/organDonation')">
 							<div class="logo"><img src="" /></div>
 							<div class="title">器官捐献</div>
 						</div>
-						<div class="join-item">
+						<div class="join-item" @click="navTo('/donation/Hpc')">
 							<div class="logo"><img src="" /></div>
 							<div class="title">造血干细胞捐献</div>
 						</div>
-						<div class="join-item">
+						<div class="join-item" @click="navTo('/join/rescue')">
 							<div class="logo"><img src="" /></div>
 							<div class="title">救护员登记</div>
 						</div>
-						<div class="join-item">
+						<div class="join-item" @click="navTo('/join/member')">
 							<div class="logo"><img src="" /></div>
 							<div class="title">个人会员登记</div>
 						</div>
-						<div class="join-item">
+						<div class="join-item" @click="navTo('/join/volunteer')">
 							<div class="logo"><img src="" /></div>
 							<div class="title">志愿者登记</div>
 						</div>
-						<div class="join-item">
+						<div class="join-item" @click="navTo('/join/train')">
 							<div class="logo"><img src="" /></div>
 							<div class="title">普及培训报名</div>
 						</div>
@@ -167,6 +167,11 @@ export default {
 				{ name: '中国×××××网站', url: 'https://www.baidu.com', id: 83 }
 			]
 		};
+	},
+	methods: {
+		navTo(url) {
+			this.$router.push(url)
+		}
 	}
 };
 </script>

src/views/popularScience/Detail.vue

@@ -1,10 +1,26 @@
 <template>
 	<div class="detail">
-		detail
+		{{content}}
 	</div>
 </template>
 
-<script>
+<script>
+	export default {
+		data() {
+			return {
+				content: ''
+			}
+		},
+		created() {
+			this.getContent()
+		},
+		methods:{
+			getContent() {
+				let id = this.$route.query.id
+				this.content = id
+			}
+		}
+	}
 </script>
 
 <style>

src/views/popularScience/List.vue

@@ -1,11 +1,138 @@
 <template>
 	<div class="list">
-		red List
+		<div class="wrapper">
+			<div class="tip"  v-for="item in tipList" :key="item.id" @click="tipClick(item.id)">
+				<img :src="item.image" />
+				<div class="info">
+					<div class="title clamp">{{item.title}}</div>
+					<div class="content clamp">{{item.content}}</div>
+					<div class="num">{{item.num}}人已观看</div>
+				</div>
+			</div>
+			<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页" @current-change="currentChange"></el-pagination>
+		</div>
 	</div>
 </template>
 
-<script>
+<script>
+	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,
+				page: 1,
+				limit: 7
+			}
+		},
+		methods: {
+			tipClick(id) {
+				this.$router.push('/popularScience/detail?id=' + id)
+			},
+			//分页页码改变触发事件
+			currentChange(e) {
+				console.log(e);
+				this.page = e
+			}
+		}
+	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.tip{
+		width: 815px;
+		height: 127px;
+		border-bottom: 1px solid #F2F2F2;
+		display: flex;
+		align-items: center;
+		img {
+			width: 155px;
+			height: 98px;
+		}
+		.info {
+			padding-left: 16px;
+			.title {
+				padding-top: 5px;
+				width: 200px;
+				height: 19px;
+				font-size: 18px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+			}
+			.content {
+				width: 491px;
+				height: 16px;
+				font-size: 16px;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #999999;
+				line-height: 1;
+				padding-top: 11px;
+			}
+			.num {
+				margin-top: 24px;
+				height: 16px;
+				font-size: 16px;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #999999;
+				line-height: 27px;
+				text-align: right;
+			}
+		}
+	}
+	/deep/ .el-pagination {
+		margin-top: 50px;
+		text-align: center;
+	}
 </style>