banma/pages/index/index old.vue

<template>
	<view class="">
		<view class="btn" @click="takephotos">
			点击保存
		</view>
		<view class="swiperBox">
			<swiper duration="100" :style="{height: swiperHeight+'px'}" @change='swiperChange' :current="current"
				:indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in list" :key="index">
					<view class="swiper-item swiper-itemcopy" :id='"copyswiperItem"+index'>
						<view class="titleBox" :style="{background: 'url('+BASE_URL+jt_bg1+')'}">
							<!-- <image :src="BASE_URL+item.qrimage" mode=""></image> -->
							<limeQrcodeVue ref="qrcodeRef"
								:value="BASE_URL1+`/h5/#/pages/deal/productInfo?id=${item.id}&rand_num=${item.rand_num}`"
								size="112rpx"></limeQrcodeVue>
							<view class="title">
								<p>{{item.title1}}</p>
								<p>{{item.title2}}</p>
								<p class="warn">{{item.title3}}</p>
							</view>
							<!-- <image class="jtbj" src="../../static/logo.png" mode=""></image> -->
						</view>
						<view class="content" :style="{background: 'url('+BASE_URL+jt_bg2+')'}">
							<view class="" :id='"copycontent"+index'>

							</view>
							<view class="watermark"
								v-if="item.watermark_info&&item.watermark_info.type==1||item.watermark_info&&item.watermark_info.type==3">

								<view v-for="it in 9" class=""
									:style="{transform: 'rotate('+item.watermark_info.angle+'deg)',opacity:(100-item.watermark_info.opacity*1)*0.01,color:item.watermark_info.color,marginTop:item.watermark_info.hh+'px',marginBottom:item.watermark_info.hh+'px',marginLeft:item.watermark_info.ww+'px',marginRight:item.watermark_info.ww+'px',fontSize:item.watermark_info.text_font+'px',fontWeight:item.watermark_info.bold==1?'bold':'',fontFamily:item.watermark_info.typeface==1?'typeface1':item.watermark_info.typeface==2?'typeface2':item.watermark_info.typeface==3?'typeface3':item.watermark_info.typeface==4?'typeface4':item.watermark_info.typeface==5?'typeface5':item.watermark_info.typeface==6?'typeface6':''}">
									<image :src="BASE_URL+item.watermark_info.image" mode=""
										v-if="item.watermark_info.image&&item.watermark_info.type==1"></image>
									<text
										v-if="item.watermark_info.water_text&&item.watermark_info.type==3">{{item.watermark_info.water_text}}</text>
								</view>
							</view>
							<view class="watermark1"
								:style="{left:item.watermark_info.waterPos==0?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==1?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==4?0+item.watermark_info.voffset+'px':item.watermark_info.waterPos==7?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==2?'calc( 40%'+' + '+item.watermark_info.xx+'px )':item.watermark_info.waterPos==5?'calc( 40%'+' + '+item.watermark_info.voffset+'px )':item.watermark_info.waterPos==8?'calc( 40%'+' + '+item.watermark_info.xx+'px )':'',top:item.watermark_info.waterPos==0?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==1?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==2?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==3?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==4?'40%':item.watermark_info.waterPos==5?'40%':item.watermark_info.waterPos==6?'40%':'',right:item.watermark_info.waterPos==3?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==6?0+item.watermark_info.waterPos+'px':item.watermark_info.waterPos==9?0+item.watermark_info.xx+'px':'',bottom:item.watermark_info.waterPos==7?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==8?0+item.watermark_info.ww+'px':item.watermark_info.waterPos==9?0+item.watermark_info.xx+'px':'',fontWeight:item.watermark_info.bold==1?'bold':'',fontFamily:item.watermark_info.typeface==1?'typeface1':item.watermark_info.typeface==2?'typeface2':item.watermark_info.typeface==3?'typeface3':item.watermark_info.typeface==4?'typeface4':item.watermark_info.typeface==5?'typeface5':item.watermark_info.typeface==6?'typeface6':''}"
								v-if="item.watermark_info&&item.watermark_info.type==2||item.watermark_info&&item.watermark_info.type==4">

								<view class=""
									:style="{transform: 'rotate('+item.watermark_info.angle+'deg)',color:`rgba(${hexToRgb(item.watermark_info.color).rgb},${(100-item.watermark_info.opacity*1)*0.01})`,fontSize:item.watermark_info.text_font+'px'}">
									<image :src="BASE_URL+item.watermark_info.image" mode=""
										v-if="item.watermark_info.image&&item.watermark_info.type==2"></image>
									<text
										v-if="item.watermark_info.water_text&&item.watermark_info.type==4">{{item.watermark_info.water_text}}</text>
								</view>
							</view>

						</view>
					</view>
					<view class="swiper-item" :id='"swiperItem"+index'>
						<view class="titleBox" :style="{background: 'url('+BASE_URL+jt_bg1+')'}">
							<!-- <view class="titleBox"> -->
							<!-- <image :src="BASE_URL+item.qrimage" mode=""></image> -->
							<limeQrcodeVue ref="qrcodeRef"
								:value="BASE_URL1+`/h5/#/pages/deal/productInfo?id=${item.id}&rand_num=${item.rand_num}`"
								size="112rpx"></limeQrcodeVue>
							<view class="title">
								<p>{{item.title1}}</p>

								<p>{{item.title2}}</p>
								<p class="warn">{{item.title3}}</p>
							</view>
						</view>
						<view class="content" v-if="item.detail" :style="{background: 'url('+BASE_URL+jt_bg2+')'}">
							<view class="" :id='"content"+index'>
								<u-parse :content="item.detail"></u-parse>
							</view>

							<view class="watermark"
								v-if="item.watermark_info&&item.watermark_info.type==1||item.watermark_info&&item.watermark_info.type==3">

								<view v-for="it in 100" class=""
									:style="{transform: 'rotate('+item.watermark_info.angle+'deg)',opacity:(100-item.watermark_info.opacity*1)*0.01,color:item.watermark_info.color,marginTop:item.watermark_info.hh+'px',marginBottom:item.watermark_info.hh+'px',marginLeft:item.watermark_info.ww+'px',marginRight:item.watermark_info.ww+'px',fontSize:item.watermark_info.text_font+'px',fontWeight:item.watermark_info.bold==1?'bold':'',fontFamily:item.watermark_info.typeface==1?'typeface1':item.watermark_info.typeface==2?'typeface2':item.watermark_info.typeface==3?'typeface3':item.watermark_info.typeface==4?'typeface4':item.watermark_info.typeface==5?'typeface5':item.watermark_info.typeface==6?'typeface6':''}">
									<image :src="BASE_URL+item.watermark_info.image" mode=""
										v-if="item.watermark_info.image&&item.watermark_info.type==1"></image>
									<text
										v-if="item.watermark_info.water_text&&item.watermark_info.type==3">{{item.watermark_info.water_text}}</text>
								</view>
							</view>
							<view class="watermark1"
								:style="{left:item.watermark_info.waterPos==0?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==1?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==4?0+item.watermark_info.voffset+'px':item.watermark_info.waterPos==7?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==2?'calc( 40%'+' + '+item.watermark_info.xx+'px )':item.watermark_info.waterPos==5?'calc( 40%'+' + '+item.watermark_info.voffset+'px )':item.watermark_info.waterPos==8?'calc( 40%'+' + '+item.watermark_info.xx+'px )':'',top:item.watermark_info.waterPos==0?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==1?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==2?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==3?0+item.watermark_info.yy+'px':item.watermark_info.waterPos==4?'40%':item.watermark_info.waterPos==5?'40%':item.watermark_info.waterPos==6?'40%':'',right:item.watermark_info.waterPos==3?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==6?0+item.watermark_info.waterPos+'px':item.watermark_info.waterPos==9?0+item.watermark_info.xx+'px':'',bottom:item.watermark_info.waterPos==7?0+item.watermark_info.xx+'px':item.watermark_info.waterPos==8?0+item.watermark_info.ww+'px':item.watermark_info.waterPos==9?0+item.watermark_info.xx+'px':'',fontWeight:item.watermark_info.bold==1?'bold':'',fontFamily:item.watermark_info.typeface==1?'typeface1':item.watermark_info.typeface==2?'typeface2':item.watermark_info.typeface==3?'typeface3':item.watermark_info.typeface==4?'typeface4':item.watermark_info.typeface==5?'typeface5':item.watermark_info.typeface==6?'typeface6':''}"
								v-if="item.watermark_info&&item.watermark_info.type==2||item.watermark_info&&item.watermark_info.type==4">

								<view class=""
									:style="{transform: 'rotate('+item.watermark_info.angle+'deg)',color:`rgba(${hexToRgb(item.watermark_info.color).rgb},${(100-item.watermark_info.opacity*1)*0.01})`,fontSize:item.watermark_info.text_font+'px'}">
									<image :src="BASE_URL+item.watermark_info.image" mode=""
										v-if="item.watermark_info.image&&item.watermark_info.type==2"></image>
									<text
										v-if="item.watermark_info.water_text&&item.watermark_info.type==4">{{item.watermark_info.water_text}}</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<u-overlay :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<image :style="{height: swiperHeight+'px'}" :src="url" mode=""></image>
					<p>长按保存到本地</p>
				</view>
			</view>
		</u-overlay>
		<u-overlay :show="show2" @click="show2 = false" @touchstart="start" @touchend="end" @touchmove="move">
			<view class="warp">
				<view class="rect2">
					<image src="../../static/swiper1.png" mode=""></image>
					<p style="color: #fff;">{{alert2}}</p>
				</view>
			</view>
		</u-overlay>
		<u-overlay :show="show1" @click="show1 = false">
			<view class="warp">
				<view class="rect1" @tap.stop>
					<image src="../../static/warn.png" mode=""></image>
					<p>{{alert1}}</p>
					<u-button color="#A5CF49" type="success" shape="circle" text="确认收藏" @click="addFavorite"></u-button>
				</view>
			</view>
		</u-overlay>

	</view>
</template>

<script setup>
	import limeQrcodeVue from '../../uni_modules/lime-qrcode/components/l-qrcode/l-qrcode.vue';
	import html2canvas from 'html2canvas';
	import {
		BASE_URL,
		BASE_URL1
	} from '../../utils/http.js'
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		nextTick,
		ref
	} from "vue"
	import {
		getsimpleimages,
		getplatformeditor,
		getplatformmeun
	} from '@/utils/api.js'
	let isSave = ref(false)
	let show = ref(false)
	let show1 = ref(false)
	let show2 = ref(false)
	let startData = ref({
		clientX: '',
		clientY: '',
	})
	let moveX = ref(0)
	let touch = ref({})
	// let touch=(e)=>{
	// 	console.log(123,e)
	// 	current.value++
	// 	// show2.value = false
	// }
	// 触摸touch事件
	let start = (e) => { //@touchstart 触摸开始
		startData.value.clientX = e.changedTouches[0].clientX; //手指按下时的X坐标         
	}
	let end = (e) => { //@touchend触摸结束
		moveX.value = 0; //触摸事件结束恢复原状
		console.log(123, touch.value.clientX - startData.value.clientX)
		if (touch.value.clientX - startData.value.clientX > 0) { //在事件结束时，判断滑动的距离是否达到出发需要执行事件的要求
			if (current.value != 0) {
				current.value -= 1
			}
		} else {
			current.value += 1
			// this.touch = {};
		}
	}
	let move = (event) => { //@touchmove触摸移动
		let touch1 = event.touches[0]; //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
		touch.value = touch1;
		let data = touch1.clientX - startData.value.clientX;
		if (touch1.clientX < startData.value.clientX) { //向左移动
			if (data < -250) {
				data = -250;
			}
		}
		if (touch1.clientX > startData.value.clientX) { //向右移动
			if (moveX.value == 0) {
				data = 0
			} else {
				if (data > 50) {
					data = 50;
				}
			}
		}
		moveX.value = data;
	}
	let swiperChange = (e) => {

		current.value = e.detail.current
		var dom = document.getElementById('swiperItem' + current.value); // 获取dom元素

		if (dom && dom.children[1]) {
			swiperHeight.value = 67 + dom.children[1].clientHeight
		} else {
			swiperHeight.value = 67
		}
		if (current.value == list.value.length - 2) {
			page.value += 1
			getsimpleimages({
				page: page.value,
				page_num: 12
			}).then(res => {
				list.value = [...list.value, ...res.data]
				list.value.forEach(item => {
					// item.detail=getspan(item.detail)

				})
			})
		}
		// if (current.value % 10 == 0 && current.value != 0) {
		// 	page.value += 1
		// 	getsimpleimages({
		// 		page: page.value,
		// 		page_num: page_num
		// 	}).then(res => {
		// 		list.value = [...list.value, ...res.data]
		// 		list.value.forEach(item => {
		// 			// item.detail=getspan(item.detail)

		// 		})
		// 	})
		// }

	}
	let page_num = 1
	let page = ref(1)
	let url = ref()
	let swiperHeight = ref(67)
	let current = ref(0)
	let list = ref([])
	let refList = ref([])
	let setBoxRef = (el) => {
		if (el) {
			refList.value.push(el)
		}
	}
	//收藏网站
	// 收藏本站
	let addFavorite = () => {
		var url = window.location;
		var title = '斑马交易平台';
		var ua = navigator.userAgent.toLowerCase();
		if (ua.indexOf("360se") > -1) {
			alert("您的浏览器不支持自动加入收藏，请手动设置！");
		} else if (ua.indexOf("msie 8") > -1) {
			window.external.AddToFavoritesBar(url, title); //IE8
		} else if (document.all) { //IE类浏览器
			try {
				window.external.addFavorite(url, title);
			} catch (e) {
				alert('您的浏览器不支持自动加入收藏，请手动设置！');
			}
		} else if (window.sidebar) { //firfox等浏览器；
			window.sidebar.addPanel(title, url, "");
		} else {
			alert('您的浏览器不支持自动加入收藏，请手动设置！');
		}
		show1.value = false
	}


	let takephotos = () => {
		// var dom = document.getElementById('swiperItem' + current.value); // 获取dom元素
		// // var dom1 = document.getElementById('swiperItem'); // 获取dom元素
		// if (dom && dom.children[1]) {
		// 	swiperHeight.value = 67 + dom.children[1].clientHeight
		// } else {
		// 	swiperHeight.value = 67
		// }
		// html2canvas(dom).then((canvas) => {
		// 	url.value = canvas.toDataURL("image/png").replace('image/png', 'image/octet-stream');
		// 	show.value = true
		// });
		var swiper = document.getElementById('copyswiperItem' + current.value); // 获取dom元素
		var dom = document.getElementById('content' + current.value); // 获取dom元素
		var dom1 = document.getElementById('copycontent' + current.value); // 获取dom元素
		dom1.innerHTML = dom.innerHTML
		let res = domTrans(dom1)
		let html = forFn(res)
		dom1.innerHTML = html
		html2canvas(swiper, {
			allowTaint: true,
			useCORS: true,
		}).then((canvas) => {
			url.value = canvas.toDataURL("image/png").replace('image/png', 'image/octet-stream');
			show.value = true
		});
	}
	let alert1 = ref('')
	let alert2 = ref('')
	let jt_bg1 = ref('')
	let jt_bg2 = ref('')
	onLoad(() => {
		getplatformmeun().then(res => {
			uni.setNavigationBarTitle({
				title: res.data.name
			});
			jt_bg1.value = res.data.jt_bg1
			jt_bg2.value = res.data.jt_bg2
		})
		getplatformeditor().then(res => {
			alert1.value = res.data.alert1
			alert2.value = res.data.alert2
		})
		getsimpleimages({
			page: page.value,
			page_num: 12
		}).then(res => {
			show2.value = true
			list.value = res.data
			// list.value.forEach(item=>{
			// 	item.detail=getspan(item.detail)

			// })
			setTimeout(() => {
				var dom = document.getElementById('swiperItem' + current.value); // 获取dom元素
				if (dom && dom.children[1]) {
					swiperHeight.value = 67 + dom.children[1].clientHeight
				} else {
					swiperHeight.value = 67
				}
			})
			setTimeout(() => {
				show2.value = false
			}, 5000)
		})
		let flag = uni.getStorageSync('collect')
		if (!flag) {
			show1.value = true
			uni.setStorageSync('collect', true)
		}

	})


	onShow(() => {

	})

	function hexToRgb(val) { //HEX十六进制颜色值转换为RGB(A)颜色值
		// 16进制颜色值的正则
		var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
		// 把颜色值变成小写
		var color = val.toLowerCase();
		var result = '';
		if (reg.test(color)) {
			// 如果只有三位的值，需变成六位，如：#fff => #ffffff
			if (color.length === 4) {
				var colorNew = "#";
				for (var i = 1; i < 4; i += 1) {
					colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
				}
				color = colorNew;
			}
			// 处理六位的颜色值，转为RGB
			var colorChange = [];
			for (var i = 1; i < 7; i += 2) {
				colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
			}
			result = colorChange.join(",")
			return {
				rgb: result,
				r: colorChange[0],
				g: colorChange[1],
				b: colorChange[2]
			};
		} else {
			result = '无效';
			return {
				rgb: result
			};
		}

	}


	function getspan(str) {
		// let st=str.replace(new RegExp('font', 'g'), 'span')
		var list1 = str.split('</span>')
		var list2 = []
		list1.forEach(val => {
			if (val.indexOf("<span") > -1) {
				list2.push({
					isspan: true,
					arr: val.split("<span")
				})
			} else {
				list2.push({
					isspan: false,
					arr: val
				})
			}
		})
		var list3 = []
		list2.forEach(val => {
			if (val.isspan) {
				list3.push({
					...val,
					style: val.arr[1].split('>')[0],
					span: val.arr[1].split('>')[1]
				})
			} else {
				list3.push({
					...val
				})
			}
		})
		var html = ''
		list3.forEach(val => {
			if (val.isspan) {
				html = html + val.arr[0]
				var span = ''
				for (var a = 0; a < val.span.length; a++) {
					span = span + `<span${val.style}>${val.span[a]}</span>`
				}
				html = html + span
			} else {
				html = html + val.arr
			}
		})
		return html
	}
	onPullDownRefresh(() => {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	// 将DOM转换为js对象
	function domTrans(dom) {
		// 总dom树
		let tree = [];

		// 递归, node = 当前的节点，dataNode = 数据插入的节点
		const loop = (node, dataNode) => {
			// 当前节点的模板
			let temp = {
				type: node.nodeType,
			};
			// 如果是文本节点 或 单标签节点
			if (temp.type == 3 && node.nodeValue.match(/\S/)) {
				temp["content"] = node.nodeValue;
				temp["tag"] = node.nodeName;
				dataNode.push(temp);
			}

			// 元素节点
			if (temp.type == 1) {
				let attributes = getAttribute(node);

				// 如果没有属性，不添加 attributes
				if (attributes) temp["attributes"] = attributes;

				var newNode = node.childNodes

				var newNode2
				if (newNode[0] && newNode.length <= 1) {
					newNode2 = newNode[0].childNodes.length
				}
				// 当前节点下还有子节点
				if (node.childNodes.length > 1 || newNode2 > 0) {
					temp["children"] = [];
					temp["tag"] = node.nodeName.toLowerCase();
					for (let i = 0; i < node.childNodes.length; i++) {
						loop(node.childNodes[i], temp.children);
					}
				}
				// 当前节点下只有文本 或 单标签节点
				if (node.childNodes.length <= 1 && newNode2 == 0) {

					temp["content"] = node.innerHTML;
					temp["tag"] = node.nodeName.toLowerCase();
				}

				dataNode.push(temp);

			}
		};
		loop(dom, tree);
		return tree[0].children;
	}

	function forFn(arr) {

		let html = ``
		for (let i = 0; i < arr.length; i++) {
			let tArr = []
			if (arr[i].content) {
				tArr = arr[i].content.split("")
			}
			if (arr[i].type === 1) {
				if (arr[i].attributes) {
					if (arr[i].attributes.src) {
						html +=
							`<img class="${arr[i].attributes.class}" src="${arr[i].attributes.src}" style="${arr[i].attributes.style}">`
					} else {
						html += `<${arr[i].tag} class="${arr[i].attributes.class}" style="${arr[i].attributes.style}">`
					}

				} else {
					if (arr[i].tag == "img") {
						html += `<${arr[i].tag} style="${arr[i].attributes.style}">`
					} else {
						html += `<${arr[i].tag}>`
					}
				}
				if (arr[i].children) {
					html += forFn(arr[i].children)
				}
				html += `</${arr[i].tag}>`
			}
			tArr.forEach(el => {
				if (arr[i].tag === "#text") {
					html += `${el}`
				} else {

					if (arr[i].attributes) {
						if (arr[i].tag == "img") {
							html +=
								`<${arr[i].tag} class="${arr[i].attributes.class}" src="${arr[i].attributes.src}" style="${arr[i].attributes.style}">${el}</${arr[i].tag}>`
						} else {
							html +=
								`<${arr[i].tag} class="${arr[i].attributes.class}" style="${arr[i].attributes.style}">${el}</${arr[i].tag}>`
						}
					} else {
						if (arr[i].tag == "img") {
							html += `<${arr[i].tag} src="${arr[i].attributes.src}">${el}</${arr[i].tag}>`
						} else {
							html += `<${arr[i].tag}>${el}</${arr[i].tag}>`
						}

					}

				}
			});
		}
		// console.log(html,'====')
		return html
	}
	// 提取元素属性
	function getAttribute(dom) {
		let attributes = {};
		//   let empty = true;
		Array.from(dom.attributes).map((item) => {
			attributes[item.nodeName] = item.nodeValue;
			// empty = false;
		});
		return attributes;
	}
</script>


<style lang="scss">
	.typeface1 {
		font-family: typeface1;
	}

	.swiper-itemcopy {
		position: absolute;
		top: 999px;
	}

	.content {
		padding-left: 10rpx;
		padding-right: 10rpx;
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		position: relative;

		.watermark {
			display: flex;
			flex-wrap: wrap;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;

			// bottom: 0;
			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.watermark1 {
			position: absolute;

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

	.warp {
		padding: 0 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 694px;
		height: auto;

		image {
			width: 100%;
		}

		p {
			font-size: 48rpx;
			color: #fff;
			margin-top: 12rpx;
		}

		// background-color: #fff;
	}

	@keyframes example1 {
		0% {
			transform: translate(0);
		}

		50% {
			transform: translate(-40px);
		}

		100% {
			transform: translate(-80px);
		}

		0% {
			transform: translate(0);
		}
	}

	.rect2 {
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 374rpx;
			height: 361rpx;
		}

		transform: translate(0);
		animation:example1 1s linear 0s backwards;
		animation-iteration-count:infinite;

	}


	.rect1 {
		padding: 60rpx 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 558rpx;
		// height: 438rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		image {
			max-width: 96rpx;
			max-height: 96rpx;
		}

		p {
			font-size: 30rpx;
			margin: 62rpx 0 40rpx;
		}

		// background-color: #fff;
	}

	page {
		height: 100%;

		.btn {
			font-size: 35rpx;
			color: #fff;
			text-align: center;
			line-height: 90rpx;
			float: right;
			width: 200rpx;
			height: 90rpx;
			background: #A5CF49;
			border-radius: 0rpx 0rpx 0rpx 32rpx;
		}

		.swiperBox {


			width: 694rpx;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.swiper-item {
				.titleBox {
					position: relative;
					font-size: 28rpx;
					color: #666666;
					padding: 6rpx;

					display: flex;
					align-items: flex-end;

					image {
						margin-right: 4rpx;
						width: 112rpx;
						height: 112rpx;
					}

					.jtbj {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						z-index: 0;
					}

					.warn {
						font-size: 32rpx;
						color: #FF2828;
					}

					.title {
						margin-left: 4rpx;
					}

				}
			}

		}
	}
</style>