zh_UnionPay/pages/index/index.vue

<template>
	<view class="index-box box-border-box flex-common-css" @click.stop="play()">
		<view class="flex-justify-space box-border-box plr-32">
			<image class="logo-img" src="@/static/img/c-logo.png" mode="scaleToFill"></image>
			<image class="music-img" v-if="!isIos" :class="isPlay?'music-anumation':'music-anumation'"
				src="@/static/img/c-music.png" mode="scaleToFill" @click.stop="musicPause()"></image>
			<mumu-music v-else ref="musicObj"
				musicSrc='https://jhxcnc.oss-cn-chengdu.aliyuncs.com/mp3/4272600974.mp3'></mumu-music>
		</view>
		<swiper class="swiper" :vertical='true' @change="swiperChange">
			<!-- 邀请函 -->
			<swiper-item>
				<view class="swiper-item index-1" v-if="index == 0">
					<image class="img-text wow animate__animated animate__bounceInUp" src="@/static/img/yqh-text.png"
						mode="scaleToFill"></image>
					<view class="fs-48 fc-E2E7FA text-align-center mb-16 wow animate__animated animate__bounceInLeft">
						振合网科技集团实体联盟</view>
					<view class="fs-32 fc-E2E7FA text-align-center mb-116 wow animate__animated animate__bounceInRight">
						未来已来
						一触即发</view>
					<!-- <image class="img-xian wow animate__animated animate__bounceInUp" src="@/static/img/xian.png"
						mode="scaleToFill"></image> -->
						<image src="@/static/img/zbdw-text.png" class="name-text-1 wow animate__animated animate__bounceInUp" mode="scaleToFill"></image>
						<image src="@/static/img/xbdw-text.png" class="name-text-2 wow animate__animated animate__bounceInUp" mode="scaleToFill"></image>
					<image class="name-text wow animate__animated animate__bounceInUp" src="@/static/img/name-text.png"
						mode="scaleToFill"></image>
					<!-- <image class="time-text wow animate__animated animate__bounceInRight"
						src="@/static/img/time-text.png" mode="scaleToFill"></image> -->
					<image class="up-icon wow animate__animated animate__bounceInUp" src="@/static/img/c-up-icon.png"
						mode="scaleToFill"></image>
				</view>
			</swiper-item>
			<!-- 诚挚邀请 -->
			<swiper-item>
				<view class="swiper-item">
					<view class="index-2" v-if="index == 1">
						<image class="text-img-3 wow animate__animated animate__bounceInUp"
							src="@/static/img/hynr-text.png" mode="scaleToFill"></image>
						<!--						<view class="fs-32 fc-CFB591 fw-b mb-24 wow animate__animated animate__bounceInUp">-->
						<!--							尊敬的{{userName?userName:'用户'}}</view>-->
						<!--						<view class="fs-32 fc-CFB591 text-box wow animate__animated animate__bounceInUp">-->
						<!--							您好！感谢百忙之中阅读此邀请函。我们诚挚的邀请您参加于10月20日振合科技集团举办的2024年度项目说明会。振合网将互联网赋能实体经济，以数字化转型为导向，培育产业发展新动能，共创共赢。帮助生产厂家，传统代理商解决销售难、资金难、库存压力大。帮助实体店摆脱困境，实现跨界收益和互联网收益，共绘发展蓝图。-->
						<!--						</view>-->
						<view class="fs-32 fc-CFB591 text-box wow animate__animated animate__bounceInUp"
							v-if="isEnroll">
							振合网将互联网赋能实体经济，以数字化转型为导向，培育产业发展新动能，共创共赢。帮助生产厂家，传统代理商解决销售难、资金难、库存压力大。帮助实体店摆脱困境，实现跨界收益和互联网收益，共绘发展蓝图。
						</view>
						<view class="fs-32 fc-CFB591 text-box wow animate__animated animate__bounceInUp" v-else>
							助推乡村全面振兴，让农户爱上种地，解决返乡民工创业就业难和农产品销售难等问题；在乡村振兴发展的势头中，如何助力乡村振兴、牢固脱贫功艰的成果，真正实现城乡融合发展。
							党的二十大三中全会提出，“让国家变得更加富强，让社会变得更加公平公正，让人民生活得更加美好”。
						</view>
						<!--						<view-->
						<!--							class="fc-CFB591 fw-b fs-32 text-align-right mt-32 wow animate__animated animate__bounceInUp">-->
						<!--							振合网科技集团</view>-->
						<!--						<view class="fs-28 fc-CFB591 text-align-right wow animate__animated animate__bounceInUp">-->
						<!--							2024年10月20日</view>-->
					</view>
					<image class="up-icon wow animate__animated animate__bounceInUp" src="@/static/img/c-up-icon.png"
						mode="scaleToFill"></image>
				</view>
			</swiper-item>
			
			<!-- 参会名单 -->
			<swiper-item>
				<view class="swiper-item">
					<view class="index-2" v-if="index == 2">
						<image class="text-img-4 wow animate__animated animate__bounceInUp"
							src="@/static/img/chdw-text.png" mode="scaleToFill"></image>
						
						<image class="text-img-ty wow animate__animated animate__bounceInUp"
							src="@/static/img/tyjb-text.png" mode="scaleToFill"></image>
						
						<view class="align-items-center mb-24">
							<image class="icon-img-1" src="@/static/img/icon-img.png" mode="scaleToFill"></image>
							<view class="fs-28 fc-CFB591 w-588">原全国人大常委农委副主任、现任中国供销合作经济学会会长</view>
						</view>
						<view class="align-items-center mb-24">
							<image class="icon-img-1" src="@/static/img/icon-img.png" mode="scaleToFill"></image>
							<view class="fs-28 fc-CFB591 w-588">原国务院研究室主任、国务院国有监事会主席、中央第九巡视组副组长、经济学博士</view>
						</view>
						<view class="align-items-center mb-24">
							<image class="icon-img-1" src="@/static/img/icon-img.png" mode="scaleToFill"></image>
							<view class="fs-28 fc-CFB591 w-588">原农业部副部长、国务院研究室副主任</view>
						</view>
						<view class="align-items-center mb-24">
							<image class="icon-img-1" src="@/static/img/icon-img.png" mode="scaleToFill"></image>
							<view class="fs-28 fc-CFB591 w-588">原全国工商联副主席、全国政协特聘专家</view>
						</view>
						<view class="align-items-center mb-48">
							<image class="icon-img-1" src="@/static/img/icon-img.png" mode="scaleToFill"></image>
							<view class="fs-28 fc-CFB591 w-588">原国防大学少将（副军职）及其他相关领导</view>
						</view>
						
						<image class="text-img-ty wow animate__animated animate__bounceInUp"
							src="@/static/img/chdw-text-1.png" mode="scaleToFill"></image>
							
						<view class="align-items-center mb-24">
							<image class="icon-img-1" src="@/static/img/icon-img.png" mode="scaleToFill"></image>
							<view class="fs-28 fc-CFB591 w-588">中国信用网</view>
						</view>
						<view class="align-items-center mb-24">
							<image class="icon-img-1" src="@/static/img/icon-img.png" mode="scaleToFill"></image>
							<view class="fs-28 fc-CFB591 w-588">重庆电视台</view>
						</view>
						<view class="align-items-center mb-24">
							<image class="icon-img-1" src="@/static/img/icon-img.png" mode="scaleToFill"></image>
							<view class="fs-28 fc-CFB591 w-588">全国知名企业</view>
						</view>
						<view class="align-items-center mb-24">
							<image class="icon-img-1" src="@/static/img/icon-img.png" mode="scaleToFill"></image>
							<view class="fs-28 fc-CFB591 w-588">全国知名品牌代理商</view>
						</view>
					</view>
					<image class="up-icon wow animate__animated animate__bounceInUp" src="@/static/img/c-up-icon.png"
						mode="scaleToFill"></image>
				</view>
			</swiper-item>

			<!-- 活动地址 -->
			<swiper-item>
				<view class="swiper-item">
					<view class="index-2" v-if="index == 3">
						<image class="text-img-1 wow animate__animated animate__bounceInUp"
							src="@/static/img/hdtd-text.png" mode="scaleToFill"></image>
						<image class="img-1 wow animate__animated animate__bounceInUp" src="@/static/img/h-1.png"
							mode="scaleToFill"></image>

						<view class="flex-justify-space">
							<image class="img-2 wow animate__animated animate__bounceInLeft" src="@/static/img/h-2.png"
								mode="scaleToFill"></image>
							<image class="img-2 wow animate__animated animate__bounceInRight" src="@/static/img/h-3.png"
								mode="scaleToFill"></image>
						</view>

						<view class="fc-CFB591 fs-40 text-align-center mb-16 wow animate__animated animate__bounceInUp">
							重庆丽星君顿酒店</view>
						<view class="fs-28 fc-CFB591 text-align-center wow animate__animated animate__bounceInUp">
							地址：重庆市渝北区服装城大道48号</view>
					</view>
					<image class="up-icon wow animate__animated animate__bounceInUp" src="@/static/img/c-up-icon.png"
						mode="scaleToFill"></image>
				</view>
			</swiper-item>
			<!-- 地址导航 -->
			<swiper-item>
				<view class="swiper-item" v-if="index == 4">
					<view class="index-2">
						<image class="text-img wow animate__animated animate__bounceInUp"
							src="@/static/img/dzdh-text.png" mode="scaleToFill"></image>
						<view class="b-f wow animate__animated animate__bounceInUp" @click.stop="toMap()">
							<image class="img-3" src="@/static/img/map.png" mode="scaleToFill"></image>
							<view class="b-c">开始导航</view>
						</view>
						<view
							class="fc-CFB591 fs-36 text-align-center mb-16 wow animate__animated animate__bounceInLeft">
							会议地址</view>
						<view
							class="fc-CFB591 fs-28 text-align-center mb-32 wow animate__animated animate__bounceInRight">
							重庆丽星君顿酒店</view>
						<view
							class="fc-CFB591 fs-36 text-align-center mb-16 wow animate__animated animate__bounceInLeft">
							会议时间</view>
						<view
							class="fc-CFB591 fs-28 text-align-center mb-32 wow animate__animated animate__bounceInRight">
							10月19日 ~ 10月20日</view>
						<view
							class="fc-CFB591 fs-36 text-align-center mb-16 wow animate__animated animate__bounceInLeft"
							@click.stop="playPhone()">联系方式</view>
						<view
							class="fc-CFB591 fs-28 text-align-center mb-32 wow animate__animated animate__bounceInRight"
							@click.stop="playPhone()">
							<uni-icons style="margin-right: 10rpx;" type="phone-filled" color="#f2d4a9" size="14">
							</uni-icons>
							023-67177907
						</view>
					</view>
					<image class="up-icon wow animate__animated animate__bounceInUp" src="@/static/img/c-up-icon.png"
						mode="scaleToFill"></image>
				</view>
			</swiper-item>
			<!-- 参与预约 -->
			<swiper-item v-if="isEnroll">
				<view class="swiper-item" v-if="index == 5">
					<view class="index-2">
						<image class="text-img-2 wow animate__animated animate__bounceInUp"
							src="@/static/img/cyyy-text.png" mode="scaleToFill"></image>
						<view class="mb-32">
							<view class="fc-CFB591 fs-32 mb-16 wow animate__animated animate__bounceInLeft">您的姓名<span
									class="fc-ED301D fs-32">*</span></view>
							<input class="wow animate__animated animate__bounceInRight" v-model="fromData.name"
								type="text" placeholder="请输入您的姓名">
						</view>
						<view class="mb-32">
							<view class="fc-CFB591 fs-32 mb-16 wow animate__animated animate__bounceInLeft">您的手机号<span
									class="fc-ED301D fs-32">*</span></view>
							<input class="wow animate__animated animate__bounceInRight" v-model="fromData.phone"
								type="number" placeholder="请输入您的手机号">
						</view>
						<view class="mb-32">
							<view class="fc-CFB591 fs-32 mb-16 wow animate__animated animate__bounceInLeft">您的公司名称<span
									class="fc-ED301D fs-32">*</span></view>
							<input class="wow animate__animated animate__bounceInRight" v-model="fromData.corporate"
								type="text" placeholder="请输入您的公司名称">
						</view>
						<view class="mb-32">
							<view class="fc-CFB591 fs-32 mb-16 wow animate__animated animate__bounceInLeft">邀请人<span
									class="fc-ED301D fs-32">*</span></view>
							<input class="wow animate__animated animate__bounceInRight" v-model="fromData.inviter"
								type="text" placeholder="请输入您的邀请人">
						</view>
						<view class="mb-72">
							<view class="fc-CFB591 fs-32 mb-16 wow animate__animated animate__bounceInLeft">邀请人手机号<span
									class="fc-ED301D fs-32">*</span></view>
							<input class="wow animate__animated animate__bounceInRight" v-model="fromData.inviter_phone"
								type="number" placeholder="请输入邀请人的手机号">
						</view>

						<view class="save-box wow animate__animated animate__bounceInUp" @click.stop="save()">提交</view>


					</view>
					<image class="up-icon wow animate__animated animate__bounceInUp" src="@/static/img/c-up-icon.png"
						mode="scaleToFill"></image>
				</view>
			</swiper-item>
			<!-- 提示 -->
			<swiper-item>
				<view class="swiper-item" v-if="isEnroll?index == 6:index == 5">
					<view class="index-2">
						<image class="text-img-3 wow animate__animated animate__bounceInUp"
							src="@/static/img/wxts-text.png" mode="scaleToFill"></image>

						<view class="align-items-center mb-48">
							<image class="icon-img" src="@/static/img/icon-img.png" mode=""></image>
							<view class="fc-CFB591 fs-32 w-588">
								请您提前规划好行程，确保准时参加会议。
							</view>
						</view>
						<view class="align-items-center mb-48">
							<image class="icon-img" src="@/static/img/icon-img.png" mode=""></image>
							<view class="fc-CFB591 fs-32 w-588">
								请携带好相关证件及资料，以便会议签到和交流，需要的资料类型请咨询邀约人员。
							</view>
						</view>
						<view class="align-items-center mb-214">
							<image class="icon-img" src="@/static/img/icon-img.png" mode=""></image>
							<view class="fc-CFB591 fs-32 w-588">
								非常感谢你对本次会议的关注和支持，我们期待着在会议上与你相见！振合网科技集团会议筹备组
							</view>
						</view>
						<view class="fc-CFB591 fs-24 mb-16">
							如有任何疑问或需要帮助，请随时联系我们，联系电话：023-67177907
						</view>
						<view class="playphone-box align-items-center justify-content-center" @click.stop="playPhone()">
							<uni-icons style="margin-right: 10rpx;" type="phone" color="#333" size="26">
							</uni-icons>
							<view class="fs-32 fc-3A2E1C">一键拨打</view>
						</view>
					</view>
				</view>
			</swiper-item>

		</swiper>
	</view>

</template>
<script>
	import {
		getJsConfig,
		userParticipation
	} from '@/api/user.js';
	import tools from "@/service/tools";
	import wxJs from "jweixin-module"
	import {
		useBgMusic
	} from '@/uni_modules/y-bg-music/js_sdk';
	export default {
		components: {},
		data() {
			return {
				userName: '',
				fromData: {
					m_id: '',
					name: '',
					phone: '',
					corporate: '',
					inviter: '', //邀请人
					inviter_phone: '',
				},
				isAJAX: false,
				index: 0,
				audioServe: undefined,
				isPlay: false,
				isAutoPlay: false,
				isIos: true,
				isEnroll: true

			}
		},
		onLoad(data) {
			if (data.noEnroll !== undefined) {
				this.isEnroll = false
			}
		},
		onshow() {
			this.$wow.init();
		},
		mounted() {
			this.userName = uni.getStorageSync('userName');
			let isWeiXin = tools.isWx();
			if (isWeiXin) {
				this.getJsConfig()
			}
			// this.musicPlay()
			const isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
			this.isIos = isiOS
			if (isiOS) {
				console.log('This is an iOS device');
			} else {
				this.audioServe = useBgMusic({
					src: './static/mp3/4272600974.mp3',
					loop: 999, // 循环次数
					controls: false // 显示右上角控制元素
				});
			}
		},
		methods: {
			musicPlay() {
				// if (!this.audioServe) {
				// 	this.audioServe = uni.createInnerAudioContext();
				// 	this.audioServe.autoplay = true;
				// 	this.audioServe.loop = true;
				// 	this.audioServe.obeyMuteSwitch = true;
				// 	this.audioServe.src = 'https://jhxcnc.oss-cn-chengdu.aliyuncs.com/mp3/4272600974.mp3';
				// }
				// this.audioServe.play();
				// this.audioServe.onPlay(() => {
				// 	this.isPlay = true;
				// 	this.isAutoPlay = true
				// })

				// 创建bgAudioManager对象
				//         const bgAudioManager = uni.getBackgroundAudioManager();
				//         bgAudioManager.src = 'https://jhxcnc.oss-cn-chengdu.aliyuncs.com/mp3/4272600974.mp3';
				// // 开始播放的回调函数
				//         bgAudioManager.onPlay(() => {
				//           console.log('开始播放');
				//         });
				// // 播放报错的事件监听
				//         bgAudioManager.onError((res) => {
				//           console.log(res.errMsg);
				//           console.log(res.errCode);
				//         });


			},
			play() {
				if (!this.isPlay && this.audioServe) {
					// this.audioServe.play();
					// this.audioServe.onPlay(() => {
					// 	this.isPlay = true;
					// 	this.isAutoPlay = true
					// })
				}
			},
			musicPause() {
				// if (this.audioServe) {
				// 	this.audioServe.pause();
				// 	this.audioServe.onPause(() => {
				// 		this.isPlay = false;
				// 	});
				// }

			},
			getJsConfig() {
				console.log(window.location)
				let url = window.location.href.split('#')[0];
				getJsConfig({
					'url': url
				}).then(res => {
					if (res.code === 1) {
						wxJs.config({
							debug: false,
							appId: res.data.appid,
							nonceStr: res.data.noncestr,
							signature: res.data.signature,
							timestamp: res.data.timestamp * 1, // 必填，生成签名的时间戳
							jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
						})
						wxJs.ready(() => {

							//自定义“分享给朋友”
							// this.musicPlay()
							wxJs.updateAppMessageShareData({
								title: this.isEnroll ? '振合网“实体联盟”项目说明会-邀请函' :
									"<畅通国民经济循环 发展新质生产力>研讨会",
								desc: this.isEnroll ? '10月20日我们不见不散！' : '实现共同富裕',
								link: "https://enroll.jhcs888.com/#/" + (this.isEnroll ? '' :
									'?noEnroll=1'), // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                imgUrl:this.isEnroll? 'https://jhnewshop.oss-cn-chengdu.aliyuncs.com/storage/attest/20210927/949e48fb7c286836097efdd4ba4d0bd9.jpg':'https://jhxcnc.oss-cn-chengdu.aliyuncs.com/storage/fc1d53858ba9dcd52dc91260e6bc557.png', // 分享图标
								success: function() {
									// 设置成功
								}
							})
							//自定义“分享到朋友圈”
							wxJs.updateTimelineShareData({
								title: this.isEnroll ? '振合网“实体联盟”项目说明会-邀请函' :
									'<畅通国民经济循环 发展新质生产力>研讨会',
								desc: this.isEnroll ? '10月20日我们不见不散！' : '实现共同富裕',
								link: "https://enroll.jhcs888.com/#/" + (this.isEnroll ? '' :
									'?noEnroll=1'), // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
								imgUrl:this.isEnroll? 'https://jhnewshop.oss-cn-chengdu.aliyuncs.com/storage/attest/20210927/949e48fb7c286836097efdd4ba4d0bd9.jpg':'https://jhxcnc.oss-cn-chengdu.aliyuncs.com/storage/fc1d53858ba9dcd52dc91260e6bc557.png', // 分享图标
								success: function() {
									// 设置成功
								}
							})
							if (this.audioServe) {
								this.audioServe.play();
							} else if (!this.isIos) {
								this.$refs.musicObj.playTo()
							}
						});
					}
				})
			},
			playPhone() {
				uni.makePhoneCall({
					phoneNumber: '023-67177907'
				});
			},

			swiperChange(e) {
				this.play()
				if (e.detail.current !== this.index) {
					this.index = e.detail.current;
				}
			},
			toMap() {
				uni.openLocation({
					latitude: 29.665085,
					longitude: 106.615366,
					scale: 18,
					name: '重庆丽星君顿酒店',
					address: '重庆市渝北区服装城大道48号',
					success() {},
					fail(error) {}
				});
			},
			save() {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				this.fromData.m_id = uni.getStorageSync('m_id');
				userParticipation(this.fromData).then((res) => {
					if (res.code === 1) {
						tools.success('预约成功')
						this.fromData = {
							m_id: '',
							name: '',
							phone: '',
							corporate: '',
							inviter: '', //邀请人
							inviter_phone: '',
						}
					} else {
						tools.error(res.msg)
					}
					this.isAJAX = false;
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.box-yuan {
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		text-align: center;
		font-size: 18rpx;
		color: #061363;
		border-radius: 50%;
		margin-right: 16rpx;
		background-color: #CEB48F;
	}

	.w-246 {
		width: 246rpx;
	}

	.w-588 {
		width: 588rpx;
	}

	.playphone-box {
		width: 100%;
		height: 86rpx;
		background: linear-gradient(90deg, #E4BD85 0%, #CEB590 100%);
		border-radius: 10rpx;
	}

	.index-box {
		background-image: url('@/static/img/c-bg.png');
		background-size: 100% 100%;
	}

	.up-icon {
		width: 64rpx;
		height: 64rpx;
		margin: 0 auto;
	}

	.swiper {
		flex: 1;
		width: 100%;
		height: 100%;

		.swiper-item {
			width: 100%;
			height: 100%;
		}
	}

	.logo-img {
		width: 136rpx;
		height: 80rpx;
		margin-top: 8rpx;
	}

	.music-img {
		margin-top: 16rpx;
		width: 56rpx;
		height: 56rpx;
	}

	.music-anumation {
		animation: rotation 2s linear infinite;
	}

	@keyframes rotation {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.index-1 {
		.img-text {
			width: 384rpx;
			height: 232rpx;
			margin: 76rpx auto 36rpx auto;
		}

		.img-xian {
			width: 10rpx;
			height: 174rpx;
			margin: 0 auto 154rpx auto;
		}

		.name-text {
			width: 392rpx;
			height: 100rpx;
			margin: 0 auto 36rpx auto;
		}
		.name-text-1{
			width: 288rpx;
			height: 100rpx;
			margin: 0 auto 40rpx auto;
		}
		.name-text-2{
			width: 424rpx;
			height: 146rpx;
			margin: 0 auto 104rpx auto;
		}

		.time-text {
			width: 274rpx;
			height: 37rpx;
			margin: 0 auto 140rpx auto;
		}
	}

	.index-2 {
		width: 686rpx;
		min-height: 1032rpx;
		background: rgba(5, 19, 103, 0.5);
		border-radius: 12rpx;
		border: 2rpx solid #112495;
		margin: 40rpx auto;
		box-sizing: border-box;
		padding: 32rpx;

		input {
			width: 622rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			font-size: 28rpx;
		}

		.save-box {
			width: 622rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #EBC795 0%, #E3BB83 100%);
			border-radius: 10rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 38rpx;
			font-weight: 600;
			color: #3A2E1C;
		}

		.text-img {
			width: 302rpx;
			height: 116rpx;
			margin: 0 auto 44rpx auto;
		}

		.text-box {
			line-height: 68rpx;
			letter-spacing: 4rpx;
			display: block;
			text-indent: 72rpx;
		}
		
		.text-img-ty{
			width: 156rpx;
			height: 54rpx;
			margin-bottom: 24rpx;
		}
		
		.text-img-1 {
			width: 224rpx;
			height: 116rpx;
			margin: 0 auto 44rpx auto;
		}

		.text-img-2 {
			width: 214rpx;
			height: 116rpx;
			margin: 0 auto 44rpx auto;
		}

		.text-img-3 {
			width: 192rpx;
			height: 116rpx;
			margin: 0 auto 44rpx auto;
		}

		.text-img-4 {
			width: 314rpx;
			height: 116rpx;
			margin: 0 auto 44rpx auto;
		}

		.img-1 {
			width: 622rpx;
			height: 328rpx;
			border-radius: 10rpx;
			margin-bottom: 24rpx;
		}

		.img-2 {
			width: 300rpx;
			height: 214rpx;
			margin-bottom: 60rpx;
		}

		.img-3 {
			width: 622rpx;
			height: 354rpx;
			border-radius: 10rpx;
			margin-bottom: 40rpx;
		}

		.icon-img {
			width: 23rpx;
			height: 23rpx;
			margin-right: 8rpx;
		}
		.icon-img-1 {
			width: 24rpx;
			height: 24rpx;
			margin-right: 16rpx;
		}

		.b-f {
			position: relative;

			.b-c {
				position: absolute;
				right: 24rpx;
				bottom: 22rpx;

				width: 172rpx;
				height: 56rpx;
				background: #2F80ED;
				border-radius: 4rpx;
				text-align: center;
				line-height: 56rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
</style>