gsytj/pages/index/index.vue

<template>
	<view class="content">
		<view class="tip">
			<image src="../../static/img/kp-tip.png" mode="widthFix"></image>
		</view>
		<view class="top-time flex">
			<view class="item flex jl" v-if="new_time">
				<!-- <image src="../../static/img/dingwei.png" mode="widthFix"></image>
				<view class="">
					{{new_address || '定位获取中'}}
				</view> -->
			</view>
			<view class="item flex jr" v-if="new_time">
				<image src="../../static/icon/rl.png" mode="widthFix"></image>
				<view class="">
					{{new_time}}
				</view>
			</view>
		</view>
		
		<view class="kp-wrap">
			<swiper class="kp-wrap" @change="change" :current="current" disable-touch :autoplay='videoAuto' >
				<swiper-item v-for="(item,index) of science" :key="item.id">
					<videoPlayer ref="player" :video="item" @goNext="nextV" @errorVideo='errvideo(item,index)' @playVideoSuccess='videoPlaySuccess(item,index)' :current="index"></videoPlayer>
				</swiper-item>
			</swiper>
			<!-- <zg-swiper :list="science"></zg-swiper> -->
		</view>
		<!-- <view class="kp-wrap">
			<swiper class="kp-wrap" :current="current" @change="stopv" >
				<swiper-item v-for="(item,index) in science" class="kp-wrap">
					<video :id="'myvideo' + index" :src="item.src"
						@error="videoErrorCallback" controls class="kp-wrap" :poster="item.poster"
						:autoplay="true" @ended="nextV"></video>
				</swiper-item>
			</swiper>
		</view> -->
		<view class="tip tip2">
			<image src="../../static/img/more-g.png" mode="widthFix"></image>
		</view>
		<view class="function-list flex">
			<template v-if="showTools">
				<view class="fun1" @click="showCard()">
					<image src="../../static/img/about-us.png" mode="widthFix"></image>
				</view>
				<view class="fun1" @click="navto('/pages/applic/appliSystem')">
					<!-- <view class="fun1" @click="openQr"> -->
					<image src="../../static/img/zxgxb.png" mode="widthFix"></image>
				</view>
				<view class="fun1" @click="openQr('yiti')">
					<image src="../../static/img/ytqgjx.png" mode="widthFix"></image>
				</view>
				<view class="fun1" @click="openQr('peixun')">
					<image src="../../static/img/jhpxbm.png" mode="widthFix"></image>
				</view>
				<view class="fun1" @click="openQr('huiyuan')">
					<image src="../../static/img/hszhydj.png" mode="widthFix"></image>
				</view>
				<view class="fun1" @click="openQr('zyz')">
					<image src="../../static/img/zyzdj.png" mode="widthFix"></image>
				</view>
				<view class="fun2" @click="openAx()">
					<image src="../../static/img/axjk.png" mode="heightFix"></image>
				</view>
				<view class="fun2" @click="showMap('jc')">
					<image src="../../static/img/fjjg.png" mode="heightFix"></image>
				</view>
				<view class="fun2"  @click="showMap('yz')">
					<image src="../../static/img/fjdaed.png" mode="heightFix"></image>
				</view>
				<view class="fun2" @click="showMap('jhz')">
					<image src="../../static/img/jhz.png" mode="heightFix"></image>
				</view>
				<!-- <view class="fun2 fun3" @click="">
					<image src="../../static/img/fjdaed.png" mode="widthFix" @click="showMap('yz')"></image>
					<image src="../../static/img/jhz.png" mode="widthFix" @click="showMap('jhz')"></image>
				</view> -->
			</template>
			<template v-else>
				<view class="map">
					<map @updated='mapChange' id="map_1" ref='map_1' style="width:100%; height: 100%"
						latitude="31.616834" longitude="113.833979"
						:markers="mark_type == 'yz'? yz_mark: jhz_mark"></map>
				</view>
				<view class="mark-list">
					<scroll-view scroll-y="true" class="mark-list flex">
						<view class="mark" v-for="item in show_list">
							<view class="mark-name clamp">
								{{item.name}}
							</view>
							<view class="mark-address clamp2">
								{{item.address || ''}}{{item.install_address || ''}}
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="back flex" @click="backTools">
					<image src="../../static/icon/back.png" mode="" class="back-lo" v-if="!showTools"></image>
					<view class="">
						返回
					</view>
				</view>
			</template>
		</view>
		<view class="tip tip3">
			<image src="../../static/img/redfc.png" mode="widthFix"></image>
		</view>
		<swiper class="fc-wrap" :autoplay="true" >
			<swiper-item v-for="fcitem in fc" class="fc" >
				<image :src="'https://red.liuniu946.com' + fcitem" mode="scaleToFill" ></image>
			</swiper-item>
		</swiper>
		<uni-popup ref="qrwrap" type="center">
			<view class="qro-wrap">
				<image src="../../static/img/ewm-wrap.png" mode="" class="qro-bg"></image>
				<view class="tit">
					请使用微信扫描二维码
				</view>
				<view class="qr-wrap flex">
					<image :src="'../../static/ewm/'+showType+'.png'" mode=""></image>
				</view>
				<view class="qr-btn" @click="closeQr">
					知道了
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="showcard" type="center">
			<view class="showcard">
				<view class="bg">
					<image class="imgBox" src="../../static/img/test_bg.png" mode="scaleToFill"></image>
				</view>
				<view class="top flex">
					<image src="../../static/img/top_bg.png" mode="aspectFill"></image>
					<view class="china-font">广水市红十字会</view>
					<view class="english-font">Red Cross Society of China Guangshui Branch</view>
					<view class="fgx"></view>
				</view>
				<view class="buttom flex">
					<view class="item flex">
						<image class="home_img" src="../../static/img/test_home.png" mode="aspectFill"></image>
						<view class="text"><text>湖北省随州市广水市<br>应山办事处广安路16号</text></view>
					</view>
					<view class="item flex">
						<image class="home_img" src="../../static/img/test_phone.png" mode="aspectFill"></image>
						<view class="text">0722-6696066</view>
					</view>
					<view class="map">
						<!-- <image class="map-box" src="../../static/img/baseaddr.png"></image> -->
						<view class="map-font flex">
							<view class="font-left">广水市红十字会</view>
							<!-- <view @click="navigation()" class="font-right">
								<image src="../../static/img/btn.png" mode="aspectFill"></image>
							</view> -->
						</view>
					</view>
					<view class="qrcode">
						<image src="../../static/icon/erweima.jpg" mode="aspectFill"></image>
					</view>
				</view>
				<image src="../../static/icon/closepop.png" mode="" class="close-show" @click="closeShow"></image>
			</view>
		</uni-popup>
		<uni-popup ref="aixmap" type="center">
			<view class=" aixin-wrap">
				<image src="../../static/ewm/axjk.png" mode="" class="aixin"></image>
				<image src="../../static/icon/closepop.png" mode="" class="close-aixin" @click="closeAx"></image>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import ZgSwiper from '@/components/zhuge-swiper/zhuge-swiper';
	import videoPlayer from './videoPlayer.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	
	import {
		getMechanismList,
		getAed,
		getAidList,
		geocoder
	} from '@/api/category'
	import {
		getdis,
		tocall,
		getListMechanism,
		getDistance
	} from '@/api/index.js';
	import {
		bannerlist
	} from '@/api/index.js';
	import {
		login,
		getUserInfo
	} from '@/api/login.js';
	import {
		details,
		deconstructArticle
	} from '@/api/info.js';
	var time = null
	export default {
		components: {
			videoPlayer,
			ZgSwiper,
		},
		data() {
			return {
				showV: true,
				swiperList: [],
				list4: [{
					url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}],
				address: [
					// {
					// 	name: '',
					// 	latitude: '',
					// 	longitude: ''
					// }
				],
				new_address: '',
				is_play: false,
				current: 0,
				mark_type: 'yz',
				show_list: [],
				showTools: true,
				scale: 18,
				latitude: 31.616834,
				longitude: 113.833979,
				covers: [],
				science: [],
				new_time: '',
				fc: [],
				timer: '',
				showType: '',
				marker: [],
				yz_mark: [],
				yz_list: [],
				jhz_mark: [],
				jhz_list: [],
				pageStartY: 0,
				pageEndY: 0,
				maxheight: '',
				videoAuto:false,//是否自动播放
			}
		},
		async onLoad(opt) {
			console.log(opt);
			await this.goLogin()
			// 获取顶部轮播视频
			this.getKpList()
			// this.getNewTime()
			// 获取底部风采图片
			this.getFc()
			// 获取定位
			this.getDy()
		},
		onShow() {
			// 每秒更新时间
			// if(this.timer)
			// this.getListMechanism()
			clearInterval(this.timer)
			this.timer = setInterval(() => {
				this.getNewTime();
			}, 1000);
		},
		computed: {
			...mapState('user', ['userInfo', 'baseURL', 'hasLogin'])
		},
		onHide() {
			clearInterval(this.timer)
		},
		onReady() {
			var that = this;
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'login']),
			getMechanismList(type) {
				let that = this
				getMechanismList({
					page: 1,
					limit: 1000
				}).then(res => {
					let arr = [];
					arr = res.data.map(item => ({
						latitude: item.latitude,
						longitude: item.longitude,
						iconPath: '/static/icon/jzsb.png',
						width: '35',
						height: '35',
						id: item.id,
						address: item.address
					}));
					that.jc_mark = that.marker.concat(arr)
					that.jc_list = res.data
					if (type == 'show') {
						that.show_list = that.jc_list
						that.showTools = false
					}
				})
			},
			// 视频错误处理
			errvideo(item,index){
				item.videoerro=true;
			},
			//视频播放成功
			videoPlaySuccess(item,index){
				item.videoerro=false;
				this.videoAuto = false
			},
			// 
			nextV() {
				if (this.current == this.science.length - 1) {
					this.current = 0
				} else {
					console.log('++');
					this.current++
				}
			},
			change(res) {
				this.current = res.detail.current;
				if(this.science[this.current].videoerro){
					this.videoAuto = true
				}else{
					this.videoAuto = false
					this.$refs.player[this.current].playVideo(this.current)
				}
			},
			openAx() {
				this.$refs.aixmap.open()
			},
			closeAx() {
				this.$refs.aixmap.close()
			},
			closeShow() {
				this.$refs.showcard.close()
			},
			stopv(res) {
				console.log(res);
				this.current = res.detail.current
				this.showV = false
				// console.log(this.current, 'this.current');
				let video = uni.createVideoContext('myvideo', this)

				video.pause()
				this.showV = true
			},
			//附近aed
			getListMechanism(type) {
				let that = this
				getAed({
					page: 1,
					limit: 1000
				}).then(res => {
					console.log(res);
					let arr = [];
					arr = res.data.map(item => ({
						latitude: item.latitude,
						longitude: item.longitude,
						iconPath: '/static/icon/aed.png',
						width: '35',
						height: '35',
						id: item.id,
						address: item.install_address
					}));
					that.yz_mark = that.marker.concat(arr)
					that.yz_list = res.data
					if (type == 'show') {
						that.show_list = that.yz_list
						that.showTools = false
					}
					
				})
			},
			mapChange() {},
			showMap(type) {
				// this.$refs.map.open()
				// console.log('type',type);
				if (type === 'yz') {
					this.mark_type = 'yz'
					if (this.yz_list && this.yz_list.length > 0) {
						this.show_list = this.yz_list
						this.showTools = false
					} else {
						this.getListMechanism('show')
						
						// this.show_list = this.yz_list
						// this.showTools = false
					}
				} else if (type === 'jhz') {
					this.mark_type = 'jhz'
					if (this.jhz_list && this.jhz_list.length > 0) {
						
						this.show_list = this.jhz_list
						this.showTools = false
					} else {
						this.getJhz('show')
					}
				} else if(type == 'jc') {
					this.mark_type = 'jc'
					if (this.jc_list && this.jc_list.length > 0) {
						
						this.show_list = this.jc_list
						this.showTools = false
					} else {
						this.getMechanismList('show')
					}
				}
			},
			backTools() {
				this.showTools = true
			},
			showCard() {
				this.$refs.showcard.open()
			},
			openQr(type) {
				this.showType = type
				this.$refs.qrwrap.open()
			},
			closeQr() {
				this.$refs.qrwrap.close()
			},
			getDy() {
				let that = this
				try {
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							// console.log('当前定位', res);
							that.setDy(res.latitude, res.longitude)
							that.getWhere(res.latitude, res.longitude)
						},
						fail() {
							that.setDy()
						}
					});
				} catch (e) {
					that.setDy()
				}

			},
			getWhere(lat, lon) {
				if (this.address && this.address.length > 0) {
					this.address = this.address.map(item => {
						item.sapce = this.sapce(lat, lon, item.latitude, item.longitude)
					})
					const sortedPeople = this.address.sort((a, b) => a.space - b.space);
					this.new_address = sortedPeople[0].name
				}


			},
			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; // 单位米
			},
			setDy(lat = 30.353495, lon = 114.316738) {
				let that = this
				that.longitude = lon
				that.latitude = lat
				that.marker = [{
					latitude: that.latitude,
					longitude: that.longitude,
					iconPath: '/static/img/img19.png',
					width: '45',
					height: '45',
				}, ]
				that.getJhz();
			},
			getJhz(type) {
				let that = this
				that.getMechanismList()
				getAidList({
					page: 1,
					limit: 1000,
					latitude: that.latitude,
					longitude: that.longitude,
				}).then(res => {
					console.log(res, 'jhz');
					let boai = [],
						jhz = [],
						arr = [];
					res.data.forEach(item => {
						// if (item.introduction.indexOf('驿站') !== -1) {
						// 	boai.push(item)
						// } else {
							jhz.push(item)
						// }
					})
					// boai = boai.sort((a, b) => a.introduction.localeCompare(b.introduction));
					arr = res.data.map(item => ({
						latitude: item.latitude,
						longitude: item.longitude,
						iconPath: '/static/icon/jhz.png',
						width: '35',
						height: '35',
						id: item.id,
						address: item.address
					}));
					that.jhz_mark = that.marker.concat(arr)
					console.log('jhzisst', that.jhz_mark);
					that.jhz_list = boai.concat(jhz)
					if (type == 'show') {
						that.show_list = that.jhz_list
						that.showTools = false
					}
				})
			},
			navto(url) {
				let that = this
				if (this.hasLogin) {
					uni.navigateTo({
						url,
						fail() {
							uni.switchTab({
								url
							})
						}
					})
				} else {
					login({
							account: '13245678911',
							password: '153624'
						})
						.then(function(e) {
							uni.setStorageSync('token', e.data.userinfo.token);
							getUserInfo({}).then((e) => {
								that.login();
								// 保存返回用户数据
								that.setUserInfo(e.data);
								uni.navigateTo({
									url,
									fail() {
										uni.switchTab({
											url
										})
									}
								})
							})
						})
						.catch(function(e) {
							console.log(e);
						});
				}
			},
			goLogin() {
				login({
						account: '13245678911',
						password: '153624'
					})
					.then(function(e) {
						uni.setStorageSync('token', e.data.userinfo.token);
					})
					.catch(function(e) {
						console.log(e);
					});
			},
			getNewTime() {
				// 获取当前日期对象
				const currentDate = new Date();
				// 获取当前年份
				const currentYear = currentDate.getFullYear();
				// 获取当前月份（注意：月份从 0 开始，所以需要加 1）
				const currentMonth = currentDate.getMonth() + 1;
				// 获取当前日期
				const currentDay = currentDate.getDate();
				this.new_time = currentYear + '年' + (currentMonth > 9 ? currentMonth : ('0' + currentMonth)) + '月' + (
					currentDay > 9 ? currentDay : ('0' + currentDay)) + '日'
				// console.log(this.new_time);

			},
			videoErrorCallback(err) {
				console.log(err);
			},
			getKpList() {
				let that = this
				bannerlist({
					ifyid: 72,
					page: 1,
					limit: 10
				}).then(({
					data
				}) => {
					that.science = data.list.map(item => {
						item.is_play = false
						//处理当前视频是否加载错误
						item.videoerro = false
						return item
					});
					that.science.forEach((item,index) => {
						let regex = /http.*\.mp4/g; // 匹配以 "http" 开头，以 ".mp4" 结尾的字符串
						let matches = item.content.match(regex)[0]; // 使用正则表达式匹配字符串
						console.log(matches,'matches')
						that.$set(item, 'src', matches)
						that.$set(item, 'type', 'video')
						that.$set(item, 'poster', item.image)
						/*
						details({}, item.id).then(res => {
							let regex = /http.*\.mp4/g; // 匹配以 "http" 开头，以 ".mp4" 结尾的字符串
							let matches = res.data.content.match(regex)[0]; // 使用正则表达式匹配字符串
							that.$set(item, 'src', matches)
							that.$set(item, 'type', 'video')
							that.$set(item, 'poster', item.image_input[0])
						})
						*/
					})
					try {
						that.$nextTick(
							() => {
								that.$refs.player[that.current].playVideo(that.current)
							}
						)
					} catch (e) {
						//TODO handle the exception
						// uni.showModal({
						// 	content: JSON.stringify()
						// })
					}
				});
			},
			getFc() {
				details({
					id: 332
				}).then(res => {
					// const regex = /http.*\.(png|jpg)/g;
					// this.fc = res.data.content.match(regex);
					// console.log(this.fc,'fc+++++++++');

					function extractImageUrls(text) {
						const regex = /\/uploads?[^\s]+?\.(jpg|jpeg|png|gif)/gi;
						const matches = text.match(regex);

						return matches || [];
					}


					this.fc = extractImageUrls(res.data.content);
					console.log(this.fc,'this.fc++++++++++')
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
		.content{
			height: 100%;
		}
	}
	$bl: 10.8;
	$lg: 1.5;

	.top-time {
		padding: 0 (15vw/$bl);
		font-size: (17vw/$bl);
		font-weight: bold;
		color: #666666;
		// background-color: red;
		// padding-top: (20vw/$bl);
		position: absolute;
		top: 0;
		width: 100%;
		.item {
			width: 50%;

		}

		height: (42vw/$bl);
		display: flex;

		image {
			width: (22.8vw/$bl);
			margin-right: (10vw/$bl);
		}

		.jr {
			justify-content: flex-end;
			align-items: center;
		}

		.jl {
			justify-content: flex-start;
			align-items: center;
		}
	}

	.tip {
		width: (450vw/$bl);
		height: (43vw/$bl);

		image {
			width: 100%;
		}

		margin:0 auto (5vw/$bl);
	}

	.tip2 {
		width: (415vw/$bl);

		margin: (5vw/$bl) auto (5vw/$bl);
	}

	.tip3 {
		width: (586vw/$bl);

		margin: (5vw/$bl) auto (5vw/$bl);
		position: relative;
		top: -(5vw/$bl);
	}

	.kp-wrap {
		width: (1080vw/$bl);
		height: (540vw/$bl);
		// background-color: red;
	}

	.function-list {
		width: 100vw;
		padding: 0 (75vw/$bl);
		height: (536vw/$bl);
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		position: relative;

		.back {
			position: absolute;
			right: (70vw/$bl);
			font-size: (30vw/$bl);
			top: (-60vw/$bl);
			align-items: center;

			.back-lo {
				width: (20vw/$bl);
				height: (22vw/$bl);
				margin-right: (10vw/$bl);
			}
		}

		.map {
			height: 100%;
			width: (450vw/$bl);
		}

		.mark-list {
			height: 100%;
			width: (450vw/$bl);

			.mark {

				background-color: #fff;
				width: (450vw/$bl);
				padding: (20vw/$bl);
				margin: 0 auto (20vw/$bl);
				display: flex;
				flex-direction: column;
				justify-content: center;
				border-radius: (20vw/$bl);

				&::first-of-type {
					margin-top: 0;
				}

				.mark-name {
					font-size: (32vw/$bl);
					margin-bottom: (20vw/$bl);
					font-weight: bold;
				}

				.mark-address {
					font-size: (26vw/$bl);
				}
			}
		}

		.fun1 {
			width: (292vw/$bl);
			height: (125vw/$bl);

			// background-color: red;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.fun2 {
			// width: (443vw/$bl);
			height: (240vw/$bl);

			image {
				width: 100%;
				height: 100%;
			}
		}

		.fun3 {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			image {
				width: (454vw/$bl);
				height: (115vw/$bl);
			}
		}

	}

	.fc-wrap {
		width: (1080vw/$bl);
		height:35.9vh;

		.fc {
			width: 100%;
			height: 100%;

			display: flex;
			justify-content: center;
			align-items: center;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.qro-wrap {
		// width: ;
		width: (580vw/$bl/$lg);
		height: (750vw/$bl/$lg);
		font-size: (40vw/$bl/$lg);
		font-weight: 500;
		color: #333333;
		position: relative;
		z-index: 999;

		.qro-bg {
			width: (580vw/$bl/$lg);
			height: (750vw/$bl/$lg);
		}

		.tit {
			text-align: center;
			position: absolute;
			left: 0;
			right: 0;
			bottom: (633vw/$bl/$lg);
			margin: auto;
		}

		.qr-wrap {
			width: (362vw/$bl/$lg);
			height: (362vw/$bl/$lg);
			border: (6vw/$bl/$lg) solid #2D2E39;
			border-radius: (15vw/$bl/$lg);
			position: absolute;
			left: 0;
			right: 0;
			bottom: (211vw/$bl/$lg);
			margin: auto;
			justify-content: center;
			align-items: center;

			image {
				width: (300vw/$bl/$lg);
				height: (300vw/$bl/$lg);
			}
		}

		.qr-btn {
			text-align: center;
			width: (433vw/$bl/$lg);
			line-height: (86vw/$bl/$lg);
			background: #ffe6b7;
			border-radius: (43vw/$bl/$lg);
			font-size: (35vw/$bl/$lg);
			font-weight: 800;
			color: #ad5224;
			position: absolute;
			left: 0;
			right: 0;
			bottom: (63vw/$bl/$lg);
			margin: auto;
		}
	}

	.aixin-wrap {
		width: (524vw/$bl);
		height: (560vw/$bl);
		position: relative;

		.aixin {
			width: 100%;
			height: 100%;
		}
	}

	.showcard {
		position: relative;
		.close-show {
			width: (52vw/$bl);
			height: (52vw/$bl);
			position: absolute;
			left: 0;
			right: 0;
			bottom: (-82vw/$bl);
			margin: auto;
			
		}
		.flex {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		width: (610vw/$bl);
		background-color: #fff;
		min-height: (100vw/$bl);
		// border-radius: (20vw/$bl);
		border: (6vw/$bl) solid #e01a1c;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			padding: 20rpx;

			.imgBox {
				width: 100%;
			}
		}

		.top {
			flex-direction: column;
			width: 100%;

			image {
				width: (312vw/3*2/$bl);
				height: (312vw/3*2/$bl);
				border-color: linear-gradient(0deg, #e01a1c, #e01a1c);
				border-radius: 50%;
				margin-top: (85vw/3*2/$bl);
			}

			.china-font {
				z-index: 0;
				width: 100%;
				font-size: (56vw/3*2/$bl);
				padding-left: (20vw/3*2/$bl);
				letter-spacing: 15rpx;
				font-family: Swei Fist Leg CJK SC;
				font-weight: bold;
				color: #e01a1c;
				line-height: 1;
				margin-top: (19vw/3*2/$bl);
				text-align: center;
			}

			.english-font {
				margin-top: (14vw/3*2/$bl);
				z-index: 0;
				letter-spacing: (-1.9vw/3*2/$bl);
				width: 100%;
				font-size: (20vw/3*2/$bl);
				font-weight: bold;
				color: #e01a1c;
				text-align: center;
			}

			.fgx {
				margin-top: (25vw/3*2/$bl);
				z-index: 0;
				width: (625vw/3*2/$bl);
				border-bottom: 1rpx dashed #e01a1c;
			}
		}

		.buttom {
			flex-direction: column;

			.item {
				z-index: 0;
				margin: 0 auto;
				margin-top: 20rpx;
				width: (532vw/3*2/$bl);
				border: 1rpx solid #e01a1c;
				border-radius: (38vw/3*2/$bl);
				justify-content: flex-start;

				.home_img {
					height: (58vw/3*2/$bl);
					width: (58vw/3*2/$bl);
					margin: 8rpx 13rpx;
					flex-shrink: 0;
				}

				.text {
					display: inline-block;
					// padding-left: 75rpx;
					padding-right: (38vw/3*2/$bl);
					letter-spacing: 1.2rpx;
					font-size: (25vw/3*2/$bl);
					font-weight: bold;
					text-align: center;
					flex-grow: 1;

					.text1 {
						padding-left: (60vw/3*2/$bl);
					}
				}
			}

			.map {
				margin-top: (25vw/3*2/$bl);
				background-color: #ffffff;
				z-index: 0;
				width: (517vw/3*2/$bl);
				border: 2rpx solid #ea3638;
				line-height: 0;

				.map-box {
					width: (513vw/3*2/$bl);
					height: (286vw/3*2/$bl);
					background: #ffffff;
				}

				.map-font {
					height: (90vw/3*2/$bl);
					padding: 0 (20vw/3*2/$bl);
					justify-content: center;

					.font-left {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: (29vw/3*2/$bl);
						color: #333333;
						line-height: 1;
					}

					.font-right {
						border-radius: 10rpx;
						overflow: hidden;
						background-color: #1593ff;

						image {
							width: (120vw/3*2/$bl);
							height: (45vw/3*2/$bl);
						}
					}
				}
			}

			.qrcode {
				width: (517vw/3*2/$bl);

				image {
					width: (517vw/3*2/$bl);
					height: (517vw/3*2/$bl);
					margin: (20vw/3*2/$bl) 0 (36vw/3*2/$bl);
				}
			}
		}
	}

	.map-wrap {
		background-color: #fff;
		position: relative;

		// top: (120vw/$bl);
		.map {
			height: 100%;
			width: (450vw/$bl);
			background-color: red;
		}
	}

	.clamp2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.close-aixin {
		width: (52vw/$bl);
		height: (52vw/$bl);
		position: absolute;
		left: 0;
		right: 0;
		bottom: (-82vw/$bl);
		margin: auto;
	}

	/* 一行显示 */
	.clamp {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}
</style>