<template>
	<div class="rulePopDivAll">
		<div class="contentDivAll">
			<div class="contetnDivAll1">
				<div style="display: flex;">
					<div class="contentTextDiv" @scroll="scrollRuleEvent">
						<div>1、活动时间：</div>
						<div class="wordP">2023年1月20日 0:00:00至2023年2月14日 23:59:59</div>
						<div>2、活动对象：</div>
						<div class="wordP">YSL圣罗兰京东自营官方旗舰店会员（普通会员，挚爱铜卡，尊荣银卡，奢宠金卡，至臻黑卡）</div>
						<div>3、活动奖品信息：</div>
						<div class="wordP">一等奖：YSL情人节限定「香色」礼盒*1（概率约0.001%，总份数为1份）；
		（*礼盒包含：圣罗兰自由至上女士香水50ml*1+圣罗兰细管纯口红1966*1+YSL黑色香水盒*1。注：礼盒图片为视觉艺术效果展示，实际礼盒内产品均包含外包装，礼盒内卡槽为联通包装盒一同嵌入，具体请以实际收到礼盒为准。）</div>
						<div class="wordP">二等奖：圣罗兰新明彩轻垫粉底液10*1/圣罗兰新明彩轻垫粉底液 20*1（中奖概率约0.002%，总份数为2份）；</div>
						<div>（*两款底妆随机发货）</div>
						<div class="wordP">三等奖：圣罗兰细管纯口红1966（情人节限定版）*1（中奖概率约0.003%，总份数为2份）；</div>
						<div class="wordP">四等奖：圣罗兰细管纯口红34*1/圣罗兰细管纯口红35*1/圣罗兰细管纯口红36*1 （中奖概率约0.004%，总份数为3份）</div>
						<div>(*三款口红随机发货）；</div>
						<div class="wordP">五等奖：海马体礼品卡（500元）*1（中奖概率约0.005%，总份数为1份）；</div>
						<div class="wordP">六等奖：圣罗兰黑色散粉刷*1（中奖概率约0.006%，总份数为5份）；</div>
						<div class="wordP">七等奖：京豆*3（中奖概率约30%，总份数为100,000份）；</div>
						<div>4、抽奖机会：</div>
						<div class="wordP">（1）成为YSL圣罗兰京东自营官方旗舰店会员，关注店铺，即可获得参与抽奖活动资格（如参加活动前已关注店铺，可直接点击任务列表获得抽奖机会，无需再重复关注）；</div>
						<div class="wordP">（2）活动期间内，完成任务可获得抽奖机会（共9项）：</div>
						<div class="wordP">（2.1）任务1-每日签到：活动期间内，用户进入YSL圣罗兰京东自营官方旗舰店进行每日签到，可获得1次抽奖机会（每位用户每日最多可参与1次）；</div>
						<div class="wordP">（2.2）任务2-关注店铺：活动期间内，用户关注YSL圣罗兰京东自营官方旗舰店后，可获得1次抽奖机会（每位用户最多可参与1次）；</div>
						<div class="wordP">（2.3）任务3-邀新好友入会：活动期间内，用户每成功邀请1位好友首次加入YSL圣罗兰京东自营官方旗舰店会员即可获得2次抽奖机会（每位用户最多可参与5次，最多可获得10次抽奖机会），首次入会指好友用户首次加入YSL圣罗兰京东官方旗舰店会员，重复入会不计入；</div>
						<div class="wordP">（2.4）任务4-浏览店铺首页：活动期间内，用户每日浏览YSL圣罗兰京东自营官方旗舰店首页10秒以上，可获得1次抽奖机会（每位用户每日最多可参与1次）；</div>
						<div class="wordP">（2.5）任务5-浏览店铺直播间：活动期间内，用户每日浏览YSL圣罗兰京东自营官方旗舰店直播间10秒以上，可获得1次抽奖机会（每位用户每日最多可参与3次）；</div>
						<div class="wordP">（2.6）任务6-浏览宝贝：活动期间内，用户每日浏览YSL圣罗兰京东自营官方旗舰店的产品集合页15秒以上，可获2次抽奖机会（每位用户每日最多可参与1次）；</div>
						<div class="wordP">（2.7）任务7-参加首购入会礼：活动期间内，用户参与YSL首购入会礼活动，可获得3次抽奖机会（每位用户最多可参与1次）；</div>
						<div class="wordP">（2.8）任务8-下单付款：活动期间内，用户每在YSL圣罗兰京东自营官方旗舰店下单购买1笔YSL正装产品订单且单笔实付满160元，可获得5次抽奖机会（每位用户最多可参与3次，最多可获得15次抽奖机会）；</div>
						<div class="wordP">（2.9）任务9-订单评价：活动期间内，用户完成YSL订单评价（3个月内订单），可获得5次抽奖机会（每位用户最多可参与1次）</div>
						<div>5、奖品数量有限，先到先得（一等奖总份数为1份、二等奖总份数为2份、三等奖总份数为2份、四等奖总份数为3份、五等奖总份数为1份、六等奖总份数为5份、七等奖总份数100,000份）。</div>
						<div>6、奖品发放形式：</div>
						<div>实物奖品：</div>
						<div class="wordP">（1）中奖客户信息收集：实物产品奖品即抽即开，页面弹屏提示中奖客户提供收货地址、号码和奖项；（需在2023年2月17日23:59:59前填写对应收货信息，逾期则视为自动放弃奖品）；</div>
						<div class="wordP">（2）实物奖品将采取寄送方式发放，获奖用户需在开奖后填写姓名、联系电话、详细地址信息。如因用户个人情况无法及时联系，即奖品作废并不再补发，或如用户未填写真实有效的信息或填写收货信息不详，均视为放弃奖品，且抽奖机会作废，奖品库存不释放且不再重新抽取；奖品将在活动结束后30天内寄出，发货进度请详询线上美妆顾问；（奖品图片仅供参考，具体请以收到实物为准）。
虚拟产品奖品：</div>
						<div class="wordP">（1）京豆：虚拟产品奖品即抽即开，中奖后系统预计24小时内自动发放至账户。</div>
						<div>7、中奖次数限制：</div>
						<div class="wordP">同一个用户可以重复中奖，其中：活动期间实物奖品同一用户仅能中奖一次（若中奖者放弃奖品，则不再重新抽奖）；京豆奖品中奖次数不限。
*活动中奖率为：一等奖：约0.001%；二等奖：约0.002%；三等奖：约0.003%；四等奖：约0.004%；五等奖：约0.005%；六等奖：约0.006%；七等奖：约30%。</div>
						<div>8、订单信息可能稍有延迟，抽奖机会将会在用户完成任务后尽快发放。</div>
						<div>9、如发现用户在活动过程中存在不符合活动规则的行为或使用任何不正当的手段（包括但不限于软件作弊、通过系统漏洞、利用黑客工具等）通过违反诚实守信原则的手段参加活动，YSL圣罗兰京东自营官方旗舰店（以下简称“商家”）有权在不事先通知的前提下撤销违规交易、取消该用户参加活动的资格和已获得的相应权益，必要时将追究其法律责任。</div>
						<div>10、活动参与主体资格：</div>
						<div class="wordP">（1）每位自然人用户仅能使用一个京东账号参与活动，微信号、QQ、京东账号、手机号码等任一信息一致或指向同一用户的，均视为同一个用户，并视第一个参与本活动的账号参与结果有效，其余账号参与结果均视为无效；</div>
						<div class="wordP bottom-40">2）若发现同一位用户使用不同账号重复参与活动，商家有权取消其参与资格。</div>
					<div>【注意事项】</div>
					<div class="wordP">（1）活动过程中，凡以不正当手段（如作弊领取、恶意套取、刷信誉、虚假交易、扰乱系统、实施网络攻击等）参与本次活动的用户，商家有权终止其参与活动，并取消其参与资格（如优惠已发放，商家有权追回），如给商家造成损失，商家将保留向违规用户继续追索的权利；</div>
					<div class="wordP">（2）如遇不可抗力（包括但不限于重大灾害事件、活动受政府机关指令需要停止举办或调整、活动中存在大面积作弊行为、活动遭受严重网络攻击或因系统故障导致活动中奖名单大批量出错，活动不能正常进行等），商家有权取消、修改或暂停本活动；</div>
					<div class="wordP">（3）最终是否获得奖品以商家后台统计结果为准。</div>					
					</div>
					<div class="__rule_pops_scroll_line cc_abs"><div class="cc_abs" :style="{ top: `${ruleScrollTransform}%` }"></div></div>
				</div>
			</div>
			<div class="closeDiv" @click="closeClick()"></div>

		</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;
			
		},
		closeClick(){
			console.log('xxxxxxxxxxx')
			this.$emit('closePop')
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.textBlack{
	color: #000;
	font-weight:bolder ;
}
.bottom-10{
	margin-bottom: 0.1rem;
}
.rulePopDivAll {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items:center;
	justify-content:center;
	flex-direction: column;
	z-index: 1;
	.contentDivAll {
		position: relative;
		height: 8.56rem;
		width: 7.14rem;
		margin: 0 auto;
		position: relative;
		background-size: cover;
		padding: 1.27rem .4rem .4rem;
		box-sizing: border-box;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/192519/2/31418/15024/63ad0c81Fa926150c/1948b26eb0d1dfbd.png');
		.contetnDivAll1 {
			height:100%;
			border-radius: 0.5rem;
			// padding: 0.52rem 0.64rem 0.24rem 0.36rem;
			position: relative;
			.contentTextDiv {
				
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				width: 100%;
				height: 6.8rem;	
				overflow: auto;
				font-size: 0.24rem;
				text-align: left;
				color: #fff;
				
				.oneTitle {
					font-size: 0.24rem;
					color: #000000;
					font-weight: bold;
					line-height: 0.36rem;
					margin-top: 0.28rem;
					span {
						border-bottom: 0.02rem solid #CEA86A;
					}
				}
				.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: 4.6461rem;
			right: -0.1rem;
			top: 0.5rem;
		}
		.__rule_pops_scroll_line > div {
			width: 100%;
			height: 0.55rem;
			background-color:  #CEA86A;
			/* 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 {
		color: #fff;
		font-size: 0.5rem;
		position: absolute;
		bottom: -0.9rem;
		right: calc(50% - .73rem/2);
		height: 0.73rem;
		width: 0.73rem;
		text-align: center;
		vertical-align: middle;
		background-size: cover;
		background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/41501/1/21897/2017/63ad0c7fFf822d9fa/6c2b1524a54a00ef.png);
		
	}
	.wordP{
		text-indent: 0.4rem;
		margin-bottom: 0.14rem;
	}
	.bottom-40{
					margin-bottom: 0.4rem;
				}
}
</style>
