<template>
	<div class="rulePopDivAll">
		<div class="titleDiv"></div>
		<div class="contentDivAll">
			<div class="contetnDivAll1">
				<div style="display: flex;">
					<div class="contentTextDiv" @scroll="scrollRuleEvent">
						<div class="oneTitle"><span>一、活动时间:</span></div>
						<!-- <div class="twoTitle">活动时间:</div> -->
						<div class="contentText">2022年12月29日00:00-2023年1月19日23:59</div>
						<!-- <div class="twoTitle">领奖截至时间:2022年12月25日24点</div> -->
						<div class="oneTitle"><span>二、玩法介绍:</span></div>
						<div class="contentText">
							1、活动限羽西京东自营旗舰店会员（以下简称羽西会员）参与，会员首次进入活动可获得一次抽盲盒机会，非会员需开卡加入羽西会员后方可获得一次抽盲盒机会。
						</div>
						<div class="contentText">
							2、消耗抽盲盒次数可以抽奖，如若中奖实物奖品请于2023年1月12日23:59前按照中奖弹窗提示填写完整且准确的获奖信息，中奖弹窗获奖信息一经提交不允许修改（如需修改请在活动结束前联系羽西京东自营旗舰店客服登记），未在规定时间内填写或填写信息有误不详细视为自动放弃中奖机会，后续不予补发奖品，实物奖品以实际发货为准；优惠券、积分和京豆将于中奖后24小时内自动发放到您的京东账户，优惠券请到京东APP-我的-优惠券中查看，积分请到京东APP-羽西店铺-会员中心查看，京豆请于京东APP-我的-京豆中查看。
						</div>
						<div class="twoTitle">奖品明细:</div>
						<div class="contentText">鎏金瓶精华正装30ml</div>
						<!-- <div class="twoTitle">二等奖:</div> -->
						<div class="contentText">888积分</div>
						<!-- <div class="twoTitle">三等奖:</div> -->
						<div class="contentText">888京豆</div>
						<div class="contentText">666京豆</div>
						<div class="contentText">88积分</div>
						<!-- <div class="twoTitle">四等奖:</div> -->
						<!-- <div class="contentText">10京豆，限量10000份，中奖概率0.01%；</div>
						<div class="prompt">*活动期间，抽奖活动中每个用户至多有200次抽奖机会，每档奖品同一ID仅可中奖1次（电话、地址任意一个信息相同，视为同一ID）；</div>
						<div class="prompt">*奖品数量有限，抽完即止。</div> -->
						<div class="contentText">3、获取抽盒次数：</div>
						<div class="contentText">1）累计签到：累计签到指定天数，获得指定抽盒次数，每个ID每日限签到1次（累计签到3天，抽盒次数+1；7天+2；14天+3）活动期间共可获得6次抽盒机会；</div>
						<div class="contentText">2）积分兑换：消耗50店铺积分可兑换1次抽盒机会，每日3次；</div>
						<div class="contentText">3）关注店铺：获得1次抽盒机会，活动期间1次</div>
						<div class="contentText">4）邀请好友：每邀请一位好友首次入会抽盒次数+1，每日3次；</div>
						<div class="contentText">5）加入羽西会员抽盒次数+1，活动期间1次；</div>
						<div class="oneTitle"><span>三、活动规范</span></div>
						<div class="contentText">1、邀请好友助力：助力人需复制口令打开京东APP，根据弹窗提示成功加入羽西会员方算助力成功（首次成功开卡助力可获得1次抽奖机会，退会后再开卡不算助力成功），如果没有根据弹窗提示主动参与加入会员不算助力成功哦；</div>
						<div class="contentText">2、实物奖品将于活动结束后15个工作日内发放，且实物奖品以实际发放为准，因疫情原因可能会延迟发货请谅解；</div>
						<div class="contentText">3、每位自然人用户仅能使用一个京东账号参与活动，京东账号、手机号码等任意信息一致或指向同一用户，则视为同一用户；第一个参与本活动的账号参与结果有效，其他账号参与本活动均视为无效；</div>
						<div class="contentText">4、若发现同一用户使用不同账号重复参与活动，商家有权取消其获奖资格；</div>
						<div class="contentText">5、京豆、优惠券奖品将于中奖后24小时内发放到账户，京豆请于京东APP-我的-京豆中查看，优惠券请于-京东APP-我的优惠券中查看，用户应注意账户信誉问题，如因为账户信誉度低或其他账户问题造成奖品发放不到账户，则视为自动放弃中奖机会，不再补发奖品。</div>
						<div class="oneTitle"><span>四、注意事项</span></div>
						<div class="contentText">1、活动过程中，凡以不正当手段（如作弊领取、恶意套取、刷信誉、虚假交易、扰乱系统、实施网络攻击等）参与本次活动的用户，活动主办方有权终止其参与活动，并取消获得礼品资格；若发现同一用户使用不同账号重复参加活动，商家有权取消活动资格；如给主办方造成损失的，主办方将保留向违规用户继续追索的权利。</div>
						<div class="contentText">2、如遇不可抗力(包括但不限于重大灾害事件、活动受政府机关指令需要停止举办或调整的、活动中存在大面积作弊行为、活动遭受严重网络攻击或因系统故障导致活动参与名单大批量出错，活动不能正常进行的)，主办方有权取消、修改或暂停本活动。</div>
						<div class="contentText">3、若您对活动有任何疑问，请在活动时间内进入“京东APP-羽西京东自营官方旗舰店-在线客服”中咨询，逾期不受理。</div>
						<div class="contentText">4、本活动最终解释权归羽西京东自营官方旗舰店所有。</div>
					</div>
					<div class="__rule_pops_scroll_line cc_abs"><div class="cc_abs" :style="{ top: `${ruleScrollTransform}%` }"></div></div>
				</div>
			</div>
		</div>
		<div class="closeDiv" @click="tocolseDiv"></div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			ruleScrollTransform: 0
		};
	},
	created() {},
	methods: {
		scrollRuleEvent(e) {
			
			// this.ruleTextTransform = (e.srcElement.scrollTop / e.srcElement.scrollHeight)*100
			this.ruleScrollTransform = (e.srcElement.scrollTop / ((e.srcElement.scrollHeight - e.srcElement.clientHeight) / (1 - 55 / 465.61))) * 100;
			
		},
		tocolseDiv(){
			this.$emit('closeDiv');
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.rulePopDivAll {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/214262/20/24621/20314/639d5662E7364dee7/a8c21ad78bbc41dc.jpg');
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	.closeDiv{
		width: .55rem;
		height: .55rem;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/62477/6/22306/1308/639ab13eEaa8fba40/455db7234cbaad08.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.titleDiv {
		width: 4.46rem;
		height: 1.13rem;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-bottom: -0.62rem;
		position: relative;
		z-index: 1;
	}
	.contentDivAll {
		position: relative;
		padding: 0.19rem;
		border-radius: 0.5rem;
		position: relative;
		width: 6.03rem;
		height: 8.97rem;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/62112/39/22185/68802/63a52685E64e5690e/1d463211952325c9.png');
		background-size: 100% 100%;
		.contetnDivAll1 {
			height: 4.98rem;
			border-radius: 0.5rem;
			padding: 0.52rem 0.64rem 0.24rem 0.36rem;
			margin-top: 1.8rem;
			.contentTextDiv::-webkit-scrollbar{
				display: none;
			}
			.contentTextDiv {
				
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				width: 5.94rem;
				height: 5.9rem;	
				overflow: auto;
				.oneTitle {
					font-size: 0.24rem;
					color: #000000;
					font-weight: bold;
					line-height: 0.36rem;
					margin-top: 0.28rem;
					span {
						// border-bottom: 0.02rem solid #f41e46;
					}
				}
				.twoTitle {
					font-size: 0.2rem;
					color: #000000;
					display: flex;
					align-items: center;
					&::before {
						content: '';
						display: block;
						width: 0.1rem;
						height: 0.1rem;
						background: #000000;
						border-radius: 50%;
						margin-right: 0.06rem;
					}
				}

				.contentText {
					font-size: 0.18rem;
					color: #000000;
					margin-left: 0.16rem;
					text-align: left;
				}
				.contentText1 {
					font-size: 0.18rem;
					color: #000000;
					text-align: left;
				}
				.prompt {
					font-size: 0.14rem;
					color: #404040;
					margin-left: 0.16rem;
					margin-top: 0.08rem;
					text-align: left;
				}
				.twoTitle1 {
					font-size: 0.18rem;
					color: #000000;
					display: flex;
					text-align: left;
					&::before {
						content: '①';
						display: block;
						width: 0.1rem;
						height: 0.1rem;
						margin-right: 10px;
					}
				}
				.twoTitle2 {
					font-size: 0.18rem;
					color: #000000;
					display: flex;
					text-align: left;
					&::before {
						content: '②';
						display: block;
						width: 0.1rem;
						height: 0.1rem;
						margin-right: 10px;
					}
				}
				.twoTitle3 {
					font-size: 0.18rem;
					color: #000000;
					display: flex;
					text-align: left;
					&::before {
						content: '③';
						display: block;
						width: 0.1rem;
						height: 0.1rem;
						margin-right: 10px;
					}
				}
				.twoTitle4 {
					font-size: 0.18rem;
					color: #000000;
					display: flex;
					text-align: left;
					&::before {
						content: '④';
						display: block;
						width: 0.1rem;
						height: 0.1rem;
						margin-right: 10px;
					}
				}
				.twoTitle5 {
					font-size: 0.18rem;
					color: #000000;
					display: flex;
					text-align: left;
					&::before {
						content: '⑤';
						display: block;
						width: 0.1rem;
						height: 0.1rem;
						margin-right: 10px;
					}
				}
				.twoTitle6 {
					font-size: 0.18rem;
					color: #000000;
					display: flex;
					text-align: left;
					&::before {
						content: '⑥';
						display: block;
						width: 0.1rem;
						height: 0.1rem;
						margin-right: 10px;
					}
				}
				.twoTitle7 {
					font-size: 0.18rem;
					color: #000000;
					display: flex;
					text-align: left;
					&::before {
						content: '⑦';
						display: block;
						width: 0.1rem;
						height: 0.1rem;
						margin-right: 10px;
					}
				}
				.twoTitle8 {
					font-size: 0.18rem;
					color: #000000;
					display: flex;
					text-align: left;
					&::before {
						content: '⑧';
						display: block;
						width: 0.1rem;
						height: 0.1rem;
						margin-right: 10px;
					}
				}
				.twoTitle9 {
					font-size: 0.18rem;
					color: #000000;
					display: flex;
					text-align: left;
					&::before {
						content: '⑨';
						display: block;
						width: 0.1rem;
						height: 0.1rem;
						margin-right: 10px;
					}
				}
			}
		}
		.cc_abs {
			position: absolute;
		}
		.__rule_pops_scroll_line {
			top: 0.38rem;
			right: 0.15rem;
			background-color: #ececec;
			border-radius: 0.02rem;
			width: 0.05rem;
			height: 3.7rem;
			right: 0.44rem;
			top: 2.66rem;
		}
		.__rule_pops_scroll_line > div {
			width: 100%;
			height: 0.55rem;
			background-color: #969799;
			/* left: 0; */
		}
		.logoImgDiv {
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/210152/7/28747/29226/637b411dE7d53eebd/4c3830dd8c4fbb12.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 1.34rem;
			height: 1.37rem;
			position: absolute;
			bottom: 0.16rem;
			right: 0.22rem;
		}
	}
	.moreDiv{
		width: 1.91rem;
		height: 0.57rem; 
		background-size: 1.91rem 0.57rem;
		background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/53810/8/22088/1279/63429b68Eec1731b2/321073e714fe9da8.png"); 
		overflow: hidden;
		margin-left: calc(50% - 1.91rem / 2);
	}
	.closeDiv {
		img {
			height: 0.69rem;
			width: 0.69rem;
			margin-top: 0.6rem;
		}
	}
}
</style>
