mh/pages/tabbar/index.vue

<template>
	<view class="index-main">
		<!-- 微信提示遮罩 -->
		<!-- <view v-if="isWeiXin" class="shadow">
			<image src="/static/image/tabbar/weixinShadow.png" mode="aspectFit"></image>
		</view> -->
		<view class="top">
			<view class="title">
				<!-- <view class="play-explain" @tap="$refs.regulation.open()">
					<image class="small-img" src="/static/image/new_home/ckgz.png" mode="widthFix"></image>
					<text>查看规则</text>
				</view> -->
				<!-- <view class="play-explain_1" @tap="$refs.regulation_1.open()">
					<image class="small-img" src="/static/image/tabbar/wodeyixuanzhong@2x1.png" mode="widthFix"></image>
					<text>买家须知</text>
				</view> -->

				<view class="kf" @click="zxkf()"><image class="small-img" src="https://chaomd.liuniu946.com/image/new_home/kf.png" mode="widthFix"></image></view>
			</view>
			<view class="left-cd">
				<view class="details_title_mp3" @click="changePlay">
					<image :class="['bjtb', isPlay && 'run']" :src="isPlay ? '/static/image/home/bofang@2x.png' : '/static/image/home/guanbiyinyue@2x.png'" mode="widthFix"></image>
				</view>
				<view class="oval1" @click="toMyBox()">
					<image class="small-img" src="/static/image/new_home/tbxg.png" mode="widthFix"></image>
					<!-- <span>物品盒柜</span> -->
				</view>
				<view class="right" @click="wfashuiming()">
					<image class="small-img" src="/static/image/new_home/wfsm.png" mode="widthFix"></image>
					<!-- <span>玩法说明</span> -->
				</view>
			</view>
			<lunbobox></lunbobox>
			<view class="loop-container">
				<!-- 图片轮播主区域 -->
				<view class="loop-image-main">
					<view class="box-image-bj"><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="arrow arrow-left" src="/static/image/new_home/arrow-left.png" mode="widthFix" @click="prev"></image>
					<image class="arrow arrow-right" src="/static/image/new_home/arrow-right.png" mode="widthFix" @click="next"></image>
					<view class="loop-image-warapper">
						<swiper class="swiper" circular :current="loopData.current" @change="loopItemChange($event.detail.current)">
							<template v-for="(item, index) in loopData.list">
								<swiper-item :key="index">
									<view :class="['image-box']">
										<template v-for="(box_banner, index) in item.box_banner_images">
											<image
												:class="[item.box_banner_images.length > 1 ? `box-banner-${index}` : 'box-banner']"
												:src="box_banner"
												mode="heightFix"
												@click="goMessage(item, 0)"
											></image>
										</template>
									</view>
								</swiper-item>
							</template>
						</swiper>
					</view>
					<!-- 底座 -->
					<!-- <view class="pedestal">
						<image src="/h5/static/image/new_home/dizhuo.png" mode="heightFix"></image>
					</view> -->
					<!-- 手指 -->
					<view class="finger"><image src="/static/image/new_home/sz.png" mode="heightFix"></image></view>
					<!-- 盲盒奖品 -->
					<!-- <view class="prize" @click="goCurrMessage()">
						<image src="/h5/static/image/new_home/mhjp.png" mode="heightFix"></image>
					</view> -->
				</view>
				<!-- 下方价格 -->
				<view class="price-container">
					<text class="price">￥{{ price }}.00元/个</text>
				</view>
				<!-- 文字轮播 -->
				<!-- <view class="loop-label-warapper">
					<swiper class="swiper" :indicator-dots="true" :previous-margin="loopData.margin" :next-margin="loopData.margin" 
						 :current="loopData.current" @change="loopItemChange($event.detail.current)">
						<template v-for="(item, index) in loopData.list">
							<swiper-item :key="index" :class="[loopData.current == index && 'label-active']">
								<view :class="['label-box']" @click="loopItemChange(index)">
									<view :class="['loop-label']">
										<text>{{item.box_name}}</text>
									</view>
								</view>
							</swiper-item>
						</template>
					</swiper>
				</view> -->
				<!-- 图片文字轮播 -->
				<view class="loop-label-warapper">
					<swiper
						class="swiper"
						circular
						:indicator-dots="true"
						:previous-margin="loopData.margin"
						:next-margin="loopData.margin"
						:current="loopData.current"
						@change="loopItemChange($event.detail.current)"
					>
						<template v-for="(item, index) in loopData.list">
							<swiper-item :key="index" :class="[loopData.current == index && 'label-active']">
								<view :class="['label-box']" @click="loopItemChange(index)">
									<view :class="['loop-image-label']">
										<image :src="item.box_foot_images" mode="aspectFit" class="loop-image-label-img"></image>
										<text>{{ item.box_name }}</text>
									</view>
								</view>
							</swiper-item>
						</template>
					</swiper>
				</view>
			</view>
		</view>
		<!-- 下半部分 -->
		<view class="bottom">
			<view>
				<!-- 下方按钮区 -->
				<view class="button-container">
					<view class="side-btn" @click="haveTry()"><image src="/static/image/new_home/swmhan.png" mode="widthFix"></image></view>
					<view class="center-btn" @click="selectNum()">
						<image src="/static/image/new_home/khan.png" mode="widthFix"></image>
						<!-- <text>立即开箱</text> -->
					</view>
					<view class="side-btn" @click="$refs.regulation.open()"><image src="/static/image/new_home/gdmhan.png" mode="widthFix"></image></view>
				</view>
			</view>
			<!-- <view>
				<text class="look-rule" @click="toHelp()">查看规则</text>
			</view> -->
			<!-- <view class="banner">
				<view>
					<image class="small-img" src="/h5/static/image/new_home/dbzj.png" mode="heightFix"></image>
					每盒100%中奖
				</view>
				<view class="center">
					<image class="small-img" src="/h5/static/image/new_home/myfh.png" mode="heightFix"></image>
					满意发货
				</view>
				<view>
					<image class="small-img" src="/h5/static/image/new_home/hs.png" mode="heightFix"></image>
					不满意回收
				</view>
			</view> -->
		</view>
		<uni-popup ref="num-popup" type="bottom" :mask-click="false">
			<view class="num-popup">
				<view class="popup-close" @click="closeNumPopup"><image src="/static/image/home/guanbi@2x.png" mode=""></image></view>
				<view class="num-button-group">
					<view class="num-button" @click="createOder(1)">
						<image src="../../static/image/new_home/btn-1.png" mode="widthFix"></image>
						<text>一发入魂</text>
					</view>
				</view>
				<view class="num-button-group">
					<view class="num-button" @click="createOder(5)">
						<image src="../../static/image/new_home/btn-3.png" mode="widthFix"></image>
						<text>五连绝世</text>
					</view>
					<view class="num-button" @click="createOder(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"><!-- <button type="primary" @click="$refs['payment'].open(0, boxNum)">创建订单</button> --></view>
			</view>
		</uni-popup>
		<uni-popup ref="regulation" :mask-click="false">
			<view class="regulation">
				<view class="regulation_close" @click="$refs.regulation.close()"><image src="/static/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="/static/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"
			@create-success="closeNumPopup"
			@show-result="showResult"
		></payment>
		<!-- 	<show-result ref="result-popup" :num="boxNum" @accept="toMyBox()" @recycle="recycle" :type="type"></show-result> -->
		<show-result :key="resultKey" ref="result-popup" :num="boxNum" @accept="toMyBox()" @recycle="recycle" :type="type" @close="resultKey++"></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 lunbobox from '@/components/lunbobox.vue';
import prizeFlying from '@/components/prize-flying.vue';
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.loop = true;
// innerAudioContext.src = '/static/image/home/bj.mp3';
export default {
	components: {
		payment,
		showResult,
		recycle,
		lunbobox,
		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
			// 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: {
		//轮播图变更
		loopItemChange(index) {
			if (this.loopData.current == index) {
				return;
			}
			this.loopData.current = index;
			this.price = this.loopData.list[index].coin_price;
			this.flyingKey++;
		},
		//轮播图上一个
		prev() {
			let index;
			if (this.isFirstBox) {
				index = this.loopData.list.length - 1;
			} else {
				index = this.loopData.current - 1;
			}
			this.loopItemChange(index);
		},
		//轮播图下一个
		next() {
			let index;
			if (this.isLastBox) {
				index = 0;
			} else {
				index = this.loopData.current + 1;
			}
			this.loopItemChange(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;
				}
			});
		},
		//跳转盒柜
		toMyBox() {
			this.$refs['result-popup'].close();
			uni.switchTab({ url: '/pages/tabbar/box' });
		},
		//玩法说明
		wfashuiming: () => uni.navigateTo({ url: '/pages/index/wfsm' }),
		//跳转充值
		toRecharge: () => uni.navigateTo({ url: '/pages/me/recharge' }),
		//跳转客服
		zxkf: () => uni.navigateTo({ url: '/pagesB/pages/server' }),
		//跳转说明
		toHelp: () => uni.navigateTo({ url: '/pages/index/help' }),
		//玩法规则
		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;
				}
			});
		},
		//跳转更多盲盒
		toMore: () => uni.navigateTo({ url: '/pages/index/more' }),
		//音乐播放
		changePlay() {
			this.isPlay = !this.isPlay;
			uni.setStorageSync('isPlay', this.isPlay);
			this.isPlay ? innerAudioContext.play() : innerAudioContext.pause();
		},
		//跳转内页
		goMessage(item, type) {
			uni.navigateTo({ url: '/pages/index/details?id=' + item.box_id + '&type=' + type });
		},
		//跳转当前分类内页
		goCurrMessage() {
			this.goMessage(this.currBox, 0);
		},
		//试玩
		haveTry() {
			this.type = 1;
			this.boxNum = 1;
			this.$refs['payment'].open(1, 1);
		},
		//选择数量
		selectNum() {
			this.type = 0;
			this.boxNum = 1;
			this.$refs['num-popup'].open();
		},
		//创建订单
		createOder(num) {
			this.boxNum = num;
			this.$refs['payment'].open(0, this.boxNum);
		},
		//创建订单成功或者试玩返回结果
		closeNumPopup() {
			//关闭数量弹窗
			this.$refs['num-popup'].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 });
		},
		//回收
		recycle(prizedata) {
			this.$refs['result-popup'].close();
			this.$refs['recycle'].recycle(prizedata.prizeInfo);
		}
	},
	onLoad({ sharecode, token, is_channel, out_trade_no }) {
		if (sharecode) {
			uni.setStorageSync('sharecode', sharecode);
		}
		if (is_channel) {
			uni.setStorageSync('is_channel', is_channel);
		}
		if (token) {
			uni.setStorageSync('token', token);
		}
		//存在支付订单id
		if (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;
}
.left-cd {
	display: flex;
	align-items: center;
	z-index: 99;
	position: absolute;
	top: 1vh;
	right: 40rpx;
	.oval span,
	.oval1 span,
	.right span {
		text-align: center;
		display: block;
		color: #ffffff;
		margin: 10rpx;
	}
}
.oval1 {
	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;
	}
}
.kf {
	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://chaomd.liuniu946.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;
	}

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

				.loop-image-warapper {
					position: absolute;
					height: 100%;
					width: 100%;
					.swiper {
						height: 100%;
					}
					.image-box {
						display: flex;
						justify-content: center;
						height: 100%;
						.box-banner {
							height: 70%;
						}
						.box-banner-0 {
							width: 118px;
							height: 60%;
							position: absolute;
							bottom: 0;
						}
						.box-banner-1 {
							position: absolute;
							top: 60px;
							height: 50%;
						}
					}
				}
				.pedestal {
					position: absolute;
					height: 400rpx;
					width: 100%;
					bottom: 0;
					uni-image {
						margin: 0 auto;
					}
				}
				.finger {
					position: absolute;
					z-index: 21;
					height: 140rpx;
					right: 250rpx;
					bottom: 0rpx;
				}
				.prize {
					position: absolute;
					height: 120rpx;
					right: 10rpx;
					bottom: 50rpx;
					z-index: 22;
				}
			}
			.loop-label-warapper {
				height: 260rpx;
				margin-top: 18rpx;
				.label-box {
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 3px 0px 0px 3px #45bfff;
				}
				.swiper {
					// background: url(https://chaomd.liuniu946.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;
					}
				}
				.loop-image-label {
					transition: 0.3s;
					background: linear-gradient(white, 80%, lightgrey);
					padding: 2px;
					border-radius: 7px;
					height: 95%;
					// height: 247rpx;
					width: 210rpx;
					text-align: center;
					// .loop-image-label-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;
						}
					}
					.loop-image-label {
						border: 2px solid #45bfff;
					}
				}
			}
			uni-swiper {
				height: 100%;
			}
		}
	}
	.bottom {
		margin-top: 20rpx;
		flex: 0.4;
		.button-container {
			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;
			}
		}
	}
}
.small-img {
	width: 80rpx;
	margin: 0 auto;
}
//选择数量弹窗
.num-popup {
	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;
	}
	.num-button-group {
		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);
	}
}
.loop-image-warapper {
	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);
	}
}
.finger {
	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;
	}
}
.box-image-bj {
	// 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>