2023-12-7

pages.json

@@ -685,7 +685,20 @@
 				"navigationBarTextStyle": "white",
 				"navigationBarTitleText": "详情"
 			}
-		},
+		},
+		{
+			"path": "pages/applic/itemred",
+			"style": {
+				// #ifndef MP
+			"app-plus": {
+				"titleNView": false
+			},
+				// #endif
+				"navigationBarBackgroundColor": "#457DBF",
+				"navigationBarTextStyle": "white",
+				"navigationBarTitleText": "红十字会基层组织"
+			}
+		},
 		{
 			"path": "pages/login/login",
 			"style": {
@@ -975,33 +988,33 @@
 		"app-plus": {
 			"titleNView": false
 		}
+	},
+	"tabBar": {
+		"color": "#CACACA",
+		"selectedColor": "#FA7E67",
+		"borderStyle": "black",
+		"iconWidth": "42rpx",
+		"backgroundColor": "#ffffff",
+		"list": [{
+				"pagePath": "pages/index/index",
+				"iconPath": "./static/tabBar/home.png",
+				"selectedIconPath": "static/tabBar/home-action.png",
+				"text": "首页"
+				// "visible":false
+			},
+			{
+				"pagePath": "pages/category/category",
+				"iconPath": "static/tabBar/dengji.png",
+				"selectedIconPath": "static/tabBar/dengji-action.png",
+				"text": "救护员招募"
+				// "visible":false
+			},
+			{
+				"pagePath": "pages/user/user",
+				"iconPath": "static/tabBar/user.png",
+				"selectedIconPath": "static/tabBar/user-action.png",
+				"text": "我的"
+			}
+		]
 	}
-	// "tabBar": {
-	// 	"color": "#CACACA",
-	// 	"selectedColor": "#FA7E67",
-	// 	"borderStyle": "black",
-	// 	"iconWidth": "42rpx",
-	// 	"backgroundColor": "#ffffff",
-	// 	"list": [{
-	// 			"pagePath": "pages/index/index",
-	// 			"iconPath": "./static/tabBar/home.png",
-	// 			"selectedIconPath": "static/tabBar/home-action.png",
-	// 			"text": "首页"
-	// 			// "visible":false
-	// 		},
-	// 		{
-	// 			"pagePath": "pages/category/category",
-	// 			"iconPath": "static/tabBar/dengji.png",
-	// 			"selectedIconPath": "static/tabBar/dengji-action.png",
-	// 			"text": "救护员招募"
-	// 			// "visible":false
-	// 		},
-	// 		{
-	// 			"pagePath": "pages/user/user",
-	// 			"iconPath": "static/tabBar/user.png",
-	// 			"selectedIconPath": "static/tabBar/user-action.png",
-	// 			"text": "我的"
-	// 		}
-	// 	]
-	// }
 }

pages/applic/itemred.vue

@@ -0,0 +1,720 @@
+<template>
+	<view class="content">
+		<view id="map" class="map">
+			<map @updated='mapChange' id="map_1" ref='map_1' style="width:750rpx; height: 600rpx" :latitude="latitude"
+				:longitude="longitude" :markers="marker"></map>
+		</view>
+		<scroll-view scroll-y="true" class="scroll-wrapper" :style="{'height': height}" @scrolltolower="loadData">
+			<espempty v-if="loaded && AEDList.length === 0" :tit="'智能AED列表为空'"></espempty>
+			<view class="list-tpl flex" @click="openAddress(item)" v-for="(item, index) in AEDList" :key="item.id">
+				<template>
+					<view class="list-left">
+						<view class="info">
+							<view class="title">{{ item.name }}</view>
+							<view class="addr">地址：{{ item.address }}</view>
+						</view>
+					</view>
+					<view class="image">
+						<image src="../../static/img/img10.png"></image>
+						<view class="tip">{{item.distance >= 1000 ? item.range + 'km': item.distance + 'm'}}</view>
+					</view>
+				</template>
+			</view>
+			<uni-load-more :status="loadingType"></uni-load-more>
+		</scroll-view>
+		<uni-popup ref="popup" type="bottom" @click="close">
+			<view class="popup_row">
+				<view class="rows">
+					<view class="rows-item" @click="toGaodeMap">高德地图</view>
+					<view class="rows-item" @click="tobaiDuMap">百度地图</view>
+					<view class="rows-item" @click="totengxunMap">腾讯地图</view>
+				</view>
+			</view>
+		</uni-popup>
+		<uni-popup ref="aedxq" type="bottom" @click="closeAedXq">
+			<view class="aedxq-wrap">
+				<view class="logo-wrap flex">
+					<image :src="baseURL + showAed.imgs" mode="" class="logo"></image>
+					<view class="aid-name">
+						{{showAed.name}}
+					</view>
+				</view>
+
+				<view class="aed-dis" style="padding-top: 20rpx;">
+					距离：{{showAed.dis}}
+				</view>
+				<view class="aed-address" style="padding-top: 10rpx;">
+					地址：{{showAed.address}}
+				</view>
+				<view class="aed-address" style="padding-top: 10rpx;">
+					联系方式：{{showAed.phone}}
+				</view>
+				<view class="aed-dh" @click="opendh">
+					导航
+				</view>
+				<view class="aed-phone" @click="makecall(showAed.phone)">
+					电话
+				</view>
+			</view>
+		</uni-popup>
+		<uni-popup ref="lookimg" type="center">
+			<view class="pop-wrap" style="position: relative;">
+				<movable-area class="popup-box">
+					<movable-view class="popup-item" :scale="true" direction="all">
+						<image :src="chooseImg" mode="widthFix"></image>
+					</movable-view>
+				</movable-area>
+				<image src="../../static/icon/close.png" mode="" class="close" style="width: 80rpx;height: 80rpx;"
+					@click="closePup"></image>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	import espempty from '@/components/espempty';
+	import uniPopup from '@/components/uni-popup/uni-popup.vue';
+	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
+	import {
+		getAed,
+		getMechanismList
+	} from '@/api/category.js'
+	export default {
+		components: {
+			uniPopup,
+			espempty,
+			uniLoadMore
+		},
+		//相关配置参数
+		data() {
+			return {
+				aedmarker: [],
+				loaded: false,
+				loadingType: 'more',
+				page: 1,
+				limit: 100,
+				AEDList: [],
+				height: '',
+				list: [],
+				latitude: '', // 本地坐标
+				longitude: '', // 本地坐标
+				phone: '',
+				marker: [],
+				showAed: {
+					name: '',
+					address: '',
+					addressxq: '',
+					dis: '',
+					lat: '',
+					lon: '',
+					imgs: '',
+					phone: ''
+				},
+				chooseImg: '',
+			}
+		},
+		onReady(res) {
+			var _this = this;
+			uni.getSystemInfo({
+				success: resu => {
+					const query = uni.createSelectorQuery();
+					query.select('.scroll-wrapper').boundingClientRect();
+					query.exec(function(res) {
+						console.log(res, 'ddddddddddddd');
+						_this.height = resu.windowHeight - res[0].top + 'px';
+						console.log('打印页面的剩余高度', _this.height);
+					});
+				},
+				fail: res => {}
+			});
+		},
+		onLoad() {
+			let obj = this;
+			this.getLocal()
+
+		},
+		computed: {
+			...mapState('user', ['hasLogin', 'userInfo']),
+			...mapState(['baseURL'])
+		},
+		methods: {
+			...mapMutations('user', ['setUserInfo']),
+			// 导航
+			opendh() {
+				console.log('导航')
+				this.$refs.aedxq.close()
+				this.$refs.popup.open();
+			},
+			// 关闭图片弹窗
+			closePup() {
+				this.$refs.lookimg.close()
+			},
+			// 打开图片弹窗
+			openimg(src) {
+				this.chooseImg = this.baseURL + src
+				this.$refs.lookimg.open()
+			},
+			// 拨打电话
+			makecall(num) {
+				uni.makePhoneCall({
+					phoneNumber: num + ''
+				})
+			},
+			// 关闭aed详情
+			closeAedXq() {
+				this.$refs.aedxq.close()
+			},
+			// 打开aed详情
+			lookmore(e) {
+				console.log(e)
+				let obj = this
+				obj.AEDList.forEach(item => {
+					if (item.id == e.detail.markerId) {
+						obj.showAed = {
+							name: item.name,
+							address: item.address,
+							addressxq: item.install_address,
+							dis: item.range >= 1 ? (item.range + 'km') : (item.distance + 'm'),
+							lat: item.latitude,
+							lon: item.longitude,
+							imgs: item.image,
+							phone: item.phone
+						}
+					}
+				})
+				this.$refs.aedxq.open()
+			},
+			// 获取本地坐标
+			getLocal() {
+				let obj = this;
+				console.log('ddddddddddddddddddddddddd')
+				let weichatBrowser = uni.getStorageSync('weichatBrowser')
+				if(weichatBrowser) {
+					let wxOjb = require('jweixin-module');
+					wxOjb.ready(()=> {
+						wxOjb.getLocation({
+							type: 'gcj02',
+							success(e) {
+								console.log(e)
+								obj.latitude = Math.abs(e.latitude)
+								obj.longitude = Math.abs(e.longitude)
+								console.log('本地坐标', obj.latitude, obj.longitude)
+								let item = {
+									id: 0,
+									latitude: obj.latitude,
+									longitude: obj.longitude,
+									iconPath: '/static/img/img19.png',
+									width: '35',
+									height: '35',
+								}
+								obj.marker.push(item)
+								obj.loadData()
+							},
+							fail(err) {
+								obj.getLocal()
+							}
+						})
+					})
+				}else {
+					uni.getLocation({
+						type: 'gcj02',
+						success(e) {
+							console.log(e)
+							obj.latitude = Math.abs(e.latitude)
+							obj.longitude = Math.abs(e.longitude)
+							console.log('本地坐标', obj.latitude, obj.longitude)
+							let item = {
+								id: 0,
+								latitude: obj.latitude,
+								longitude: obj.longitude,
+								iconPath: '/static/img/img19.png',
+								width: '35',
+								height: '35',
+							}
+							obj.marker.push(item)
+							obj.loadData()
+						},
+						fail(err) {
+							obj.getLocal()
+						}
+					})
+				}
+				
+			},
+			// 地图渲染完毕事件
+			mapChange(e) {
+				console.log(e);
+			},
+			// 载入数据
+			async loadData() {
+				let obj = this;
+				if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
+					return
+				}
+				obj.loadingType = 'loading'
+				getMechanismList({
+					latitude: obj.latitude,
+					longitude: obj.longitude,
+					page: obj.page,
+					limit: obj.limit,
+				}).then(({
+					data
+				}) => {
+					console.log(data, 'aed++++++++++++++')
+					obj.AEDList = obj.AEDList.concat(data);
+					let arr = data.map(item => ({
+						latitude: item.latitude,
+						longitude: item.longitude,
+						iconPath: '/static/img/img014.png',
+						width: '35',
+						height: '35',
+						id: item.id,
+						address: item.address
+					}));
+					if (data.length == obj.limit) {
+						obj.loadingType = 'more'
+					} else {
+						obj.loadingType = 'noMore'
+					}
+					obj.marker = obj.marker.concat(arr)
+				})
+			},
+			// 调用高德
+			toGaodeMap() {
+				let latitude = this.showAed.lat;
+				let longitude = this.showAed.lon;
+				let address = this.showAed.name;
+				console.log(address)
+				console.log('选择高德', latitude, longitude, address);
+				window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`;
+			},
+			// 调用腾讯
+			totengxunMap() {
+				let latitude = this.showAed.lat;
+				let longitude = this.showAed.lon;
+				let address = this.showAed.name;
+				console.log('选择腾讯', latitude, longitude);
+				window.location.href =
+					`http://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude};addr:${address}`;
+			},
+			// 调用百度
+			tobaiDuMap() {
+				let latlon = this.bd_encrypt(this.showAed.lon, this.showAed.lat)
+				let latlon1 = this.bd_encrypt(this.longitude, this.latitude)
+				let latitude = latlon.bd_lat;
+				let longitude = latlon.bd_lng;
+				let latitude6 = latlon1.bd_lat;
+				let longitude6 = latlon1.bd_lng;
+				let address =this.showAed.name;
+				console.log('选择百度', latitude, longitude);
+				console.log('获取当前经纬度', latitude6, longitude6);
+				window.location.href =
+					`http://api.map.baidu.com/direction?origin=latlng:${latitude6},${longitude6}|name:我的位置&destination=${latitude},${longitude}&mode=driving&region=${address}&output=html&src=webapp.baidu.openAPIdemo`;
+			},
+			// 高德坐标、腾讯坐标转百度坐标
+			bd_encrypt(gg_lng, gg_lat) {
+				var X_PI = Math.PI * 3000.0 / 180.0;
+				var x = gg_lng,
+					y = gg_lat;
+				var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
+				var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
+				var bd_lng = z * Math.cos(theta) + 0.0065;
+				var bd_lat = z * Math.sin(theta) + 0.006;
+				return {
+					bd_lat: bd_lat,
+					bd_lng: bd_lng
+				};
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	body,
+	page {
+		height: 100%;
+		width: 100%;
+		background-color: #fff;
+	}
+
+	.content {
+		height: 100%;
+		width: 100%;
+		background-color: #fff;
+	}
+
+	.map {
+		width: 100%;
+		height: 600rpx;
+	}
+
+	/* #ifdef H5 */
+	.location {
+		overflow-y: scroll; //溢出就滑动起来
+		// z-index: 990;
+		position: fixed;
+		bottom: 0;
+		height: 55%;
+		width: 100%;
+		background-color: #fff;
+		padding: 24rpx;
+
+		//搜索框
+		.Search-box {
+			height: 80rpx;
+			padding-right: 24rpx;
+			padding-left: 24rpx;
+
+			.Search-box-sort {
+				float: left;
+				margin-left: 32rpx;
+				margin-right: 19rpx;
+
+				.sort-text {
+					width: 57rpx;
+					height: 29rpx;
+					font-size: 30rpx;
+					font-weight: 500;
+					color: rgba(51, 51, 51, 1);
+					line-height: 58rpx;
+					margin-right: 19rpx;
+				}
+
+				.sort-img {
+					width: 21rpx;
+					height: 11rpx;
+					margin-bottom: 4rpx;
+				}
+			}
+
+			.Search-box-size {
+				// width:70%;
+				height: 58rpx;
+				border-radius: 32rpx;
+				background-color: #f1f1f1;
+				padding-left: 36rpx;
+				display: flex;
+				align-items: center;
+
+				.box-img {
+					height: 32rpx;
+					width: 32rpx;
+					margin-right: 16rpx;
+				}
+
+				.box-word {
+					width: 100%;
+					font-size: 26rpx;
+					font-weight: 500;
+					color: rgba(205, 203, 203, 1);
+					line-height: 55rpx;
+				}
+			}
+		}
+
+		.location-item {
+			z-index: 1000;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			border-bottom: 1rpx solid #E7E8EA;
+			padding: 15rpx 0;
+
+			.box-left {
+				display: flex;
+
+				.img01 {
+					width: 8rpx;
+					height: 28rpx;
+					margin-right: 18rpx;
+
+					image {
+						width: 8rpx;
+						height: 28rpx;
+					}
+				}
+
+				.img02 {
+					width: 117rpx;
+					height: 117rpx;
+					border-radius: 50%;
+
+					image {
+						width: 117rpx;
+						height: 117rpx;
+						border-radius: 50%;
+					}
+				}
+
+				.info {
+					margin-left: 16rpx;
+
+					.info-header {
+						display: flex;
+						align-items: center;
+
+						.name {
+							font-size: 32rpx;
+							color: #333333;
+						}
+
+						.distance {
+							margin-left: 25rpx;
+							font-size: 28rpx;
+							color: #303133;
+						}
+
+						.location-icon {
+							margin-left: 10rpx;
+							width: 20rpx;
+							height: 26rpx;
+
+							image {
+								width: 20rpx;
+								height: 26rpx;
+								display: inline;
+							}
+						}
+					}
+
+					.address {
+						font-size: 26rpx;
+						color: #333333;
+						margin-top: 33rpx;
+					}
+				}
+			}
+
+			.box-right {
+				.img {
+					height: 107rpx;
+
+					image {
+						width: 107rpx;
+						height: 107rpx;
+					}
+				}
+
+				.called {
+					margin-right: 16rpx;
+					height: 107rpx;
+					line-height: 107rpx;
+					font-size: 28rpx;
+					color: #CB131C;
+				}
+			}
+		}
+	}
+
+	/* #endif */
+
+	.list-tpl {
+		background-color: #ffffff;
+		margin-bottom: 25rpx;
+		padding: 25rpx 25rpx;
+		font-size: 28rpx;
+		border-radius: 15rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-bottom: 1px solid #f1f1f1;
+
+		.list-left {
+			display: flex;
+			width: 100%;
+
+			.number {
+				font-size: 32rpx;
+				margin-right: 14rpx;
+			}
+
+			.info {
+				width: 100%;
+
+				.title {
+					font-size: 32rpx;
+					color: #222222;
+					font-weight: 500;
+				}
+
+				.addr {
+					width: 400rpx;
+					margin-top: 20rpx;
+					font-size: 20rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #999999;
+				}
+			}
+		}
+
+		.image {
+			width: 20%;
+			text-align: center;
+
+			image {
+				width: 50rpx;
+				height: 50rpx;
+			}
+
+			.tip {
+				color: #7f7f7f;
+				font-size: 21rpx;
+			}
+		}
+	}
+
+	.popup_row {
+		width: 100%;
+		height: 500rpx;
+		background-color: #ffffff;
+		border-radius: 20rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		.rows {
+			width: 100%;
+			padding: 0 24rpx;
+
+			.rows-item {
+				height: 80rpx;
+				line-height: 80rpx;
+				text-align: center;
+				width: 100%;
+				font-size: 32rpx;
+				color: #303133;
+			}
+		}
+	}
+
+	.scroll-wrapper {
+		padding-top: 20rpx;
+	}
+
+	.aedxq-wrap {
+		margin: auto;
+		width: 710rpx;
+		min-height: 200rpx;
+		border-radius: 20rpx;
+		padding: 25rpx 25rpx 25rpx 25rpx;
+		background-color: rgba($color: #000000, $alpha: 0.9);
+		color: #fff;
+		position: relative;
+		.logo-wrap {
+			width: 460rpx;
+			// background-color: red;
+			align-items: center;
+			.logo {
+				width: 100rpx;
+				height: 100rpx;
+				border-radius: 50%;
+			}
+			.aid-name {
+				display: inline-block;
+				width: 340rpx;
+				padding-left: 20rpx;
+				font-size: 32rpx;
+				// background-color: #bfa;
+				// text-align: center;
+			}
+		}
+		.xq-top {
+			padding-top: 25rpx;
+			width: 660rpx;
+			height: 297rpx;
+			border-bottom: 1px solid #fff;
+			.aed-name {
+				font-size: 28rpx;
+				width: 479rpx;
+			}
+			
+			.aed-dis {
+				padding-top: 10rpx;
+				font-size: 22rpx;
+				width: 479rpx;
+			}
+			
+		}
+
+		.xq-img-wrap {
+			height: 165rpx;
+			width: 660rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.aed-img-scroll {
+				height: 107rpx;
+				width: 508rpx;
+				.aed-img {
+					height: 107rpx;
+					margin-right: 15rpx;
+					flex-shrink: 0;
+
+				}
+			}
+		}
+
+		.aed-dh {
+			width: 147rpx;
+			height: 82rpx;
+			line-height: 82rpx;
+			text-align: center;
+			background-color: #4d8bd6;
+			border-radius: 15rpx;
+			position: absolute;
+			right: 25rpx;
+			top: 25rpx;
+		}
+		.aed-phone {
+			width: 112rpx;
+			height: 52rpx;
+			line-height: 52rpx;
+			text-align: center;
+			border: 1px solid #fff;
+			border-radius: 10rpx;
+			position: absolute;
+			right: 25rpx;
+			top: 225rpx;
+		}
+	}
+	.pop-wrap {
+		width: 522rpx;
+		height: 800rpx;
+		// background-color: red;
+	}
+	.popup-box {
+		width: 522rpx;
+		height: 800rpx;
+		border-radius: 20rpx;
+		position: relative;
+		overflow: hidden;
+		background-color: #fff;
+
+		.popup-item {
+			width: 100%;
+			height: 100%;
+			image {
+				width: 100%;
+			}
+		}
+	}
+
+	.close {
+		display: block;
+		width: 40rpx;
+		height: 40rpx;
+		border: 50%;
+		position: absolute;
+		// background-color: red;
+		bottom: -100rpx;
+		left: 0;
+		right: 0;
+		margin: 0 auto;
+	}
+</style>

pages/index/index.vue

@@ -1,1260 +1,248 @@
-<template>
-	<view class="content">
-		<!-- 轮播 -->
-		<view class="carousel-section">
-			<swiper class="carousel" :autoplay="true" :interval="3000" :duration="1000">
-				<swiper-item v-for="item in carouselList" :key="item.id">
-					<image :src="baseURL + item.image"></image>
-				</swiper-item>
-			</swiper>
-		</view>
-		<!-- 分类 -->
-		<view class="cate-section flex">
-			<view class="cate-item flex" @click="aixin">
-				<!-- <view class="img-wrapper flex">
-					<image src="../../static/index/index10.png" mode="" class="img"></image>
-				</view>
-				<view class="item-title">爱心捐款</view> -->
-				<image src="../../static/index/in1.png" mode=""></image>
-			</view>
-			<view class="cate-item flex" @click="tocontribution">
-				<!-- <view class="img-wrapper flex">
-					<image src="../../static/index/index04.png" mode="" class="img" style="width: 110rpx;"></image>
-				</view>
-				<view class="item-title">遗体器官捐献</view> -->
-				<image src="../../static/index/in2.png" mode=""></image>
-			</view>
-			<view class="cate-item flex" @click="toapplic">
-				<!-- <view class="img-wrapper flex">
-					<image src="../../static/index/index03.png" mode="" class="img"></image>
-				</view>
-				<view class="item-title">造血干细胞捐献</view> -->
-				<image src="../../static/index/in3.png" mode=""></image>
-			</view>
-			<view class="cate-item flex" @click="toOrgan">
-				<!-- <view class="img-wrapper flex">
-					<image src="../../static/index/index02.png" mode="" class="img"></image>
-				</view>
-				<view class="item-title">红十字志愿者</view> -->
-				<image src="../../static/index/in4.png" mode=""></image>
-			</view>
-			<view class="cate-item flex" @click="tohelpActi1">
-				<!-- <view class="img-wrapper flex">
-					<image src="../../static/index/index01.png" mode="" class="img"></image>
-				</view>
-				<view class="item-title">培训报名</view> -->
-				<image src="../../static/index/in5.png" mode=""></image>
-			</view>
-			<view class="cate-item flex" @click="navTo('/pages/train/index')">
-				<!-- <view class="img-wrapper flex">
-					<image src="../../static/index/index07.png" mode="" class="img"></image>
-				</view>
-				<view class="item-title">红十字会员</view> -->
-				<image src="../../static/index/in6.png" mode=""></image>
-			</view>
-
-			<!-- <view class="cate-item flex" @click="tohelpActi2">
-				<view class="img-wrapper flex">
-					<image src="../../static/index/index09.png" mode="" class="img"></image>
-				</view>
-				<view class="item-title">救在身边系统</view>
-				<image src="../../static/index/in7.png" mode=""></image>
-			</view> -->
-
-			<!-- <view class="cate-item flex" @click="tohelpActi3">
-				<view class="img-wrapper flex">
-					<image src="../../static/index/index08.png" mode="" class="img"></image>
-				</view>
+<template>
+	<view class="content">
+		<!-- 轮播 -->
+		<view class="carousel-section">
+			<swiper class="carousel" :autoplay="true" :interval="3000" :duration="1000">
+				<swiper-item v-for="item in carouselList" :key="item.id">
+					<image :src="baseURL + item.image"></image>
+				</swiper-item>
+			</swiper>
+		</view>
+		<!-- 分类 -->
+		<view class="cate-section flex">
+			<view class="cate-item flex" @click="navTo('/pages/index/aixin')">
+				<view class="img-wrapper flex">
+					<image src="../../static/index/index_icon_1.png" mode="" class="img"></image>
+				</view>
+				<view class="item-title clamp2">爱心捐款</view>
+			</view>
+			<view class="cate-item flex"  @click="navTo('/pages/form/applicationForm')" >
+				<view class="img-wrapper flex">
+					<image src="../../static/index/index_icon_2.png" mode="" class="img" style="width: 110rpx;"></image>
+				</view>
+				<view class="item-title clamp2">遗体器官捐献</view>
+			</view>
+			<view class="cate-item flex"  @click="navTo('/pages/applic/appliSystem')">
+				<view class="img-wrapper flex">
+					<image src="../../static/index/index_icon_3.png" mode="" class="img"></image>
+				</view>
+				<view class="item-title clamp2">造血干细胞捐献</view>
+			</view>
+			<view class="cate-item flex" @click="navTo('/pages/applic/info?id=337')">
+				<view class="img-wrapper flex">
+					<image src="../../static/index/index_icon_4.png" mode="" class="img"></image>
+				</view>
+				<view class="item-title clamp2">志愿者报名</view>
+			</view>
+			<view class="cate-item flex" @click="navTo('/pages/applic/info?id=337')">
+				<view class="img-wrapper flex">
+					<image src="../../static/index/index_icon_5.png" mode="" class="img"></image>
+				</view>
+				<view class="item-title clamp2">会员登记</view>
+			</view>
+
+			<view class="cate-item flex" @click="navTo('/pages/train/index')">
+				<view class="img-wrapper flex">
+					<image src="../../static/index/index_icon_6.png" mode="" class="img"></image>
+				</view>
+				<view class="item-title clamp2">普及培训报名</view>
+			</view>
+			<!-- <view class="cate-item flex" @click="tohelpActi3">
+				<view class="img-wrapper flex">
+					<image src="../../static/index/index08.png" mode="" class="img"></image>
+				</view>
 				<view class="item-title">AED智能系统</view>
-				<image src="../../static/index/in8.png" mode=""></image>
-			</view> -->
-			<!-- <view class="cate-item flex" @click="navTo('/pages/applic/aid')">
-				<view class="img-wrapper flex">
-					<image src="../../static/index/index06.png" mode="" class="img"></image>
-				</view>
-				<view class="item-title">救护站智能系统</view>
-				<image src="../../static/index/in9.png" mode=""></image>
-			</view> -->
-
-		<!-- 	 <view class="cate-item flex" @click="tohelpActi4">
-
-				 <view class="cate-item flex" @click="navTo('/pages/applic/science')">
-				<view class="img-wrapper flex">
-					<image src="../../static/index/index05.png" mode="" class="img"></image>
-				</view>
-				<view class="item-title">红会科普</view>
-			</view> 
-			</view> -->
-			<view class="redkp flex" @click="navTo('/pages/user/user')">
-				<image src="../../static/index/in10.png" mode=""></image>
-				<!-- <image src="../../static/index/index05.png" mode="" class="redkp-img"></image>
-				<view class="redkp-center">
-					<view class="">
-						红会科普
-					</view>
-					<view class="center-btm">
-						一起学习救援知识
-					</view>
-				</view>
-				<image src="../../static/icon/goto.png" mode="" class="goto"></image> -->
+				<image src="../../static/index/in8.png" mode=""></image>
+			</view> -->
+			<view class="cate-item flex" @click="navTo('/pages/applic/itemred')">
+				<view class="img-wrapper flex">
+					<image src="../../static/index/index_icon_7.png" mode="" class="img"></image>
+				</view>
+				<view class="item-title clamp2">红十字会基层组织</view>
+			</view>
+			<view class="cate-item flex" @click="navTo('/pages/applic/aid')">
+				<view class="img-wrapper flex">
+					<image src="../../static/index/index_icon_8.png" mode="" class="img"></image>
+				</view>
+				<view class="item-title clamp2">救护站智能系统</view>
+			</view>
+			<view class="cate-item flex"  @click="navTo('/pages/applic/location')">
+				<view class="img-wrapper flex">
+					<image src="../../static/index/index_icon_9.png" mode="" class="img"></image>
+				</view>
+				<view class="item-title clamp2">救在身边</view>
+			</view>
+			<view class="cate-item flex" @click="navTo('/pages/share/card')">
+				<view class="img-wrapper flex">
+					<image src="../../static/index/index_icon_10.png" mode="" class="img"></image>
+				</view>
+				<view class="item-title clamp2">电子名片</view>
 			</view>
 		</view>
-		<view class="" style="height: 20rpx;">
-			
-		</view>
-	</view>
-</template>
-
-<script>
-	import {
-		getAed,
-		getAidList,
-		getRescuerList,
-		sos,
-	} from '@/api/category.js'
-	import {
-		loadIndexs,
-		bannerlist,
-		getListAED,
-		getDistance,
-		getListMechanism,
-		getdis,
-		tocall
-	} from '@/api/index.js';
-	import {
-		saveUrl,
-		interceptor
-	} from '@/utils/loginUtils.js';
-	import {
-		mapState,
-		mapMutations
-	} from 'vuex';
-	import {
-		userinfo
-	} from '@/api/user.js';
-	import uniPopup from '@/components/uni-popup/uni-popup.vue';
-	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
-	import {
-		getLoca
-	} from '@/utils/wxAuthorized.js';
-	import {
-		getcomAddress
-	} from '@/api/index.js';
-	import topTitle from '../../components/top-title/top-title.vue';
-	export default {
-		components: {
-			uniPopup,
-			uniLoadMore,
-			topTitle
-		},
-		data() {
-			return {
-				shareShow: true,
-				user_id: '',
-				rescuers_id: '',
-				name: '',
-				uid: '',
-				phone: '',
-				to_phone: '',
-				jzsbmarker: [],
-				jzsblist: [],
-				jhzmarker: [],
-				aedmarker: [],
-				carouselList: [], //轮播
-				science: [], //文章列表
-				page: 1,
-				limit: 10,
-				AEDList: [],
-				Mechanism: [],
-				latitude2: '',
-				longitude2: '',
-				latitude4: '',
-				longitude4: '',
-				address: '',
-				loadingType: 'more',
-				markerList: [],
-				marker: [],
-				longitude: '121.15829821166992',
-				latitude: '30.044394499237708',
-				longitude1: '120.553638',
-				latitude1: '30.547011',
-				scale: '12', //地图缩放程度
-				scale1: '15',
-				showbox: false,
-				showTEXT: false,
-				addressData: {
-					name: '',
-					mobile: '',
-					latitude: 0, //纬度
-					longitude: 0, //经度
-					address: {
-						province: '',
-						city: '',
-						district: '',
-						detail: ''
-					},
-					area: '',
-					default: false
-				}
-			};
-		},
-		onShow() {
-			saveUrl();
-			// let token = uni.getStorageSync('token');
-			console.log(11, this);
-			if (!this.hasLogin) {
-				// 登录拦截
-				// interceptor();
-				uni.showModal({
-					title: '登录',
-					content: '您未登录，是否马上登陆?',
-					success: e => {
-						if (e.confirm) {
-							interceptor();
-						}
-					},
-					fail: e => {
-						console.log(e);
-					}
-				});
-			} else {
-
-				// this.loadData();
-			}
-		},
-		onLoad() {
-			this.loadIndex()
-			saveUrl();
-			
-
-		},
-		computed: {
-			...mapState('user', ['userInfo', 'baseURL', 'hasLogin']),
-			...mapState(['baseURL']),
-		},
-		// 下拉加载
-		// onReachBottom() {
-		// 	this.loadData();
-		// },
-		methods: {
-			...mapMutations('user', ['setUserInfo']),
-			loadIndex() {
-				loadIndexs({}).then(({
-					data
-				}) => {
-					console.log(data, 'index')
-					this.carouselList = data.banner; //轮播图
-				});
-			},
-			tocontribution() {
-				uni.navigateTo({
-					url: "/pages/form/applicationForm"
-					// url: '/pages/applic/toOrgan'
-				});
-			},
-			//爱心捐款
-			aixin() {
+	</view>
+</template>
+
+<script>
+	import {
+		loadIndexs
+	} from '@/api/index.js';
+	import {
+		saveUrl,
+		interceptor
+	} from '@/utils/loginUtils.js';
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	export default {
+		data() {
+			return {
+				carouselList: [], //轮播
+			};
+		},
+		onShow() {
+			saveUrl();
+			// let token = uni.getStorageSync('token');
+			console.log(11, this);
+			if (!this.hasLogin) {
+				// 登录拦截
+				// interceptor();
+				uni.showModal({
+					title: '登录',
+					content: '您未登录，是否马上登陆?',
+					success: e => {
+						if (e.confirm) {
+							interceptor();
+						}
+					},
+					fail: e => {
+						console.log(e);
+					}
+				});
+			} else {
+
+				// this.loadData();
+			}
+		},
+		onLoad() {
+			this.loadIndex()
+			saveUrl();
+
+
+		},
+		computed: {
+			...mapState('user', [ 'hasLogin']),
+			...mapState(['baseURL']),
+		},
+		// 下拉加载
+		// onReachBottom() {
+		// 	this.loadData();
+		// },
+		methods: {
+			loadIndex() {
+				loadIndexs({}).then(({
+					data
+				}) => {
+					console.log(data, 'index')
+					this.carouselList = data.banner; //轮播图
+				});
+			},
+			tohelpActi3() {
+				uni.navigateTo({
+					url: '../applic/aed'
+				})
+			},
+			navTo(url) {
 				uni.navigateTo({
-					url: '/pages/index/aixin'
-				})
-				// uni.navigateTo({
-				// 	url: '/pages/applic/love'
-				// })
-			},
-			//提示
-			tishi() {
-				uni.showModal({
-					title: '提示',
-					content: '获取当前位置信息失败,是否刷新页面。',
-					success: function(res) {
-						if (res.confirm) {
-							window.location.reload();
-							console.log('用户点击确定');
-						} else if (res.cancel) {
-							console.log('用户点击取消');
-						}
-					}
-				})
-			},
-			// 调用高德
-			toGaodeMap() {
-				let latitude = this.latitude2;
-				let longitude = this.longitude2;
-				let address = this.address;
-				console.log('选择高德', latitude, longitude, address);
-				// window.location.href =  'https://uri.amap.com/marker?position=30.537043,120.567191&name=浙江省嘉兴市桐乡市高桥镇高桥大道51号'
-				window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`;
-
-				// window.location.href = `http://uri.amap.com/navigation?from=114.02597366,22.54605355&to=114.029243,22.609562&mode=car&src=nyx_super`
-				// http://uri.amap.com/navigation?from=" + fromLongitude + "," + fromLatitude + "&to="+ longitude + "," + latitude + "&mode=car&src=nyx_super
-			},
-			// 调用腾讯
-			totengxunMap() {
-				let latitude = this.latitude2;
-				let longitude = this.longitude2;
-				let address = this.address;
-				console.log('选择腾讯', latitude, longitude);
-				window.location.href =
-					`http://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude};addr:${address}`;
-			},
-			// 调用百度
-			tobaiDuMap() {
-				let latitude = this.latitude2;
-				let longitude = this.longitude2;
-				let latitude6 = this.latitude4;
-				let longitude6 = this.longitude4;
-				let address = this.address;
-				console.log('选择百度', latitude, longitude);
-				console.log('获取当前经纬度', latitude6, longitude6);
-				window.location.href =
-					`http://api.map.baidu.com/direction?origin=latlng:${latitude6},${longitude6}|name:我的位置&destination=${latitude},${longitude}&mode=driving&region=${address}&output=html&src=webapp.baidu.openAPIdemo`;
-				//`bdapp://map/navi?location=${longitude},${latitude}&coord_type=gc02&title=${address}&content=${address}&output=html&src=andr.baidu.openAPIdemo `
-			},
-			// 调用谷歌
-			toGoogleMap() {
-				let latitude = this.latitude2;
-				let longitude = this.longitude2;
-				console.log('选择谷歌', latitude, longitude);
-			},
-			tolocation() {
-				uni.navigateTo({
-					url: '/pages/applic/location'
-				});
-			},
-			toapplic() {
-				uni.navigateTo({
-					url: '/pages/applic/appliSystem'
-				});
-			},
-			tohelpActi() {
-				uni.navigateTo({
-					// url: "/pages/applic/tohelpActi"
-					url: '/pages/cart/cart'
-				});
-			},
-			tohelpActi1() {
-				window.location.href = 'http://www.hszzyz.cn/index.php?s=/home/sqhy.html'
-			},
-			tohelpActi2() {
-				uni.navigateTo({
-					url: '/pages/applic/location'
-				})
-			},
-			tohelpActi3() {
-				uni.navigateTo({
-					url: '../applic/aed'
-				})
-			},
-			tohelpActi4() {
-				uni.navigateTo({
-					url: '/pages/applic/science'
-				})
-			},
-			toOrgan() {
-				console.log('kepuxingbaoming');
-				uni.navigateTo({
-					url: '/pages/form/tovolApply'
-				});
-			},
-			// 点击图标
-			markertap(e) {
-				console.log(e.target.markerId);
-				this.$refs.popup.open();
-				let obj = this;
-				for (let i = 0; i < obj.marker.length; i++) {
-					if (e.target.markerId == obj.marker[i].id) {
-						obj.latitude2 = obj.marker[i].latitude;
-						obj.longitude2 = obj.marker[i].longitude;
-						obj.address = obj.marker[i].address;
-					}
-				}
-			},
-			aedmarkertap(e) {
-				console.log(e.target.markerId);
-				let obj = this;
-				for (let i = 0; i < obj.aedmarker.length; i++) {
-					if (e.target.markerId == obj.marker[i].id) {
-						obj.latitude2 = obj.marker[i].latitude;
-						obj.longitude2 = obj.marker[i].longitude;
-						obj.address = obj.marker[i].address;
-					}
-				}
-				obj.$refs.popup.open();
-			},
-			jhzmarkertap(e) {
-				console.log(e.target.markerId);
-				let obj = this;
-				for (let i = 0; i < obj.jhzmarker.length; i++) {
-					if (e.target.markerId == obj.marker[i].id) {
-						obj.latitude2 = obj.marker[i].latitude;
-						obj.longitude2 = obj.marker[i].longitude;
-						obj.address = obj.marker[i].address;
-					}
-				}
-				obj.$refs.popup.open();
-			},
-			loadData() {
-				let obj = this;
-				console.log('打印当前经纬度', obj.longitude4, obj.latitude4);
-				userinfo({}).then(({
-					data
-				}) => {
-					obj.setUserInfo(data);
-					obj.to_phone = data.mobile || ''
-
-				});
-				if (obj.loadingType === 'noMore') {
-					//防止重复加载
-					return;
-				}
-				// 修改当前对象状态为加载中
-				obj.loadingType = 'loading';
-				getAed({
-					longitude: obj.longitude4,
-					latitude: obj.latitude4,
-					page: 1,
-					limit: 2
-				}).then(({
-					data
-				}) => {
-					console.log(data, 999);
-					// obj.AEDList = data
-					for (let i = 0; i < data.length; i++) {
-						data[i].space = obj.space(obj.latitude4, obj.longitude4, data[i].latitude, data[i]
-							.longitude);
-					}
-					obj.AEDList = data;
-					let arr = data.map(item => ({
-						latitude: item.latitude,
-						longitude: item.longitude,
-						iconPath: '/static/img/img014.png',
-						width: '35',
-						height: '35',
-						id: item.id,
-						address: item.address
-					}));
-					obj.aedmarker = obj.marker.concat(arr)
-					console.log(obj.AEDList, '999++++++++++++++++++++++++++');
-					obj.markerList = data;
-				});
-				getAidList({
-					page: 1,
-					limit: 2,
-					longitude: obj.longitude4,
-					latitude: obj.latitude4,
-				}).then(({
-					data
-				}) => {
-					console.log(data, '机构+++++++++++++')
-					for (let i = 0; i < data.length; i++) {
-						data[i].space = obj.space(obj.latitude4, obj.longitude4, data[i].latitude, data[i]
-							.longitude);
-					}
-					let arr = data.map(item => ({
-						latitude: item.latitude,
-						longitude: item.longitude,
-						iconPath: '/static/img/img014.png',
-						width: '35',
-						height: '35',
-						id: item.id,
-						address: item.address
-					}));
-					obj.jhzmarker = obj.marker.concat(arr)
-					obj.Mechanism = data;
-					console.log(obj.Mechanism, '888++++++++++++++++++++++++++');
-				})
-				getRescuerList({
-					longitude: obj.longitude4,
-					latitude: obj.latitude4,
-					page: 1,
-					limit: 2
-				}).then((res) => {
-					let data = res.data;
-					data = data.slice(0, 2)
-					console.log('就在身边请求数据', data);
-					console.log('data.phone333', data.phone)
-					data = data.map(d => {
-						return {
-							...d,
-							iscall: true
-						}
-					})
-					obj.jzsblist = data;
-
-					let arr = data.map(item => ({
-						latitude: item.latitude,
-						longitude: item.longitude,
-						iconPath: '/static/img/img014.png',
-						width: '35',
-						height: '35',
-						id: item.id,
-						address: item.address
-					}))
-					obj.jzsbmarker = obj.marker.concat(arr)
-				}).catch(err => {
-					console.log(err);
-				});
-			},
-			// 导航
-			openAddress(item) {
-				let obj = this;
-				obj.latitude2 = item.latitude;
-				obj.longitude2 = item.longitude;
-				obj.address = item.address;
-				this.$refs.popup.open();
-			},
-			Jump(item) {
-				// console.log(item);
-				if (item.url != '') {
-					window.open(item.url);
-					return;
-				}
-				uni.navigateTo({
-					url: '/pages/applic/info?id=' + item.id
-				});
-			},
-			open() {
-				this.$refs.popup.open();
-			},
-			close() {
-				this.$refs.popup.close();
-			},
-			navTo(url) {
-				uni.navigateTo({
-					url
-				});
-			},
-			space(lat1, lng1, lat2, lng2) {
-				console.log(lat1, lng1, lat2, lng2);
-				var radLat1 = (lat1 * Math.PI) / 180.0;
-				var radLat2 = (lat2 * Math.PI) / 180.0;
-				var a = radLat1 - radLat2;
-				var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
-				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math
-					.pow(Math.sin(b / 2), 2)));
-				s = s * 6378.137;
-				s = Math.round(s * 10000) / 10000;
-				return s * 1000; // 单位米
-			},
-			// 立即救援
-			rescue(item, index) {
-				let obj = this;
-				console.log(item, 'jiuzhu item')
-				uni.showModal({
-					content: '是否发起求救？',
-					success: res => {
-						if (res.confirm) {
-							this.$refs.popup2.open(item, index);
-							obj.rescuers_id = item.id
-							obj.user_id = item.user_id
-						}
-					}
-				})
-			},
-			close2() {
-				this.$refs.popup2.close()
-			},
-			comfirm1: function() {
-				let obj = this
-				if (obj.to_phone.toString().trim() == '') {
-					return obj.$api.msg('请输入手机号码')
-				} else {
-					console.log('obj.to_phone1111', obj.to_phone)
-					const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
-					if (!reg.test(obj.to_phone)) {
-						obj.$api.msg('请填写正确的手机号码');
-						return;
-					}
-					sos({
-						mobile: obj.to_phone,
-						address: obj.user_address,
-						latitude: obj.latitude4,
-						longitude: obj.longitude4,
-						rescuers_id: obj.rescuers_id,
-						rescuers_user_id: obj.user_id
-					}).then(res => {
-						uni.showModal({
-							title: '请耐心等待救援',
-							success: res => {
-								if (res.confirm) {
-									window.location.reload(); //重新刷新页面
-								}
-							}
-						})
-						obj.$refs.popup2.close();
-					})
-				}
-			},
-		}
-	};
-</script>
-
-<style lang="scss">
-	a {
-		text-decoration: none;
-		color: #5f5f5f;
-	}
-
-	.content {
-		// line-height: 1;
-		background-color: #ffabab;
-		// padding-bottom: 60rpx;
-	}
-
-	.popup_row {
-		width: 100%;
-		height: 500rpx;
-		background-color: #ffffff;
-		border-radius: 20rpx;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		.rows {
-			width: 100%;
-			padding: 0 24rpx;
-
-			.rows-item {
-				height: 80rpx;
-				line-height: 80rpx;
-				text-align: center;
-				width: 100%;
-				font-size: 32rpx;
-				color: #303133;
-				// border-bottom: 1rpx solid #f0f0f0;
-			}
-
-			// .row-1 {
-			// 	margin: auto;
-			// 	.first_aid {
-			// 		width: 300rpx;
-			// 		height: 300rpx;
-			// 	}
-			// }
-			// .row-2 {
-			// 	font-size: 38rpx;
-			// 	margin-top: 20rpx;
-			// }
-		}
-	}
-
-	.content {
+					url
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	a {
+		text-decoration: none;
+		color: #5f5f5f;
+	}
+
+	.content {
+		// line-height: 1;
+		background-color: #ffabab;
+		// padding-bottom: 60rpx;
+	}
+
+
+	.content {
 		background-color: #f8f6f9;
-		height: 100%;
-
-		/* 头部 轮播图 */
-		.carousel-section {
-			// padding-top: 10px;
-			overflow: hidden;
-			// background-color: #fff;
-
-			.carousel {
-				width: 744rpx;
-				height: 470rpx;
-				margin: 0 auto;
-				border-radius: 20rpx;
-				overflow: hidden;
-
-				.carousel-item {
-					width: 100%;
-					height: 100%;
-					// padding-left: 30rpx;
-					// padding-right: 30rpx;
-					overflow: hidden;
-				}
-
-				image {
-					width: 100%;
-					height: 470rpx;
-					border-radius: 20rpx;
-				}
-			}
-		}
-
-		// 分类
-		.cate-section {
-			justify-content: space-between;
-			flex-wrap: wrap;
-
-			background-color: #f8f6f9;
-			padding: 20rpx 30rpx 0rpx;
-			height: 100%;
-
-			.cate-item {
-				width: 335rpx;
-				height: 250rpx;
-				background: #FFFFFF;
-				box-shadow: 0 0 20rpx 0 rgba(50, 50, 52, 0.06);
-				border-radius: 25px;
-				flex-direction: column;
-				text-align: center;
-				align-items: center;
-				justify-content: center;
-				margin-bottom: 20rpx;
+		height: 100%;
+
+		/* 头部 轮播图 */
+		.carousel-section {
+			// padding-top: 10px;
+			overflow: hidden;
+			// background-color: #fff;
+
+			.carousel {
+				width: 744rpx;
+				height: 470rpx;
+				margin: 0 auto;
+				border-radius: 20rpx;
+				overflow: hidden;
+
+				.carousel-item {
+					width: 100%;
+					height: 100%;
+					// padding-left: 30rpx;
+					// padding-right: 30rpx;
+					overflow: hidden;
+				}
+
 				image {
-					width: 335rpx;
-					height: 250rpx;
-				}
-				// .img-wrapper {
-				// 	width: 90rpx;
-				// 	height: 90rpx;
-				// 	background: #eef4ff;
-				// 	border-radius: 14rpx;
-				// 	position: relative;
-
-				// 	image {
-				// 		position: absolute;
-				// 		left: 50%;
-				// 		top: 50%;
-				// 		transform: translate(-50%, -50%);
-				// 	}
-
-				// 	.img {
-				// 		width: 90rpx;
-				// 		height: 90rpx;
-				// 	}
-
-
-
-				// }
-
-				// .item-title {
-				// 	margin-top: 15rpx;
-				// 	font-size: 28rpx;
-				// 	font-family: PingFang SC;
-				// 	font-weight: bold;
-				// 	color: #333333;
-				// }
-			}
-		}
-
-		// 红会科普
-		.science-section {
-			width: 100%;
-			background-color: #ffffff;
-			margin-top: 18rpx;
-			padding-top: 30rpx;
-
-			.science-title {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				padding-bottom: 22rpx;
-
-				.title {
-					width: 285rpx;
-					height: 64rpx;
-					background-color: #ca121e;
-					border-radius: 32rpx;
-					color: #ffffff;
-					font-size: 32rpx;
-					line-height: 64rpx;
-					text-align: center;
-				}
-
-				image {
-					width: 68rpx;
-					height: 43rpx;
-					margin-left: 16rpx;
-					margin-right: 16rpx;
-				}
-			}
-
-			.science-box {
-				padding-left: 15rpx;
-				padding-right: 15rpx;
-				padding-bottom: 20rpx;
-				border-bottom: 1rpx solid #f0f0f0;
-				white-space: nowrap;
-				display: flex;
-				width: 100%;
-
-				// .uni-scroll-view-content{
-				// 	display: flex;
-				// }
-				.science-content {
-					// width: 100%;
-
-					// display: flex;
-					display: -webkit-box;
-
-					.science-item {
-						margin-right: 24rpx;
-						width: 198rpx;
-						display: flex;
-						flex-direction: column;
-						align-items: center;
-						text-align: center;
-
-						image {
-							width: 100%;
-							height: 145rpx;
-						}
-
-						.article-title {
-							width: 198rpx;
-							color: #333;
-							font-size: 25rpx;
-							padding-top: 20rpx;
-							padding-bottom: 16rpx;
-							font-weight: 900;
-						}
-
-						.article-content {
-							width: 198rpx;
-							color: #999999;
-							font-size: 18rpx;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							display: -webkit-box;
-							word-break: break-all;
-							-webkit-box-orient: vertical;
-							-webkit-line-clamp: 2;
-						}
-					}
-				}
-			}
-
-			.science-more {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				color: #cb131c;
-				font-size: 30rpx;
-				padding-top: 18rpx;
-				padding-bottom: 18rpx;
-
-				image {
-					width: 20rpx;
-					height: 27rpx;
-				}
-			}
-		}
-
-		// sos急救中心
-		.system {
-			width: 100%;
-			background-color: #ffffff;
-			margin-top: 18rpx;
-			padding: 40rpx 30rpx 35rpx 30rpx;
-			margin-bottom: 20rpx;
-
-			.system-map {
-				margin: 30rpx auto 0;
-				width: 689rpx;
-				height: 312rpx;
-				background-color: #ffffff;
-				// padding: 0 30rpx;
-				padding-bottom: 45rpx;
-				// .map-box {
-				// 	width: 100%;
-				// 	height: 312rpx;
-				// 	// background-color: #fff;
-
-				// }
-			}
-		}
-
-		// AED
-		.list-box {
-			padding: 0rpx 25rpx 24rpx;
-			// margin-bottom: 84rpx;
-			background-color: #fff;
-
-			.system-title {
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				height: 130rpx;
-				// padding-bottom: 22rpx;
-				background-color: #ffffff;
-
-				.title {
-					width: 285rpx;
-					height: 64rpx;
-					background-color: #ca121e;
-					border-radius: 32rpx;
-					color: #ffffff;
-					font-size: 32rpx;
-					line-height: 64rpx;
-					text-align: center;
-				}
-
-				.img {
-					width: 68rpx;
-					height: 43rpx;
-					margin-left: 16rpx;
-					margin-right: 16rpx;
-
-					image {
-						width: 68rpx;
-						height: 43rpx;
-					}
-				}
-			}
-		}
-
-		.map-box {
-			width: 100%;
-			height: 366rpx;
-		}
-
-		.list-tpl {
-			background-color: #ffffff;
-			margin: 25rpx 0rpx;
-			padding: 25rpx 25rpx;
-			font-size: 28rpx;
-			border-radius: 15rpx;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			border-bottom: 1px solid #f1f1f1;
-
-			.list-left {
-				display: flex;
-				width: 100%;
-
-				.number {
-					font-size: 32rpx;
-					margin-right: 14rpx;
-				}
-
-				.info {
-					width: 100%;
-
-					.title {
-						font-size: 32rpx;
-						color: #222222;
-						font-weight: 500;
-					}
-
-					.addr {
-						width: 400rpx;
-						margin-top: 20rpx;
-						font-size: 20rpx;
-						font-family: PingFang SC;
-						font-weight: 500;
-						color: #999999;
-					}
-				}
-			}
-
-			.image {
-				width: 20%;
-				text-align: center;
-
-				image {
-					width: 50rpx;
-					height: 50rpx;
-				}
-
-				.tip {
-					color: #7f7f7f;
-					font-size: 21rpx;
-				}
-			}
-		}
-	}
-
-	.red-box {
-		margin: 20rpx 0;
-		height: 521rpx;
-		padding: 40rpx 23rpx 35rpx 23rpx;
-		background-color: #fff;
-
-		.red-nav {
-			justify-content: space-between;
-			margin-top: 23rpx;
-
-			.left-nav {
-				width: 332rpx;
-				height: 392rpx;
-				background: #FFF3F5;
-				background-image: url(../../static/img/m1.png);
-				background-size: 100% 100%;
-			}
-
-			.right-nav {
-				width: 357rpx;
-				height: 392rpx;
-				flex-direction: column;
-				justify-content: space-between;
-
-				// background: #F6F6FF;
-				.right-top-nav {
-					width: 357rpx;
-					height: 204rpx;
-					background: #F6F6FF;
-					background-image: url(../../static/img/m2.png);
-					background-size: 100% 100%;
-				}
-
-				.right-bottom-nav {
-					width: 357rpx;
-					height: 173rpx;
-					justify-content: space-between;
-
-					view {
-						width: 171rpx;
-						height: 173rpx;
-					}
-
-					.left-item {
-						background: #F5EFFE;
-						background-image: url(../../static/img/m3.png);
-						background-size: 100% 100%;
-					}
-
-					.right-item {
-						background: #EDFEFE;
-						background-image: url(../../static/img/m4.png);
-						background-size: 100% 100%;
-					}
-				}
-			}
-		}
-	}
-
-	.popup_row2 {
-		// margin-top: 108rpx;
-		height: 440rpx;
-		border-radius: 25rpx;
-		width: 100%;
-		padding: 24rpx;
-		background-color: #f8f8f8;
-		z-index: 999;
-
-		.title {
-			border-bottom: 2rpx solid #F2F2F2;
-			color: #E63931;
-			font-size: 32rpx;
-			padding-left: 4rpx;
-			padding-bottom: 16rpx;
-			display: flex;
-			justify-content: space-between;
-
-			// align-items: center;
-			.cancel {
-				margin-left: 52rpx;
-				width: 36rpx;
-				height: 36rpx;
-
-				image {
-					width: 36rpx;
-					height: 36rpx;
-				}
-			}
-		}
-
-		.inpBox {
-			margin-top: 52rpx;
-			border: 2px solid #f2f2f2;
-			padding: 12rpx 24rpx;
-			color: #FF9797;
-			border-radius: 8rpx;
-
-			.input-placeholder {
-				// height: 70rpx;
-				font-size: 32rpx;
-				color: #FF9797;
-			}
-		}
-
-		.inpedit {
-			margin-top: 24rpx;
-			margin-left: 14rpx;
-			font-size: 28rpx;
-			color: #FF9797;
-		}
-
-		.comfirm {
-			display: flex;
-			justify-content: flex-end;
-			margin-top: 54rpx;
-
-			.comfirm1 {
-				padding: 12rpx 24rpx;
-				border-radius: 12rpx;
-				color: #FFFFFF;
-				background-color: #E63931;
-			}
-		}
-	}
-
-	.location-item {
-		z-index: 1000;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		border-bottom: 1rpx solid #E7E8EA;
-		padding: 15rpx 0;
-
-		.box-left {
-			display: flex;
-
-			.img01 {
-				width: 8rpx;
-				height: 28rpx;
-				margin-right: 18rpx;
-
-				image {
-					width: 8rpx;
-					height: 28rpx;
-				}
-			}
-
-			.img02 {
-				width: 117rpx;
-				height: 117rpx;
-				border-radius: 50%;
-
-				image {
-					width: 117rpx;
-					height: 117rpx;
-					border-radius: 50%;
-				}
-			}
-
-			.info {
-				margin-left: 16rpx;
-
-				.info-header {
-					display: flex;
-					align-items: center;
-
-					.name {
-						font-size: 32rpx;
-						color: #333333;
-					}
-
-					.distance {
-						margin-left: 25rpx;
-						font-size: 28rpx;
-						color: #303133;
-					}
-
-					.location-icon {
-						margin-left: 10rpx;
-						width: 20rpx;
-						height: 26rpx;
-
-						image {
-							width: 20rpx;
-							height: 26rpx;
-							display: inline;
-						}
-					}
-				}
-
-				.address {
-					font-size: 26rpx;
-					color: #333333;
-					margin-top: 33rpx;
-				}
-			}
-		}
-
-		.box-right {
-			.img {
-				height: 107rpx;
-
-				image {
-					width: 107rpx;
-					height: 107rpx;
-				}
-			}
-
-			.called {
-				margin-right: 16rpx;
-				height: 107rpx;
-				line-height: 107rpx;
-				font-size: 28rpx;
-				color: #CB131C;
-			}
-		}
-	}
-
-	.ewm {
-		width: 75rpx;
-		height: 75rpx;
-		position: absolute;
-		right: 10rpx;
-		bottom: 200rpx;
-		background-color: #fff;
-		border-radius: 50%;
-
-		box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: 0.6);
-
-		image {
-			width: 50rpx;
-			height: 50rpx;
-			position: absolute;
-			top: 0;
-			left: 0;
-			bottom: 0;
-			right: 0;
-			margin: auto;
-		}
-
-		.ewm-tit {
-			position: absolute;
-			bottom: 10rpx;
-			font-size: 10rpx;
-		}
-
-		.closeEwm {
-			width: 40rpx;
-			height: 40rpx;
-			position: absolute;
-			top: -40rpx;
-			right: -20rpx;
-
-			image {
-				width: 100%;
-				height: 100%;
-			}
-		}
-
-	}
-
-	.redkp {
-		width: 690rpx;
-		height: 145rpx;
-		background: #FFFFFF;
-		box-shadow: 0 0 20rpx 0 rgba(50, 50, 52, 0.06);
-		border-radius: 25rpx;
-		margin: auto;
-		// padding: 25rpx 45rpx;
-		align-items: center;
-		image {
-			width: 690rpx;
-			height: 145rpx;
-		}
-		.redkp-img {
-			width: 70rpx;
-			height: 89rpx;
-		}
-
-		.redkp-center {
-			font-size: 32rpx;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #333333;
-			padding-left: 30rpx;
-			flex-grow: 1;
-
-			.center-btm {
-				padding-top: 15rpx;
-				font-size: 24rpx;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: rgba(153, 153, 153, 0.5);
-			}
-		}
-
-		.goto {
-			width: 14rpx;
-			height: 27rpx;
-		}
-	}
-</style>
+					width: 100%;
+					height: 470rpx;
+					border-radius: 20rpx;
+				}
+			}
+		}
+
+		// 分类
+		.cate-section {
+			justify-content: space-between;
+			flex-wrap: wrap;
+			background-color: #f8f6f9;
+			padding: 20rpx 30rpx 20rpx;
+			height: 100%;
+			font-family: PingFang SC;
+
+			.cate-item {
+				width: 335rpx;
+				min-height: 190rpx;
+				background: #FFFFFF;
+				box-shadow: 0 0 20rpx 0 rgba(50, 50, 52, 0.06);
+				border-radius: 20rpx;
+				flex-direction: column;
+				text-align: center;
+				align-items: center;
+				justify-content: center;
+				margin-bottom: 20rpx;
+
+				.img-wrapper {
+					padding-top: 20rpx;
+					.img {
+						width: 102rpx;
+						height: 102rpx;
+					}
+				}
+
+				.item-title {
+					margin-top: 6rpx;
+					font-weight: bold;
+					height:2rem;
+				}
+			}
+		}
+
+	}
+</style>