<script>
	import store from '@/store/index.js'
	export default {
		onLaunch: function() {
			let info = uni.getSystemInfoSync(); 
			store.commit('setSystem', info);
			// #ifdef MP-WEIXIN
			uni.hideTabBar()
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); 
		
			this.globalData.menuButtonObject = menuButtonInfo;
			this.globalData.menuHeight = menuButtonInfo.height;
			this.globalData.capsuleWidth = menuButtonInfo.width;
			this.globalData.winwidth = info.windowWidth; 
			this.globalData.statusBarHeight = info.statusBarHeight;
			this.globalData.windowWidth = menuButtonInfo.left ? menuButtonInfo.left : 281; 
			this.globalData.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
				.statusBarHeight);
			this.globalData.navHeight = this.globalData.navBarHeight;
			// #endif 
			let navInfo = {
				navWidth: this.globalData.windowWidth?this.globalData.windowWidth:281,
				navHeight: this.globalData.navBarHeight?this.globalData.navBarHeight:40,
				totalHeight:this.globalData.navBarHeight+info.statusBarHeight,
			}
			store.commit('getNav', navInfo);
			store.commit('setLaunch', {launch: true, openAds: true})
			if(store.state.showPrompt) store.commit('setPrompt', false)
		},
		onShow: function() {
			if(!store.state.launch) store.commit('setPrompt', true)
			// 首页全局音频悬浮窗
			if(!store.state.launch && store.state.audioConfig) store.commit('setAudio', store.state.audioConfig)
		},
		onHide: function() {
			if(store.state.audioComp) store.commit('setAudio', null)
		},
		globalData: {
			color: '#ff4b4e',
			color_aid:'',
			statusBarHeight: 0,
			windowWidth: 0,
			navBarHeight: 40,
			navHeight:40,
			winwidth: 375,
			windowHeight: 0,
			capsuleWidth: 87,
			menuHeight:32,
			menuButtonObject:'',
			// #ifdef MP-WEIXIN
			bgAudioManager:uni.getBackgroundAudioManager(),
			// #endif
		}
	}
</script>

<style lang="scss">
	@import "uview-ui/index.scss";
	@import url(@/static/css/common.css);
	@import url(@/static/css/kite.css);
	@import url(@/static/css/main.css);
	@import url(@/static/css/iconfont.css);
	
	image {
		width: 100%;
		height: 100%;
	}
	.page{
		background-color: #FFFFFF;
		min-height: 100vh;
		padding-top: var(--height);
	}
	view,text,input{font-size: 24rpx;} 
	.icon-xingxing1,.icon-xingxing{
		color: $uni-color-star!important;
	}
	.boxshow{
		box-shadow: 0 0rpx 20rpx #efefef;
	}
	.thmeColor{color: var(--color)!important;}
	.thmeBg{background: var(--color)!important;}
	.thmeBorder{border: 2upx solid var(--color)!important;}
	.thmeBorderBottom{border-bottom: 4upx solid var(--color)!important;}
	// 渐变背景色
	.toTop{background: linear-gradient(to top,var(--color),var(--color));}
	.toRight{background: linear-gradient(to right,var(--color),var(--color));}
	.toLeft{background: linear-gradient(to left,var(--color),var(--color));}
	.toRightto{background: linear-gradient(to right,var(--color),var(--color),var(--color));}
	.to45deg{background: linear-gradient(45deg,var(--color),var(--color));}
	
	.icon-z{
		border-left: 4upx solid var(--color);
		border-bottom: 4upx solid var(--color);
	}
	
	.Rebate .tri{border-top-color: var(--color)!important;}
	
	.signColor,.lastSign {
		&::before{
			background-color: var(--color);
		}
	}
	.copyright{
		text-align: center;
		color: #666666;
		padding: 30rpx $uni-page-space;
		view{
			margin-top: 30rpx;
			font-size: 20rpx;
		}
		text{
			padding: 0 $uni-page-space;
			position: relative;
			flex: 1;
			font-size: 24rpx;
			&::before{
				content: '';
				position: absolute;
				width: 2rpx;
				height: 20rpx;
				background-color: #DDDDDD;
				left: 100%;
				top: 50%;
				margin-top: -10rpx;
			}
			&:nth-last-of-type(1)::before{display: none;}
		}
	}
	// 特价 团购标签
	.speTag{
		border-radius: 4rpx;
		color: white;
		font-size: 20rpx;
		padding: 2rpx 8rpx;
		background-color: $tag-bg;
		margin-right: 4rpx;
	}
	
	/* 遮罩 */
	.mask{
		background: rgba(0,0,0,0.5);
		position: fixed;
		right: 0;
		bottom: 0;
		top: 0;
		left: 0;
		z-index: 999;
	}
	// 全局样式
	.flex-box{display: flex;}
	.flex{flex: 1;}
	.flex-between{justify-content: space-between;}
	.flex-center{justify-content: center;}
	.flex-around{justify-content: space-around;}
	.align-center{align-items: center;}	
	.lines{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
	.lines2{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
	.goodsTabs{position: relative;justify-content: space-around;height: 74rpx;box-shadow: 0 6rpx 8rpx 1rpx rgba(105,105,105,.1);background-color: white;}
	.goodsTabItem{position: relative;justify-content: center;}
	// 滚动基准线
	.fixedLine{height: 2rpx;background: white;}
	.MORE{position: relative;}
	.MORE::after{position: absolute;content: '+';color: inherit;font-size: 18rpx;top: -6px;line-height: normal;}
	.top_oper{
		top: 270rpx;
		right: -80upx;
		position: fixed;
		z-index: 30;
		/* #ifdef H5 */
		margin-top: 100rpx;
		/* #endif */
		.top_oper_item{
			width: 60rpx;
			margin: 0 0 20rpx 30rpx;
			height: 60rpx;
			display: block;
			border-radius: 50%;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.toRight{background: linear-gradient(to right,var(--color),var(--color_aid));}
	@keyframes translater {
		70% {
			transform: translateX(-130upx);
		}
		100% {
			transform: translateX(-110upx);
		}
	}
	@keyframes translater1 {
		100% {
			transform: translateX(110upx);
		}
	}
	@keyframes out {
		0%{
			right: -56upx;
			transform: rotate(-34deg);
		}
		2% {
			right: -36upx;
			transform: rotate(-43deg);
		}
		20% {
			right: -36upx;
			transform: rotate(-43deg);
		}
		40% {
			right: -56upx;
			transform: rotate(-34deg);
		}
		100% {
			right: -56upx;
			transform: rotate(-34deg);
		}
	}
	.shareBox {
		width: 98upx;
		height: 98upx;
		position: fixed;
		z-index: 100;
		/* #ifdef H5 */
		top: 142upx;
		/* #endif */
		/* #ifdef MP */
		top: 274upx;
		/* #endif */		
		animation-delay: 1s;
		animation: out 10s linear infinite;
	}
	.shareAni{animation: translater .3s linear forwards;}
	.shareAni1{animation: translater .3s linear forwards;animation-delay: .2s; }
	.hideAni{animation: translater1 .3s linear forwards;}
	.hideAni1{animation: translater1 .3s linear forwards;animation-delay: .2s; }
	*,page,view,scroll-view{-webkit-overflow-scrolling: touch;}
	page::-webkit-scrollbar,view::-webkit-scrollbar{display: none;}
	uni-modal .uni-modal__btn.uni-modal__btn_primary{
		color: #FFFFFF !important;
		background: #FF0000;
	}
	button{
		outline: none !important;
		padding: 0 !important;
		position: relative;
	}
	button:after{
		display: none;
	}
	
	.uni-video-container,.uni-video-cover{
		background-color: unset!important;
	}
	
	.ftr_buy_info_goods_info .ftr_buy_info_goods_price{margin-top: 40rpx;}
	.agoods .agoods_thumb{overflow: hidden;}
	
	.kite-classify-names.kite-classify-active .kite-classify-box{
		border-left-color: var(--color);
	}
	
	.sharebox,.sharebox .qrImg{
		width: 600upx;
		text-align: center;
	}
	
	.rich-text-box{background-color: #FFFFFF;}
	
	.unread{position: relative;}//小红点
	.unread::after{position: absolute;content:attr(data-num);padding:0 8rpx;min-height: 30rpx;min-width: 30rpx;box-sizing: border-box;border-radius: 20rpx;background-color: #e24723;left: 66%;color: white;font-size: 20rpx;top: -10rpx;line-height: 30rpx;}
	
	// 底线
	.DiLine{text-align: center;color: #CCCCCC;font-size: 24rpx;line-height: 80rpx;}
	
	.top_oper_item image {
		width: 60upx;
		height: 60upx;
	}
	.success-color{
		color: $uni-color-success;
	}
	.error-color{
		color: $uni-color-error;
	}
	.btn-contact{position: absolute;height: 100%;width: 100%;right: 0;top: 0;opacity: 0;z-index: 1;}
	
	// 字体图标
	.icon-xiangyouxiayiye{
		color: #999999;
	}
	.icon-wuliu{
		font-size: 36rpx;
		margin-right: 15rpx;
	}
	.icon-dianpu{
		font-size: 36rpx;
		margin-right: 15rpx;
		vertical-align: -2rpx;
	}
	.icon-guanbi {
		font-size: 60upx;
		color: white;
		display: block;
		text-align: center;
		margin-top: 20upx;
	}
	.icon-xuanzhong{
		font-size: 28rpx;
		color: white;
		margin-top: 4rpx;
	}
	.icon-tubiao09{
		font-size: 44rpx;
	}
	
	.starBox .iconfont{width: 30rpx;font-size: 30rpx;margin: 0 2rpx;height: 30rpx;}
	.icon-conversation_icon{margin-top: -2rpx;vertical-align: -2rpx;}
	
	.myPrice::before{content: '￥';font-weight: normal;color: inherit;font-size: 24rpx;}
	// 规格
	.specsBox{height: 40upx;display: flex;align-items: center;}
	.specsBox .txt{background-color: #F9F9F9;font-size: 20rpx;color: #747474;border-radius: 4upx;white-space: nowrap;text-overflow: ellipsis;border: 1px solid #EBEBEB;padding:0 12rpx;
			// padding:0 40rpx 0 10rpx; 可以修改规格时用这个
	}
	
	// 发帖入口
	.postEnter{
		width: 88rpx;
		height: 88rpx;
		position: fixed;
		z-index: 99;
		right: 24rpx;
		bottom: 250rpx;
		border-radius: 50%;
		.editorImg{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 56upx;
			height: 56upx;
		}
	}
	// 价格说明
	.price_description{
		padding: 0 20rpx 10rpx;
		>text{
			position: relative;
			display: inline-block;
			color: white;
			padding: 2rpx 8rpx;
			color: $uni-color-price;
			font-size: 22rpx;
			text-align: justify;
			.bg{
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				border-radius: 4rpx;
				background-color: $uni-color-price;
				opacity: 0.25;
			}
		}
	}
	
	// 返回顶部
	.back_top{
		width: 80rpx;
		height: 80rpx;
		border-radius: 100px;
		background:  rgba(0,0,0,0.4);
		position: fixed;
		right: 24rpx;
		bottom: 150rpx;
		z-index: 30;
		margin-bottom: constant(safe-area-inset-bottom); 
		margin-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		.icon-xiangshang{
			color: white;
			font-size: 40rpx;
			margin-top: -4rpx;
			position: relative;
			z-index: 1;
		}
	}
	// 缺省页
	.emptyPage {
		width: 100%;
		image {
			width: 50%;
			display: block;
			margin: 0 auto;
			height: 185rpx;
		}
		.emptyText {
			text-align: center;
			line-height: 44rpx;
			color: #999999;
			font-size: 28rpx;
			padding-top: 40rpx;
		}
	}
	
	// 瀑布流
	.my-box{
		width: 100%;
		display: flex;
		.left-box{
			width: calc(50% - 10rpx);
			margin-right: 20rpx;
		}
		.right-box{
			width: calc(50% - 10rpx);
		}
		.my-goods-box{
			background-color: #FFFFFF;
			border-radius: 12rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
			position: relative;
			box-shadow: 0 0 6rpx 1px #ededed;
			
		}
		.goods-box-msg{
			padding: 14rpx 20rpx;
			.price_description{
				padding: 0;
				display: inline-block;
				margin-top: 8rpx;
				margin-left: -4rpx;
			}
		}
	}
	.repeatGoodsList{
		padding-bottom: 20rpx;
		.goodImg{
			width: 100%;
		}
		.hisGoodsName2{
			margin-bottom: 2rpx;
			line-height: 34rpx;
			font-size: 28rpx;
			max-height: 68rpx;
		}
		.color333{
				color: #333333;
				padding: 0;
				font-size: 26rpx;
				.bg{display: none;}
			}
		.prices{
			margin-top: 10rpx;
			.priceNow{
				margin-right: 10rpx;
				.price{
					font-size: 32rpx;
					color: $uni-color-price;
				}
			}
			.priceReg{
				color: #999;
				text-decoration: line-through;
				.price{
					color: #999;
					text-decoration: line-through;
				}
			}
			.position{
				text{
					font-size: 26rpx;
					color: #666666;
					margin-left: 6rpx;
				}
			}
		}
		.saled{
			margin-top: 10rpx;
			text{
				color: #888888;
				font-size: 24rpx;
				padding-right: 20rpx;
				border-right: 1px solid #DDDDDD;
				margin-right: 20rpx;
				line-height: 20rpx;
				&:nth-last-of-type(1){border: none;}
			}
		}
		.maskObtained{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: rgba(0,0,0,.2);
			border-radius: 12rpx;
			.icon-obtained{
				position: absolute;
				width: 80px;
				height: 80px;
				left: 50%;
				top: 50%;
				z-index: 3;
				transform: translate(-50%,-50%);
			}
		}
	} 
	
	.youTitle {
		text-align: center;
		padding: 24rpx;
		image{
			height: 32rpx;
		}
		text{
			&:nth-of-type(1){
				width: 24rpx;
				border-radius: 100%;
				height: 10rpx;
				background-color: red;
				transform: rotate(25deg);
			}
			&:nth-of-type(2){
				width: 32rpx;
				border-radius: 100%;
				height: 12rpx;
				background-color: red;
				transform: rotate(40deg);
			}
			&:nth-of-type(4){
				width: 24rpx;
				border-radius: 100%;
				height: 10rpx;
				background-color: red;
				transform: rotate(-25deg);
			}
			&:nth-of-type(3){
				width: 32rpx;
				border-radius: 100%;
				height: 12rpx;
				background-color: red;
				transform: rotate(-40deg);
			}
		}
		view{
			font-size: 32rpx;
			font-weight: bold;
			padding: 0 30rpx;
		}
	}
	
	.profitTitle_{
		margin-top: 10rpx;
		text{
			color: #FF0B03;
			font-size: 20rpx;
			border-radius: 6rpx;
			border: 1px solid #EEEEEE;
			display: inline-block;
			padding: 2rpx 8rpx;
		}
	}
</style>