ds_mobile_app/mobile/standard/signIn/signAcCom.vue

<template>
	<view class="page">
		<view class="main_content2" :style="{backgroundImage:'url('+img_url+'signIn/sign_ac_bg.png)'}">
			<view class="top_bar">
				<view class="top_header">
					<view class="top_header_left" @click="goBack">
						<image :src="img_url + 'signIn/to_back.png'" mode=""></image>
					</view>
					<view class="top_header_cen">签到中心</view>
					<view class="top_white_space"></view>
				</view>
			</view>
			<view class="mid_banner">
				<view class="banner_tip">
					<view class="s_sign_tip" @tap="isHideMask = false;signRule=true">
						<image :src="img_url+'signIn/help_icon.png'" mode=""></image>
						<text>活动规则</text>
					</view>
				</view>
				<view class="banner_b_title">
					<text>每日签到领积分</text>
				</view>
				<view class="banner_s_title">
					<image :src="img_url+'signIn/ban_oral_left.png'" mode=""></image>
					<text>连续累计签到 独享好礼翻倍</text>
					<image :src="img_url+'signIn/ban_oral_right.png'" mode=""></image>
				</view>
				<view class="banner_time" v-if="JSON.stringify(signInfo)!='{}'">
					<view class="banner_time_tip">{{acState==0?'距离活动开始还有':(acState==1?'距离活动结束还有':'活动已结束')}}</view>
					<view class="banner_time_count">
						<block v-if="countDown.day!=0">{{countDown.day}}天</block>
						{{countDown.hour}}
						<text>小时</text>
						{{countDown.minute}}
						<text>分</text>
						{{countDown.second}}
						<text>秒</text>
					</view>
				</view>
			</view>
			<view class="sign_ac_con">
				<block v-if="JSON.stringify(signInfo)!='{}'">
					<view class="ac_con_top">
						<view class="cur_int">目前积分<text>{{my_points}}</text></view>
						<view class="cur_int_tip" v-show="signInfo.continueNum>0">连续签到{{signInfo.continueNum}}天可领取好礼</view>
					</view>
					<view class="ac_con_bottom">
						<view class="sign_ac_day">
							<block v-if="signInfo.memberSignInfoList&&signInfo.memberSignInfoList.length<=8">
								<view class="sign_ac_day_line1">
									<view class="day_bonus_img" v-for="(item,index) in signInfo.memberSignInfoList.slice(0,4)" :key="index">
										<image :src="img_url+'signIn/sign_bonus.png'" mode="" :class="{opa_class:item.signRecordState!=2}"></image>
										<text>第{{index+1}}天</text>
									</view>
								</view>
								<view class="sign_ac_day_line1">
									<view class="day_bonus_img" v-for="(item,index) in signInfo.memberSignInfoList.slice(4)" :key="index">
										<image :src="img_url+'signIn/sign_bonus.png'" mode="" :class="{opa_class:item.signRecordState!=2}"></image>
										<text>第{{index+5}}天</text>
									</view>
								</view>
							</block>
							<block v-else>
								<swiper class="swiper-box" :current="current" indicator-dots="true" indicator-color="#ffa527" indicator-active-color="#FF6F1A">
										<swiper-item class="swiper-item" v-for="(item,idxA) in signMutipleDay" :key="idxA">
											<view class="sign_ac_day_line1">
												<view class="day_bonus_img" v-for="(subItem,idxB) in item.slice(0,4)" :key="idxB">
													<image :src="img_url+'signIn/sign_bonus.png'" mode="" :class="{opa_class:subItem.signRecordState!=2}"></image>
													<text>第{{idxB+idxA*8+1}}天</text>
												</view>
											</view>
											
											<view class="sign_ac_day_line1">
												<view class="day_bonus_img" v-for="(subItem,idxC) in item.slice(4)" :key="idxC">
													<image :src="img_url+'signIn/sign_bonus.png'" mode="" :class="{opa_class:subItem.signRecordState!=2}"></image>
													<text>第{{idxC+idxA*8+5}}天</text>
												</view>
											</view>
										</swiper-item>
								</swiper>
							</block>
						</view>
						<view class="sign_ac_but sign_on" v-if="acState==1&&signInfo.isSign==1" @tap="goSign">立即签到</view>
						<view class="sign_ac_but sign_al" v-if="acState==1&&signInfo.isSign==2">今日已签到&nbsp;&nbsp;{{signInfo.integralPerSign>0?'积分+'+signInfo.integralPerSign:''}}</text></view>
						<view class="sign_ac_but sign_off" v-if="acState==0">活动未开始</view>
						<view class="sign_ac_but sign_off" v-if="acState==2">活动已结束</view>
						<view class="sign_fini">
						<block v-if="signInfo.continueNum>0">
							<text v-if="signCountTotal>5">您已连续签到{{signCountTotal}}天，<block v-if="signInfo.integralPerSign>0">累计积分{{signCountTotal*signInfo.integralPerSign}}</block></text>
							<text v-if="signCountTotal==signInfo.continueNum">您已连续签到{{signCountTotal}}天, <block v-show="signInfo.bonusIntegral>0">获得积分奖励{{signInfo.bonusIntegral}}</block> <block v-if="signInfo.bonusVoucher>0">,优惠券:{{signInfo.bonusVoucherName}}</block></text>
						</block>
						</view>
					</view>
					
				</block>
				<block v-if="JSON.stringify(signInfo)=='{}'&&!firstLoading">
					<view class="signAc_off">签到活动已关闭</view>
					<view class="signAc_off_but" @click="goBack()">返回</view>
				</block>
			</view>
			<view class="sign_ac_bottom" :style="{backgroundImage:'url('+img_url+'signIn/sign_ac_bottom.png)'}" v-if="JSON.stringify(signInfo.share)!='{}'">
				<view class="share_con">
					<view class="share_con_top">
						<text>分享至好友</text>
						<view class="share_but" @click="goShare">
							分享
							<image :src="img_url+'signIn/share_but.png'" mode=""></image>
						</view>
					</view>
					<text>分享至好友，共同参与签到领积分活动</text>
				</view>
			</view>
		
			<view class="popMask" :hidden="isHideMask" @tap="hideMask">
				<view class="sign_rule" @click.stop="()=>{}" v-if="signRule">
					<view class="sign_rule_title">签到领积分规则</view>
					<view class="sign_rule_one">
						<image :src="img_url+'signIn/sign_rule1.png'" mode=""></image>
						<text>每日签到获得积分奖励</text>
					</view>
					<view class="sign_rule_one_text">
						<text>{{signInfo.bonusRules}}</text>
					</view>
					<view class="sign_rule_one">
						<image :src="img_url+'signIn/sign_rule2.png'" mode=""></image>
						<text>分享活动</text>
					</view>
					<view class="sign_rule_one_text">
						<text>
							1.签到活动未开始前即可分享至好友;
						</text>
					</view>
					<view class="sign_but_rule" @click.stop="hideMask">知道了～</view>
				</view>
			
			</view>
				
			<!-- 分享弹框 start -->
			<view class="share_model" v-if="share_model" @touchmove.stop.prevent="moveHandle">
				<view class="share_model_list">
					<!-- #ifdef H5 -->
					<view class="share_model_pre" @tap.stop="sldShareBrower" v-if="isWeiXinBrower">
						<image :src="img_url+'goods_detail/wx_share.png'" mode=""></image>
						<text>{{$L('微信好友')}}</text>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" class="share_model_pre">
						<image :src="img_url+'goods_detail/wx_share.png'" mode=""></image>
						<text>{{$L('微信好友')}}</text>
					</button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="share_model_pre" @tap.stop="sldShare(0,'WXSceneSession')">
						<image :src="img_url+'goods_detail/wx_share.png'" mode=""></image>
						<text>{{$L('微信好友')}}</text>
					</view>
					<view class="share_model_pre" @tap.stop="sldShare(0,'WXSenceTimeline')">
						<image :src="img_url+'goods_detail/wechat_moments.png'" mode=""></image>
						<text>{{$L('微信朋友圈')}}</text>
					</view>
					<!-- #endif -->
				</view>
				<view class="share_model_close" @click="closeShareModel">
					<image :src="img_url+'goods_detail/share_close.png'" mode=""></image>
				</view>
			</view>
			<!-- 分享弹框 end -->
			<!-- 微信浏览器分享提示  start-->
			<view class="wx_brower_share_mask" v-if="showWeiXinBrowerTip">
				<view class="wx_brower_share_top_wrap">
					<image :src="img_url+'wx_share_tip.png'" mode="widthFix" @tap="closeShareModel" class="wx_brower_share_img"></image>
				</view>
			</view>
			<!-- 微信浏览器分享提示  end-->
		</view>
	</view>
</template>

<script>
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
	export default{
		data(){
			return{
				img_url:getApp().globalData.imgUrl,
				bigDay:'00',
				month:'00',
				year:'0000',
				signInfo:{},
				my_points:0,
				acState:'',
				countDown:{
					day:0,
					hour:0,
					minute:0,
					second:0
				},
				secInterval:'',
				isHideMask:true,
				signCountTotal:0,
				signMutipleDay:[],
				current:0,
				isWeiXinBrower:false,
				share_model:false,
				showWeiXinBrowerTip:false,
				isReachContiBonus:false,
				signRule:false,
				firstLoading:true
			}
		},
		created() {
			this.initData()
			// #ifdef H5
			this.isWeiXinBrower = this.$isWeiXinBrower();
			// #endif
		},
		components:{
			uniSwiperDot,
		},
		methods:{
			
			initData(){
				uni.showLoading({})
				this.getInfo()
				this.getUserPoints()	
			},
			goBack(){
				const prePage = getCurrentPages()[getCurrentPages().length-2]
				if(prePage.route == 'pages/index/index'){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else{
					uni.switchTab({
						url:'/pages/user/user'
					})
				}
				
			},
			//获取签到信息
			getInfo(){
				this.firstLoading = true
				let params = {
					url:'/v3/promotion/front/sign/activity/detail'
				}
				this.$request(params).then(res=>{
					if(res.state==200){
						this.firstLoading = false
						this.signInfo = res.data
						uni.hideLoading()
						this.countDay()
						this.openTime()
					}else if(res.state==255){
						this.$api.msg(res.msg)
					}
				})
			},
			//获取用户积分
			getUserPoints(){
				let param = {}
				param.url = 'v3/member/front/integralLog/getMemberIntegral'
				param.method = 'GET'
				this.$request(param).then(res=>{
					if(res.state == 200){
						this.my_points = res.data.memberIntegral
						
					}
				})
			},
			//处理距离活动开始时间|距离活动结束时间
			openTime(){
				let now= new Date()
				let start = new Date(this.signInfo.startTime.replace(/-/g, '/'))
				let end = new Date(this.signInfo.endTime.replace(/-/g, '/'))
				if(now<start){
					this.acState = 0
				}else if(now>start&&now<end){
					this.acState = 1
					let diffTime = (end.getTime() - now.getTime())/1000
					this.secInterval = setInterval(()=>{
						if(diffTime == 0){
							//倒计时结束，清除倒计时
							this.getInfo()
							clearInterval(this.secInterval);
						}else{
							diffTime--;
							let day = parseInt(diffTime / 60 / 60 / 24);
							let hours = parseInt(diffTime / 60 / 60 % 24);
							let minutes = parseInt(diffTime / 60 % 60);
							let seconds = parseInt(diffTime % 60);
							this.countDown.day = day
							this.countDown.hour = hours
							this.countDown.minute = minutes
							this.countDown.second = seconds
						}
					},1000)
				}else if(now>end){
					this.acState = 2
				}
			},
			//处理签到天数
			countDay(){
				let {continueNum,integralPerSign,memberSignInfoList} = this.signInfo
				let now = new Date()
				let nowIdx = 0
				let contiSignCount = 0
				
				//在数组中找到当天的下标
				this.signContiDay = new Array(this.signInfo.memberSignInfoList.length).fill({day:0,isSignIn:0})
				this.signInfo.memberSignInfoList.some((i,index)=>{
					let day = new Date(i.date.replace(/-/g, '/'))
					if(day.getFullYear()==now.getFullYear()&&day.getMonth()==now.getMonth()&&day.getDate()==now.getDate()){
						nowIdx = index
						return false
					}
				})
				
				
				
				//如果有连续签到奖励，则计算当天之前连续签到几天
				if(continueNum>0){
					for(let i = nowIdx;i>=0;i--){
						if(this.signInfo.memberSignInfoList[i].signRecordState==2){
							contiSignCount++
							continue
						}else{
							break
						}
					}
					//如果连续签到达到要求的天数则--
					if(contiSignCount==continueNum){
						this.isReachContiBonus = true
					}else if(contiSignCount>continueNum){ //如果已经完成连续签到，下一次签到重新开始算
						contiSignCount = contiSignCount - continueNum
						this.isReachContiBonus = false
					}
					this.signCountTotal = contiSignCount
				}
				
			
				
				// 如果活动天数大于8天,则另外处理(大于8天,则需要用swiper滑动展示)
				if(memberSignInfoList.length>8){
					this.current = nowIdx<8?0:(nowIdx+1)/8 //根据现在时间决定swiper的current
					console.log(this.current,'llll',nowIdx)
					this.formatMutipleDay()
				}
			},
			
			// 如果活动天数大于8天,则另外处理(大于8天,则需要用swiper滑动展示)
			formatMutipleDay(){
				let {memberSignInfoList} = this.signInfo
				let splt = 8
				let multiArr = []
				let init = 0
				let count = Math.ceil(memberSignInfoList.length/splt)
				for(let i = 0;i<count;i++){
					multiArr.push(memberSignInfoList.slice(init,init+splt))
					init+=splt
				}
				this.signMutipleDay = multiArr
			},
			
			hideMask(){
				this.isHideMask = true
			},
			//去签到
			goSign(){
				let source = 0
				// #ifdef APP-PLUS
				if(uni.getSystemInfoSync().platform==='ios'){
					source = 4
				}else if(uni.getSystemInfoSync().platform==='android'){
					source = 3
				}
				// #endif
				
				//#ifdef H5
				    source = 2 
				//#endif
				
				//#ifdef MP-WEIXIN
					source = 5
				//#endif
				
				let param = {
					url:'v3/promotion/front/sign/activity/doSign',
					method:'POST',
					data:{
						source,
						signActivityId:this.signInfo.signActivityId
					}
				}
				
				this.$request(param).then(res=>{
					if(res.state==200){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						this.getInfo()
						this.getUserPoints()
					}else{
						uni.showToast({
							title:'签到活动已结束',
							icon:'none'
						})
						this.getInfo()
					}
				})
			},
			goShare(){
				
				
				// #ifdef H5
				if(this.isWeiXinBrower){
					this.share_model = true
				}else{
					this.showWeiXinBrowerTip = true
				}
				// #endif
				
				// #ifdef MP-WEIXIN || APP-PLUS
				this.share_model = true
				// #endif
				
				
			},
			
			sldShareBrower() {
				this.showWeiXinBrowerTip = true;
				this.share_model = false;
			},
			sldShare: function(type, scene) {
				let shareData = {};
				if (type == 0) {
					shareData.href = getApp().globalData.apiUrl + '/standard/signIn/signIn';
					shareData.title = this.signInfo.shareTitle;
					shareData.summary = this.signInfo.shareDesc;
					shareData.imageUrl =this.signInfo.shareImgUrl;
				} else if (type == 2) {
					shareData.imageUrl = '';
				}
				this.$weiXinAppShare(type, scene, shareData);
				this.closeShareModel(); //关闭分享
			},
			closeShareModel() {
				this.share_model = false;
				this.showWeiXinBrowerTip = false;
				this.poster = false;
			},
		}
	}
</script>

<style lang="scss">
	page{
		
	}
	
	
	.main_content2{
		width: 750rpx;
		margin: 0 auto;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
		position: relative;
		height: 100vh;
		.top_bar {
			width: 750rpx;
			// height: 178rpx;
			padding-top: 42rpx;
			/* #ifdef APP-PLUS||MP-WEIXIN */
			padding-top: calc(var(--status-bar-height) + 42rpx);
			/* #endif */
			padding-right: 20rpx;
			width: 750rpx;
			z-index: 50;
		
			.top_header {
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.top_header_left {
					padding-left: 20rpx;
		
					image {
						width: 17rpx;
						height: 29rpx;
					}
				}
		
				.top_header_cen {
					margin: 0 50rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					color: #FFFFFF;
				}
		
				.top_white_space {
					width: 30rpx;
					height: 29rpx;
					padding-right: 20rpx;
				}
			}
		
			.top_category {
				margin-top: 40rpx;
		
				.cate_wrap {
					display: -webkit-box;
					align-items: center;
					overflow-x: scroll;
		
					.category_item {
						color: #FFFFFF;
						padding: 0 20rpx;
						margin-left: 20rpx;
						height: 54rpx;
		
						&.boWhite {
							border-bottom: 4rpx solid #fff;
						}
					}
				}
			}
		}
		.mid_banner{
			padding: 24rpx;
			.banner_tip{
				margin-top: 20rpx;
				width: 100%;
				position: relative;
				height: 69rpx;
				.s_sign_tip{
					position: absolute;
					top: 0;
					right: -24rpx;
					width: 189rpx;
					height: 69rpx;
					background: rgba(0,0,0,0.1);
					border-bottom-left-radius: 35rpx;
					border-top-left-radius: 35rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					text{
						font-size: 30rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #fff;
						opacity: 0.9;
					}
					image{
						width:37rpx;
						height:34rpx;
						margin-right: 10rpx;
					}
				}
			}
			.banner_b_title{
				margin-top:26rpx;
				text-align: center;
				text{
					font-size: 98rpx;
					font-family: SourceHanSerifCN;
					font-weight: 800;
					color: #FFFFFF;
					text-shadow: #FF771E 2rpx 12rpx 2rpx;
				}
			}
			.banner_s_title{
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				image{
					width:178rpx;
					height:10rpx
				}
				text{
					font-size: 26rpx;
					font-family: SourceHanSansCN;
					font-weight: 500;
					color: #FFFFFF;
					margin: 0 10rpx;
				}
			}
			.banner_time{
				margin-top: 36rpx;
				color: #fff;
				.banner_time_tip{
					font-size: 26rpx;
					font-family: PingFang;
					font-weight: bold;
					text-align: center;
				}
				.banner_time_count{
					margin-top: 10rpx;
					font-size: 44rpx;
					font-family: PingFang;
					text-align: center;
					font-weight: bold;
					text{
						font-size: 28rpx;
					}
				}
			}
		}
		.sign_ac_con{
			padding: 42rpx 24rpx 0;
			margin: 0 auto;
			width: 700rpx;
			height: 720rpx;
			background: #FFFFFF;
			box-shadow: 0px 10rpx 26rpx 0px rgba(255, 130, 25, 0.18);
			border-radius: 20rpx;
			position: relative;
			.ac_con_top{
				.cur_int{
					text-align: center;
					font-size: 36rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #2D2D2D;
					text{
						color: #FF8118;
					}
				}
				.cur_int_tip{
					margin-top: 27rpx;
					font-size: 26rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #000000;
					opacity: 0.3;
					text-align: center;
				}
			}
			.ac_con_bottom{
				margin-top: 30rpx;
				height: 500rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
			}
			.sign_ac_day{
				width: 100%;
					.sign_ac_day_line1{
						display: flex;
						flex-wrap: wrap;
						justify-content: space-around;
						margin-bottom: 20rpx;
					}
					.day_bonus_img{
						display: flex;
						flex-direction: column;
						align-items: center;
						image{
							width: 90rpx;
							height: 90rpx;
						}
						text{
							margin-top: 10rpx;
							font-size: 24rpx;
							font-family: PingFang;
							font-weight: 500;
							color: #333333;
						}
					}
				
				
			}
		
			.sign_ac_but{
				width: 580rpx;
				height: 80rpx;
				white-space: pre-wrap;
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 34rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #FFFFFF;
				margin: 20rpx auto 0;
				&.sign_on{
					background: #FF6F1A;
					box-shadow: 0px 6rpx 30rpx 0px rgba(170, 170, 170, 0.18);
				}
				&.sign_off{
					background: #999999;
				}
				
				&.sign_al{
					border: 1px solid #F65A0E;
					box-shadow: 0px 3px 15px 0px rgba(170, 170, 170, 0.18);
					color: #F65A0E;
				}
			}
			.sign_fini{
				margin: 20rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #FF6F1A;
			}
			.signAc_off{
				position: relative;
				top: 20%;
				text-align: center;
				font-size: 60rpx;
				color: #FF6F1A;
			}
			.signAc_off_but{
				position: relative;
				top: 60%;
				width: 580rpx;
				height: 80rpx;
				white-space: pre-wrap;
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 34rpx;
				background: #FF6F1A;
				margin: auto;
				color: #fff;
			}
		
		}
		.sign_ac_bottom{
			position: relative;
			width: 750rpx;
			margin-top: -100rpx;
			// bottom: -106rpx;
			height: 230rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center center;
			.share_con{
				position: absolute;
				bottom: 34rpx;
				right: 42rpx;
				
				.share_con_top{
					display: flex;
					align-items: center;
					text{
						font-size: 56rpx;
						font-style: italic;
						font-weight: bold;
						color: #fff;
						text-shadow: #FF771E 4rpx 0rpx 6rpx;
						margin-right: 20rpx;
						letter-spacing:6rpx
					}
					.share_but{
						width: 130rpx;
						height: 40rpx;
						background: #FFFFFF;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						font-size: 28rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #FF8016;
						image{
							width: 30rpx;
							height: 24rpx;
						}
					}
				}
				
				&>text{
					font-size: 24rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.8);
				}
			}
		}
	}
	
	.popMask{
		width: 750rpx;
		height: calc(100vh + 210rpx - 106rpx);
		margin: 0 auto;
		position: absolute;
		background: rgba(0, 0, 0, 0.4);
		top: 0;
		left: 0;
		z-index: 10;
		.sign_rule{
			width: 600rpx;
			height: 760rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 27rpx 6rpx rgba(85, 85, 85, 0.3);
			border-radius: 20rpx;
			margin: 40% auto 0;
			padding-top: 36rpx;
			padding-left: 36rpx;
			padding-right: 36rpx;
			position: relative;
			.sign_rule_title{
				text-align: center;
				font-size: 36rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #FF7C19;
			}
			.sign_rule_one{
				margin-top: 38rpx;
				display: flex;
				align-items: center;
				
				text{
					font-size: 28rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #FF7C19;
				}
				image{
				   margin-right: 10rpx;
				   width:39rpx;
				   height:35rpx;
				}
			}
			.sign_rule_one_text{
				margin-top: 21rpx;
				font-size: 24rpx;
				font-family: PingFang;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
				word-break: break-all;
			}
			.sign_but_rule{
				width: 320rpx;
				height: 80rpx;
				background: #FF7C19;
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				// position: absolute;
				margin: 30rpx auto;
			}
			.sign_but_rule_already{
				width: 320rpx;
				height: 80rpx;
				border: 2rpx solid #FF7C19;
				color: #FF7C19;
				line-height: 80rpx;
				text-align: center;
				margin: 30rpx auto;
				border-radius: 40rpx;
			}
		}
		.sign_ac_off{
			width:600rpx;
			height:740rpx;
		}
	}
	
	.swiper-box{
		height: 330rpx;
	}
	.opa_class{
		opacity: 0.5;
	}
	
	.share_model {
		width: 750rpx;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: rgba(0, 0, 0, 0.6);
		z-index: 100;
	}
	
	.share_model_list {
		display: flex;
		justify-content: space-around;
		padding: 0 50rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 150rpx;
		z-index: 110;
		width: 750rpx;
	
		.share_model_pre {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: transparent;
			border-radius: 0;
			height: auto;
			line-height: auto;
	
			&::after {
				border-width: 0;
			}
	
			image {
				width: 105rpx;
				height: 105rpx;
			}
	
			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 36rpx;
				margin-top: 30rpx;
			}
		}
	}
	
	.share_model_close {
		width: 46rpx;
		height: 46rpx;
		bottom: 60rpx;
		position: fixed;
		z-index: 110;
		left: 0;
		right: 0;
		margin: 0 auto;
	
		image {
			width: 46rpx;
			height: 46rpx;
		}
	}

	/* 微信浏览器分享提示 start */
	.wx_brower_share_mask {
		width: 750rpx;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.45);
		position: fixed;
		z-index: 99999;
		top: 0;
	}
	
	.wx_brower_share_top_wrap {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		margin-top: 150rpx;
	}
	
	.wx_brower_share_top_wrap .wx_brower_share_img {
		width: 450rpx;
		height: 150rpx;
		margin-right: 80rpx;
	}
	
	.share_h5 {
		width: 100% !important;
		height: 100% !important
	}
	
	uni-image>img{
		opacity: unset;
		object-fit: contain;
	}
	
	.share_h5_operate_img {
		width: 440rpx !important;
		height: 120rpx !important;
	}
	
	.share_h5_close_img {
		width: 50rpx !important;
		height: 50rpx !important;
	}
	
	.share_h5_img_bottom {
		width: 50rpx !important;
		height: 200rpx !important;
	}
	
	/* 微信浏览器分享提示 end */
</style>