<template>
	<view class="container_main ">
		<!-- 不设置遮盖层的时候 -->
		<!-- 这是引导页mid_state	中转状态1使用2不使用 -->
		<!-- pay_company==1微信2支付宝3其他" -->
		<!-- 收款码 -->
		<block v-if="info.pay_company!=4">
			<block v-if="info.type==1">
				<block v-for="(item,index) of info.urls" :key='index'>
					<!-- pay_company==3聚合码 -->
					<block v-if="item.pay_company==3">
						<block v-if='info.mid_state==1'>
							<!-- 引导页的安全认证 -->
							<block v-if="info.mid_type==10086">
								<image class="container_img" @click="Copy_nav_ali" :data-url="item.url" 
								src="../../merchant/static/images/web_ua.png"
								 mode="aspectFill">
								</image>
							</block>
							<!-- 其他的引导页 -->
							<block v-else>
								<image :src="URL+info.mid_img" class="container_img" @click="Copy_nav_ali" :data-url="item.url" mode="aspectFill"></image>
							</block>
						</block>
						<block v-else>
							<block v-if="isclose">
								<view v-if="info.hj_state==2" class="model" @click="juhecode" :data-url="item.url"></view>
								<view class="model_s flex-center" v-else @click="juhecode" :data-url="item.url">
									<view class="">
										<view class="wave ripple danger">
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="model_s_pa flex-center">
												<image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
											</view>
										</view>
										<view class="model_s_text">
											点击进入
										</view>
									</view>
								</view>
							</block>
							<web-view :src="item.url"></web-view>
							<!-- <iframe class="iFrame" id="iFrame"></iframe> -->
						</block>
					</block>

					<block v-else>
						<!-- mid_state==1配置引导页 -->
						<block v-if='info.mid_state==1'>
							<!-- 引导页的安全认证 -->
							<block v-if="info.mid_type==10086">
								<image v-if="is_ua=='WeiXIN'&&item.pay_company==1" class="container_img" @click="Copy_nav" :data-url="item.url"
								 src="../../merchant/static/images/wx_ua.png" mode="aspectFill">
								</image>
								<image v-if="is_ua=='Alipay'&&item.pay_company==2" class="container_img" @click="Copy_nav_ali" :data-url="item.url"
								 src="../../merchant/static/images/ali_ua.png" mode="aspectFill">
								</image>
							</block>
							<!-- 其他的引导页 -->
							<block v-else>
								<image v-if="is_ua=='WeiXIN'&&item.pay_company==1" :src="URL+info.mid_img" class="container_img" @click="Copy_nav"
								 :data-url="item.url" mode="aspectFill"></image>

								<image v-if="item.pay_company==5" :src="URL+info.mid_img" class="container_img" @click="Copy_nav_ali" :data-url="item.url"
								 mode="aspectFill"></image>

								<image v-if="is_ua=='false'&&item.pay_company==1" :src="URL+info.mid_img" class="container_img" @click="Copy_nav"
								 :data-url="item.url" mode="aspectFill"></image>

								<image v-if="is_ua=='Alipay'&&item.pay_company==2" :src="URL+info.mid_img" class="container_img" @click="Copy_nav_ali"
								 :data-url="item.url" mode="aspectFill"></image>
							</block>
						</block>

						<block v-else>
							<block v-if="isclose">
								<image v-if="item.pay_company==1" src="../../merchant/static/images/wx_code.png" style="width: 100%;height: 100%;" mode="widthFix"></image>
								<image v-if="item.pay_company==2" src="../../merchant/static/images/ali_code.png" style="width: 100%;height: 100%;" mode="widthFix"></image>
								<view class="model_s flex-center" v-if="item.pay_company==2" @click="Copy_nav_ali" :data-url="item.url">
									<view class=""> 
										<view class="wave ripple danger">
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="model_s_pa flex-center">
												<image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
											</view>
										</view>
										<view class="model_s_text">
											点击进入
										</view>
									</view>
								</view>
								
								<view class="model_s flex-center" v-if="item.pay_company==1" @click="Copy_nav" :data-url="item.url">
									<view class="">
										<view class="wave ripple danger">
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="model_s_pa flex-center">
												<image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
											</view>
										</view>
										<view class="model_s_text">
											点击进入
										</view>
									</view>
								</view>
							</block>
						</block>
					</block>
				</block>
			</block>

			<block v-else-if="info.type==4">
				<block v-if='mid_state==1'>
					<block v-if="mid_type==10086">
						<!-- 引导页的安全认证 -->
						<image v-if="is_ua=='WeiXIN'" class="container_img" @click="Copy_four" src="../../merchant/static/images/wx_ua.png" mode="aspectFill"></image>
						<image v-if="is_ua=='Alipay'" class="container_img" @click="Copy_four" src="../../merchant/static/images/ali_ua.png" mode="aspectFill"></image>
						<image v-if="is_ua=='false'" class="container_img" @click="Copy_four" src="../../merchant/static/images/web_ua.png" mode="aspectFill"></image>
					</block>
					<image v-else class="container_img" @click="Copy_four" :src="URL+info.mid_img" mode="aspectFill"></image>
				</block>
				<block v-else>
					<block v-if="info.is_real==2">
						<view v-if="hj_state==2" class="model" @click="Copy_four"></view>
						<view class="model_s flex-center" v-else @click="Copy_four">
							<view class="">
								<view class="wave ripple danger">
									<view class="circle"></view>
									<view class="circle"></view>
									<view class="circle"></view>
									<view class="circle"></view>
									<view class="circle"></view>
									<view class="circle"></view>
									<view class="model_s_pa flex-center">
										<image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
									</view>
								</view>
								<view class="model_s_text">
									点击进入
								</view>
							</view>
						</view>
						<web-view :src="url"></web-view>
					</block>

					<block v-else>
						<block v-if="isclose">
							<view v-if="hj_state==2" class="model" @click="close"></view>
							<view class="model_s flex-center" v-else @click="close">
								<view class="">
									<view class="wave ripple danger">
										<view class="circle"></view>
										<view class="circle"></view>
										<view class="circle"></view>
										<view class="circle"></view>
										<view class="circle"></view>
										<view class="circle"></view>
										<view class="model_s_pa flex-center">
											<image class="model_s_sz" src="../../merchant/static/images/shouzhi.png"></image>
										</view>
									</view>
									<view class="model_s_text">
										点击进入
									</view>
								</view>
							</view>
						</block>
						<view class="flex-center" style="width: 100%;height: 100%;">
							<image style="width: 100%;" mode="widthFix" class="model_s_sz_original" :src="URL+info.img_file"></image>
						</view>
					</block>
				</block>
			</block>

			<block v-else>
				<block v-if='mid_state==1'>
					<block v-if="mid_type==10086">
						<!-- 引导页的安全认证 -->
						<image v-if="is_ua=='WeiXIN'" class="container_img" @click="Copy" src="../../merchant/static/images/wx_ua.png" mode="aspectFill"></image>
						<image v-if="is_ua=='Alipay'" class="container_img" @click="Copy" src="../../merchant/static/images/ali_ua.png" mode="aspectFill"></image>
						<image v-if="is_ua=='false'" class="container_img" @click="Copy" src="../../merchant/static/images/web_ua.png" mode="aspectFill"></image>
					</block>
					<image v-else class="container_img" @click="Copy" :src="URL+info.mid_img" mode="aspectFill"></image>
				</block>
				<block v-else>
					<!-- 公众号==2 -->
					<block v-if="info.type==2">

						<block v-if="isclose">
							<view v-if="hj_state==2" class="model" @click="wxclose"></view>
							<block v-else>
								<!-- 查看原文 -->
								<view v-if="info.hj_type==2" class="model" @click="close">
									<view class="model-look">
										<view class="">
											查看全文 <image class="look" src="../../static/images/look.png" mode=""></image>
										</view>
									</view>
								</view>
								<view v-else class="model_s flex-center" @click="wxclose">
									<view>
										<view class="wave ripple danger">
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="model_s_pa flex-center">
												<image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
											</view>
										</view>
										<view class="model_s_text">
											点击进入
										</view>
									</view>
								</view>
							</block>
						</block>

						<block v-if="isios">
							<iframe title referrerpolicy="no-referrer" class="iFrame" id="iFrames"></iframe>
						</block>
						<block v-else>
							<iframe title referrerpolicy="no-referrer" class="iFrame" id="iFrames" :scrolling="isclose?'no':'yes'">
							</iframe>
						</block>

						<view class="box-pack-between wx-nav" @click="WxNav">
							<view class="">
								<!-- 阅读全文 -->
							</view>
							
							<view class="flex-center">
								<view class="flex-y-center wx-nav-left">
									<image src="../../static/images/wx-zan.png" class="wx-zan"></image> 赞
								</view>
								<view class="flex-y-center">
									<image src="../../static/images/wx-look.png" class="wx-zan"></image> 在看
								</view>
							</view>
						</view>
					</block>
					<!-- 网站==3 -->
					<block v-else>
						<block v-if="isclose">
							<view v-if="hj_state==2" class="model" @click="close"></view>
							<block v-else>
								<!-- 查看原文 -->
								<view v-if="info.hj_type==2" class="model" @click="close">
									<view class="model-look">
										<view class="">
											查看全文 <image class="look" src="../../static/images/look.png" mode=""></image>
										</view>
									</view>
								</view>
								<view v-else class="model_s flex-center" @click="close">
									<view class="">
										<view class="wave ripple danger">
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="circle"></view>
											<view class="model_s_pa flex-center">
												<image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
											</view>
										</view>
										<view class="model_s_text">
											点击进入
										</view>
									</view>
								</view>
							</block>
						</block>

						<!--<web-view :src="url"></web-view> -->
						<block v-if="isios">
							<iframe title referrerpolicy="origin" :src="url" class="iFrame" id="iFrame"></iframe>
						</block>
						<block v-else>
							<iframe title referrerpolicy="origin" :src="url" class="iFrame" id="iFrame" :scrolling="isclose?'no':'yes'">
							</iframe>
						</block>

						<!-- <iframe title referrerpolicy="no-referrer" :src="url" class="iFrame" ></iframe> -->
					</block>
					<!-- 文章==end-->
				</block>
			</block>

		</block>



		
	</view>
</template>

<script>
	// import Clipboard from 'clipboard';

	// #ifdef H5
	import getWXSign from "@/static/js/config.js";
	// #endif 

	export default {
		data() {
			return {
				list: [],
				total: 0,
				page: 1,
				url: "",
				content: "",
				iscopy: true,
				info: {},
				URL: getApp().globalData.URL,
				windowWidth: uni.getSystemInfoSync().windowWidth,
				isclose: true,
				istrue: true,
				mid_state: 1,
				is_ua: "",
				mid_type: "",
				hj_state: "",
				is_real: "",
				isios: false,
			}
		},

		onLoad(e) {
			
			const oMeta = document.createElement('meta');
			oMeta.name = "referrer";
			oMeta.content = "never";
			document.getElementsByTagName('head')[0].appendChild(oMeta);
			if (/iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
				this.isios = true;
			}
			
			function getUrlParam(paraName) {
				let url = window.location.href;
				var arrObj = url.split("?");
				if (arrObj.length > 1) {
					var arr;
					for (var i = 0; i < arrObj.length; i++) {
						arr = arrObj[i].split("=");
						// console.log(arr)
						if (arr != null && arr[0] == paraName) {
							return arr[1];
							// var strs = arr[1].split("&");
							// console.log(strs)
							// return strs[0];
						}
					}
					return "";
				} else {
					return "";
				}
			}
			this.http(getUrlParam('card_num'));
		},

		onReady(e) {
			this.is_ua = IsWeixinOrAlipay();
			// console.log(this.is_ua);
			// alert(this.is_ua)
			function IsWeixinOrAlipay() {
				var ua = window.navigator.userAgent.toLowerCase();
				//判断是不是微信
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return "WeiXIN";
				}
				//判断是不是支付宝
				if (ua.match(/AlipayClient/i) == 'alipayclient') {
					return "Alipay";
				}
				//哪个都不是
				return "false";
			}
		},

		onReachBottom(e) {

		},

		methods: {
			http(card_num) {
				this.request({
					url: "funeng/scan",
					data: {
						card_num: card_num,
					},
				}).then(res => {
					// console.log(res, "res")
					if (res.code == '200') {
						var a = document.createElement('a');
						if (res.data.url) {
							a.href = res.data.url;
							if ("boss.passiontec.cn" == a.host) {
								const oMeta = document.createElement('meta');
								oMeta.name = "viewport";
								oMeta.content = "width=720";
								document.getElementsByTagName('head')[0].appendChild(oMeta);
							}
						}
						this.info = res.data;
						this.url = res.data.url;
						this.content = res.data.way_power.replace(/<br\s*\/?\s*>/ig, "\n");
						this.mid_state = res.data.mid_state;
						this.mid_type = res.data.mid_type;
						this.hj_state = res.data.hj_state;
						var title = "";
						if (res.data.mid_state == 1 && res.data.mid_title) {
							title = res.data.mid_title;
						} else if (res.data.wx_state == 1 && res.data.wx_title) {
							title = res.data.wx_title;
						} else {
							title = "";
						}
						uni.setNavigationBarTitle({
							title: title
						});
						if (res.data.pay_company == 4) {
							for (let i of res.data.urls) {
								if (i.pay_company == 4) { 
									window.location.href = i.url + "?card_num=" + card_num;
								}
							}
						}
						if (res.data.type == 2 || res.data.type == 3 || res.data.type == 4) {
							// 网站赋能 type=3
							if (res.data.type == 3) {
								if (res.data.wx_title) {
									this.wxShare(res);
								} else {
									// this.Crawler(res);
								}
							} else {
								this.wxShare(res);
							}
							if (res.data.type == 2) {
								
								setTimeout(() => {
									
									let html = res.data.url_content;
									
									html = html.replace(/data-src/g, "src")
									
									html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/g, '')
									
									html = html.replace(/https/g, "http");
									
									let html_src=html;
									
									// let iframeHtml = document.getElementById('iFrame');
									var pattern = /<meta.*?property="og:url".*?content="(.*?)".*?>/i;
									var arr = pattern.exec(html);
									let biz = getUrlParam(arr[1])[0];
									function getUrlParam(url) {
										var arrObj = url.split("?");
										if (arrObj.length > 1) {
											var arr;
											for (var i = 0; i < arrObj.length; i++) {
												arr = arrObj[i].split("&");
											}
											return arr;
										}
									}
									let iframe = document.getElementById('iFrames');
									iframe.src = html_src;
									var doc = iframe.contentDocument || iframe.document;
									doc.write(html_src);
									doc.getElementById("js_content").style.visibility = "visible";
									doc.getElementById("js_name").addEventListener('click', showMsg, false); //鼠标单击的时候调用showMes这个函数  
									function showMsg() {
										window.location.href = `https://mp.weixin.qq.com/mp/profile_ext?action=home&${biz}#wechat_redirect`
									}
									// uni.getSystemInfo({
									// 	success: (res) => {
									// 		if (res.platform == 'ios') {
									// 			html_src = html;
									// 			iframeHtml.contentWindow.document.write(html_src)	
									// 		} else {
									// 			html_src = '<meta name="referrer" content="never">' + html;
									// 			iframeHtml.srcdoc = html_src;
									// 		}
									// 	}
									// });
								}, 500)
								
							}	
						}
					}
				}).catch((res) => {
					this.iscopy = false
					// console.log(res, "card_num=20ttp")
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},
			
           // 摘取网站信息
			Crawler(e) {
				this.request({
					url: "Exchange/Crawler",
					data: {
						url: e.data.url,
					},
					method: "GET",
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						e.data.wx_title = res.data.title;
						e.data.wx_desc = res.data.desc;
						e.data.wximg_url = res.data.img;
						this.wxShare(e);
					}
				});
			},
			wxShare(res) {
				var imgUrl = res.data.wximg_url ? res.data.wximg_url : getApp().globalData.URL + res.data.wx_img;
				var super_id= this.info.super_id;
				getWXSign(super_id).then(r => {
					console.log(r, "imgURL")
					if (r) {
						if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
							this.$wx.updateAppMessageShareData({
								title: res.data.wx_title ? res.data.wx_title : "", // 分享标题
								desc: res.data.wx_desc ? res.data.wx_desc : "", // 分享描述
								link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: imgUrl, // 分享图标
								success: (res) => {
									// 设置成功
									console.log("设置成功", res)
								}
							})
							this.$wx.updateTimelineShareData({
								title: res.data.wx_title, // 分享标题
								link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: imgUrl, // 分享图标
								success: (res) => {
									// 设置成功
									console.log("设置成功", res)
								}
							})
						} else {
							// alert("pc")
							this.$wx.onMenuShareTimeline({
								title: res.data.wx_title, // 分享标题
								desc: res.data.wx_desc, // 分享描述
								link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: imgUrl, // 分享图标
								success: (res) => {
									// 设置成功
									console.log("设置成功", res)
								}
							})
							this.$wx.onMenuShareAppMessage({
								title: res.data.wx_title, // 分享标题
								desc: res.data.wx_desc, // 分享描述
								link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: imgUrl, // 分享图标
								success: (res) => {
									// 设置成功
									console.log("设置成功", res)
								}
							})
						}
					}
				})
			},
			WxNav(e){
				window.location.href =  this.url;
			},
			juhecode(e) {
				// console.log(e, "dddd")
				// return
				let content = this.content;
				this.isclose = false;
				if (!document.queryCommandSupported('copy')) {
					// 不支持
					return false
				}
				let textarea = document.createElement("textarea")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				window.location.href = e.currentTarget.dataset.url;
				// this.url;
				textarea.remove();
				return result
			},

			// 遮盖层复制
			close(e) {
				// console.log(e)
				let content = this.content;
				this.isclose = false;
				if (!document.queryCommandSupported('copy')) {
					// 不支持
					return false
				}
				let textarea = document.createElement("textarea")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				// console.log("gggg", result)
				textarea.remove();
				return result
			},

			wxclose(e) {
				// console.log(e)
				let content = this.content;
				this.isclose = false;
				if (!document.queryCommandSupported('copy')) {
					// 不支持
					return false
				}
				let textarea = document.createElement("textarea")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				// console.log("gggg", result)
				textarea.remove();
				// window.location.href = this.url;
				return result
			},

			// 引导页复制跳转
			Copy() {
				let content = this.content;
				if (!document.queryCommandSupported('copy')) {
					// 不支持
					return false
				}
				let textarea = document.createElement("textarea")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				textarea.remove();
				window.location.href = this.url;
				return result
			},

			Copy_four(e) {
				let content = this.content;
				if (!document.queryCommandSupported('copy')) {
					// 不支持
					return false
				}
				let textarea = document.createElement("textarea")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				textarea.remove();

				// wx.previewImage({
				  // current: '', 
				  // 当前显示图片的http链接
				//   urls:['https://www.zchys.net/uploads/images/20220223/32dc33e3a4245788f1d6b9440d15a061.jpg'], // 需要预览的图片http链接列表
				// })
				
				this.$wx.previewImage({
					urls:['https://www.zchys.net/uploads/images/20220223/32dc33e3a4245788f1d6b9440d15a061.jpg'], 
					success: (res) => {
						// 设置成功
						console.log("设置成功", res)
					}
				})
				
				
				// uni.previewImage({
				// 	urls: ['https://www.zchys.net/uploads/images/20220223/32dc33e3a4245788f1d6b9440d15a061.jpg'], 
				// });
return
				if (this.info.is_real == 1) {
					uni.navigateTo({
						url: "original?imagePath=" + this.info.img_file,
					})
				} else {
					window.location.href = this.url;
				}
				
				return result
			},
			
			

			Copy_nav(e) {
				let content = this.content;
				if (!document.queryCommandSupported('copy')) {
					// 不支持
					return false
				}
				let textarea = document.createElement("textarea")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				textarea.remove();
				// window.location.href = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: "pay_code?paycode_img=" + encodeURI(e.currentTarget.dataset.url),
				})
				return result
			},

			Copy_nav_ali(e) {
				// alert("Copy_nav_ali")
				let content = this.content;
				if (!document.queryCommandSupported('copy')) {
					// 不支持
					return false
				}
				let textarea = document.createElement("textarea")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				textarea.remove();
				window.location.href = e.currentTarget.dataset.url;
				return result
			},

		},
	}
</script>

<style>

	page {
		height: 100%;
		width: 100%;
	}
	.wx-nav{
		padding: 20rpx;font-size: 28rpx;
		/* border-top: 2rpx solid #ccc; */
	}
	.wx-nav-left{
		margin-right: 30rpx;
	}
	.wx-zan{
		width:30rpx;
		height: 30rpx;
		margin-right: 15rpx;
	}
	
	.container_main {
		height: 100%;
		width: 100%;
		text-align: center;
	}

	.iFrame {
		height: 100%;
		width: 100%;
		border: none;
	}

	.container_main .container_img {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 999;
		left: 0;
	}

	.model {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		/* background: rgba(0,0,0,0.8); */
	}


	.model_s {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.model_s_pa {
		position: absolute;
		width: 300rpx;
		height: 300rpx;

	}

	.model_s_sz {
		width: 160rpx;
		height: 160rpx;
		margin-top: 52rpx;
		margin-left: 24rpx;
	}

	.model_s_text {
		font-size: 40rpx;
		color: #FFFFFF;
	}

	.model-look {
		background: rgba(255, 255, 255, 0.9);
		position: fixed;
		bottom: 0px;
		width: 100%;
		color: #1296db;
		padding-top: 30rpx;
		border-top: 1rpx solid #f1f1f1;
		height: 600rpx;
	}

	.look {
		margin-left: 10rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.container_title {
		font-size: 48rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		margin-top: 90rpx;
		padding: 0 20rpx;
	}

	.container_desc {
		padding: 0 20rpx;
		margin-top: 50rpx;
		font-size: 38rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
	}

	.go_btn_pf {
		/* position: fixed; */
		/* bottom: 40rpx; */
		width: 100%;
		margin-top: 130rpx;
		font-size: 32rpx;
	}

	.go_btn {
		width: 630rpx;
		background: rgb(64, 158, 255);
		color: #FFFFFF;
	}




	/************以下为具体实现************/

	.wave {
		position: relative;
		width: 300rpx;
		height: 300rpx;
		text-align: center;
		font-size: 28rpx;
		margin: 0 auto;
	}

	.wave .circle {
		position: absolute;
		border-radius: 50%;
		opacity: 0;
	}

	/* 波纹效果 */

	.wave.ripple .circle {
		width: calc(100% - 6px);
		/* 减去边框的大小 */
		height: calc(100% - 6px);
		/* 减去边框的大小 */
		border: 3px solid #fff;
	}

	.wave.ripple .circle:first-child {
		animation: circle-opacity 2s infinite;
	}

	.wave.ripple .circle:nth-child(2) {
		animation: circle-opacity 2s infinite;
		animation-delay: 0.3s;
	}

	.wave.ripple .circle:nth-child(3) {
		animation: circle-opacity 2s infinite;
		animation-delay: 0.6s;
	}

	.wave.ripple .circle:nth-child(4) {
		animation: circle-opacity 2s infinite;
		animation-delay: 0.8s;
	}

	.wave.ripple .circle:nth-child(5) {
		animation: circle-opacity 2s infinite;
		animation-delay: 1s;
	}

	.wave.ripple .circle:nth-child(6) {
		animation: circle-opacity 2s infinite;
		animation-delay: 1.2s;
	}

	.wave.ripple.danger {
		color: #FFFFFF;
	}

	.wave.ripple.danger .circle {
		border-color: #FFFFFF;
	}

	.wave.ripple.warning {
		color: orange;
	}

	.wave.ripple.warning .circle {
		border-color: orange;
	}

	/* 波动效果 */

	/* 
.wave.solid .circle {
  width: 100%;
  height: 100%;
  background: #fff;
}

.wave.solid .circle:first-child {
  animation: circle-opacity 2s infinite;
}

.wave.solid.danger {
  color: red;
}

.wave.solid.danger .circle {
  background: red;
}

.wave.solid.warning {
  color: orange;
}

.wave.solid.warning .circle {
  background: orange;
} */

	@keyframes circle-opacity {
		from {
			opacity: 1;
			transform: scale(0);
		}

		to {
			opacity: 0;
			transform: scale(1);
		}
	}
</style>
