5-11

package-lock.json

@@ -11452,6 +11452,11 @@
       "integrity": "sha1-f4RzvIOd/YdgituV1+sHUhFXikI=",
       "dev": true
     },
+    "weixin-js-sdk": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/weixin-js-sdk/-/weixin-js-sdk-1.6.0.tgz",
+      "integrity": "sha512-3IYQH7aalJGFJrwdT3epvTdR1MboMiH7vIZ5BRL2eYOJ12BNah7csoMkmSZzkq1+l92sSq29XdTCVjCJoK2sBQ=="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npm.taobao.org/which/download/which-1.3.1.tgz?cache=0&sync_timestamp=1574116262707&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwhich%2Fdownload%2Fwhich-1.3.1.tgz",

package.json

@@ -15,7 +15,8 @@
     "md5": "^2.3.0",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "weixin-js-sdk": "^1.6.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.12.0",

src/App.vue

@@ -1,71 +1,121 @@
-<template>
-  <div id="app">
-	<div class="bg">
-		<img src="@/assets/img/m1.png" >
+<template>
+	<div id="app">
+		<div class="bg" v-if="!(path == '/mourn/index' || path == '/mourn/detail')">
+			<img src="@/assets/img/m1.png" />
+		</div>
+		<top-logo v-if="!(path == '/mourn/index' || path == '/mourn/detail')"></top-logo>
+		<nav-bar v-if="!(path == '/mourn/index' || path == '/mourn/detail')"></nav-bar>
+		<div class="main-wrapper" v-if="!(path == '/mourn/detail' || path == '/mourn/index')">
+			<router-view />
+		</div>
+		<div v-if="path == '/mourn/detail' || path == '/mourn/index'">
+			<router-view />
+		</div>
+		<audio id="audio" :src="require('./assets/music/bg-music.mp3')" loop ref="music" controls hidden></audio>
+		<page-bottom v-if="!(path == '/mourn/detail' || path == '/mourn/index')"></page-bottom>
 	</div>
-	<div>
-	</div>
-    <top-logo></top-logo>
-    <nav-bar></nav-bar>
-	<div class="main-wrapper">
-		<router-view />
-	</div>
-	<page-bottom></page-bottom>
-  </div>
-</template>
-<script>
-import TopLogo from './components/topLogo/TopLogo.vue'
-import NavBar from './components/navBar/NavBar.vue'
-import PageBottom from './components/pageBottom/PageBottom.vue'
-export default {
-  components: {
-    NavBar,
-    TopLogo,
-	PageBottom
-  },
-  created() {
- //  	if(this.isMobile()) {
-	// 	window.location.href = 'http://jz.red.igxys.com/index/#/'
-	// }
-  },
-  methods: {
-	  isMobile() {
-	  	if(/android/i.test(navigator.userAgent)) {
-	  		//document.write("This is Android'browser.");//这是Android平台下浏览器
-	  		return true;
-	  	}
-	  	if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
-	  		//document.write("This is iOS'browser.");//这是iOS平台下浏览器
-	  		return true;
-	  	}
-	  	return false;
-	  }
-  }
-}
-</script>
+</template>
+<script>
+	import TopLogo from "./components/topLogo/TopLogo.vue";
+	import NavBar from "./components/navBar/NavBar.vue";
+	import PageBottom from "./components/pageBottom/PageBottom.vue";
+	export default {
+		components: {
+			NavBar,
+			TopLogo,
+			PageBottom,
+		},
+		data() {
+			return {
+				path: "",
+			};
+		},
+		created() {},
+		mounted() {
+			this.path = this.$route.path;
+
+		},
+		watch: {
+			$route(e) {
+				//   alert(e)
+				this.path = e.path;
+				if (e.fullPath.indexOf("mourn") != -1) {
+					this.playMusic();
+					// document.getElementById('app').addEventListener('mousemove', ()=> {
+					// 	// console.log('dddddd')
+					// 	this.playMusic();
+					// })
+				} else {
+					this.playpause()
+				}
+				// alert(e.path)
+				// alert(this.path)
+			},
+		},
+		methods: {
+			isMobile() {
+				if (/android/i.test(navigator.userAgent)) {
+					//document.write("This is Android'browser.");//这是Android平台下浏览器
+					return true;
+				}
+				if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
+					//document.write("This is iOS'browser.");//这是iOS平台下浏览器
+					return true;
+				}
+				return false;
+			},
+			playMusic() {
+				let obj = this
+				obj.$refs.music.play().catch(err => {
+					obj.$confirm('网页背景音乐已暂停，是否继续播放？', '提示', {
+						confirmButtonText: '确定',
+						cancelButtonText: '取消',
+						type: 'warning'
+					}).then(() => {
+						obj.playMusic()
+						// this.$message({
+						//   type: 'success',
+						//   message: '删除成功!'
+						// });
+					}).catch(() => {
+						// this.$message({
+						//   type: 'info',
+						//   message: '已取消删除'
+						// });          
+					});
+				});
+			},
+			playpause() {
+				this.$refs.music.pause();
+			},
+		},
+	};
+</script>
 <style lang="scss" scoped>
-#app {
-	// max-width: 1920px;
-	min-width: 1200px;
-	margin: 0 auto;
-}
-.main-wrapper {
-	width: 1200px;
-	margin: 0 auto;
-}
-.bg {
-	// position: absolute;
-	// left: 0;
-	// right: 0;
-	margin: 0 auto;
-	height: 300px;
-	margin-bottom: -300px;
-	// z-index: -1;
-	img {
-		// min-width: 100vw;
-		width: 100%;
+	#app {
+		// max-width: 1920px;
+		min-width: 1200px;
+		margin: 0 auto;
+	}
+
+	.main-wrapper {
+		width: 1200px;
+		margin: 0 auto;
+	}
+
+	.bg {
+		// position: absolute;
+		// left: 0;
+		// right: 0;
+		margin: 0 auto;
 		height: 300px;
+		margin-bottom: -300px;
+
+		// z-index: -1;
+		img {
+			// min-width: 100vw;
+			width: 100%;
+			height: 300px;
+		}
 	}
-}
-
 </style>

src/assets/css/base.css

@@ -14,9 +14,9 @@
 	-webkit-line-clamp:2;
 }
 
-html {
-  overflow-y: scroll;
-}
+html {
+  overflow-y: scroll;
+}
 
 /* 鼠标显示为手 */
 .hand {
@@ -52,4 +52,7 @@ html {
 	img {
 		max-width: 100%;
 	}
+}
+h1 {
+	font-weight: bold;
 }

src/assets/js/jweixin-1.6.0.js

@@ -0,0 +1,732 @@
+! function(e, n) {
+	"function" == typeof define && (define.amd || define.cmd) ? define(function() {
+		return n(e)
+	}) : n(e, !0)
+}(this, function(o, e) {
+	if (!o.jWeixin) {
+		var n, c = {
+				config: "preVerifyJSAPI",
+				onMenuShareTimeline: "menu:share:timeline",
+				onMenuShareAppMessage: "menu:share:appmessage",
+				onMenuShareQQ: "menu:share:qq",
+				onMenuShareWeibo: "menu:share:weiboApp",
+				onMenuShareQZone: "menu:share:QZone",
+				previewImage: "imagePreview",
+				getLocation: "geoLocation",
+				openProductSpecificView: "openProductViewWithPid",
+				addCard: "batchAddCard",
+				openCard: "batchViewCard",
+				chooseWXPay: "getBrandWCPayRequest",
+				openEnterpriseRedPacket: "getRecevieBizHongBaoRequest",
+				startSearchBeacons: "startMonitoringBeacons",
+				stopSearchBeacons: "stopMonitoringBeacons",
+				onSearchBeacons: "onBeaconsInRange",
+				consumeAndShareCard: "consumedShareCard",
+				openAddress: "editAddress"
+			},
+			a = function() {
+				var e = {};
+				for (var n in c) e[c[n]] = n;
+				return e
+			}(),
+			i = o.document,
+			t = i.title,
+			r = navigator.userAgent.toLowerCase(),
+			s = navigator.platform.toLowerCase(),
+			d = !(!s.match("mac") && !s.match("win")),
+			u = -1 != r.indexOf("wxdebugger"),
+			l = -1 != r.indexOf("micromessenger"),
+			p = -1 != r.indexOf("android"),
+			f = -1 != r.indexOf("iphone") || -1 != r.indexOf("ipad"),
+			m = (n = r.match(/micromessenger\/(\d+\.\d+\.\d+)/) || r.match(/micromessenger\/(\d+\.\d+)/)) ? n[1] :
+			"",
+			g = {
+				initStartTime: L(),
+				initEndTime: 0,
+				preVerifyStartTime: 0,
+				preVerifyEndTime: 0
+			},
+			h = {
+				version: 1,
+				appId: "",
+				initTime: 0,
+				preVerifyTime: 0,
+				networkType: "",
+				isPreVerifyOk: 1,
+				systemType: f ? 1 : p ? 2 : -1,
+				clientVersion: m,
+				url: encodeURIComponent(location.href)
+			},
+			v = {},
+			S = {
+				_completes: []
+			},
+			y = {
+				state: 0,
+				data: {}
+			};
+		O(function() {
+			g.initEndTime = L()
+		});
+		var I = !1,
+			_ = [],
+			w = {
+				config: function(e) {
+					B("config", v = e);
+					var t = !1 !== v.check;
+					O(function() {
+						if (t) M(c.config, {
+							verifyJsApiList: C(v.jsApiList),
+							verifyOpenTagList: C(v.openTagList)
+						}, function() {
+							S._complete = function(e) {
+								g.preVerifyEndTime = L(), y.state = 1, y.data = e
+							}, S.success = function(e) {
+								h.isPreVerifyOk = 0
+							}, S.fail = function(e) {
+								S._fail ? S._fail(e) : y.state = -1
+							};
+							var t = S._completes;
+							return t.push(function() {
+								! function() {
+									if (!(d || u || v.debug || m < "6.0.2" || h
+											.systemType < 0)) {
+										var i = new Image;
+										h.appId = v.appId, h.initTime = g.initEndTime -
+											g.initStartTime, h.preVerifyTime = g
+											.preVerifyEndTime - g.preVerifyStartTime, w
+											.getNetworkType({
+												isInnerInvoke: !0,
+												success: function(e) {
+													h.networkType = e
+														.networkType;
+													var n =
+														"https://open.weixin.qq.com/sdk/report?v=" +
+														h.version + "&o=" + h
+														.isPreVerifyOk + "&s=" +
+														h.systemType + "&c=" + h
+														.clientVersion + "&a=" +
+														h.appId + "&n=" + h
+														.networkType + "&i=" + h
+														.initTime + "&p=" + h
+														.preVerifyTime + "&u=" +
+														h.url;
+													i.src = n
+												}
+											})
+									}
+								}()
+							}), S.complete = function(e) {
+								for (var n = 0, i = t.length; n < i; ++n) t[n]();
+								S._completes = []
+							}, S
+						}()), g.preVerifyStartTime = L();
+						else {
+							y.state = 1;
+							for (var e = S._completes, n = 0, i = e.length; n < i; ++n) e[n]();
+							S._completes = []
+						}
+					}), w.invoke || (w.invoke = function(e, n, i) {
+						o.WeixinJSBridge && WeixinJSBridge.invoke(e, x(n), i)
+					}, w.on = function(e, n) {
+						o.WeixinJSBridge && WeixinJSBridge.on(e, n)
+					})
+				},
+				ready: function(e) {
+					0 != y.state ? e() : (S._completes.push(e), !l && v.debug && e())
+				},
+				error: function(e) {
+					m < "6.0.2" || (-1 == y.state ? e(y.data) : S._fail = e)
+				},
+				checkJsApi: function(e) {
+					M("checkJsApi", {
+						jsApiList: C(e.jsApiList)
+					}, (e._complete = function(e) {
+						if (p) {
+							var n = e.checkResult;
+							n && (e.checkResult = JSON.parse(n))
+						}
+						e = function(e) {
+							var n = e.checkResult;
+							for (var i in n) {
+								var t = a[i];
+								t && (n[t] = n[i], delete n[i])
+							}
+							return e
+						}(e)
+					}, e))
+				},
+				onMenuShareTimeline: function(e) {
+					P(c.onMenuShareTimeline, {
+						complete: function() {
+							M("shareTimeline", {
+								title: e.title || t,
+								desc: e.title || t,
+								img_url: e.imgUrl || "",
+								link: e.link || location.href,
+								type: e.type || "link",
+								data_url: e.dataUrl || ""
+							}, e)
+						}
+					}, e)
+				},
+				onMenuShareAppMessage: function(n) {
+					P(c.onMenuShareAppMessage, {
+						complete: function(e) {
+							"favorite" === e.scene ? M("sendAppMessage", {
+								title: n.title || t,
+								desc: n.desc || "",
+								link: n.link || location.href,
+								img_url: n.imgUrl || "",
+								type: n.type || "link",
+								data_url: n.dataUrl || ""
+							}) : M("sendAppMessage", {
+								title: n.title || t,
+								desc: n.desc || "",
+								link: n.link || location.href,
+								img_url: n.imgUrl || "",
+								type: n.type || "link",
+								data_url: n.dataUrl || ""
+							}, n)
+						}
+					}, n)
+				},
+				onMenuShareQQ: function(e) {
+					P(c.onMenuShareQQ, {
+						complete: function() {
+							M("shareQQ", {
+								title: e.title || t,
+								desc: e.desc || "",
+								img_url: e.imgUrl || "",
+								link: e.link || location.href
+							}, e)
+						}
+					}, e)
+				},
+				onMenuShareWeibo: function(e) {
+					P(c.onMenuShareWeibo, {
+						complete: function() {
+							M("shareWeiboApp", {
+								title: e.title || t,
+								desc: e.desc || "",
+								img_url: e.imgUrl || "",
+								link: e.link || location.href
+							}, e)
+						}
+					}, e)
+				},
+				onMenuShareQZone: function(e) {
+					P(c.onMenuShareQZone, {
+						complete: function() {
+							M("shareQZone", {
+								title: e.title || t,
+								desc: e.desc || "",
+								img_url: e.imgUrl || "",
+								link: e.link || location.href
+							}, e)
+						}
+					}, e)
+				},
+				updateTimelineShareData: function(e) {
+					M("updateTimelineShareData", {
+						title: e.title,
+						link: e.link,
+						imgUrl: e.imgUrl
+					}, e)
+				},
+				updateAppMessageShareData: function(e) {
+					M("updateAppMessageShareData", {
+						title: e.title,
+						desc: e.desc,
+						link: e.link,
+						imgUrl: e.imgUrl
+					}, e)
+				},
+				startRecord: function(e) {
+					M("startRecord", {}, e)
+				},
+				stopRecord: function(e) {
+					M("stopRecord", {}, e)
+				},
+				onVoiceRecordEnd: function(e) {
+					P("onVoiceRecordEnd", e)
+				},
+				playVoice: function(e) {
+					M("playVoice", {
+						localId: e.localId
+					}, e)
+				},
+				pauseVoice: function(e) {
+					M("pauseVoice", {
+						localId: e.localId
+					}, e)
+				},
+				stopVoice: function(e) {
+					M("stopVoice", {
+						localId: e.localId
+					}, e)
+				},
+				onVoicePlayEnd: function(e) {
+					P("onVoicePlayEnd", e)
+				},
+				uploadVoice: function(e) {
+					M("uploadVoice", {
+						localId: e.localId,
+						isShowProgressTips: 0 == e.isShowProgressTips ? 0 : 1
+					}, e)
+				},
+				downloadVoice: function(e) {
+					M("downloadVoice", {
+						serverId: e.serverId,
+						isShowProgressTips: 0 == e.isShowProgressTips ? 0 : 1
+					}, e)
+				},
+				translateVoice: function(e) {
+					M("translateVoice", {
+						localId: e.localId,
+						isShowProgressTips: 0 == e.isShowProgressTips ? 0 : 1
+					}, e)
+				},
+				chooseImage: function(e) {
+					M("chooseImage", {
+						scene: "1|2",
+						count: e.count || 9,
+						sizeType: e.sizeType || ["original", "compressed"],
+						sourceType: e.sourceType || ["album", "camera"]
+					}, (e._complete = function(e) {
+						if (p) {
+							var n = e.localIds;
+							try {
+								n && (e.localIds = JSON.parse(n))
+							} catch (e) {}
+						}
+					}, e))
+				},
+				getLocation: function(e) {},
+				previewImage: function(e) {
+					M(c.previewImage, {
+						current: e.current,
+						urls: e.urls
+					}, e)
+				},
+				uploadImage: function(e) {
+					M("uploadImage", {
+						localId: e.localId,
+						isShowProgressTips: 0 == e.isShowProgressTips ? 0 : 1
+					}, e)
+				},
+				downloadImage: function(e) {
+					M("downloadImage", {
+						serverId: e.serverId,
+						isShowProgressTips: 0 == e.isShowProgressTips ? 0 : 1
+					}, e)
+				},
+				getLocalImgData: function(e) {
+					!1 === I ? (I = !0, M("getLocalImgData", {
+						localId: e.localId
+					}, (e._complete = function(e) {
+						if (I = !1, 0 < _.length) {
+							var n = _.shift();
+							wx.getLocalImgData(n)
+						}
+					}, e))) : _.push(e)
+				},
+				getNetworkType: function(e) {
+					M("getNetworkType", {}, (e._complete = function(e) {
+						e = function(e) {
+							var n = e.errMsg;
+							e.errMsg = "getNetworkType:ok";
+							var i = e.subtype;
+							if (delete e.subtype, i) e.networkType = i;
+							else {
+								var t = n.indexOf(":"),
+									o = n.substring(t + 1);
+								switch (o) {
+									case "wifi":
+									case "edge":
+									case "wwan":
+										e.networkType = o;
+										break;
+									default:
+										e.errMsg = "getNetworkType:fail"
+								}
+							}
+							return e
+						}(e)
+					}, e))
+				},
+				openLocation: function(e) {
+					M("openLocation", {
+						latitude: e.latitude,
+						longitude: e.longitude,
+						name: e.name || "",
+						address: e.address || "",
+						scale: e.scale || 28,
+						infoUrl: e.infoUrl || ""
+					}, e)
+				},
+				getLocation: function(e) {
+					M(c.getLocation, {
+						type: (e = e || {}).type || "wgs84"
+					}, (e._complete = function(e) {
+						delete e.type
+					}, e))
+				},
+				hideOptionMenu: function(e) {
+					M("hideOptionMenu", {}, e)
+				},
+				showOptionMenu: function(e) {
+					M("showOptionMenu", {}, e)
+				},
+				closeWindow: function(e) {
+					M("closeWindow", {}, e = e || {})
+				},
+				hideMenuItems: function(e) {
+					M("hideMenuItems", {
+						menuList: e.menuList
+					}, e)
+				},
+				showMenuItems: function(e) {
+					M("showMenuItems", {
+						menuList: e.menuList
+					}, e)
+				},
+				hideAllNonBaseMenuItem: function(e) {
+					M("hideAllNonBaseMenuItem", {}, e)
+				},
+				showAllNonBaseMenuItem: function(e) {
+					M("showAllNonBaseMenuItem", {}, e)
+				},
+				scanQRCode: function(e) {
+					M("scanQRCode", {
+						needResult: (e = e || {}).needResult || 0,
+						scanType: e.scanType || ["qrCode", "barCode"]
+					}, (e._complete = function(e) {
+						if (f) {
+							var n = e.resultStr;
+							if (n) {
+								var i = JSON.parse(n);
+								e.resultStr = i && i.scan_code && i.scan_code.scan_result
+							}
+						}
+					}, e))
+				},
+				openAddress: function(e) {
+					M(c.openAddress, {}, (e._complete = function(e) {
+						e = function(e) {
+							return e.postalCode = e.addressPostalCode, delete e
+								.addressPostalCode, e.provinceName = e.proviceFirstStageName,
+								delete e.proviceFirstStageName, e.cityName = e
+								.addressCitySecondStageName, delete e
+								.addressCitySecondStageName, e.countryName = e
+								.addressCountiesThirdStageName, delete e
+								.addressCountiesThirdStageName, e.detailInfo = e
+								.addressDetailInfo, delete e.addressDetailInfo, e
+						}(e)
+					}, e))
+				},
+				openProductSpecificView: function(e) {
+					M(c.openProductSpecificView, {
+						pid: e.productId,
+						view_type: e.viewType || 0,
+						ext_info: e.extInfo
+					}, e)
+				},
+				addCard: function(e) {
+					for (var n = e.cardList, i = [], t = 0, o = n.length; t < o; ++t) {
+						var r = n[t],
+							a = {
+								card_id: r.cardId,
+								card_ext: r.cardExt
+							};
+						i.push(a)
+					}
+					M(c.addCard, {
+						card_list: i
+					}, (e._complete = function(e) {
+						var n = e.card_list;
+						if (n) {
+							for (var i = 0, t = (n = JSON.parse(n)).length; i < t; ++i) {
+								var o = n[i];
+								o.cardId = o.card_id, o.cardExt = o.card_ext, o.isSuccess = !!o
+									.is_succ, delete o.card_id, delete o.card_ext, delete o.is_succ
+							}
+							e.cardList = n, delete e.card_list
+						}
+					}, e))
+				},
+				chooseCard: function(e) {
+					M("chooseCard", {
+						app_id: v.appId,
+						location_id: e.shopId || "",
+						sign_type: e.signType || "SHA1",
+						card_id: e.cardId || "",
+						card_type: e.cardType || "",
+						card_sign: e.cardSign,
+						time_stamp: e.timestamp + "",
+						nonce_str: e.nonceStr
+					}, (e._complete = function(e) {
+						e.cardList = e.choose_card_info, delete e.choose_card_info
+					}, e))
+				},
+				openCard: function(e) {
+					for (var n = e.cardList, i = [], t = 0, o = n.length; t < o; ++t) {
+						var r = n[t],
+							a = {
+								card_id: r.cardId,
+								code: r.code
+							};
+						i.push(a)
+					}
+					M(c.openCard, {
+						card_list: i
+					}, e)
+				},
+				consumeAndShareCard: function(e) {
+					M(c.consumeAndShareCard, {
+						consumedCardId: e.cardId,
+						consumedCode: e.code
+					}, e)
+				},
+				chooseWXPay: function(e) {
+					M(c.chooseWXPay, V(e), e)
+				},
+				openEnterpriseRedPacket: function(e) {
+					M(c.openEnterpriseRedPacket, V(e), e)
+				},
+				startSearchBeacons: function(e) {
+					M(c.startSearchBeacons, {
+						ticket: e.ticket
+					}, e)
+				},
+				stopSearchBeacons: function(e) {
+					M(c.stopSearchBeacons, {}, e)
+				},
+				onSearchBeacons: function(e) {
+					P(c.onSearchBeacons, e)
+				},
+				openEnterpriseChat: function(e) {
+					M("openEnterpriseChat", {
+						useridlist: e.userIds,
+						chatname: e.groupName
+					}, e)
+				},
+				launchMiniProgram: function(e) {
+					M("launchMiniProgram", {
+						targetAppId: e.targetAppId,
+						path: function(e) {
+							if ("string" == typeof e && 0 < e.length) {
+								var n = e.split("?")[0],
+									i = e.split("?")[1];
+								return n += ".html", void 0 !== i ? n + "?" + i : n
+							}
+						}(e.path),
+						envVersion: e.envVersion
+					}, e)
+				},
+				openBusinessView: function(e) {
+					M("openBusinessView", {
+						businessType: e.businessType,
+						queryString: e.queryString || "",
+						envVersion: e.envVersion
+					}, (e._complete = function(n) {
+						if (p) {
+							var e = n.extraData;
+							if (e) try {
+								n.extraData = JSON.parse(e)
+							} catch (e) {
+								n.extraData = {}
+							}
+						}
+					}, e))
+				},
+				miniProgram: {
+					navigateBack: function(e) {
+						e = e || {}, O(function() {
+							M("invokeMiniProgramAPI", {
+								name: "navigateBack",
+								arg: {
+									delta: e.delta || 1
+								}
+							}, e)
+						})
+					},
+					navigateTo: function(e) {
+						O(function() {
+							M("invokeMiniProgramAPI", {
+								name: "navigateTo",
+								arg: {
+									url: e.url
+								}
+							}, e)
+						})
+					},
+					redirectTo: function(e) {
+						O(function() {
+							M("invokeMiniProgramAPI", {
+								name: "redirectTo",
+								arg: {
+									url: e.url
+								}
+							}, e)
+						})
+					},
+					switchTab: function(e) {
+						O(function() {
+							M("invokeMiniProgramAPI", {
+								name: "switchTab",
+								arg: {
+									url: e.url
+								}
+							}, e)
+						})
+					},
+					reLaunch: function(e) {
+						O(function() {
+							M("invokeMiniProgramAPI", {
+								name: "reLaunch",
+								arg: {
+									url: e.url
+								}
+							}, e)
+						})
+					},
+					postMessage: function(e) {
+						O(function() {
+							M("invokeMiniProgramAPI", {
+								name: "postMessage",
+								arg: e.data || {}
+							}, e)
+						})
+					},
+					getEnv: function(e) {
+						O(function() {
+							e({
+								miniprogram: "miniprogram" === o.__wxjs_environment
+							})
+						})
+					}
+				}
+			},
+			T = 1,
+			k = {};
+		return i.addEventListener("error", function(e) {
+			if (!p) {
+				var n = e.target,
+					i = n.tagName,
+					t = n.src;
+				if ("IMG" == i || "VIDEO" == i || "AUDIO" == i || "SOURCE" == i)
+					if (-1 != t.indexOf("wxlocalresource://")) {
+						e.preventDefault(), e.stopPropagation();
+						var o = n["wx-id"];
+						if (o || (o = T++, n["wx-id"] = o), k[o]) return;
+						k[o] = !0, wx.ready(function() {
+							wx.getLocalImgData({
+								localId: t,
+								success: function(e) {
+									n.src = e.localData
+								}
+							})
+						})
+					}
+			}
+		}, !0), i.addEventListener("load", function(e) {
+			if (!p) {
+				var n = e.target,
+					i = n.tagName;
+				n.src;
+				if ("IMG" == i || "VIDEO" == i || "AUDIO" == i || "SOURCE" == i) {
+					var t = n["wx-id"];
+					t && (k[t] = !1)
+				}
+			}
+		}, !0), e && (o.wx = o.jWeixin = w), w
+	}
+
+	function M(n, e, i) {
+		o.WeixinJSBridge ? WeixinJSBridge.invoke(n, x(e), function(e) {
+			A(n, e, i)
+		}) : B(n, i)
+	}
+
+	function P(n, i, t) {
+		o.WeixinJSBridge ? WeixinJSBridge.on(n, function(e) {
+			t && t.trigger && t.trigger(e), A(n, e, i)
+		}) : B(n, t || i)
+	}
+
+	function x(e) {
+		return (e = e || {}).appId = v.appId, e.verifyAppId = v.appId, e.verifySignType = "sha1", e
+			.verifyTimestamp = v.timestamp + "", e.verifyNonceStr = v.nonceStr, e.verifySignature = v.signature, e
+	}
+
+	function V(e) {
+		return {
+			timeStamp: e.timestamp + "",
+			nonceStr: e.nonceStr,
+			package: e.package,
+			paySign: e.paySign,
+			signType: e.signType || "SHA1"
+		}
+	}
+
+	function A(e, n, i) {
+		"openEnterpriseChat" != e && "openBusinessView" !== e || (n.errCode = n.err_code), delete n.err_code,
+			delete n.err_desc, delete n.err_detail;
+		var t = n.errMsg;
+		t || (t = n.err_msg, delete n.err_msg, t = function(e, n) {
+				var i = e,
+					t = a[i];
+				t && (i = t);
+				var o = "ok";
+				if (n) {
+					var r = n.indexOf(":");
+					"confirm" == (o = n.substring(r + 1)) && (o = "ok"), "failed" == o && (o = "fail"), -1 != o
+						.indexOf("failed_") && (o = o.substring(7)), -1 != o.indexOf("fail_") && (o = o
+							.substring(5)), "access denied" != (o = (o = o.replace(/_/g, " ")).toLowerCase()) &&
+						"no permission to execute" != o || (o = "permission denied"), "config" == i &&
+						"function not exist" == o && (o = "ok"), "" == o && (o = "fail")
+				}
+				return n = i + ":" + o
+			}(e, t), n.errMsg = t), (i = i || {})._complete && (i._complete(n), delete i._complete), t = n.errMsg ||
+			"", v.debug && !i.isInnerInvoke && alert(JSON.stringify(n));
+		var o = t.indexOf(":");
+		switch (t.substring(o + 1)) {
+			case "ok":
+				i.success && i.success(n);
+				break;
+			case "cancel":
+				i.cancel && i.cancel(n);
+				break;
+			default:
+				i.fail && i.fail(n)
+		}
+		i.complete && i.complete(n)
+	}
+
+	function C(e) {
+		if (e) {
+			for (var n = 0, i = e.length; n < i; ++n) {
+				var t = e[n],
+					o = c[t];
+				o && (e[n] = o)
+			}
+			return e
+		}
+	}
+
+	function B(e, n) {
+		if (!(!v.debug || n && n.isInnerInvoke)) {
+			var i = a[e];
+			i && (e = i), n && n._complete && delete n._complete, console.log('"' + e + '",', n || "")
+		}
+	}
+
+	function L() {
+		return (new Date).getTime()
+	}
+
+	function O(e) {
+		l && (o.WeixinJSBridge ? e() : i.addEventListener && i.addEventListener("WeixinJSBridgeReady", e, !1))
+	}
+});

src/components/pageBottom/PageBottom.vue

@@ -1,13 +1,30 @@
 <template>
-	<div class="view-bottom">
+	<div class="view-bottom" :style="{'background': backgroundBg,'color': textcolor}">
 		<div class="bqsy">版权所有：Copyright©2017-2037 　版权所有 荆州市红十字会</div>
 		<div class="address">地址：荆州市荆州区荆东路18号 浙ICP备17054590号-1</div>
-	</div>
-</template>
-
-<script>
-</script>
-
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+
+		}
+	},
+	props: {
+		backgroundBg: {
+			type: String,
+			default: '#D82020'
+		},
+		textcolor: {
+			type: String,
+			default: '#FFFFFF'
+		}
+	}
+}
+</script>
+
 <style lang="scss" scoped>
 	.view-bottom {
 		// width: 1920px;
@@ -28,5 +45,5 @@
 			padding-top: 65px;
 			margin-bottom: 16px;
 		}
-	}
-</style>
+	}
+</style>

src/request/api.js

@@ -122,4 +122,66 @@ export function getCateList(data) {
 		method: 'get',
 		params: data
 	});
+}
+// 获取器官捐献哀悼列表
+export function getMournList(data) {
+	return request({
+		url: '/api/mourn/page',
+		method: 'get',
+		params: data
+	})
+}
+
+// 获取哀数
+export function getMournNum(data) {
+	return request({
+		url: '/api/mourn/gets',
+		method: 'get',
+		params: data
+	})
+}
+
+// 获取哀数
+export function getPeoNum(data) {
+	return request({
+		url: '/api/mourn/get',
+		method: 'get',
+		params: data
+	})
+}
+
+// 获取哀数
+export function getAllNum(data) {
+	return request({
+		url: '/api/mourn/gets',
+		method: 'get',
+		params: data
+	})
+}
+
+// 获取悼念详情
+export function getMournDetail(data) {
+	return request({
+		url: '/api/mourn/lst',
+		method: 'get',
+		params: data
+	})
+}
+
+// 个人祭拜
+export function mournGive(data) {
+	return request({
+		url: '/api/mourn/give',
+		method: 'get',
+		params: data
+	})
+}
+
+//微信配置
+export function wechatConfig(data) {
+	return request({
+		url: '/api/wechat/config',
+		method: 'get',
+		params: data
+	});
 }

src/router.js

@@ -1,29 +1,29 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-
-const routerPush = Router.prototype.push  
-
-Router.prototype.push = function push(location) {
-  return routerPush.call(this, location).catch(error => error)
-}
-
-Vue.use(Router)
-
-export default new Router({
-  // mode: 'history',
-  base: process.env.BASE_URL,
-  routes: [
-    {
-      path: '/',
-      redirect: '/home'
-    },
-    {
-      path: '/home',
-      name: 'home',
-      component: () => import('./views/Home.vue'),
-      meta: {
-        title: '荆州市红十字会'
-      }
+import Vue from 'vue'
+import Router from 'vue-router'
+
+const routerPush = Router.prototype.push  
+
+Router.prototype.push = function push(location) {
+  return routerPush.call(this, location).catch(error => error)
+}
+
+Vue.use(Router)
+
+export default new Router({
+  // mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: '/',
+      redirect: '/home'
+    },
+    {
+      path: '/home',
+      name: 'home',
+      component: () => import('./views/Home.vue'),
+      meta: {
+        title: '荆州市红十字会'
+      }
     },
 	{
 		path: '/donation',
@@ -886,9 +886,36 @@ export default new Router({
 			}
 		]
 	},
+	{
+		path: '/mourn',
+		name: 'mourn',
+		component: () => import('./views/Mourn.vue'),
+		meta: {
+			title: '纪念堂'
+		},
+		redirect: '/mourn/index',
+		children: [
+			{
+				path: 'index',
+				name: 'mournIndex',
+				component: () => import('./views/mourn/Index.vue'),
+				meta: {
+					title: '纪念堂'
+				}
+			},
+			{
+				path: 'detail',
+				name: 'mournDetail',
+				component: () => import('./views/mourn/Detail.vue'),
+				meta: {
+					title: '纪念堂'
+				}
+			}
+		]
+	},
 	{
 		path: '*',
 		redirect: '/home'
-	}
-  ]
-})
+	}
+  ]
+})

src/views/Directories.vue

@@ -3,9 +3,9 @@
 		<left-nav :navList="navList" :topTitle="'捐献名录'">
 			<router-view></router-view>
 		</left-nav>
-	</div>
-</template>
-
+	</div>
+</template>
+
 <script>
 	import LeftNav from '../components/leftNav/LeftNav.vue';
 	
@@ -15,11 +15,12 @@
 		},
 		data() {
 			return {
-				navList: [{ index: 0, name: '造血干细胞捐献名录', path: '/directories' }, { index: 1, name: '器官/遗体捐献名录', path: '/organs' }],
+				// navList: [{ index: 0, name: '造血干细胞捐献名录', path: '/directories' }, { index: 1, name: '器官/遗体捐献名录', path: '/organs' }],
+				navList: [{ index: 1, name: '器官/遗体捐献名录', path: '/organs' }],
 			};
 		}
-	};
-</script>
-
-<style>
+	};
+</script>
+
+<style>
 </style>

src/views/Home.vue

@@ -1,989 +1,952 @@
 <template>
-  <div class="home">
-    <div class="home-swiper">
-      <el-carousel height="484px" :interval="4000" v-if="swiperList">
-        <el-carousel-item v-for="(item, index) in swiperList" :key="index">
-          <el-image
-            :src="item.pc_image"
-            alt=""
-            class="swiper-img"
-          />
-        </el-carousel-item>
-      </el-carousel>
-    </div>
-    <div class="news-wrapper">
-      <div class="new-pic">
-        <el-carousel :interval="4000" height="344px" indicator-position="none">
-          <el-carousel-item
-            v-for="(item, index) in redNews.slice(0, 3)"
-            :key="index"
-          >
-            <img
-              :src="item.image"
-              @click="navTo('/news/detail?id=' + item.id)"
-              class="hand"
-            />
-            <div class="title clamp hand">{{ item.title }}</div>
-          </el-carousel-item>
-        </el-carousel>
-      </div>
-      <div class="news">
-        <item-title title="红会新闻" :topath="'/news'"></item-title>
-        <div class="item-wrapper">
-          <div
-            class="new-item hand"
-            v-for="item in redNews"
-            :key="item.id"
-            @click="navTo('/news/detail?id=' + item.id)"
-          >
-            <div class="title clamp">
-              <span></span>
-              {{ item.title }}
-            </div>
-            <div class="time">{{ item.releasetime.split(" ")[0] }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="home-body">
-      <div class="body-left moren">
-        <div class="red-new">
-          <item-title title="信息公示" :topath="'/publicity'"></item-title>
-          <div class="item-wrapper">
-            <div
-              class="new-item hand"
-              v-for="item in openNews"
-              :key="item.id"
-              @click="navTo('/publicity/detail?id=' + item.id)"
-            >
-              <div class="title clamp">
-                <span></span>
-                {{ item.title }}
-              </div>
-              <div class="time">{{ item.releasetime.split(" ")[0] }}</div>
-            </div>
-          </div>
-        </div>
-        <div class="join">
-          <item-title title="公众参与" :topath="'/donation'"></item-title>
-          <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>
-          </div>
-        </div>
-      </div>
-      <div class="body-right">
-        <div class="new-open">
-          <item-title
-            title="县市区红会动态"
-            :topath="'/newContent'"
-          ></item-title>
-          <div class="item-wrapper">
-            <div v-if="xsqList.length == 0" class="new-item hand">
-              数据加载中...
-            </div>
-            <div
-              class="new-item hand"
-              v-for="item in xsqList"
-              :key="item.id"
-              @click="newsClick(item)"
-            >
-              <div class="title clamp">
-                <span></span>
-                {{ item.title }}
-              </div>
-              <div class="time">{{ item.releasetime.split(" ")[0] }}</div>
-            </div>
-          </div>
-        </div>
-        <div class="loadmore" @click="lookm()">
-          <img src="../assets/img/lookm.png" />
-        </div>
-        <div class="list">
-          <item-title title="爱心榜" :topath="'/loveList'"></item-title>
-          <div class="list-title flex">
-            <div>捐献时间</div>
-            <div>捐献者</div>
-            <div>捐献金额</div>
-            <!-- <div>捐献意向</div> -->
-          </div>
-
-          <div class="table-empty" v-if="jxList.length == 0">
-            暂无更多捐赠数据
-          </div>
-          <template v-else>
-            <div
-              class="list-item flex"
-              v-for="(item, index) in jxList"
-              :key="index"
-            >
-              <div class="clamp">{{ item.paytime | getTime }}</div>
-              <div class="clamp">{{ item.name || item.contact}}</div>
-              <div class="clamp">{{ item.amount + "元" }}</div>
-              <!-- <div class="clamp">{{ item.intention }}</div> -->
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-    <img src="../assets/img/m2.png" class="show-live" />
-    <div class="show-pic">
-      <item-title title="红会风采" isShow="2"></item-title>
-      <div class="imgs-wrapper">
-        <div class="imgs">
-          <img
-            v-for="item in imgList"
-            :key="item.id"
-            :src="item.image"
-          />
-        </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.link" class="item-a" target="_blank">{{
+	<div class="home">
+		<div class="home-swiper">
+			<el-carousel height="484px" :interval="4000" v-if="swiperList">
+				<el-carousel-item v-for="(item, index) in swiperList" :key="index">
+					<el-image :src="item.pc_image" alt="" class="swiper-img" />
+				</el-carousel-item>
+			</el-carousel>
+		</div>
+		<div class="news-wrapper">
+			<div class="new-pic">
+				<el-carousel :interval="4000" height="344px" indicator-position="none">
+					<el-carousel-item v-for="(item, index) in redNews.slice(0, 3)" :key="index">
+						<img :src="item.image" @click="navTo('/news/detail?id=' + item.id)" class="hand" />
+						<div class="title clamp hand">{{ item.title }}</div>
+					</el-carousel-item>
+				</el-carousel>
+			</div>
+			<div class="news">
+				<item-title title="红会新闻" :topath="'/news'"></item-title>
+				<div class="item-wrapper">
+					<div class="new-item hand" v-for="item in redNews" :key="item.id"
+						@click="navTo('/news/detail?id=' + item.id)">
+						<div class="title clamp">
+							<span></span>
+							{{ item.title }}
+						</div>
+						<div class="time">{{ item.releasetime.split(" ")[0] }}</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="home-body">
+			<div class="body-left moren">
+				<div class="red-new">
+					<item-title title="信息公示" :topath="'/publicity'"></item-title>
+					<div class="item-wrapper">
+						<div class="new-item hand" v-for="item in openNews" :key="item.id"
+							@click="navTo('/publicity/detail?id=' + item.id)">
+							<div class="title clamp">
+								<span></span>
+								{{ item.title }}
+							</div>
+							<div class="time">{{ item.releasetime.split(" ")[0] }}</div>
+						</div>
+					</div>
+				</div>
+				<div class="join">
+					<item-title title="公众参与" :topath="'/donation'"></item-title>
+					<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>
+					</div>
+				</div>
+			</div>
+			<div class="body-right">
+				<div class="new-open">
+					<item-title title="县市区红会动态" :topath="'/newContent'"></item-title>
+					<div class="item-wrapper">
+						<div v-if="xsqList.length == 0" class="new-item hand">
+							数据加载中...
+						</div>
+						<div class="new-item hand" v-for="item in xsqList" :key="item.id" @click="newsClick(item)">
+							<div class="title clamp">
+								<span></span>
+								{{ item.title }}
+							</div>
+							<div class="time">{{ item.releasetime.split(" ")[0] }}</div>
+						</div>
+					</div>
+				</div>
+				<div class="loadmore" @click="lookm()">
+					<img src="../assets/img/lookm.png" />
+				</div>
+				<div class="list">
+					<item-title title="爱心榜" :topath="'/loveList'"></item-title>
+					<div class="list-title flex">
+						<div>捐献时间</div>
+						<div>捐献者</div>
+						<div>捐献金额</div>
+						<!-- <div>捐献意向</div> -->
+					</div>
+
+					<div class="table-empty" v-if="jxList.length == 0">
+						暂无更多捐赠数据
+					</div>
+					<template v-else>
+						<div class="list-item flex" v-for="(item, index) in jxList" :key="index">
+							<div class="clamp">{{ item.paytime | getTime }}</div>
+							<div class="clamp">{{ item.name || item.contact}}</div>
+							<div class="clamp">{{ item.amount + "元" }}</div>
+							<!-- <div class="clamp">{{ item.intention }}</div> -->
+						</div>
+					</template>
+				</div>
+			</div>
+		</div>
+		<img src="../assets/img/m2.png" class="show-live" />
+		<div class="show-pic">
+			<item-title title="红会风采" isShow="2"></item-title>
+			<div class="imgs-wrapper">
+				<div class="imgs">
+					<img v-for="item in imgList" :key="item.id" :src="item.image" />
+				</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.link" class="item-a" target="_blank">{{
             item.name
           }}</a>
-        </div>
-      </div>
-    </div>
-  </div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-import ItemTitle from "./homeChild/ItemTitle.vue";
-
-import {
-  getArtList,
-  loadIndexs,
-  splist,
-  loveList,
-  friendList,
-  newsList,
-  openList,
-  banner,
-  regulationList,
-  getList,
-} from "../request/api.js";
-export default {
-  components: {
-    ItemTitle,
-  },
-  data() {
-    return {
-      miniNavList: [
-        {
-          path: "/donation/contribution",
-          title: "爱心捐款",
-          image: require("@/assets/img/i1.png"),
-        },
-        {
-          path: "/donation/organDonation",
-          title: "遗体及器官捐献",
-          image: require("@/assets/img/i2.png"),
-        },
-        {
-          path: "/donation/Hpc",
-          title: "造血干细胞捐献",
-          image: require("@/assets/img/i3.png"),
-        },
-        {
-          path: "/join/rescue",
-          title: "加入救在身边",
-          image: require("@/assets/img/i4.png"),
-        },
-        {
-          path: "/join/member",
-          title: "会员入会登记",
-          image: require("@/assets/img/i5.png"),
-        },
-        {
-          path: "/join/volunteer",
-          title: "志愿者报名",
-          image: require("@/assets/img/i6.png"),
-        },
-        {
-          path: "/join/train",
-          title: "普及培训报名",
-          image: require("@/assets/img/i7.png"),
-        },
-        {
-          path: "/popularScience/list",
-          title: "红会科普",
-          image: require("@/assets/img/i8.png"),
-        },
-      ],
-      swiperList: [],
-      // jxList: [],
-      spList: [],
-      imgList: [],
-      friendList: [
-        {
-          link: "https://www.redcross.org.cn/",
-          id: "111",
-          name: "中国红十字会",
-        },
-        {
-          link: "https://www.crcf.org.cn/",
-          id: "112",
-          name: "中国红十字基金会",
-        },
-        {
-          link: "https://www.codac.org.cn/",
-          id: "113",
-          name: "中国人体器官捐献管理中心",
-        },
-        {
-          link: "http://www.hbsredcross.org.cn/",
-          id: "114",
-          name: "湖北省红十字会",
-        },
-		 {
-          link: "http://www.wuhanrc.org.cn/",
-          id: "115",
-          name: "武汉市红十字会",
-        }
-      ],
-      redNews: [],
-      openNews: [],
-      regulationList: [],
-      moreJxList: [],
-      timer: null,
-      xsqList: [],
-    };
-  },
-  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;
-    },
-    time(val) {
-      if (val) {
-        let arr = val.split(" ");
-        let str = arr[0];
-        str = str.replace(/-/g, ".");
-        return str;
-      }
-      return;
-    },
-  },
-  computed: {
-    jxList() {
-      return this.moreJxList.slice(0, 3);
-    },
-  },
-  created() {
-    // this.getSwiperList();
-    // 加载轮播退
-    this.getIndex();
-    // this.getFirstAidList();
-    // 获取爱心捐款
-    this.getJxList();
-    // 获取红会新闻
-    this.getNewsList();
-    // 获取信息公示
-    this.getOpenList();
-    // this.getRegulationList();
-    // 获取县市区红会动态
-    this.getXsqList();
-    // 获取红会风采
-    this.getRedFc();
-  },
-  methods: {
-    newsClick(item) {
-      console.log(item, "article_category_id+++++");
-      let path = "";
-      switch (item.article_category_id) {
-        case "46":
-          path = "hhs";
-          break;
-        case "44":
-          path = "jlx";
-          break;
-        case "45":
-          path = "sss";
-          break;
-        case "47":
-          path = "jzq";
-          break;
-        case "48":
-          path = "ssq";
-          break;
-        case "49":
-          path = "szs";
-          break;
-        case "50":
-          path = "jls";
-          break;
-        default:
-          break;
-      }
-      // let url = '/newContent/' + path + '/detail?id=' + item.id
-      console.log(path);
-
-      this.navTo("/newContent/" + path + "/detail?id=" + item.id);
-    },
-    getXsqList() {
-      let list = [];
-      let obj = this;
-      getArtList({
-        ifyid: 43,
-        page: 1,
-        limit: 6,
-      }).then((res) => {
-        // obj.redNews = res.data.list.sort(this.compare('id'));
-        console.log(res);
-        obj.xsqList = res.data.list.sort(obj.compare("releasetime"));
-      });
-      // let d = 0
-      // for (let i = 53; i < 60; i++) {
-      // 	getList({
-      // 		page: 1,
-      // 		limit: 6
-      // 	}, i).then(({
-      // 		data
-      // 	}) => {
-      // 		d++
-      // 		console.log(i)
-      // 		console.log(data.list)
-      // 		data.list.forEach(item => {
-      // 			item.path = i
-      // 			return item
-      // 		})
-      // 		list = list.concat(data.list)
-      // 		if (i == 59) {
-      // 			console.log(list)
-      // 			this.xsqList = list.sort(this.comparet('release_time')).slice(0, 6)
-      // 		}
-      // 	})
-
-      // }
-    },
-    lookm() {
-      // console.log('newCenter')
-      this.navTo("/directories");
-    },
-    navTo(url) {
-      this.$router.push(url);
-    },
-    getIndex() {
-      loadIndexs()
-        .then(({ data }) => {
-          // alert('hhhhhhh')
-        //   this.friendList = data.friend_link;
-          // this.imgList = data.picture_list;
-          this.swiperList = data.banner.filter((item) => {
-            if (item.pc_image != "") {
-              return item;
-            }
-          });
-        })
-        .catch((err) => {
-          console.log(err);
-          // alert('dddddddddddddd')
-        });
-    },
-    getFirstAidList() {
-      splist({
-        page: 1,
-        limit: 5,
-      }).then(({ data }) => {
-        this.spList = data.list;
-      });
-    },
-    // 获取爱心捐款
-    getJxList() {
-      let obj = this;
-      let data = {
-        page: 1,
-        limit: 20,
-      };
-      loveList(data).then((res) => {
-        console.log(res);
-        obj.moreJxList = res.data.data;
-        console.log(obj.moreJxList, "obj.moreJxList++++++++++++++++++++");
-        obj.gundong();
-      });
-    },
-    gundong() {
-      let obj = this;
-      obj.timer = setTimeout(() => {
-        obj.moreJxList.push(obj.moreJxList.shift());
-        // console.log(obj.moreJxList)
-        obj.gundong();
-      }, 2000);
-    },
-    // 获取红会新闻
-    getNewsList() {
-      let obj = this;
-      getArtList({
-        ifyid: 5,
-        page: 1,
-        limit: 9,
-      }).then((res) => {
-        // obj.redNews = res.data.list.sort(this.compare('id'));
-        console.log(res);
-        obj.redNews = res.data.list.sort(this.compare("releasetime"));
-      });
-    },
-    getOpenList() {
-      let obj = this;
-      getArtList({
-        ifyid: 6,
-        page: 1,
-        limit: 9,
-      }).then((res) => {
-        obj.openNews = res.data.list.sort(this.compare("releasetime"));
-        // console.log(obj.openNews)
-      });
-    },
-    getSwiperList() {
-      let obj = this;
-      // banner().then(res => {
-      // 	let list = res.data.list.map(item => {
-      // 		return item.image_input[0];
-      // 	});
-      // 	obj.swiperList = list;
-      // });
-    },
-    getRegulationList() {
-      let obj = this;
-      regulationList({
-        page: 1,
-        limit: 6,
-      }).then((res) => {
-        obj.regulationList = res.data.list.sort(this.compare("id"));
-      });
-    },
-    compare(attribute) {
-      return function (obj1, obj2) {
-        var val1 = obj1[attribute];
-        var val2 = obj2[attribute];
-        if (val1 < val2) {
-          return 1;
-        } else if (val1 > val2) {
-          return -1;
-        } else {
-          return 0;
-        }
-      };
-    },
-    comparet(attribute) {
-      return function (obj1, obj2) {
-        let val1 = obj1[attribute].split(".").join("") * 1;
-        var val2 = obj2[attribute].split(".").join("") * 1;
-        if (val1 < val2) {
-          return 1;
-        } else if (val1 > val2) {
-          return -1;
-        } else {
-          return 0;
-        }
-      };
-    },
-    getRedFc() {
-      let obj = this;
-      getArtList({
-        ifyid: 60,
-        page: 1,
-        limit: 10,
-      }).then((res) => {
-        obj.imgList = res.data.list.sort(this.compare("releasetime"));
-        // console.log(obj.openNews)
-      });
-    },
-  },
-};
+	import ItemTitle from "./homeChild/ItemTitle.vue";
+
+	import {
+		getArtList,
+		loadIndexs,
+		splist,
+		loveList,
+		friendList,
+		newsList,
+		openList,
+		banner,
+		regulationList,
+		getList,
+	} from "../request/api.js";
+	export default {
+		components: {
+			ItemTitle,
+		},
+		data() {
+			return {
+				miniNavList: [{
+						path: "/donation/contribution",
+						title: "爱心捐款",
+						image: require("@/assets/img/i1.png"),
+					},
+					{
+						path: "/donation/organDonation",
+						title: "遗体及器官捐献",
+						image: require("@/assets/img/i2.png"),
+					},
+					{
+						path: "/donation/Hpc",
+						title: "造血干细胞捐献",
+						image: require("@/assets/img/i3.png"),
+					},
+					{
+						path: "/join/rescue",
+						title: "加入救在身边",
+						image: require("@/assets/img/i4.png"),
+					},
+					{
+						path: "/join/member",
+						title: "会员入会登记",
+						image: require("@/assets/img/i5.png"),
+					},
+					{
+						path: "/join/volunteer",
+						title: "志愿者报名",
+						image: require("@/assets/img/i6.png"),
+					},
+					{
+						path: "/join/train",
+						title: "普及培训报名",
+						image: require("@/assets/img/i7.png"),
+					},
+					{
+						path: "/popularScience/list",
+						title: "红会科普",
+						image: require("@/assets/img/i8.png"),
+					},
+				],
+				swiperList: [],
+				// jxList: [],
+				spList: [],
+				imgList: [],
+				friendList: [{
+						link: "https://www.redcross.org.cn/",
+						id: "111",
+						name: "中国红十字会",
+					},
+					{
+						link: "https://www.crcf.org.cn/",
+						id: "112",
+						name: "中国红十字基金会",
+					},
+					{
+						link: "https://www.codac.org.cn/",
+						id: "113",
+						name: "中国人体器官捐献管理中心",
+					},
+					{
+						link: "http://www.hbsredcross.org.cn/",
+						id: "114",
+						name: "湖北省红十字会",
+					},
+					{
+						link: "http://www.wuhanrc.org.cn/",
+						id: "115",
+						name: "武汉市红十字会",
+					}
+				],
+				redNews: [],
+				openNews: [],
+				regulationList: [],
+				moreJxList: [],
+				timer: null,
+				xsqList: [],
+			};
+		},
+		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;
+			},
+			time(val) {
+				if (val) {
+					let arr = val.split(" ");
+					let str = arr[0];
+					str = str.replace(/-/g, ".");
+					return str;
+				}
+				return;
+			},
+		},
+		computed: {
+			jxList() {
+				return this.moreJxList.slice(0, 3);
+			},
+		},
+		created() {
+			// this.getSwiperList();
+			// 加载轮播退
+			this.getIndex();
+			// this.getFirstAidList();
+			// 获取爱心捐款
+			this.getJxList();
+			// 获取红会新闻
+			this.getNewsList();
+			// 获取信息公示
+			this.getOpenList();
+			// this.getRegulationList();
+			// 获取县市区红会动态
+			this.getXsqList();
+			// 获取红会风采
+			this.getRedFc();
+		},
+		methods: {
+			newsClick(item) {
+				console.log(item, "article_category_id+++++");
+				let path = "";
+				switch (item.article_category_id) {
+					case "46":
+						path = "hhs";
+						break;
+					case "44":
+						path = "jlx";
+						break;
+					case "45":
+						path = "sss";
+						break;
+					case "47":
+						path = "jzq";
+						break;
+					case "48":
+						path = "ssq";
+						break;
+					case "49":
+						path = "szs";
+						break;
+					case "50":
+						path = "jls";
+						break;
+					default:
+						break;
+				}
+				// let url = '/newContent/' + path + '/detail?id=' + item.id
+				console.log(path);
+
+				this.navTo("/newContent/" + path + "/detail?id=" + item.id);
+			},
+			getXsqList() {
+				let list = [];
+				let obj = this;
+				getArtList({
+					ifyid: 43,
+					page: 1,
+					limit: 6,
+				}).then((res) => {
+					// obj.redNews = res.data.list.sort(this.compare('id'));
+					console.log(res);
+					obj.xsqList = res.data.list.sort(obj.compare("releasetime"));
+				});
+				// let d = 0
+				// for (let i = 53; i < 60; i++) {
+				// 	getList({
+				// 		page: 1,
+				// 		limit: 6
+				// 	}, i).then(({
+				// 		data
+				// 	}) => {
+				// 		d++
+				// 		console.log(i)
+				// 		console.log(data.list)
+				// 		data.list.forEach(item => {
+				// 			item.path = i
+				// 			return item
+				// 		})
+				// 		list = list.concat(data.list)
+				// 		if (i == 59) {
+				// 			console.log(list)
+				// 			this.xsqList = list.sort(this.comparet('release_time')).slice(0, 6)
+				// 		}
+				// 	})
+
+				// }
+			},
+			lookm() {
+
+				// this.navTo("/organs");
+				this.navTo('/mourn')
+			},
+			navTo(url) {
+				this.$router.push(url);
+			},
+			getIndex() {
+				loadIndexs()
+					.then(({
+						data
+					}) => {
+						// alert('hhhhhhh')
+						//   this.friendList = data.friend_link;
+						// this.imgList = data.picture_list;
+						this.swiperList = data.banner.filter((item) => {
+							if (item.pc_image != "") {
+								return item;
+							}
+						});
+					})
+					.catch((err) => {
+						console.log(err);
+						// alert('dddddddddddddd')
+					});
+			},
+			getFirstAidList() {
+				splist({
+					page: 1,
+					limit: 5,
+				}).then(({
+					data
+				}) => {
+					this.spList = data.list;
+				});
+			},
+			// 获取爱心捐款
+			getJxList() {
+				let obj = this;
+				let data = {
+					page: 1,
+					limit: 20,
+				};
+				loveList(data).then((res) => {
+					console.log(res);
+					obj.moreJxList = res.data.data;
+					console.log(obj.moreJxList, "obj.moreJxList++++++++++++++++++++");
+					obj.gundong();
+				});
+			},
+			gundong() {
+				let obj = this;
+				obj.timer = setTimeout(() => {
+					obj.moreJxList.push(obj.moreJxList.shift());
+					// console.log(obj.moreJxList)
+					obj.gundong();
+				}, 2000);
+			},
+			// 获取红会新闻
+			getNewsList() {
+				let obj = this;
+				getArtList({
+					ifyid: 5,
+					page: 1,
+					limit: 9,
+				}).then((res) => {
+					// obj.redNews = res.data.list.sort(this.compare('id'));
+					console.log(res);
+					obj.redNews = res.data.list.sort(this.compare("releasetime"));
+				});
+			},
+			getOpenList() {
+				let obj = this;
+				getArtList({
+					ifyid: 6,
+					page: 1,
+					limit: 9,
+				}).then((res) => {
+					obj.openNews = res.data.list.sort(this.compare("releasetime"));
+					// console.log(obj.openNews)
+				});
+			},
+			getSwiperList() {
+				let obj = this;
+				// banner().then(res => {
+				// 	let list = res.data.list.map(item => {
+				// 		return item.image_input[0];
+				// 	});
+				// 	obj.swiperList = list;
+				// });
+			},
+			getRegulationList() {
+				let obj = this;
+				regulationList({
+					page: 1,
+					limit: 6,
+				}).then((res) => {
+					obj.regulationList = res.data.list;
+				});
+			},
+			compare(attribute) {
+				return function(obj1, obj2) {
+					var val1 = obj1[attribute];
+					var val2 = obj2[attribute];
+					if (val1 < val2) {
+						return 1;
+					} else if (val1 > val2) {
+						return -1;
+					} else {
+						return 0;
+					}
+				};
+			},
+			comparet(attribute) {
+				return function(obj1, obj2) {
+					let val1 = obj1[attribute].split(".").join("") * 1;
+					var val2 = obj2[attribute].split(".").join("") * 1;
+					if (val1 < val2) {
+						return 1;
+					} else if (val1 > val2) {
+						return -1;
+					} else {
+						return 0;
+					}
+				};
+			},
+			getRedFc() {
+				let obj = this;
+				getArtList({
+					ifyid: 60,
+					page: 1,
+					limit: 10,
+				}).then((res) => {
+					obj.imgList = res.data.list.sort(this.compare("releasetime"));
+					// console.log(obj.openNews)
+				});
+			},
+		},
+	};
 </script>
 
 <style lang="scss" spcode>
-.home-swiper {
-  width: 1200px;
-  height: 484px;
-  // background: pink;
-  margin: -20px auto 24px;
-
-  el-carousel {
-    width: 1200px;
-
-    el-carousel-item {
-      width: 1200px;
-      height: 484px;
-    }
-  }
-
-  .swiper-img {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.news-wrapper {
-  width: 1200px;
-  display: flex;
-  justify-content: space-between;
-  margin: 24px auto;
-
-  .new-pic {
-    width: 521px;
-    height: 344px;
-    // background-color: #ffff00;
-    position: relative;
-
-    img {
-      width: 521px;
-      height: 344px;
-    }
-
-    .title {
-      width: 481px;
-      height: 55px;
-      padding-left: 20px;
-      padding-right: 20px;
-      background: #262626;
-      opacity: 0.8;
-      line-height: 55px;
-      font-size: 24px;
-      font-family: inpinheiti;
-      font-weight: 400;
-      color: #ffffff;
-      position: absolute;
-      bottom: 0;
-    }
-  }
-
-  .news {
-    width: 659px;
-    height: 344px;
-    background: #ffffff;
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-  }
-}
-
-.home-body {
-  width: 1200px;
-  margin: 24px auto;
-
-  // display: flex;
-  // justify-content: space-between;
-  .body-left {
-    width: 1200px;
-    display: flex;
-    justify-content: space-between;
-
-    .join {
-      width: 588px;
-      height: 344px;
-      background: #ffffff;
-      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-      margin-bottom: 24px;
-
-      .join-main {
-        padding-left: 46px;
-        padding-top: 15px;
-        display: flex;
-        flex-wrap: wrap;
-
-        .join-item {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          margin-right: 28px;
-          margin-bottom: 14px;
-          font-size: 14px;
-          font-family: PingFang SC;
-          font-weight: bold;
-          color: #323131;
-          line-height: 1;
-
-          .logo {
-            width: 103px;
-            height: 103px;
-            border: 1px solid #dadada;
-            border-radius: 10px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            img {
-              width: 50px;
-              height: 50px;
-            }
-          }
-
-          .title {
-            padding-top: 10px;
-          }
-        }
-      }
-    }
-
-    .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: 500px;
-      height: 262px;
-      background: #ffffff;
-      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-    }
-
-    .item-wrapper {
-      padding: 20px 15px 0 13px;
-
-      .new-item {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 17px;
-
-        &:hover {
-          span {
-            background: red;
-          }
-
-          .title {
-            color: red;
-          }
-
-          .time {
-            color: red;
-          }
-        }
-
-        span {
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          background: #d8d8d8;
-          // border-radius: 50%;
-          transform: rotate(45deg);
-          margin-right: 8px;
-        }
-
-        .title {
-          width: 400px;
-          height: 14px;
-          font-size: 14px;
-          font-family: PingFang SC;
-          font-weight: bold;
-          color: #101010;
-
-          &:hover {
-            color: red;
-          }
-        }
-
-        .time {
-          font-size: 14px;
-          font-family: PingFang SC;
-          font-weight: 500;
-          color: #999999;
-        }
-      }
-    }
-  }
-
-  .body-right {
-    display: flex;
-    justify-content: space-between;
-
-    .loadmore {
-      width: 350px;
-
-      // background-color: red;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    .new-open {
-      // padding: 20px 15px 0 13px;
-      width: 450px;
-      height: 262px;
-      background: #ffffff;
-      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-    }
-
-    .join {
-      width: 588px;
-      height: 344px;
-      background: #ffffff;
-      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-      margin-bottom: 24px;
-
-      .join-main {
-        padding-left: 46px;
-        padding-top: 15px;
-        display: flex;
-        flex-wrap: wrap;
-
-        .join-item {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          margin-right: 28px;
-          margin-bottom: 14px;
-          font-size: 14px;
-          font-family: PingFang SC;
-          font-weight: bold;
-          color: #323131;
-          line-height: 1;
-
-          .logo {
-            width: 103px;
-            height: 103px;
-            border: 1px solid #dadada;
-            border-radius: 10px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            img {
-              width: 50px;
-              height: 50px;
-            }
-          }
-
-          .title {
-            padding-top: 10px;
-          }
-        }
-      }
-    }
-
-    .list {
-      width: 350px;
-      height: 262px;
-      background: #ffffff;
-      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-
-      .list-item {
-        display: flex;
-        border-bottom: 1px solid #f2f2f2;
-
-        &:last-of-type {
-          border-bottom: none;
-        }
-
-        div {
-          width: 33.3%;
-          height: 55px;
-          line-height: 55px;
-          text-align: center;
-          font-size: 17px;
-          font-family: PingFang SC;
-          font-weight: 500;
-          color: #666666;
-        }
-      }
-
-      .list-title {
-        display: flex;
-        padding-top: 6px;
-
-        div {
-          width: 33.3%;
-          font-size: 17px;
-          font-family: PingFang SC;
-          font-weight: bold;
-          color: #bf3333;
-          text-align: center;
-          line-height: 57px;
-          height: 57px;
-          border-bottom: 1px solid #f2f2f2;
-        }
-      }
-
-      .is-leaf {
-        font-size: 17px;
-        font-family: PingFang SC;
-        font-weight: bold;
-        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;
-
-        .cell {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          display: block;
-        }
-      }
-    }
-  }
-}
-
-.show-live {
-  display: block;
-  width: 1200px;
-  height: 160px;
-  margin: 24px auto;
-  // background-color: #cbb385;
-}
-
-.show-pic {
-  width: 1200px;
-  // height: 192px;
-  background: #ffffff;
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-  margin: 24px auto;
-
-  .imgs-wrapper {
-    padding: 14px 12px;
-
-    .imgs {
-      width: 1176px;
-      // height: 124px;
-      display: flex;
-      flex-wrap: nowrap;
-      overflow: auto hidden;
-
-      img {
-        width: 186px;
-        height: 124px;
-        margin-right: 12px;
-      }
-    }
-  }
-}
-
-.friends {
-  width: 1200px;
-  // height: 96px;
-  background: #ffffff;
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-  margin: 24px auto;
-
-  .friend-list-wrapper {
-    padding: 20px 28px 10px 28px;
-    display: flex;
-    flex-wrap: wrap;
-
-    .friend-item {
-      font-size: 14px;
-      font-family: PingFang SC;
-      font-weight: bold;
-      color: #323131;
-      margin-left: 51px;
-      margin-bottom: 15px;
-
-      .item-a {
-        color: #323131;
-      }
-    }
-  }
-}
-
-.el-carousel__button {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-}
-
-.is-active {
-  .el-carousel__button {
-    background-color: #d82020 !important;
-  }
-}
-
-.item-wrapper {
-  padding: 20px 15px 0 13px;
-
-  .new-item {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 17px;
-
-    &:hover {
-      span {
-        background: red;
-      }
-
-      .title {
-        color: red;
-      }
-
-      .time {
-        color: red;
-      }
-    }
-
-    span {
-      display: inline-block;
-      width: 8px;
-      height: 8px;
-      background: #d8d8d8;
-      // border-radius: 50%;
-      transform: rotate(45deg);
-      margin-right: 8px;
-    }
-
-    .title {
-      width: 400px;
-      height: 14px;
-      font-size: 14px;
-      font-family: PingFang SC;
-      font-weight: bold;
-      color: #101010;
-      // &:hover {
-      // 	color: red;
-      // }
-    }
-
-    .time {
-      flex-shrink: 0;
-      font-size: 14px;
-      font-family: PingFang SC;
-      font-weight: 500;
-      color: #999999;
-    }
-  }
-}
-
-.table-empty {
-  // width: 100%;
-  text-align: center;
-  // border: 2px solid #f2f2f2;
-  font-size: 16px;
-  line-height: 36px;
-  font-family: PingFang SC;
-  // font-weight: bold;
-  border-top: none;
-  color: #999;
-}
-</style>
+	.home-swiper {
+		width: 1200px;
+		height: 484px;
+		// background: pink;
+		margin: -20px auto 24px;
+
+		el-carousel {
+			width: 1200px;
+
+			el-carousel-item {
+				width: 1200px;
+				height: 484px;
+			}
+		}
+
+		.swiper-img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.news-wrapper {
+		width: 1200px;
+		display: flex;
+		justify-content: space-between;
+		margin: 24px auto;
+
+		.new-pic {
+			width: 521px;
+			height: 344px;
+			// background-color: #ffff00;
+			position: relative;
+
+			img {
+				width: 521px;
+				height: 344px;
+			}
+
+			.title {
+				width: 481px;
+				height: 55px;
+				padding-left: 20px;
+				padding-right: 20px;
+				background: #262626;
+				opacity: 0.8;
+				line-height: 55px;
+				font-size: 24px;
+				font-family: inpinheiti;
+				font-weight: 400;
+				color: #ffffff;
+				position: absolute;
+				bottom: 0;
+			}
+		}
+
+		.news {
+			width: 659px;
+			height: 344px;
+			background: #ffffff;
+			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+		}
+	}
+
+	.home-body {
+		width: 1200px;
+		margin: 24px auto;
+
+		// display: flex;
+		// justify-content: space-between;
+		.body-left {
+			width: 1200px;
+			display: flex;
+			justify-content: space-between;
+
+			.join {
+				width: 588px;
+				height: 344px;
+				background: #ffffff;
+				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+				margin-bottom: 24px;
+
+				.join-main {
+					padding-left: 46px;
+					padding-top: 15px;
+					display: flex;
+					flex-wrap: wrap;
+
+					.join-item {
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+						align-items: center;
+						margin-right: 28px;
+						margin-bottom: 14px;
+						font-size: 14px;
+						font-family: PingFang SC;
+						font-weight: bold;
+						color: #323131;
+						line-height: 1;
+
+						.logo {
+							width: 103px;
+							height: 103px;
+							border: 1px solid #dadada;
+							border-radius: 10px;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+
+							img {
+								width: 50px;
+								height: 50px;
+							}
+						}
+
+						.title {
+							padding-top: 10px;
+						}
+					}
+				}
+			}
+
+			.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: 500px;
+				height: 262px;
+				background: #ffffff;
+				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+			}
+
+			.item-wrapper {
+				padding: 20px 15px 0 13px;
+
+				.new-item {
+					display: flex;
+					justify-content: space-between;
+					margin-bottom: 17px;
+
+					&:hover {
+						span {
+							background: red;
+						}
+
+						.title {
+							color: red;
+						}
+
+						.time {
+							color: red;
+						}
+					}
+
+					span {
+						display: inline-block;
+						width: 8px;
+						height: 8px;
+						background: #d8d8d8;
+						// border-radius: 50%;
+						transform: rotate(45deg);
+						margin-right: 8px;
+					}
+
+					.title {
+						width: 400px;
+						height: 14px;
+						font-size: 14px;
+						font-family: PingFang SC;
+						font-weight: bold;
+						color: #101010;
+
+						&:hover {
+							color: red;
+						}
+					}
+
+					.time {
+						font-size: 14px;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #999999;
+					}
+				}
+			}
+		}
+
+		.body-right {
+			display: flex;
+			justify-content: space-between;
+
+			.loadmore {
+				width: 350px;
+
+				// background-color: red;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.new-open {
+				// padding: 20px 15px 0 13px;
+				width: 450px;
+				height: 262px;
+				background: #ffffff;
+				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+			}
+
+			.join {
+				width: 588px;
+				height: 344px;
+				background: #ffffff;
+				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+				margin-bottom: 24px;
+
+				.join-main {
+					padding-left: 46px;
+					padding-top: 15px;
+					display: flex;
+					flex-wrap: wrap;
+
+					.join-item {
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+						align-items: center;
+						margin-right: 28px;
+						margin-bottom: 14px;
+						font-size: 14px;
+						font-family: PingFang SC;
+						font-weight: bold;
+						color: #323131;
+						line-height: 1;
+
+						.logo {
+							width: 103px;
+							height: 103px;
+							border: 1px solid #dadada;
+							border-radius: 10px;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+
+							img {
+								width: 50px;
+								height: 50px;
+							}
+						}
+
+						.title {
+							padding-top: 10px;
+						}
+					}
+				}
+			}
+
+			.list {
+				width: 350px;
+				height: 262px;
+				background: #ffffff;
+				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+
+				.list-item {
+					display: flex;
+					border-bottom: 1px solid #f2f2f2;
+
+					&:last-of-type {
+						border-bottom: none;
+					}
+
+					div {
+						width: 33.3%;
+						height: 55px;
+						line-height: 55px;
+						text-align: center;
+						font-size: 17px;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #666666;
+					}
+				}
+
+				.list-title {
+					display: flex;
+					padding-top: 6px;
+
+					div {
+						width: 33.3%;
+						font-size: 17px;
+						font-family: PingFang SC;
+						font-weight: bold;
+						color: #bf3333;
+						text-align: center;
+						line-height: 57px;
+						height: 57px;
+						border-bottom: 1px solid #f2f2f2;
+					}
+				}
+
+				.is-leaf {
+					font-size: 17px;
+					font-family: PingFang SC;
+					font-weight: bold;
+					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;
+
+					.cell {
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						display: block;
+					}
+				}
+			}
+		}
+	}
+
+	.show-live {
+		display: block;
+		width: 1200px;
+		height: 160px;
+		margin: 24px auto;
+		// background-color: #cbb385;
+	}
+
+	.show-pic {
+		width: 1200px;
+		// height: 192px;
+		background: #ffffff;
+		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+		margin: 24px auto;
+
+		.imgs-wrapper {
+			padding: 14px 12px;
+
+			.imgs {
+				width: 1176px;
+				// height: 124px;
+				display: flex;
+				flex-wrap: nowrap;
+				overflow: auto hidden;
+
+				img {
+					width: 186px;
+					height: 124px;
+					margin-right: 12px;
+				}
+			}
+		}
+	}
+
+	.friends {
+		width: 1200px;
+		// height: 96px;
+		background: #ffffff;
+		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+		margin: 24px auto;
+
+		.friend-list-wrapper {
+			padding: 20px 28px 10px 28px;
+			display: flex;
+			flex-wrap: wrap;
+
+			.friend-item {
+				font-size: 14px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #323131;
+				margin-left: 51px;
+				margin-bottom: 15px;
+
+				.item-a {
+					color: #323131;
+				}
+			}
+		}
+	}
+
+	.el-carousel__button {
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+	}
+
+	.is-active {
+		.el-carousel__button {
+			background-color: #d82020 !important;
+		}
+	}
+
+	.item-wrapper {
+		padding: 20px 15px 0 13px;
+
+		.new-item {
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 17px;
+
+			&:hover {
+				span {
+					background: red;
+				}
+
+				.title {
+					color: red;
+				}
+
+				.time {
+					color: red;
+				}
+			}
+
+			span {
+				display: inline-block;
+				width: 8px;
+				height: 8px;
+				background: #d8d8d8;
+				// border-radius: 50%;
+				transform: rotate(45deg);
+				margin-right: 8px;
+			}
+
+			.title {
+				width: 400px;
+				height: 14px;
+				font-size: 14px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #101010;
+				// &:hover {
+				// 	color: red;
+				// }
+			}
+
+			.time {
+				flex-shrink: 0;
+				font-size: 14px;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #999999;
+			}
+		}
+	}
+
+	.table-empty {
+		// width: 100%;
+		text-align: center;
+		// border: 2px solid #f2f2f2;
+		font-size: 16px;
+		line-height: 36px;
+		font-family: PingFang SC;
+		// font-weight: bold;
+		border-top: none;
+		color: #999;
+	}
+</style>

src/views/Mourn.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+       <router-view></router-view>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+
+</style>

src/views/Organs.vue

@@ -3,9 +3,9 @@
 		<left-nav :navList="navList" :topTitle="'捐献名录'">
 			<router-view></router-view>
 		</left-nav>
-	</div>
-</template>
-
+	</div>
+</template>
+
 <script>
 	import LeftNav from '../components/leftNav/LeftNav.vue';
 	
@@ -15,11 +15,12 @@
 		},
 		data() {
 			return {
-				navList: [{ index: 0, name: '造血干细胞捐献名录', path: '/directories' }, { index: 1, name: '器官/遗体捐献名录', path: '/organs' }],
+				// navList: [{ index: 0, name: '造血干细胞捐献名录', path: '/directories' }, { index: 1, name: '器官/遗体捐献名录', path: '/organs' }],
+				navList: [{ index: 1, name: '器官/遗体捐献名录', path: '/organs' }],
 			};
 		}
-	};
-</script>
-
-<style>
+	};
+</script>
+
+<style>
 </style>

src/views/cause/cells/List.vue

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

src/views/cause/emergency/List.vue

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

src/views/cause/free/List.vue

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

src/views/cause/humanity/List.vue

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

src/views/cause/remains/List.vue

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

src/views/cause/rescue/List.vue

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

src/views/cause/service/List.vue

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

src/views/cause/teenagers/List.vue

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

src/views/directories/List.vue

@@ -95,7 +95,7 @@ export default {
         limit: obj.limit,
         key: keyword,
       }).then((res) => {
-        obj.newList = res.data.list.sort(this.compare("id"));
+        obj.newList = res.data.list;
         // var newArrayData=res.data.list.sort(compare('Id'))
         obj.total = res.data.count;
       });

src/views/help/List.vue

@@ -96,7 +96,7 @@ export default {
         limit: obj.limit,
         key: keyword,
       }).then((res) => {
-        obj.newList = res.data.list.sort(this.compare("id"));
+        obj.newList = res.data.list;
         obj.total = res.data.count;
       });
     },

src/views/knowledge/bloodDonation/List.vue

@@ -84,7 +84,7 @@ export default {
         limit: obj.limit,
         key: keyword,
       }).then((res) => {
-        obj.newList = res.data.list.sort(this.compare("id"));
+        obj.newList = res.data.list;
         obj.total = res.data.count;
       });
     },

src/views/knowledge/cells/List.vue

@@ -86,7 +86,7 @@ export default {
         limit: obj.limit,
         key: keyword,
       }).then((res) => {
-        obj.newList = res.data.list.sort(this.compare("id"));
+        obj.newList = res.data.list;
         obj.total = res.data.count;
       });
     },

src/views/knowledge/development/List.vue

@@ -86,7 +86,7 @@ export default {
         limit: obj.limit,
         key: keyword,
       }).then((res) => {
-        obj.newList = res.data.list.sort(this.compare("id"));
+        obj.newList = res.data.list;
         obj.total = res.data.count;
       });
     },

src/views/knowledge/rescue/List.vue

@@ -86,7 +86,7 @@ export default {
         limit: obj.limit,
         key: keyword,
       }).then((res) => {
-        obj.newList = res.data.list.sort(this.compare("id"));
+        obj.newList = res.data.list;
         obj.total = res.data.count;
       });
     },

src/views/mourn/Detail.vue

@@ -0,0 +1,480 @@
+<template>
+  <div class="bg" style="min-width: 1800px">
+    <div class="top-btn">
+      <div class="top-item moren">荆州市红十字会欢迎您！</div>
+      <div class="top-item">
+        <span class="hand" style="padding-right: 6px" @click="goHome()"
+          >返回首页</span
+        ><img
+          src="../../assets/img/backhome.png"
+          alt=""
+          class="hand"
+          @click="goHome()"
+        />
+      </div>
+    </div>
+    <div class="base-bg" style="min-width: 1800px; max-width: 1920px">
+      <img
+        src="../../assets/img/mourn-bg.png"
+        alt=""
+        style="min-width: 1800px; max-width: 1920px"
+      />
+    </div>
+    <div class="list-wrap">
+      <div class="list">
+        <div class="list-tit moren">{{ peo.name }}简介</div>
+        <div class="serch-wrapper">
+          <div class="search-left">
+            <img src="../../assets/img/flower-black.png" alt="" />
+            <div class="moren">悼念数： {{mournNum || 0}}</div>
+          </div>
+        </div>
+        <div class="user-info">
+          <div class="user-img">
+            <img :src="peo.image" alt="" />
+          </div>
+          <div class="user-base">
+            <div class="base-item">
+              <div class="base-item-name">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</div>
+              <div class="base-val">&nbsp;&nbsp;{{peo.name || ''}}</div>
+            </div>
+            <div class="base-item">
+              <div class="base-item-name">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</div>
+              <div class="base-val">&nbsp;&nbsp;{{peo.gender}}</div>
+            </div>
+            <div class="base-item">
+              <div class="base-item-name">享&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年</div>
+              <div class="base-val">&nbsp;&nbsp;{{peo.age}}</div>
+            </div>
+            <div class="base-item">
+              <div class="base-item-name">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯</div>
+              <div class="base-val">&nbsp;&nbsp;{{peo.book}}</div>
+            </div>
+            <div class="base-item">
+              <div class="base-item-name">捐献项目</div>
+              <div class="base-val">&nbsp;&nbsp;{{peo.project}}</div>
+            </div>
+            <div class="base-item">
+              <div class="base-item-name">捐献日期</div>
+              <div class="base-val">&nbsp;&nbsp;{{peo.time_text | showTime}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="online">
+          <div class="online-tit">
+            <img src="../../assets/img/online-tit.png" alt="" />
+            <div class="tit-tit moren">在线悼念</div>
+          </div>
+          <div class="online-tb">
+            <div class="tb-item">
+              <img
+                src="../../assets/img/online00.png"
+                alt=""
+                class="tb-item-logo"
+              />
+              <div class="tb-item-tit hand" @click="mournGive(1)">献花：{{ peo.flower }}</div>
+            </div>
+            <div class="tb-item">
+              <img
+                src="../../assets/img/online01.png"
+                alt=""
+                class="tb-item-logo"
+              />
+              <div class="tb-item-tit hand" @click="mournGive(2)">点烛：{{ peo.candle }}</div>
+            </div>
+            <div class="tb-item">
+              <img
+                src="../../assets/img/online02.png"
+                alt=""
+                class="tb-item-logo"
+              />
+              <div class="tb-item-tit hand" @click="mournGive(3)">上香：{{ peo.scented }}</div>
+            </div>
+            <div class="tb-item">
+              <img
+                src="../../assets/img/online03.png"
+                alt=""
+                class="tb-item-logo"
+              />
+              <div class="tb-item-tit hand" @click="mournGive(4)">祈祷：{{ peo.pray }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <page-bottom :backgroundBg="'#fff'" :textcolor="'#031A2A'"></page-bottom>
+  </div>
+</template>
+<script>
+import {
+	Message
+} from 'element-ui'
+import PageBottom from "../../components/pageBottom/PageBottom.vue";
+import { getMournList, getMournDetail, mournGive, getPeoNum } from "../../request/api.js";
+export default {
+  data() {
+    return {
+      list: 10,
+      page: 1,
+      limit: 20,
+      total: 100,
+      keyword: "",
+      loaded: false,
+      peo: {
+        name: "",
+        hua: 0,
+        lazhu: 0,
+        xioang: 0,
+        qi: 0,
+       
+      },
+       mournNum: '',
+    };
+  },
+  filters: {
+    showTime(val) {
+      let str = ''
+      if(val) {
+        str = val.split(' ')[0]
+      }
+      return str
+    }
+  },
+  components: {
+    PageBottom,
+  },
+  mounted(){
+    this.getMournDetail()
+    // this.getPeoNum()
+  },
+  methods: {
+    // 获取个人掉念数
+    getPeoNum() {
+      getPeoNum({
+        id: this.$route.query.id
+      }).then(res => {
+        console.log(res)
+        this.mournNum = res.data
+      })
+    },
+    //个人祭拜
+    mournGive(id) {
+      let obj = this
+      if(obj.loaded) {
+        return Message.error('请勿频繁操作')
+      }
+      obj.loaded = true
+      mournGive({
+        id: this.$route.query.id,
+        type: id
+      }).then(res => {
+        
+        if(id == 1) {
+          obj.peo.flower++
+        }else if(id == 2) {
+            obj.peo.candle++
+        }else if(id == 3) {
+            obj.peo.scented++
+        }else if(id == 4) {
+            obj.peo.pray++
+        }
+        obj.mournNum++
+         obj.loaded = false
+      })
+    },
+    // 获取个人悼念总数
+    getMournDetail() {
+      // console.log(this.$route.query.id)
+      let obj = this
+      getMournDetail({
+        id: this.$route.query.id,
+      }).then((res) => {
+        console.log(res);
+        obj.peo = res.data.data
+        obj.mournNum = res.data.count
+      });
+    },
+    goHome() {
+      this.$router.push("/home");
+    },
+    // 页码改变触发
+    currentChange(e) {
+      this.page = e;
+      // console.log()
+      this.list = e;
+      this.getList();
+    },
+    // 获取捐献列表
+    getList() {},
+    // 在线悼念
+    goDaonian() {
+      this.$router.push("/mourn/detail?id=10");
+    },
+  },
+  computed: {
+    boxHeight() {
+      console.log(Math.round(this.list / 4), "Math.round(this.list/4)");
+      return Math.round(this.list / 4);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+div {
+  box-sizing: border-box;
+}
+.bg {
+  background: #dbe2ee;
+}
+.base-bg {
+  width: 100%;
+  margin: auto;
+  //   padding-top: 66%;
+  img {
+    // position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+  }
+}
+.list-wrap {
+  position: relative;
+
+  width: 1082px;
+  // min-height: 1845px;
+  height: auto;
+  background: #ffffff;
+  margin: auto;
+  margin-top: -508px;
+  padding: 18px 13px;
+  margin-bottom: 126px;
+  .list {
+    width: 100%;
+    // min-height: 1845px;
+    padding-bottom: 100px;
+    // height: 100%;
+    // min-height: 100%;
+    height: 937px;
+    border: 8px solid #006061;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    padding-top: 62px;
+    .list-tit {
+      width: 258px;
+      height: 52px;
+      line-height: 52px;
+      background: #006061;
+      text-align: center;
+      font-size: 19px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #ffffff;
+      position: absolute;
+      top: -8px;
+      left: -8px;
+    }
+    .list-item {
+      text-align: center;
+      width: 203px;
+      height: 278px;
+      //   margin-bottom: 40px;
+      margin: 40px 20px;
+      .item-logo {
+        width: 203px;
+        height: 203px;
+        position: relative;
+        .logo-pepo {
+          width: 160px;
+          height: 160px;
+          border-radius: 50%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          margin: auto;
+        }
+        .logo-hq {
+          width: 203px;
+          height: 203px;
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+        // background-image: url(../../assets/img/hq.png);
+      }
+      .item-name {
+        padding: 13px 0;
+        font-size: 21px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #071b2a;
+      }
+      .item-btn {
+        width: 97px;
+        line-height: 29px;
+        background: #006061;
+        border-radius: 5px;
+        font-size: 15px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #ffffff;
+        margin: auto;
+      }
+    }
+  }
+  .user-info {
+    padding: 101px 0 96px 205px;
+    width: 100%;
+    display: flex;
+
+    .user-img {
+      width: 163px;
+      height: 163px;
+      img {
+        width: 163px;
+        height: 163px;
+      }
+    }
+    .user-base {
+      margin-left: 40px;
+      width: 546px;
+      display: flex;
+      //   flex-direction: ;
+      flex-wrap: wrap;
+      align-content: center;
+      .base-item {
+        width: 50%;
+        flex-shrink: 0;
+        // flex-grow: 0;
+        border-bottom: 1px dashed rgba(23, 18, 21, 0.21);
+        display: flex;
+        line-height: 32px;
+        height: 32px;
+        font-size: 19px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #0b1c29;
+        line-height: 31px;
+        .base-item-name {
+          &::after {
+            content: ":";
+          }
+        }
+      }
+    }
+  }
+  .online {
+    width: 100%;
+    .online-tit {
+      position: relative;
+      width: 566px;
+      height: 70px;
+      margin: auto;
+      img {
+        widows: 566px;
+        height: 70px;
+      }
+      .tit-tit {
+        widows: 566px;
+        height: 70px;
+        line-height: 65px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        text-align: center;
+        font-size: 24px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #ffffff;
+      }
+    }
+    .online-tb {
+      width: 645px;
+      height: 180px;
+      // margin: auto;
+      margin: 47px auto 0;
+      display: flex;
+      justify-content: space-between;
+      .tb-item {
+        width: 132px;
+        height: 180px;
+        position: relative;
+        .tb-item-logo {
+          width: 132px;
+          height: 180px;
+        }
+        .tb-item-tit {
+          font-size: 16px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+          line-height: 27px;
+          line-height: 40px;
+          position: absolute;
+          bottom: 0;
+          text-align: center;
+          width: 132px;
+        }
+      }
+    }
+  }
+}
+.serch-wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  height: 33px;
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  .search-left {
+    display: flex;
+    align-items: center;
+    height: 33px;
+    font-size: 15px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #031a2a;
+    margin-right: 10px;
+  }
+}
+.page-wrap {
+  position: absolute;
+  bottom: 30px;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+.top-btn {
+  width: 100%;
+  min-width: 1800px;
+  height: 40px;
+  background: rgba($color: #ffff, $alpha: 0.85);
+  position: absolute;
+  // opacity: 0.85;
+  display: flex;
+  // justify-content: ;
+  align-items: center;
+  text-align: center;
+  font-size: 13px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #031a2a;
+  .top-item {
+    width: 50%;
+    img {
+      width: 15px;
+      height: 15px;
+      // margin-left: 6px;
+    }
+  }
+}
+</style>

src/views/mourn/Index.vue

@@ -0,0 +1,347 @@
+<template>
+  <div class="bg" style="min-width: 1800px">
+    <div class="top-btn">
+      <div class="top-item moren">荆州市红十字会欢迎您！</div>
+      <div class="top-item">
+        <span class="hand" style="padding-right: 6px" @click="goHome()">返回首页</span
+        ><img src="../../assets/img/backhome.png" alt="" class="hand" @click="goHome()"/>
+      </div>
+    </div>
+    <div class="base-bg" style="min-width: 1800px; max-width: 1920px">
+      <img
+        src="../../assets/img/mourn-bg.png"
+        alt=""
+        style="min-width: 1800px; max-width: 1920px"
+      />
+    </div>
+    <div class="list-wrap">
+      <div
+        class="list"
+        style="height: (318 * boxHeight + 500) + 'px'; min-height: 1500px"
+      >
+        <div class="list-tit moren">器官/遗体捐献网上纪念堂</div>
+        <div class="serch-wrapper">
+          <div class="search-left">
+            <img src="../../assets/img/flower-black.png" alt="" />
+            <div class="moren">悼念总数：{{mournAll || 0}}</div>
+          </div>
+          <div class="search">
+            <input
+              type="text"
+              v-model="keyword"
+              placeholder="请输入捐赠者"
+              class=""
+              @keyup.enter="getList()"
+            />
+            <img
+              src="../../assets/img/search.png"
+              class="hand"
+              @click="getList()"
+            />
+          </div>
+        </div>
+        <div class="list-item" v-for="item in list" :key="item.image">
+          <div class="item-logo">
+            <img class="logo-pepo" :src="item.image" />
+            <img class="logo-hq" src="../../assets/img/hq.png" />
+          </div>
+          <div class="item-name moren">{{item.name}}</div>
+          <div class="item-btn hand" @click="goDaonian(item)">在线悼念</div>
+        </div>
+        <div class="page-wrap">
+          <el-pagination
+            layout="prev, pager, next"
+            :total="total"
+            background
+            prev-text="上一页"
+            next-text="下一页"
+            @current-change="currentChange"
+            :page-size="20"
+          ></el-pagination>
+        </div>
+      </div>
+    </div>
+    <audio id="audio" :src="require('../../assets/music/bg-music.mp3')" loop ref="music" controls hidden></audio>
+    <page-bottom :backgroundBg="'#fff'" :textcolor="'#031A2A'"></page-bottom>
+  </div>
+</template>
+<script>
+import PageBottom from "../../components/pageBottom/PageBottom.vue";
+import { getMournList, getAllNum } from '../../request/api.js'
+export default {
+  data() {
+    return {
+      list: [],
+      page: 1,
+      limit: 20,
+      total: 0,
+      keyword: "",
+      mournAll: ''
+    };
+  },
+  components: {
+    PageBottom,
+  },
+  mounted() {
+    // this.$nextTick(()=> {
+    //   this.$refs.music.play()
+    // })
+    this.getMournList()
+    this.getAllNum()
+    // let oAudio = document.querySelector('#audio')
+    // oAudio.onended = function() {
+    //   oAudio.load()
+    //   oAudio.play()
+    // }
+    // this.audioAutoPlay()
+    // setTimeout(() => {
+    //   this.$refs.music.currentTime = 0;
+    //   this.$refs.music.play();
+    // }, 100);
+     
+  },
+  methods: {
+    // 自动播放
+    audioAutoPlay() {
+      let audio = document.getElementById('audio')
+      audio.play()
+      document.removeEventListener('touchstart',this.audioAutoPlay)
+    },
+    // 获取全部数据
+    getAllNum() {
+      getAllNum().then(res => {
+        console.log(res)
+        this.mournAll = res.data
+      })
+    },
+    // 获取捐献列表
+    getMournList() {
+      let obj = this
+      getMournList({
+        page: obj.page,
+        search: obj.keyword,
+        rows:  obj.limit
+      }).then(res => {
+        console.log(res)
+        obj.list = []
+        obj.list = res.data.data
+        obj.total = res.data.total
+      })
+    },
+    goHome() {
+      this.$router.push('/home')
+    },
+    // 页码改变触发
+    currentChange(e) {
+      this.page = e;
+      this.getMournList()
+      // console.log()
+      // this.list = e;
+      // this.getList();
+    },
+    // 获取捐献列表
+    getList() {
+      this.page = 1
+      this.getMournList()
+    },
+    // 在线悼念
+    goDaonian(item) {
+      this.$refs.music.play();
+      this.$router.push("/mourn/detail?id=" + item.id);
+
+    },
+  },
+  computed: {
+    boxHeight() {
+      console.log(Math.round(this.list / 4), "Math.round(this.list/4)");
+      return Math.round(this.list / 4);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+div {
+  box-sizing: border-box;
+}
+.bg {
+  background: #dbe2ee;
+}
+.base-bg {
+  width: 100%;
+  margin: auto;
+  //   padding-top: 66%;
+  img {
+    // position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+  }
+}
+.list-wrap {
+  position: relative;
+  width: 1082px;
+  // min-height: 1845px;
+  height: auto;
+  background: #ffffff;
+  margin: auto;
+  margin-top: -508px;
+  padding: 18px 13px;
+  margin-bottom: 126px;
+  .list {
+    width: 100%;
+    // min-height: 1845px;
+    padding-bottom: 100px;
+    // height: 100%;
+    // min-height: 100%;
+    border: 8px solid #006061;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    padding-top: 62px;
+    .list-tit {
+      width: 258px;
+      height: 52px;
+      line-height: 52px;
+      background: #006061;
+      text-align: center;
+      font-size: 19px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #ffffff;
+      position: absolute;
+      top: -8px;
+      left: -8px;
+    }
+    .list-item {
+      text-align: center;
+      width: 203px;
+      height: 278px;
+      //   margin-bottom: 40px;
+      margin: 40px 20px;
+      .item-logo {
+        width: 203px;
+        height: 203px;
+        position: relative;
+        .logo-pepo {
+          width: 160px;
+          height: 160px;
+          border-radius: 50%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          margin: auto;
+        }
+        .logo-hq {
+          width: 203px;
+          height: 203px;
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+        // background-image: url(../../assets/img/hq.png);
+      }
+      .item-name {
+        padding: 13px 0;
+        font-size: 21px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #071b2a;
+      }
+      .item-btn {
+        width: 97px;
+        line-height: 29px;
+        background: #006061;
+        border-radius: 5px;
+        font-size: 15px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #ffffff;
+        margin: auto;
+      }
+    }
+  }
+}
+.serch-wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  height: 33px;
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  .search-left {
+    display: flex;
+    align-items: center;
+    height: 33px;
+    font-size: 15px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #031a2a;
+    margin-right: 10px;
+  }
+  .search {
+    padding-left: 13px;
+    padding-right: 13px;
+    width: 295px;
+    height: 33px;
+    line-height: 33px;
+    background: #ffffff;
+    border: 1px solid #cccccc;
+    border-radius: 10px;
+    // margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    input {
+      width: 235px;
+      font-size: 16px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      outline: none;
+      border: none;
+    }
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+.page-wrap {
+  position: absolute;
+  bottom: 30px;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+.top-btn {
+  width: 100%;
+  min-width: 1800px;
+  height: 40px;
+  background: rgba($color: #ffff, $alpha: 0.85);
+  position: absolute;
+  // opacity: 0.85;
+  display: flex;
+  // justify-content: ;
+  align-items: center;
+  text-align: center;
+  font-size: 13px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #031a2a;
+  .top-item {
+    width: 50%;
+    img {
+      width: 15px;
+      height: 15px;
+      // margin-left: 6px;
+    }
+  }
+}
+</style>

src/views/newContent/hhs/List.vue

@@ -84,7 +84,7 @@ export default {
         limit: obj.limit,
         key: keyword,
       }).then((res) => {
-        obj.newList = res.data.list.sort(this.compare("id"));
+        obj.newList = res.data.list;
         obj.total = res.data.count;
       });
     },

src/views/newContent/jls/List.vue

@@ -84,7 +84,7 @@ export default {
         limit: obj.limit,
         key: keyword,
       }).then((res) => {
-        obj.newList = res.data.list.sort(this.compare("id"));
+        obj.newList = res.data.list;
         obj.total = res.data.count;
       });
     },

src/views/newContent/jlx/List.vue

@@ -84,7 +84,7 @@ export default {
         limit: obj.limit,
         key: keyword,
       }).then((res) => {
-        obj.newList = res.data.list.sort(this.compare("id"));
+        obj.newList = res.data.list;
         obj.total = res.data.count;
       });
     },

src/views/newContent/jzq/List.vue

@@ -84,7 +84,7 @@ export default {
         limit: obj.limit,
         key: keyword,
       }).then((res) => {
-        obj.newList = res.data.list.sort(this.compare("id"));
+        obj.newList = res.data.list;
         obj.total = res.data.count;
       });
     },

src/views/newContent/ssq/List.vue

@@ -84,7 +84,7 @@ export default {
         limit: obj.limit,
         key: keyword,
       }).then((res) => {
-        obj.newList = res.data.list.sort(this.compare("id"));
+        obj.newList = res.data.list;
         obj.total = res.data.count;
       });
     },

src/views/newContent/sss/List.vue

@@ -84,7 +84,7 @@ export default {
         limit: obj.limit,
         key: keyword,
       }).then((res) => {
-        obj.newList = res.data.list.sort(this.compare("id"));
+        obj.newList = res.data.list;
         obj.total = res.data.count;
       });
     },

src/views/newContent/szs/List.vue

@@ -84,7 +84,7 @@ export default {
         limit: obj.limit,
         key: keyword,
       }).then((res) => {
-        obj.newList = res.data.list.sort(this.compare("id"));
+        obj.newList = res.data.list;
         obj.total = res.data.count;
       });
     },

src/views/news/Detail.vue

@@ -1,36 +1,77 @@
 <template>
-	<div class="new-detail">
-		<dcontent :content="content"></dcontent>
-	</div>
+  <div class="new-detail">
+    <dcontent :content="content"></dcontent>
+  </div>
 </template>
 
 <script>
-	import { details } from '../../request/api.js'
-	export default {
-		data() {
-			return {
-				content: '',
-				detail: {},
-				idd:0
-			}
-		},
-		created() {
-			this.getContent()
-		},
-		methods:{
-			getContent() {
-				let obj = this
-				this.idd = this.$route.query.id
-				obj.getDetail()
-			},
-			getDetail() {
-				let obj = this
-				details({},this.idd).then(res => {
-					obj.content = res.data.content
-				})
-			}
-		}
-	}
+import wx from "weixin-js-sdk";
+import { details, wechatConfig } from "../../request/api.js";
+export default {
+  data() {
+    return {
+      content: "",
+      detail: {},
+      idd: 0,
+    };
+  },
+  created() {
+    this.getContent();
+    console.log(wx);
+  },
+  methods: {
+    getContent() {
+      let obj = this;
+      this.idd = this.$route.query.id;
+      obj.getDetail();
+    },
+    getDetail() {
+      let obj = this;
+      details({}, this.idd).then((res) => {
+        obj.content = res.data.content;
+        console.log(res);
+        let mess = {
+          title: "荆州市红十字会",
+          link: window.location.href, // 分享链接
+          imgUrl: "http://jzswx.jzrc.org.cn/index/static/img/002.png", // 分享图标
+          desc: res.data.title,
+          success: function () {
+            console.log(" 成功调用分享");
+          },
+          fail: function (e) {
+            console.log(e);
+          },
+        };
+        wx.checkJsApi({
+          jsApiList: ["updateAppMessageShareData"],
+          success: function (res) {
+			  console.log(res,'校驗結果')
+		  },
+        });
+		wechatConfig({
+			// url: 'pages/applic/location',			
+			url: 'http://jzsred.jzrc.org.cn',
+		}).then(res => {
+			console.log(res)
+		})
+		wx.config({
+				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+				appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
+				timestamp: data.timestamp, // 必填，生成签名的时间戳
+				nonceStr: data.nonceStr, // 必填，生成签名的随机串
+				signature: data.signature, // 必填，签名，见附录1
+				jsApiList: data.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
+			});
+        console.log(mess);
+        // wx.updateAppMessageShareData(mess);
+        wx.onMenuShareAppMessage(mess); // 即将废弃
+        // 分享朋友圈
+        // wx.updateTimelineShareData(mess);
+        wx.onMenuShareTimeline(mess); // 即将废弃
+      });
+    },
+  },
+};
 </script>
 
 <style>

src/views/news/List.vue

@@ -71,7 +71,8 @@
 					limit: obj.limit,
 					key: obj.keyword
 				}).then(res => {
-					obj.newList = res.data.list.sort(this.compare('id'))
+					obj.newList = res.data.list
+					console.log(obj.newList,'obj.newList')
 					// var newArrayData=res.data.list.sort(compare('Id'))
 					obj.total = res.data.count
 				})

src/views/organs/List.vue

@@ -93,7 +93,7 @@ export default {
         limit: obj.limit,
         key: keyword,
       }).then((res) => {
-        obj.newList = res.data.list.sort(this.compare("id"));
+        obj.newList = res.data.list;
         // var newArrayData=res.data.list.sort(compare('Id'))
         obj.total = res.data.count;
       });

src/views/popularScience/List.vue

@@ -1,176 +1,207 @@
 <template>
-	<div class="list">
-		<div class="serch-wrapper">
-			<div class="search">
-				<input type="text" v-model="keyword" placeholder="请输入内容进行搜索" class="" @keyup.enter="getList(keyword)" />
-				<img src="../../assets/img/search.png" class="hand" @click="getList(keyword)">
-			</div>
-		</div>
-		<div class="empty" v-if="tipList.length == 0">
-			暂无数据
-		</div>
-		<div class="wrapper">
-			<div class="tip"  v-for="item in tipList" :key="item.id" @click="tipClick(item.id)">
-				<img :src="item.image_input[0]" />
-				<div class="info hand">
-					<div class="title clamp">{{item.title}}</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" :page-size="7"></el-pagination>
-		</div>
-	</div>
-</template>
-
+  <div class="list">
+    <div class="serch-wrapper">
+      <div class="search">
+        <input
+          type="text"
+          v-model="keyword"
+          placeholder="请输入内容进行搜索"
+          class=""
+          @keyup.enter="getList()"
+        />
+        <img
+          src="../../assets/img/search.png"
+          class="hand"
+          @click="getList()"
+        />
+      </div>
+    </div>
+    <div class="empty" v-if="tipList.length == 0">暂无数据</div>
+    <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 hand">
+          <div class="title clamp">{{ item.title }}</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"
+        :page-size="7"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+
 <script>
-	import { splist } from '../../request/api.js'
-	
-	export default {
-		data() {
-			return {
-				tipList: [],
-				alllist: [],
-				total: 0,
-				page: 1,
-				limit: 7,
-				keyword: ''
-			}
-		},
-		created() {
-			this.getAllList()
-		},
-		methods: {
-			tipClick(id) {
-				this.$router.push('/popularScience/detail?id=' + id)
-			},
-			//分页页码改变触发事件
-			currentChange(e) {
-				this.page = e
-				this.getList()
-			},
-			getAllList() {
-				let obj = this
-				let data = {
-					page: this.page,
-					limit: this.limit
-				}
-				splist().then(({data}) => {
-					obj.total = data.count
-					obj.tipList = data.list
-				})
-			},
-			getList(keyword) {
-				let obj = this
-				if(keyword) {
-					obj.page = 1
-				}
-				let data = {
-					page: this.page,
-					limit: this.limit,
-					name: this.keyword
-				}
-				splist(data).then(({data}) => {
-					obj.tipList = data.list
-				})
-			}
-		}
-	}
-</script>
-
+import { splist, getArtList } from "../../request/api.js";
+
+export default {
+  data() {
+    return {
+      tipList: [],
+      alllist: [],
+      total: 0,
+      page: 1,
+      limit: 7,
+      keyword: "",
+    };
+  },
+  created() {
+    this.getAllList();
+  },
+  methods: {
+    tipClick(id) {
+      this.$router.push("/popularScience/detail?id=" + id);
+    },
+    //分页页码改变触发事件
+    currentChange(e) {
+      this.page = e;
+      this.getList();
+    },
+    getAllList() {
+      let obj = this;
+      let data = {
+        page: this.page,
+        limit: this.limit,
+      };
+      getArtList({
+        ifyid: 1,
+        page: obj.page,
+        limit: obj.limit,
+        key: obj.keyword,
+      }).then(({ data }) => {
+        obj.total = data.count;
+        obj.tipList = data.list;
+		console.log( obj.tipList,' obj.tipList+++++')
+      });
+    },
+    getList() {
+      let obj = this;
+      if (obj.keyword) {
+        obj.page = 1;
+      }
+    //   let data = {
+    //     page: this.page,
+    //     limit: this.limit,
+    //     name: this.keyword,
+    //   };
+     getArtList({
+        ifyid: 1,
+        page: obj.page,
+        limit: obj.limit,
+        key: obj.keyword,
+      }).then(({ data }) => {
+        obj.tipList = data.list;
+      });
+    },
+  },
+};
+</script>
+
 <style lang="scss" scoped>
-	.list {
-		position: relative;
-	}
-	.empty {
-		text-align: center;
-		color: #999;
-		height: 400px;
-		line-height: 400px;
-	}
-	.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;
-	}
-	.serch-wrapper {
-		display: flex;
-		height: 33px;
-		position: absolute;
-		top: -80px;
-		right: -50px;
-	
-		.search {
-	
-			padding-left: 13px;
-			padding-right: 13px;
-			width: 295px;
-			height: 33px;
-			line-height: 33px;
-			background: #FFFFFF;
-			border: 1px solid #CCCCCC;
-			border-radius: 10px;
-			// margin-bottom: 10px;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-	
-			input {
-				width: 235px;
-				font-size: 16px;
-				font-family: PingFang SC;
-				font-weight: bold;
-				outline: none;
-				border: none;
-			}
-	
-			img {
-				width: 20px;
-				height: 20px;
-			}
-		}
-	}
-</style>
+.list {
+  position: relative;
+}
+.empty {
+  text-align: center;
+  color: #999;
+  height: 400px;
+  line-height: 400px;
+}
+.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;
+}
+.serch-wrapper {
+  display: flex;
+  height: 33px;
+  position: absolute;
+  top: -80px;
+  right: -50px;
+
+  .search {
+    padding-left: 13px;
+    padding-right: 13px;
+    width: 295px;
+    height: 33px;
+    line-height: 33px;
+    background: #ffffff;
+    border: 1px solid #cccccc;
+    border-radius: 10px;
+    // margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    input {
+      width: 235px;
+      font-size: 16px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      outline: none;
+      border: none;
+    }
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+</style>

src/views/publicity/List.vue

@@ -65,7 +65,7 @@ export default {
 					limit: obj.limit,
 					key: obj.keyword
 				}).then(res => {
-				obj.newList = res.data.list.sort(this.compare('id'))
+				obj.newList = res.data.list
 				obj.total = res.data.count
 			})
 		},

src/views/regulations/List.vue

@@ -47,7 +47,7 @@ export default {
 				page: obj.page,
 				limit: obj.limit
 			}).then(res => {
-				obj.newList = res.data.list.sort(this.compare('id'))
+				obj.newList = res.data.list
 				obj.total = res.data.count
 			})
 		},
@@ -108,4 +108,4 @@ export default {
 		margin-top: 50px;
 		text-align: center;
 	}
-</style>
+</style>