mh/pages/tabbar/index.vue

<template>
	<view class="index-main">
		<view class="main-top">
			<view class="main-title">
				<view class="service" @click="navTo('/pagesB/pages/server')">
					<image class="main-left-icon" src="https://www.chaomangdao.com/image/new_home/kf.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="main-left">
				<view class="main-left-icon" @click="navMybox()">
					<image class="main-left-icon-bg" src="../../static/image/new_home/tbxg.png" mode="widthFix"></image>
					<!-- <span>物品盒柜</span> -->
				</view>
				<view class="main-left-right" @click="navTo('/pages/index/wfsm')">
					<image class="main-left-icon" src="../../static/image/new_home/wfsm.png" mode="widthFix"></image>
					<!-- <span>玩法说明</span> -->
				</view>
			</view>
			<!-- <lunbobox></lunbobox> -->
			<view class="banner">
				<!-- 图片轮播主区域 -->
				<view class="banner-main">
					<view class="banner-main-bg"><image src="../../static/image/new_home/box-images-bj.png" mode=""></image></view>
					<prize-flying v-if="currBox" :box-id="currBox.box_id"></prize-flying>
					<!-- 图片轮播 -->
					<image class="banner-item banner-item-left" src="../../static/image/new_home/arrow-left.png" mode="widthFix" @click="bannerPrev"></image>
					<image class="banner-item banner-item-right" src="../../static/image/new_home/arrow-right.png" mode="widthFix" @click="bannerNext"></image>
					<view class="banner-item-main">
						<swiper class="banner-swper" circular :current="loopData.current" @change="bannerC($event.detail.current)">
							<template v-for="(item, index) in loopData.list">
								<swiper-item :key="index">
									<view :class="['banner-image-box']">
										<template>
											<image
												:class="['banner-banner']"
												:src="
													item.box_banner_images[0].indexOf('http') == -1
														? 'https://www.chaomangdao.com' + item.box_banner_images[0]
														: item.box_banner_images[0]
												"
												mode="heightFix"
												@click="goDetail(item, 0)"
											></image>
										</template>
									</view>
								</swiper-item>
							</template>
						</swiper>
					</view>
					<!-- 手指 -->
					<view class="fingerAnimation"><image src="../../static/image/new_home/sz.png" mode="heightFix"></image></view>
				</view>
				<!-- 下方价格 -->
				<view class="price-container">
					<text class="price">￥{{ price }}.00元/个</text>
				</view>
				<!-- 图片文字轮播 -->
				<view class="fontbanner">
					<swiper
						class="fontbanner-swiper"
						circular
						:indicator-dots="true"
						:previous-margin="loopData.margin"
						:next-margin="loopData.margin"
						:current="loopData.current"
						@change="bannerC($event.detail.current)"
					>
						<template v-for="(item, index) in loopData.list">
							<swiper-item :key="index" :class="[loopData.current == index && 'label-active']">
								<view :class="['fontbanner-box']" @click="bannerC(index)">
									<view :class="['fontbanner-bg-box']">
										<image
											:src="item.box_foot_images.indexOf('http') == -1 ? 'https://www.chaomangdao.com' + item.box_foot_images : item.box_foot_images"
											mode="aspectFit"
											class="fontbanner-bg-box-img"
										></image>
										<text>{{ item.box_name }}</text>
									</view>
								</view>
							</swiper-item>
						</template>
					</swiper>
				</view>
			</view>
		</view>
		<!-- 下半部分 -->
		<view class="bottom">
			<view>
				<!-- 下方按钮区 -->
				<view class="btn">
					<!-- 试玩按钮 -->
					<view class="side-btn" @click="demoTry()"><image src="/static/image/new_home/swmhan.png" mode="widthFix"></image></view>
					<!-- 开箱按钮 -->
					<!-- <view class="center-btn" @click="chooseNum()"><image src="/static/image/new_home/khan.png" mode="widthFix"></image></view> -->
					<view class="center-btn" @click="goDetail('', 0)"><image src="/static/image/new_home/khan.png" mode="widthFix"></image></view>
					<!-- 查看规则按钮 -->
					<view class="side-btn" @click="$refs.regulation.open()"><image src="/static/image/new_home/gdmhan.png" mode="widthFix"></image></view>
				</view>
			</view>
		</view>
		<!-- 选择购买的方式 -->
		<uni-popup ref="choose-number" type="bottom" :mask-click="false">
			<view class="choose-number">
				<view class="popup-close" @click="closebuyPopup"><image src="https://www.chaomangdao.com/image/home/guanbi@2x.png" mode=""></image></view>
				<!-- 购买一个 -->
				<view class="number-item">
					<view class="num-button" @click="buyBox(1)">
						<image src="../../static/image/new_home/btn-1.png" mode="widthFix"></image>
						<text>一发入魂</text>
					</view>
				</view>
				<!-- 购买多个个 -->
				<view class="number-item">
					<view class="num-button" @click="buyBox(5)">
						<image src="../../static/image/new_home/btn-3.png" mode="widthFix"></image>
						<text>五连绝世</text>
					</view>
					<view class="num-button" @click="buyBox(9)">
						<image src="../../static/image/new_home/btn-2.png" mode="widthFix"></image>
						<text>九连更稳</text>
					</view>
				</view>
				<!-- 订单信息 -->
				<view class="order-info">
					<view>开盒数量：{{ boxNum }}</view>
					<view class="total-price">订单金额：￥{{ totalPrice }}</view>
				</view>
				<view class="popup-btn"></view>
			</view>
		</uni-popup>
		<!-- 打开玩法规则的弹窗 -->
		<uni-popup ref="regulation" :mask-click="false">
			<view class="regulation">
				<view class="regulation-close" @click="$refs.regulation.close()"><image src="https://www.chaomangdao.com/image/home/guanbi@2x.png" mode=""></image></view>
				<view class="regulation-name">玩法规则</view>
				<view class="regulation-main">
					<scroll-view scroll-y="true" class="scroll-view"><u-parse :content="message"></u-parse></scroll-view>
				</view>
			</view>
		</uni-popup>
		<!-- 告诉买家购买规则 -->
		<uni-popup ref="regulation_1" :mask-click="false">
			<view class="regulation_1">
				<view class="regulation-close" @click="$refs.regulation_1.close()"><image src="https://www.chaomangdao.com/image/home/guanbi@2x.png" mode=""></image></view>
				<view class="regulation-name">买家须知</view>
				<view class="regulation-main">
					<scroll-view scroll-y="true" class="scroll-view"><u-parse :content="mjxz"></u-parse></scroll-view>
				</view>
			</view>
		</uni-popup>
		<!-- 支付小组件 -->
		<payment ref="payment" :box-id="currBox && currBox.box_id" :box-num="boxNum" :type="type" pay-page="index" @success="closebuyPopup" @fail="showResult"></payment>
		<!-- 动画展示 -->
		<show-result :key="resultKey" ref="result-popup" :num="boxNum" @accept="navMybox()" v-if="xh" @recycleD="recycleD" :type="type" @close="closeDetail()"></show-result>
		<!-- 退款详情 -->
		<recycle ref="recycle"></recycle>
	</view>
</template>
1

<script>
import payment from '@/components/payment.vue';
import showResult from '@/components/show-result.vue';
import recycle from '@/components/recycle.vue';
import prizeFlying from '@/components/prize-flying.vue';
export default {
	// #ifdef MP
	onShareAppMessage: function(res) {
		console.log(res);
		console.log('是否从按钮进入');
		if (res.from === 'button' || res.from === 'menu') {
			// 来自页面内分享按钮
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = '/' + page.route + '?';
			// 保存传值
			for (let i in page.options) {
				path += i + '=' + page.options[i] + '&';
			}
			// 保存邀请人
			path += 'spread=' + this.userInfo.uid;
			let data = {
				path: path,
				imageUrl: 'https://www.chaomangdao.com/image/logo.png',
				title: this.userInfo.nickname + '邀请您进入潮盲岛'
			};
			return data;
		} else {
			console.log('else');
		}
	},
	// #endif
	components: {
		payment,
		showResult,
		recycle,
		prizeFlying
	},
	data() {
		return {
			message: '', //玩法规则
			mjxz: '', //买家须知
			loopData: {
				//标签轮播左右边距
				margin: '260rpx',
				//当前选中盒子下标
				current: 0,
				//盒子分类列表
				list: []
			},
			capital: {
				box: 0,
				coin: 0
			},
			//金额
			price: 0,
			//数量
			boxNum: 1,
			//开盒类型 0：正式开盒 1：试玩
			type: 0,
			isPlay: true,
			resultKey: 0,
			flyingKey: 0,
			xh: false
			// isWeiXin: isWeiXin() //是否为微信
		};
	},
	created() {
		this.$api.getUserCapital().then(({ code, data }) => {
			if (code == 1) {
				this.capital = data;
			}
		});
		//渲染分类列表
		this.getCategoryList();
		this.getMessage();
	},
	computed: {
		//当前选中盒子
		currBox() {
			let boxList = this.loopData.list;
			if (!boxList || boxList.length < 1) {
				return null;
			}
			return boxList[this.loopData.current];
		},
		//当前盒子图片
		currBoxImg() {
			if (!this.currBox) {
				return null;
			}
			let imgs = this.currBox.box_banner_images;
			if (!imgs || imgs.length < 1) {
				return null;
			}
			return imgs[0];
		},
		//订单总金额
		totalPrice() {
			return this.boxNum * this.price;
		},
		//第一个盒子
		isFirstBox() {
			return this.loopData.current == 0;
		},
		//最后一个盒子
		isLastBox() {
			return this.loopData.current == this.loopData.list.length - 1;
		}
	},
	methods: {
		//轮播图变更
		bannerC(index) {
			if (this.loopData.current == index) {
				return;
			}
			this.loopData.current = index;
			this.price = this.loopData.list[index].coin_price;
			this.flyingKey++;
		},
		//轮播图上一个
		bannerPrev() {
			let index;
			if (this.isFirstBox) {
				index = this.loopData.list.length - 1;
			} else {
				index = this.loopData.current - 1;
			}
			this.bannerC(index);
		},
		//轮播图下一个
		bannerNext() {
			let index;
			if (this.isLastBox) {
				index = 0;
			} else {
				index = this.loopData.current + 1;
			}
			this.bannerC(index);
		},
		//分类列表
		getCategoryList() {
			this.$api.recommend({ page: 1, pagesize: 10 }).then(res => {
				if (res.code === 1) {
					let categoryList = res.data.data.map(item => {
						item.box_banner_images = item.box_banner_images.split(',');
						return item;
					});
					this.loopData.list = categoryList;
					let currIndex = Math.floor(categoryList.length / 2);
					currIndex = 2;
					this.loopData.current = currIndex;
					this.price = categoryList[currIndex].coin_price;
				}
			});
		},
		//跳转到我的盒柜
		navMybox() {
			uni.switchTab({ url: '/pages/tabbar/box' });
		},
		// 跳转页面
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		//玩法规则
		getMessage() {
			this.$api.agreement({ name: 'play_rule' }).then(res => {
				if (res.code === 1) {
					this.message = res.data.content;
				}
			});
			this.$api.agreement({ name: 'notice_to_buyers' }).then(res => {
				if (res.code === 1) {
					this.mjxz = res.data.content;
				}
			});
		},
		//跳转内页
		goDetail(item, type) {
			uni.navigateTo({ url: '/pages/index/details?id=' + this.loopData.list[this.loopData.current].box_id + '&type=' + type });
		},
		//试玩
		demoTry() {
			this.xh = true;
			this.type = 1;
			this.boxNum = 1;
			this.$refs['payment'].open(1, 1);
		},
		//选择数量
		chooseNum() {
			this.xh = true;
			this.type = 0;
			this.boxNum = 1;
			this.$refs['choose-number'].open();
		},
		//创建订单
		buyBox(num) {
			this.boxNum = num;
			this.$refs['payment'].open(0, this.boxNum);
		},
		//创建订单成功或者试玩返回结果
		closebuyPopup() {
			//关闭数量弹窗
			this.$refs['choose-number'].close();
		},
		//展示结果
		showResult(result) {
			//试玩
			if (this.type == 1) {
				this.$refs['result-popup'].open({ prizeInfo: result.goodsInfo, boxImg: this.currBoxImg });
				return;
			}
			this.$refs['result-popup'].open({ ...result, boxImg: this.currBoxImg });
		},
		//回收
		recycleD(prizedata) {
			this.$refs['result-popup'].close();
			console.log(prizedata);
			this.$refs['recycle'].recycle(prizedata.prizeInfo);
			console.log(2);
		},
		closeDetail() {
			console.log('close');
			this.resultKey++;
			this.xh = false;
		}
	},
	onLoad(option) {
		if (option.sharecode) {
			uni.setStorageSync('sharecode', option.sharecode);
		}
		if (option.is_channel) {
			uni.setStorageSync('is_channel', option.is_channel);
		}
		if (option.token) {
			// 存储token
			uni.setStorageSync('token', option.token);
		}
		if (option.scene) {
			// 存储邀请人
			uni.setStorageSync('sharecode', option.scene);
		}
		//存在支付订单id
		if (option.out_trade_no) {
			let params = { out_trade_no, order_id: uni.getStorageSync('order_id') };
			this.$api.openByOrderTrade(params).then(({ code, data }) => {
				if (code === 1) {
					//展示结果
					this.showResult(data.prize);
				}
			});
		}
	},
	onShow() {
		//刷新金币和盒子数量
		this.$api.getUserCapital().then(({ code, data }) => {
			if (code == 1) {
				this.capital = data;
			}
		});
		let is_notice = uni.getStorageSync('is_notice');
		uni.removeStorageSync('is_notice');
		if (is_notice == 1) {
			setTimeout(() => {
				uni.showModal({
					title: '提示',
					content: '恭喜，获得10金币',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}, 1000);
		}
	}
};
//判断是否是微信浏览器的函数
function isWeiXin() {
	//window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
	var ua = window.navigator.userAgent.toLowerCase();
	//通过正则表达式匹配ua中是否含有MicroMessenger字符串
	if (ua.match(/MicroMessenger/i) == 'micromessenger') {
		return true;
	} else {
		return false;
	}
}
</script>

<style lang="scss">
/deep/ .uni-swiper-dots {
	display: none;
}
.main-left {
	display: flex;
	align-items: center;
	z-index: 99;
	position: absolute;
	top: 1vh;
	right: 40rpx;
	.oval,
	.main-left-icon,
	.main-left-right {
		text-align: center;
		display: block;
		color: #ffffff;
		margin: 10rpx;
	}
}
.main-left-icon {
	margin: 20rpx;
}
uni-page-body {
	height: 100%;
}
.regulation,
.regulation_1 {
	width: 650rpx;
	height: 900rpx;
	padding: 0 0 0 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	position: relative;
	.regulation-close {
		position: absolute;
		width: 44rpx;
		height: 44rpx;
		top: 30rpx;
		right: 30rpx;
	}
	.regulation-name {
		padding: 40rpx 0;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}
	.scroll-view {
		height: 735rpx;
	}
}
.play-explain {
	position: absolute;
	top: 52vh;
	right: 40rpx;
	display: flex;
	z-index: 99;
	uni-image {
		width: 150rpx;
	}
}
.play-explain_1 {
	position: absolute;
	box-shadow: 0px 4rpx 6rpx 2rpx #5ca6c8;
	background-color: #fff;
	top: 35vh;
	right: 0;
	display: flex;
	z-index: 99;
	align-items: center;
	border-radius: 100rpx;
	padding: 8rpx 20rpx;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	uni-text {
		color: #5348c9 !important;
		margin-left: 10rpx;
	}
	uni-image {
		width: 40rpx;
	}
}
.service {
	position: absolute;
	box-shadow: 0px 4rpx 6rpx 2rpx #5ca6c8;
	background-color: #fff;
	top: 46vh;
	left: 0;
	display: flex;
	z-index: 99;
	align-items: center;
	border-radius: 100rpx;
	padding: 8rpx 20rpx;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	uni-text {
		color: #5348c9 !important;
		margin-left: 10rpx;
	}
	uni-image {
		width: 40rpx;
	}
}
.details_title_mp3 {
	position: relative;
	z-index: 99;
	box-shadow: 0px 4rpx 6rpx 2rpx #5ca6c8;
	background-color: #ffffff45;
	align-items: center;
	border-radius: 200rpx;
	padding: 5rpx;
	uni-text {
		color: #5348c9 !important;
		margin-left: 10rpx;
	}
	uni-image {
		width: 40rpx;
	}
}
page {
	min-height: 100%;
	height: auto;
}
.index-main {
	min-height: 100%;
	height: auto;
	background-image: url(https://www.chaomangdao.com/image/bj.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	.light {
		position: absolute;
		top: 0;
	}
	> view {
		display: flex;
		flex-direction: column;
	}

	.main-top {
		flex: 0.6;
		.banner {
			background: url(https://www.chaomangdao.com/image/hzbj.gif);
			.banner-main {
				margin-bottom: 20rpx;
				position: relative;
				// height: 452rpx;
				height: 600rpx;
				margin-top: 300rpx;
				.banner-item {
					width: 60rpx;
					position: absolute;
					top: 50%;
					transform: translateY(-20%);
					z-index: 99;
					&.banner-item-left {
						left: 80rpx;
					}
					&.banner-item-right {
						right: 80rpx;
					}
				}

				.banner-item-main {
					position: absolute;
					height: 100%;
					width: 100%;
					.banner-swper {
						height: 100%;
					}
					.banner-image-box {
						display: flex;
						justify-content: center;
						height: 100%;
						.banner-banner {
							height: 70%;
						}
						.banner-banner-0 {
							width: 118px;
							height: 60%;
							position: absolute;
							bottom: 0;
						}
						.banner-banner-1 {
							position: absolute;
							top: 60px;
							height: 50%;
						}
					}
				}
				.pedestal {
					position: absolute;
					height: 400rpx;
					width: 100%;
					bottom: 0;
					uni-image {
						margin: 0 auto;
					}
				}
				.fingerAnimation {
					position: absolute;
					z-index: 21;
					height: 140rpx;
					right: 250rpx;
					bottom: 0rpx;
				}
				.prize {
					position: absolute;
					height: 120rpx;
					right: 10rpx;
					bottom: 50rpx;
					z-index: 22;
				}
			}
			.fontbanner {
				height: 260rpx;
				margin-top: 18rpx;
				.fontbanner-box {
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 3px 0px 0px 3px #45bfff;
				}
				.fontbanner-swiper {
					// background: url(https://www.chaomangdao.com/image/text-bj.png);
					// background-size: 100% 100%;
					height: 260rpx;
				}
				.loop-label {
					transition: 0.2s;
					margin: 0 auto;
					width: 80%;
					height: 80%;
					background-repeat: no-repeat;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 14rpx;
					text {
						transition: 0.2s;
						color: #ffffff;
						font-size: 28rpx;
						letter-spacing: 2rpx;
						font-weight: 600;
						color: #94a9ee;
					}
				}
				.fontbanner-bg-box {
					transition: 0.3s;
					background: linear-gradient(white, 80%, lightgrey);
					padding: 2px;
					border-radius: 7px;
					height: 95%;
					// height: 247rpx;
					width: 210rpx;
					text-align: center;
					// .fontbanner-bg-box-img {
					// 	height: 185rpx;
					// }
					image {
						height: 75%;
						margin-bottom: 5%;
					}
					text {
						font-size: 26rpx;
						font-weight: bold;
					}
				}
				.label-active {
					.loop-label {
						width: 80%;
						height: 80%;
						text {
							font-size: 42rpx;
							font-weight: bold;
							color: #7494fe;
						}
					}
					.fontbanner-bg-box {
						border: 2px solid #45bfff;
					}
				}
			}
			uni-swiper {
				height: 100%;
			}
		}
	}
	.bottom {
		margin-top: 20rpx;
		flex: 0.4;
		.btn {
			flex: 1;
			margin-top: 20rpx;
			display: flex;
			> view {
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.center-btn {
				flex: 0.87;
				image {
					width: 75%;
				}
				text {
					position: absolute;
					font-size: 40rpx;
					line-height: 1.1;
					color: #ffffff;
					font-weight: bold;
					font-style: italic;
					letter-spacing: 2px;
				}
			}
			.side-btn {
				flex-direction: column;
				flex: 0.28;
				image {
					width: 60%;
				}
				text {
					margin-top: 14rpx;
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		}
	}
	.price-container {
		text-align: center;
		.price {
			font-size: 36rpx;
			font-weight: bold;
			font-style: italic;
			letter-spacing: 5rpx;
		}
		.look-rule {
			font-size: 30rpx;
			padding-left: 14rpx;
			color: #575757;
		}
		.banner {
			display: flex;
			margin: 20rpx 14rpx;

			> view {
				display: flex;
				font-size: 28rpx;
				image {
					margin-right: 10rpx;
				}
			}
			.center {
				flex: 1;
			}
		}
	}
}
.main-left-icon {
	width: 80rpx;
	margin: 0 auto;
}
//选择数量弹窗
.choose-number {
	background: #ffffff;
	border-radius: 10px 10px 0px 0px;
	padding: 50px 25px 90px 25px;
	.popup-close {
		top: 30rpx;
		right: 30rpx;
		width: 44rpx;
		height: 44rpx;
		position: absolute;
	}
	.number-item {
		display: flex;
		justify-content: center;
		gap: 50rpx;
	}
	.num-button {
		position: relative;
		width: 300rpx;
		text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;
			text-shadow: 1px 1px 1px black;
		}
	}
	.order-info {
		display: flex;
		> view {
			flex: 1;
			display: flex;
			align-items: center;
		}
		> view {
			font-size: 28rpx;
			font-weight: bold;
		}
		.total-price {
			color: red;
		}
	}
	> view {
		margin-bottom: 30rpx;
	}
}
/deep/ .pay {
	padding-bottom: 100px !important;
}
.center-btn uni-text {
	-webkit-animation-name: living; /*关键帧名称*/
	-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
	-webkit-animation-iteration-count: infinite; /*动画播放的次数*/
	-webkit-animation-duration: 5s; /*动画所花费的时间*/
}
.details_title_mp3 .run {
	animation: donut-spin 1.2s linear infinite;
}
// 动画
@keyframes updown {
	0% {
		top: 0px;
	}
	50% {
		top: 10px;
	}
	100% {
		top: 0px;
	}
}
//放大动画
@keyframes living {
	0% {
		transform: scale(0.8);
		opacity: 0.8;
	}
	50% {
		transform: scale(1);
		opacity: 1; /*圆形放大的同时，透明度逐渐减小为0*/
	}
	100% {
		transform: scale(0.8);
		opacity: 0.8;
	}
}
//音乐背景旋转
@keyframes donut-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}
.banner-item-main {
	animation: updown 2s infinite;
	-webkit-animation: updown 2s infinite;
}
@keyframes rotates {
	0% {
		transform: scale(0.7);
	}
	50% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(0.7);
	}
}
.fingerAnimation {
	animation: rotates 2.8s infinite;
	-webkit-animation: rotates 2.8s infinite;
}
.shadow {
	height: 100vh;
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #fff;
	z-index: 99999999;
	uni-image {
		height: 480rpx !important;
	}
}
.banner-main-bg {
	// background: url(../../static/image/new_home/box-images-bj.png);
	background-size: 100% 100%;
	height: 500rpx;
	width: 380rpx;
	margin: 0 auto;
	position: relative;
	top: -260rpx;
}
</style>