Home Explore Help
Register Sign In
lhl
/
newjzpc
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

5-6-1

lhl 10 months ago
parent
dae751ea29
commit
4e37d6544a
36 changed files with 1286 additions and 57 deletions
Split View Show Diff Stats
  1. 13 0
      package-lock.json
  2. 1 0
      package.json
  3. 1 1
      public/index.html
  4. 34 14
      src/App.vue
  5. 2 2
      src/assets/css/base.css
  6. 1 1
      src/assets/css/reset.css
  7. BIN
      src/assets/img/black.png
  8. BIN
      src/assets/img/blackk.png
  9. BIN
      src/assets/img/bmtb.png
  10. BIN
      src/assets/img/dn-top.png
  11. BIN
      src/assets/img/dn-top1.png
  12. BIN
      src/assets/img/indexs-bg-t.png
  13. BIN
      src/assets/img/indexs-bg.png
  14. BIN
      src/assets/img/lockmore.png
  15. BIN
      src/assets/img/ydn-bg.png
  16. BIN
      src/assets/music/sbhh.mp3
  17. 2 2
      src/components/leftNav/LeftNav.vue
  18. 1 1
      src/components/navBar/NavBar.vue
  19. 12 3
      src/components/pageBottom/PageBottom.vue
  20. 1 1
      src/request/request.js
  21. 30 6
      src/router.js
  22. 9 2
      src/store.js
  23. 1 1
      src/views/Help.vue
  24. 1 1
      src/views/LoveList.vue
  25. 6 6
      src/views/concat/common/base.vue
  26. 6 2
      src/views/concat/common/slist.vue
  27. 1 1
      src/views/concat/donation/List.vue
  28. 1 1
      src/views/concat/expenditure/List.vue
  29. 1 1
      src/views/concat/finance/List.vue
  30. 1 1
      src/views/concat/publicity/List.vue
  31. 1 1
      src/views/concat/rules/List.vue
  32. 12 8
      src/views/mourn/Detail.vue
  33. 503 0
      src/views/mourn/Details.vue
  34. 1 1
      src/views/mourn/Index.vue
  35. 333 0
      src/views/mourn/Indexs.vue
  36. 311 0
      src/views/mourn/indexss.vue

+ 13 - 0
package-lock.json
View File 

@@ -2936,6 +2936,11 @@
 
         }

       }

     },

+    "comutils": {

+      "version": "1.1.19",

+      "resolved": "https://registry.npmmirror.com/comutils/-/comutils-1.1.19.tgz",

+      "integrity": "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="

+    },

     "concat-map": {

       "version": "0.0.1",

       "resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",

@@ -10828,6 +10833,14 @@
 
       "resolved": "https://registry.nlark.com/vue-router/download/vue-router-3.5.1.tgz?cache=0&sync_timestamp=1620899536020&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-router%2Fdownload%2Fvue-router-3.5.1.tgz",

       "integrity": "sha1-7fPPSQeVLR4Fg+B5I3Igxf9utsk="

     },

+    "vue-seamless-scroll": {

+      "version": "1.1.23",

+      "resolved": "https://registry.npmmirror.com/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz",

+      "integrity": "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA==",

+      "requires": {

+        "comutils": "^1.1.9"

+      }

+    },

     "vue-style-loader": {

       "version": "4.1.3",

       "resolved": "https://registry.nlark.com/vue-style-loader/download/vue-style-loader-4.1.3.tgz",

+ 1 - 0
package.json
View File 

@@ -15,6 +15,7 @@
 
     "md5": "^2.3.0",
 
     "vue": "^2.6.10",
 
     "vue-router": "^3.0.3",
 
+    "vue-seamless-scroll": "^1.1.23",
 
     "vuex": "^3.0.1",
 
     "weixin-js-sdk": "^1.6.0"
 
   },

+ 1 - 1
public/index.html
View File 

@@ -6,7 +6,7 @@
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">

 	<meta name="Keywords" content="荆州市红十字会官方网站,荆州市红十字会官方,荆州市红十字会官网,荆州红会官网,荆州红会,荆州市,荆州,红十字会">

     <link rel="icon" href="<%= BASE_URL %>favicon.ico">

-    <title>荆州市红十字会-官方网站</title>

+    <title>荆州市红十字会</title>

   </head>

   <body>

     <noscript>

+ 34 - 14
src/App.vue
View File 

@@ -1,18 +1,22 @@
 
 <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')">

+		<div v-if="pageloading">

+		<template v-if="path && !(path == '/mourn/index' || path == '/mourn/detail' || path == '/mourn/indexs' || path == '/mourn/indexss'|| path == '/mourn/details')">

+			<div class="bg" >

+				<img src="@/assets/img/m1.png" />

+			</div>

+			<top-logo ></top-logo>

+			<nav-bar ></nav-bar>

+			<div class="main-wrapper" >

+				<router-view />

+			</div>

+		</template>

+		<div v-if="path && (path == '/mourn/detail' || path == '/mourn/index'|| path == '/mourn/indexs' || path == '/mourn/details'|| path == '/mourn/indexss')">

 			<router-view />

 		</div>

-		<div v-if="path == '/mourn/detail' || path == '/mourn/index'">

-			<router-view />

+		<audio id="audio" :src="require('./assets/music/sbhh.mp3')" loop ref="music" controls hidden></audio>

+		<page-bottom v-if="!(path == '/mourn/detail' || path == '/mourn/index' || path == '/mourn/indexs' || path == '/mourn/details'|| path == '/mourn/indexss')"></page-bottom>

 		</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>

 </template>

 <script>

@@ -28,18 +32,24 @@
 
 		data() {

 			return {

 				path: "",

+				pageloading:false,

 			};

 		},

 		created() {},

 		mounted() {

 			this.path = this.$route.path;

-

+			console.log(this.path,'this.path');

 		},

 		watch: {

 			$route(e) {

 				//   alert(e)

 				this.path = e.path;

+				console.log(this.path,'this.path2');

+				this.pageloading = true;

 				if (e.fullPath.indexOf("mourn") != -1) {

+					// if(e.fullPath.indexOf('indexs') == -1) {

+						

+					// }

 					this.playMusic();

 					// document.getElementById('app').addEventListener('mousemove', ()=> {

 					// 	// console.log('dddddd')

@@ -67,10 +77,17 @@
 
 			playMusic() {

 				let obj = this

 				obj.$refs.music.play().catch(err => {

-					obj.$confirm('网页背景音乐已暂停，是否继续播放？', '提示', {

+					

+					obj.$confirm('欢迎进入荆州市红十字会纪念堂', '', {

 						confirmButtonText: '确定',

 						cancelButtonText: '取消',

-						type: 'warning'

+						showCancelButton: false,

+						title: '',

+						center: true,

+						iconClass: 'ddddd',

+						showClose: false,

+						customClass: 'bbbb'

+						// type: 'warning'

 					}).then(() => {

 						obj.playMusic()

 						// this.$message({

@@ -81,7 +98,7 @@
 
 						// this.$message({

 						//   type: 'info',

 						//   message: '已取消删除'

-						// });          

+						// });     

 					});

 				});

 			},

@@ -92,6 +109,9 @@
 
 	};

 </script>

 <style lang="scss" scoped>

+	.ddddd {

+		display: none;

+	}

 	.body-box {

 		-webkit-filter: grayscale(100%); /* webkit */

 		-moz-filter: grayscale(100%); /*firefox*/

+ 2 - 2
src/assets/css/base.css
View File 

@@ -13,10 +13,10 @@
 
 	-webkit-box-orient:vertical;

 	-webkit-line-clamp:2;

 }

-

+/* 

 html {

   overflow-y: scroll;

-}

+} */

 

 /* 鼠标显示为手 */

 .hand {

+ 1 - 1
src/assets/css/reset.css
View File 

@@ -46,4 +46,4 @@ a {
 
 }

 strong {

 	font-weight: bold;

-}
 
+}

BIN
src/assets/img/black.png
View File


BIN
src/assets/img/blackk.png
View File


BIN
src/assets/img/bmtb.png
View File


BIN
src/assets/img/dn-top.png
View File


BIN
src/assets/img/dn-top1.png
View File


BIN
src/assets/img/indexs-bg-t.png
View File


BIN
src/assets/img/indexs-bg.png
View File


BIN
src/assets/img/lockmore.png
View File


BIN
src/assets/img/ydn-bg.png
View File


BIN
src/assets/music/sbhh.mp3
View File


+ 2 - 2
src/components/leftNav/LeftNav.vue
View File 

@@ -111,10 +111,10 @@
 
 						title = '财务信息'

 						break

 					case '/concat/donation/list':

-						title = '社会捐赠信息'

+						title = '捐赠公示'

 						break

 					case '/concat/donation/detail':

-						title = '社会捐赠信息'

+						title = '捐赠公示'

 						break

 					case '/concat/expenditure/list':

 						title = '捐赠款物支出信息'

+ 1 - 1
src/components/navBar/NavBar.vue
View File 

@@ -38,7 +38,7 @@
 
 					},

 					{

 						path: '/help',

-						title: '救助项目',

+						title: '公益项目',

 						imgUrl: require('@/assets/img/n2.png'),

 					},

 					{

+ 12 - 3
src/components/pageBottom/PageBottom.vue
View File 

@@ -1,7 +1,12 @@
 
 <template>

 	<div class="view-bottom" :style="{'background': backgroundBg,'color': textcolor}">

 		<div class="bqsy">版权所有：Copyright©2017-2037 　版权所有 荆州市红十字会</div>

-		<div class="address">地址：荆州市沙市区关沮镇青藜路128号 <a href="https://beian.miit.gov.cn/#/Integrated/recordQuery" class="goto">鄂ICP备15019661号-1</a></div>

+		<div class="address">

+			<img src="../../assets/img/bmtb.png" alt="" class="logo"/>

+			<a href="https://beian.mps.gov.cn/#/query/websearch?code=42100202030016" rel="noreferrer " target="_blank" class="goto">鄂公网安备4218202030016</a>

+		</div>

+		<div class="address">地址：荆州市沙市区关沮镇青藜路128号 </div>

+		<!-- <a href="https://beian.miit.gov.cn/#/Integrated/recordQuery" class="goto">鄂ICP备15019661号-1</a> -->

 	</div>

 </template>

 

@@ -45,13 +50,17 @@ export default {
 
 		}

 		.bqsy {

 			padding-top: 65px;

-			margin-bottom: 16px;

 		}

 		.address {

-			

+			padding: 10px;

 		}

 	}

 	.goto {

 		color: #fff;

 	}

+	.logo {

+		width: 20px;

+		height: 20px;

+		margin-right: 5px;

+	}

 </style>

+ 1 - 1
src/request/request.js
View File 

@@ -14,7 +14,7 @@ import store from '../store.js'
 
 const service = axios.create({
 
 	baseURL: store.state.www, // url = base url + request url
 
 	// withCredentials: true, // send cookies when cross-domain requests
 
-	timeout: 5000 // request timeout
 
+	timeout: 50000 // request timeout
 
 })
 
 
 // request interceptor

+ 30 - 6
src/router.js
View File 

@@ -238,7 +238,7 @@ export default new Router({
 
 				name: 'donation',

 				component: () => import('./views/concat/Donation.vue'),

 				meta: {

-					title: '社会捐赠信息'

+					title: '捐赠公示'

 				},

 				redirect: '/concat/donation/list',

 				children: [

@@ -247,7 +247,7 @@ export default new Router({
 
 						name: 'donationList',

 						component: () => import('./views/concat/donation/List.vue'),

 						meta: {

-							title: '社会捐赠信息'

+							title: '捐赠公示'

 						}

 					},

 					{

@@ -255,7 +255,7 @@ export default new Router({
 
 						name: 'donationdetail',

 						component: () => import('./views/concat/donation/Detail.vue'),

 						meta: {

-							title: '社会捐赠信息'

+							title: '捐赠公示'

 						}

 					}

 				]

@@ -994,7 +994,7 @@ export default new Router({
 
 		name: 'help',

 		component: () => import('./views/Help.vue'),

 		meta: {

-			title: '我要求助'

+			title: '公益项目'

 		},

 		redirect: '/help/list',

 		children: [

@@ -1003,7 +1003,7 @@ export default new Router({
 
 				name: 'helpList',

 				component: () => import('./views/help/List.vue'),

 				meta: {

-					title: '我要求助'

+					title: '公益项目'

 				}

 			},

 			{

@@ -1011,7 +1011,7 @@ export default new Router({
 
 				name: 'helpdetail',

 				component: () => import('./views/help/Detail.vue'),

 				meta: {

-					title: '我要求助'

+					title: '公益项目'

 				}

 			}

 		]

@@ -1087,6 +1087,22 @@ export default new Router({
 
 					title: '纪念堂'

 				}

 			},

+			{

+				path: 'indexs',

+				name: 'mournIndexs',

+				component: () => import('./views/mourn/Indexs.vue'),

+				meta: {

+					title: '纪念堂'

+				}

+			},

+			{

+				path: 'indexss',

+				name: 'mournIndexss',

+				component: () => import('./views/mourn/indexss.vue'),

+				meta: {

+					title: '纪念堂'

+				}

+			},

 			{

 				path: 'detail',

 				name: 'mournDetail',

@@ -1094,6 +1110,14 @@ export default new Router({
 
 				meta: {

 					title: '纪念堂'

 				}

+			},

+			{

+				path: 'details',

+				name: 'mournDetails',

+				component: () => import('./views/mourn/Details.vue'),

+				meta: {

+					title: '纪念堂'

+				}

 			}

 		]

 	},

+ 9 - 2
src/store.js
View File 

@@ -7,10 +7,17 @@ export default new Vuex.Store({
 
   state: {

 	// www: "https://www.jzrc.org.cn"

 	www:'',

-  baseURL: 'http://jzsred.jzrc.org.cn'

+  baseURL: 'http://jzsred.jzrc.org.cn',

+  isPlay: false,

   },

   mutations: {

-

+	setPlay(state) {

+		console.log('ok')

+		state.isPlay = true

+	},

+	errPlay(state) {

+		state.isPlay = false

+	}

   },

   actions: {

+ 1 - 1
src/views/Help.vue
View File 

@@ -2,7 +2,7 @@
 
 	<div class="regulations">

 		<div class="right-content">

 			<div class="title moren">

-				救助项目

+				公益项目

 			</div>

 			<div style="padding: 35px 50px 35px 50px;" class="line">

 				<router-view></router-view>

+ 1 - 1
src/views/LoveList.vue
View File 

@@ -1,7 +1,7 @@
 
 <template>

 	<div class="love-list">

 		<div class="search">

-			<input type="text" v-model="keyword" placeholder="请输入捐赠者进行搜索" class="" @keyup.enter="getLiveList(keyword)" />

+			<input type="text" v-model="keyword" placeholder="捐赠信息查询" class="" @keyup.enter="getLiveList(keyword)" />

 			<img src="../assets/img/search.png" class="hand" @click="getLiveList(keyword)">

 		</div>

 		<div class="list-title flex">

+ 6 - 6
src/views/concat/common/base.vue
View File 

@@ -29,14 +29,14 @@
 
 					path: '/concat/finance'
 
 				},{
 
 					index: 3,
 
-					name: '社会捐赠信息',
 
+					name: '捐赠公示',
 
 					path: '/concat/donation'
 
 				},
 
-				{
 
-					index: 4,
 
-					name: '捐赠款物支出信息',
 
-					path: '/concat/expenditure'
 
-				},
 
+				// {
 
+				// 	index: 4,
 
+				// 	name: '捐赠款物支出信息',
 
+				// 	path: '/concat/expenditure'
 
+				// },
 
 				{
 
 					index: 5,
 
 					name: '联系我们',

+ 6 - 2
src/views/concat/common/slist.vue
View File 

@@ -2,7 +2,7 @@
 
 	<div class="new-list">
 
 		<div class="serch-wrapper">
 
 			<div class="search">
 
-				<input type="text" v-model="keyword" placeholder="请输入内容进行搜索" class="" @keyup.enter="getList(keyword)" />
 
+				<input type="text" v-model="keyword" :placeholder="tit" class="" @keyup.enter="getList(keyword)" />
 
 				<img src="../../../assets/img/search.png" class="hand" @click="getList(keyword)">
 
 			</div>
 
 		</div>
 
@@ -24,9 +24,13 @@
 
 import { getArtList } from '../../../request/api.js';
 
 export default {
 
 	props: {
 
+		tit: {
 
+			type: String,
 
+			default: '请输入内容进行搜索',
 
+		},
 
 		path: {
 
 			type: String,
 
-			default: ''
 
+			default: '',
 
 		},
 
 		cid: {
 
 			type: Number,

+ 1 - 1
src/views/concat/donation/List.vue
View File 

@@ -1,5 +1,5 @@
 
 <template>
 
-	<slist :path="path" :cid="cid"></slist>
 
+	<slist :path="path" :cid="cid" :tit="'捐赠款物查询'"></slist>
 
 </template>
 
 
 <script>

+ 1 - 1
src/views/concat/expenditure/List.vue
View File 

@@ -1,5 +1,5 @@
 
 <template>
 
-	<slist :path="path" :cid="cid"></slist>
 
+	<slist :path="path" :cid="cid" :tit="'捐赠款物查询'"></slist>
 
 </template>
 
 
 <script>

+ 1 - 1
src/views/concat/finance/List.vue
View File 

@@ -1,5 +1,5 @@
 
 <template>
 
-	<slist :path="path" :cid="cid"></slist>
 
+	<slist :path="path" :cid="cid" :tit="'捐赠款物查询'"></slist>
 
 </template>
 
 
 <script>

+ 1 - 1
src/views/concat/publicity/List.vue
View File 

@@ -1,5 +1,5 @@
 
 <template>
 
-	<slist :path="path" :cid="cid"></slist>
 
+	<slist :path="path" :cid="cid" :tit="'捐赠款物查询'"></slist>
 
 </template>
 
 
 <script>

+ 1 - 1
src/views/concat/rules/List.vue
View File 

@@ -1,5 +1,5 @@
 
 <template>
 
-	<slist :path="path" :cid="cid"></slist>
 
+	<slist :path="path" :cid="cid" :tit="'捐赠款物查询'"></slist>
 
 </template>
 
 
 <script>

+ 12 - 8
src/views/mourn/Detail.vue
View File 

@@ -42,17 +42,21 @@
 
               <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">

+			  <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" v-if="!peo.fatal">

               <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 class="base-item" v-if="peo.fatal">

+              <div class="base-item-name">出生日期</div>

+              <div class="base-val">&nbsp;&nbsp;{{peo.fatal}}</div>

             </div>

             <div class="base-item">

               <div class="base-item-name">捐献日期</div>

+ 503 - 0
src/views/mourn/Details.vue
View File 

@@ -0,0 +1,503 @@
 
+<template>
 
+	<div class="bg">
 
+		<div class="base-bg">
 
+			<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="" style="width: 26px;height: 18px;" />
 
+							<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.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" v-if="!peo.fatal">
 
+								<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" v-if="peo.fatal">
 
+								<div class="base-item-name">出生日期</div>
 
+								<div class="base-val">&nbsp;&nbsp;{{peo.fatal}}</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 style="display: flex;justify-content: center;align-items: center;height: 200px;width: 100%;">
 
+						<img src="../../assets/img/blackk.png" alt="" style="width: 137px;height: 36px;" class="hand" @click="goBlack"/>
 
+					</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: {
 
+			goBlack() {
 
+				this.$router.back();
 
+			},
 
+			// 获取个人掉念数
 
+			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 lang="scss" scoped>
 
+	div {
 
+		box-sizing: border-box;
 
+	}
 
+
 
+	.bg {
 
+		background: #dbe2ee;
 
+		width: 100%;
 
+		overflow: hidden;
 
+	}
 
+
 
+	.base-bg {
 
+		width: 100%;
 
+		height: 100%;
 
+		min-width: 1920px;
 
+		background-image: url('../../assets/img/mourn-bg.png');
 
+		// position: ;
 
+		background-size: 100% 100%;
 
+		background-repeat: no-repeat;
 
+		position: absolute;
 
+		top: 0;
 
+		bottom: 0;
 
+		right: 0;
 
+		left: 0;
 
+		margin: auto;
 
+	}
 
+
 
+	.list-wrap {
 
+		position: absolute;
 
+		top: 0;
 
+		left: 0;
 
+		right: 0;
 
+		bottom: 0;
 
+		height: 975px;
 
+
 
+		width: 1082px;
 
+		// min-height: 1845px;
 
+		// height: auto;
 
+		background: #ffffff;
 
+		margin: auto;
 
+		// margin-top: -508px;
 
+		padding: 18px 13px;
 
+
 
+		.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>

+ 1 - 1
src/views/mourn/Index.vue
View File 

@@ -40,7 +40,7 @@
 
             />

           </div>

         </div>

-        <div class="list-item" v-for="item in list" :key="item.image">

+        <div class="list-item" v-for="item in list" :key="item.id">

           <div class="item-logo">

             <img class="logo-pepo" :src="item.image" />

             <img class="logo-hq" src="../../assets/img/hq.png" />

+ 333 - 0
src/views/mourn/Indexs.vue
View File 

@@ -0,0 +1,333 @@
 
+<template>
 
+	<div>
 
+		<div class="bg" v-if="isError">
 
+			<div class="bg-btn hand" @click="goIndex"></div>
 
+		</div>
 
+		<div class="bg bg2" v-else>
 
+			<div class="list-wrap">
 
+				<div class="search-left">
 
+					<img src="../../assets/img/flower-black.png" alt="" />
 
+					<div class="moren">悼念总数：{{mournAll || 0}}</div>
 
+				</div>
 
+				<img src="../../assets/img/dn-top1.png" alt="" class="list-top" />
 
+				<vue-seamless-scroll :data="list" :class-option="classOption" class="seamless-warp">
 
+					<div class="list flex">
 
+						<div class="list-item" v-for="item in list" :key="item.id">
 
+							<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>
 
+				</vue-seamless-scroll>
 
+				<!-- <div class="list flex">
 
+					<div class="list-item" v-for="item in list" :key="item.id">
 
+						<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> -->
 
+
 
+				<div class="page-wrap">
 
+					<!-- <el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页"
 
+						@current-change="currentChange" :page-size="12"></el-pagination>
 
+					<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> -->
 
+					<img src="../../assets/img/lockmore.png" alt="" style="width: 137px;height: 36px;" class="hand"
 
+						@click="goIndexs" />
 
+				</div>
 
+			</div>
 
+		</div>
 
+		<audio id="audio" :src="require('../../assets/music/sbhh.mp3')" loop ref="music" controls hidden></audio>
 
+	</div>
 
+</template>
 
+<script>
 
+	import vueSeamlessScroll from 'vue-seamless-scroll';
 
+	import {
 
+		getMournList,
 
+		getAllNum
 
+	} from '../../request/api.js'
 
+	export default {
 
+		components: {
 
+			vueSeamlessScroll
 
+		},
 
+		data() {
 
+			return {
 
+				isError: true,
 
+				list: [],
 
+				page: 1,
 
+				limit: 500,
 
+				total: 0,
 
+				keyword: "",
 
+				mournAll: ''
 
+			};
 
+		},
 
+		computed: {
 
+			classOption() {
 
+				return {
 
+					step: 0.4, // 数值越大速度滚动越快
 
+					limitMoveNum:367, // 开始无缝滚动的数据量 this.dataList.length
 
+					hoverStop: false, // 是否开启鼠标悬停stop
 
+					direction: 1, // 0向下 1向上 2向左 3向右
 
+					openWatch: true, // 开启数据实时监控刷新dom
 
+					singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
 
+					singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
 
+					waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
 
+				};
 
+			},
 
+
 
+		},
 
+		// components: {
 
+		//   PageBottom,
 
+		// },
 
+		mounted() {
 
+			console.log(this.$store.state.isPlay, 'this.$store.state.isPlay')
 
+			if (this.$store.state.isPlay) {
 
+				this.isError = false
 
+			}
 
+			this.getMournList()
 
+			this.getAllNum()
 
+		},
 
+		methods: {
 
+			goIndex() {
 
+				this.$refs.music.play()
 
+				this.isError = false
 
+				// this.$store.mutations.setPlay()
 
+				this.$store.commit('setPlay')
 
+				// console.log('x')
 
+				// this.audioAutoPlay()
 
+			},
 
+			goIndexs() {
 
+				this.$router.push('/mourn/indexss')
 
+			},
 
+			// 自动播放
 
+			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: 500
 
+				}).then(res => {
 
+					console.log(res)
 
+					obj.list = []
 
+					obj.list = res.data.data
 
+					obj.total = res.data.total
 
+					console.log(obj.list, 'obj.list')
 
+				})
 
+			},
 
+			goHome() {
 
+				this.$router.push('/home')
 
+			},
 
+			// 页码改变触发
 
+			currentChange(e) {
 
+				this.page = e;
 
+				this.getMournList()
 
+			},
 
+			// 获取捐献列表
 
+			getList() {
 
+				this.page = 1
 
+				this.getMournList()
 
+			},
 
+			// 在线悼念
 
+			goDaonian(item) {
 
+				this.$refs.music.play();
 
+				this.$router.push("/mourn/details?id=" + item.id);
 
+
 
+			},
 
+		},
 
+	};
 
+</script>
 
+<style lang="scss" scoped>
 
+	* {
 
+		box-sizing: border-box;
 
+	}
 
+
 
+	html {
 
+		background-color: #e9f4ef;
 
+	}
 
+
 
+	.bg {
 
+		width: 100vw;
 
+		width: 1920px;
 
+		height: 100vh;
 
+		height: 1080px;
 
+		background-image: url('../../assets/img/indexs-bg.png');
 
+		background-size: 100% 100%;
 
+		background-repeat: no-repeat;
 
+		position: relative;
 
+		margin: auto;
 
+
 
+		.bg-btn {
 
+			width: 454px;
 
+			height: 94px;
 
+			// background-color: red;
 
+			position: absolute;
 
+			top: 612px;
 
+			left: 733px;
 
+		}
 
+	}
 
+
 
+	.bg2 {
 
+		background-image: url('../../assets/img/indexs-bg-t.png');
 
+
 
+		.list-wrap {
 
+			width: 1741px;
 
+			height: 826px;
 
+			background-color: #d7e9e8;
 
+			border-radius: 20px;
 
+			position: absolute;
 
+			top: 222px;
 
+			left: 0;
 
+			right: 0;
 
+			margin: auto;
 
+			padding: 30px 0;
 
+
 
+			.search-left {
 
+				display: flex;
 
+				align-items: center;
 
+				height: 33px;
 
+				font-size: 15px;
 
+				font-weight: bold;
 
+				color: #031a2a;
 
+				margin-right: 10px;
 
+				position: absolute;
 
+				top: 30px;
 
+				right: 30px;
 
+
 
+				img {
 
+					margin-right: 5px;
 
+				}
 
+			}
 
+
 
+			.list-top {
 
+				display: block;
 
+				margin: auto;
 
+			}
 
+
 
+			.seamless-warp {
 
+				height: 626px;
 
+				overflow: hidden;
 
+			}
 
+
 
+			.list {
 
+				width: 100%;
 
+				// height: 626px;
 
+				padding: 0 138px;
 
+				flex-wrap: wrap;
 
+				// overflow: hidden;
 
+
 
+				.list-item {
 
+					text-align: center;
 
+					width: 203px;
 
+					height: 278px;
 
+					margin: 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;
 
+					}
 
+				}
 
+			}
 
+
 
+			.page-wrap {
 
+
 
+				display: flex;
 
+				justify-content: center;
 
+				// padding: ;
 
+				padding-top: 20px;
 
+
 
+				.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>

+ 311 - 0
src/views/mourn/indexss.vue
View File 

@@ -0,0 +1,311 @@
 
+<template>
 
+	<div>
 
+		<div class="bg" v-if="isError">
 
+			<div class="bg-btn hand" @click="goIndex"></div>
 
+		</div>
 
+		<div class="bg bg2" v-else>
 
+			<div class="list-wrap">
 
+				<div class="search-left">
 
+					<img src="../../assets/img/flower-black.png" alt="" />
 
+					<div class="moren">悼念总数：{{mournAll || 0}}</div>
 
+				</div>
 
+				<div class="black hand" @click="goBlack">
 
+					<!-- <img src="../../assets/img/flower-black.png" alt="" /> -->
 
+					<!-- <div class="moren">悼念总数：{{mournAll || 0}}</div> -->
 
+					<span>返回上页</span>
 
+					<img src="../../assets/img/black.png" alt="" />
 
+				</div>
 
+				<img src="../../assets/img/dn-top1.png" alt="" class="list-top" />
 
+				<div class="list flex">
 
+					<div class="list-item" v-for="item in list" :key="item.id">
 
+						<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>
 
+				<div class="page-wrap">
 
+					<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页"
 
+						@current-change="currentChange" :page-size="12"></el-pagination>
 
+					<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>
 
+		</div>
 
+		<audio id="audio" :src="require('../../assets/music/sbhh.mp3')" loop ref="music" controls hidden></audio>
 
+	</div>
 
+</template>
 
+<script>
 
+	import {
 
+		getMournList,
 
+		getAllNum
 
+	} from '../../request/api.js'
 
+	export default {
 
+		data() {
 
+			return {
 
+				isError: true,
 
+				list: [],
 
+				page: 1,
 
+				limit: 12,
 
+				total: 0,
 
+				keyword: "",
 
+				mournAll: ''
 
+			};
 
+		},
 
+		// components: {
 
+		//   PageBottom,
 
+		// },
 
+		mounted() {
 
+			console.log(this.$store.state.isPlay,'this.$store.state.isPlay')
 
+			if(this.$store.state.isPlay) {
 
+				this.isError = false
 
+			}
 
+			this.getMournList()
 
+			this.getAllNum()
 
+		},
 
+		methods: {
 
+			goBlack() {
 
+				this.$router.push('/mourn/indexs')
 
+			},
 
+			goIndex() {
 
+				this.$refs.music.play()
 
+				this.isError = false
 
+				// this.$store.mutations.setPlay()
 
+				this.$store.commit('setPlay')
 
+				// console.log('x')
 
+				// this.audioAutoPlay()
 
+			},
 
+			// 自动播放
 
+			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()
 
+			},
 
+			// 获取捐献列表
 
+			getList() {
 
+				this.page = 1
 
+				this.getMournList()
 
+			},
 
+			// 在线悼念
 
+			goDaonian(item) {
 
+				this.$refs.music.play();
 
+				this.$router.push("/mourn/details?id=" + item.id);
 
+
 
+			},
 
+		},
 
+	};
 
+</script>
 
+<style lang="scss" scoped>
 
+	* {
 
+		box-sizing: border-box;
 
+	}
 
+
 
+	html {
 
+		background-color: #e9f4ef;
 
+	}
 
+
 
+	.bg {
 
+		width: 100vw;
 
+		width: 1920px;
 
+		height: 100vh;
 
+		height: 1080px;
 
+		background-image: url('../../assets/img/indexs-bg.png');
 
+		background-size: 100% 100%;
 
+		background-repeat: no-repeat;
 
+		position: relative;
 
+		margin: auto;
 
+
 
+		.bg-btn {
 
+			width: 454px;
 
+			height: 94px;
 
+			// background-color: red;
 
+			position: absolute;
 
+			top: 612px;
 
+			left: 733px;
 
+		}
 
+	}
 
+
 
+	.bg2 {
 
+		background-image: url('../../assets/img/indexs-bg-t.png');
 
+
 
+		.list-wrap {
 
+			width: 1741px;
 
+			height: 826px;
 
+			background-color: #d7e9e8;
 
+			border-radius: 20px;
 
+			position: absolute;
 
+			top: 222px;
 
+			left: 0;
 
+			right: 0;
 
+			margin: auto;
 
+			padding: 30px 0;
 
+
 
+			.search-left {
 
+				display: flex;
 
+				align-items: center;
 
+				height: 33px;
 
+				font-size: 15px;
 
+				font-weight: bold;
 
+				color: #031a2a;
 
+				margin-right: 10px;
 
+				position: absolute;
 
+				top: 30px;
 
+				right:30px;
 
+				img {
 
+					margin-right: 5px;
 
+				}
 
+			}
 
+			.black {
 
+				color: #006061;
 
+				padding-left: 30px;
 
+				display: flex;
 
+				align-items: center;
 
+				position: absolute;
 
+				
+				img {
 
+					width: 22px;
 
+					height: 16px;
 
+					margin-left: 10px;
 
+					
+				}
 
+			}
 
+
 
+			.list-top {
 
+				display: block;
 
+				margin: auto;
 
+			}
 
+
 
+			.list {
 
+				width: 100%;
 
+				height: 626px;
 
+				padding: 0 138px;
 
+				flex-wrap: wrap;
 
+
 
+				.list-item {
 
+					text-align: center;
 
+					width: 203px;
 
+					height: 278px;
 
+					margin: 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;
 
+					}
 
+				}
 
+			}
 
+
 
+			.page-wrap {
 
+
 
+				display: flex;
 
+				justify-content: center;
 
+				// padding: ;
 
+				padding-top: 20px;
 
+
 
+				.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>