<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月9日0点-2022年12月25日24点</div>
						<div class="twoTitle">领奖截至时间:2022年12月25日24点</div>
						<div class="oneTitle"><span>如何参与活动</span></div>
						<div class="contentText">
							活动期间，进入K星活动界面，加入会员，即可参与科颜氏心愿袜DIY制作，写下圣诞心愿祝福分享给朋友，即可完成心愿袜DIY制作。每制作完成1张心愿袜祝福卡可获得1次抽奖机会，参与抽奖有机会获得：
						</div>
						<div class="twoTitle">一等奖:</div>
						<div class="contentText">科颜氏圣诞限定版高保湿面霜50ml*1，限量5份，中奖概率0.01%；</div>
						<div class="twoTitle">二等奖:</div>
						<div class="contentText">100京豆，限量1000份，中奖概率0.01%；</div>
						<div class="twoTitle">三等奖:</div>
						<div class="contentText">50京豆，限量5000份，中奖概率0.01%；</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="oneTitle"><span>如何DIY心愿袜</span></div>
						<div class="twoTitle1">
							打开心愿袜DIY制作界面，选择心仪的心愿袜样式
						</div>
						<div class="contentText">添加中意的配饰，3款袜子样式和6款配饰自由组合，其中袜子样式必选，每次仅可选择1款，配饰每次至多可选择3个搭配，配饰可在画框范围内放大缩小或移动。</div>
						<div class="twoTitle2">填写祝福语完成DIY制作后可获得抽奖机会，同时可分享给好友。</div>
						<div class="twoTitle3">每人默认可制作1次贺卡并抽奖</div>
						<div class="twoTitle4">可点击“我的心愿袜”查看已经制作完成的心愿袜祝福</div>
						<div class="oneTitle"><span>如何获得更多DIY心愿袜机会</span></div>
						<div class="contentText1">活动期间内，完成以下任务，可获得更多DIY心愿袜机会：</div>
						<div class="twoTitle1">
							关注店铺 游戏次数+1：活动期间首次成功关注店铺，可获得1次DIY机会（已关注过店铺的用户自动可获得1次机会），每个ID活动期间仅可完成1次，限获得1次DIY机会；
						</div>
						<div class="twoTitle2">观看直播 游戏次数+1：每日观看直播20s，可获得1次游戏机会，每个ID每日可完成1次；</div>
						<div class="twoTitle3">
							加购产品 游戏次数+1：每日加购指定产品满3件，可获得1次DIY机会（重复加购无效，同件产品活动期间仅可被同一ID加购1次），每个ID每日可完成1次；
						</div>
						<div class="twoTitle4">
							购买产品 游戏次数+5/单：活动期间，每成功支付一笔店铺任意正装产品订单（正装订单为购买除派样包以外的正装产品），DIY次数+5，每个ID活动期间仅有30笔订单可获得DIY次数，即总共购买产品至多可增加150次DIY机会。
						</div>
						
						<div class="oneTitle"><span>奖品领取方式</span></div>
						<!-- <div class="contentText">完成以下任务，可获得更多游戏机会：</div> -->
						<div class="twoTitle1">
							实物奖品中奖后点击【立即领取】后锁定奖品，中奖后需填写收货信息，请仔细填写，信息一经提交无法修改；所有领奖信息请于2022年12月25日24点前完成填写，逾期视为放弃领奖资格，奖品将于活动结束后60个工作日内发出（如遇疫情等不可抗因素，将相应延迟发放，届时请留意店铺相关公告）
						</div>
						
						<div class="twoTitle2">京豆中奖后系统将于中奖后30个工作日内自动发放至中奖ID的京东账户；</div>
						<div class="oneTitle"><span>注意事项</span></div>
						<div class="twoTitle1">
							如因中奖用户个人操作不当或超时领取（领奖时间截止到2022年12月25日24点）等原因导致领取奖品失败，将不进行补发且获奖资格不顺延（请中奖者务必保证个人信息填写准确，且相关信息均以中奖者提交至后台的信息为准）由于奖品为活动礼赠，外包装将会贴有非卖品、赠品等特殊字样，请知悉。
						</div>
						<div class="twoTitle2">所有奖品（除京豆外），我们将于发放前逐一核对领奖者信息。</div>
						<div class="twoTitle3">所有奖品不挂失，不可转让，不可兑换现金或指定其他权益，不支持开具发票。</div>
						<div class="twoTitle4">实物奖品一经发出，无质量问题恕不退换，如有疑问，请咨询店铺客服；</div>
						<div class="twoTitle5">
							同一ID/单一用户是指京东账户、收货人姓名、收货地址（包括下单时填写及最终的实际收货地址）、联系方式、IP地址等与用户身份密切相关信息，其中任意一项或数项存在相同、相似、雷同、通过特定标记形成批量信息、或其他非真实有效等情形的，均将被认定为同一ID/单一用户。如用户存在违反法律、法规或违反包括但不限于主办方及其他活动合作方平台规则的行为（包括但不限于作弊获得奖品、恶意套现等），店铺有权取消其中奖资格和其他相关权益，收回奖品或权益；
						</div>
						<div class="twoTitle6">活动主办方不对参与者网络及活动平台的稳定性及安全性负责，并不对因网络传输原因而导致参与者提交的信息错误或延误承担任何责任；</div>
						<div class="twoTitle7">更多活动详情及内容请咨询店铺客服；</div>
						<div class="twoTitle8">参与本次活动即被视为同意并遵守本次活动各项规则。</div>
						<div class="twoTitle9">
						如发现用户在活动过程中存在作弊、使用辅助程序、利用店铺或者平台技术漏洞等有碍其他用户公平参与本活动，或以不正当手段获取权益或违反本活动目的的行为的（前述行为包括但不限于：使用虚拟手机号注册账号；使用机器人软件、模拟器、插件、群控系统等非人工方式参与或干扰活动；与其他用户或非用户串通进行作弊、不当获取活动权益或扰乱活动秩序；同一用户注册、持有、控制多个账户参与活动），将视为严重违反本规则，店铺有权在不事先通知的前提下撤销违规交易、取消该用户参加活动的资格和已获得的相应权益，并保留追究法律责任的权利。
						</div>
					</div>
					<div class="__rule_pops_scroll_line cc_abs"><div class="cc_abs" :style="{ top: `${ruleScrollTransform}%` }"></div></div>
				</div>
				<div class="moreDiv"></div>
				<div class="logoImgDiv"></div>
			</div>
		</div>
		<div class="closeDiv"><img @click="closeClick()" src="//img10.360buyimg.com/imgzone/jfs/t1/192327/22/31425/7696/637b411eEab7f9238/617003dc49594628.png" /></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','10')
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.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;
	.titleDiv {
		width: 4.46rem;
		height: 1.13rem;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/109811/23/35085/27778/637d99f0Ee4e512a1/1b0efde497786764.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-bottom: -0.62rem;
		position: relative;
		z-index: 1;
	}
	.contentDivAll {
		position: relative;
		height: 7.71rem;
		width: 6.32rem;
		padding: 0.19rem;
		border-radius: 0.5rem;
		background-color: #f8d580;
		position: relative;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/157466/13/33216/118611/637b4366E585ed795/c9d12a98613dd9b8.png');
		.contetnDivAll1 {
			height: 7.28rem;
			background: #fee7b0;
			border-radius: 0.5rem;
			padding: 0.52rem 0.64rem 0.24rem 0.36rem;
			.contentTextDiv {
				
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				width: 5.94rem;
				height: 5.80rem;	
				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: 4.6461rem;
			right: 0.44rem;
			top: 0.86rem;
		}
		.__rule_pops_scroll_line > div {
			width: 100%;
			height: 0.55rem;
			background-color: #ff4d27;
			/* 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>
