<template>
	<div class="rulePopDivAll">
		<div class="contentDivAll">
			<div class="contetnDivAll1">
				<div style="display: flex;">
					<div class="contentTextDiv" @scroll="scrollRuleEvent">
						<div  class="textBlack">活动时间：</div>
						<div class="bottom-10">2022年12月26日18:00到2023年1月15日23:59</div>
						<div  class="textBlack">活动规则：</div>
                        <div>1.活动仅限兰蔻京东自营官方旗舰店会员参与，需要成功加入会员后才能参与抽奖。</div>
						<div  class="bottom-10">2. 每个用户每天进入游戏可获得1次免费抽奖机会，每天游戏参与次数上限1次。抽奖机会不累计不顺延，若当天没有参与游戏，24点机会清零。</div>
						<div  class="textBlack">奖品说明：</div>
						<div>奖品明细：</div>
						<div>①6666会员积分</div>
						<div>②666会员积分</div>
						<div>③66会员积分</div>
						<div>奖品补充说明：</div>
						<div>①6666会员积分：活动期间每天1-2个中奖名额，随机抽取。中奖概率约为0.5%，每人最多获得1次。</div>
					    <div>②666会员积分：每人最多获得1次，中奖概率约为9.5%。</div>
						<div>③66会员积分：在没有抽中6666积分和666积分的情况下，将会抽中66积分。中奖概率约为90%。</div>
						<div  class="bottom-40">④中奖积分将在中奖后1个工作日内到账，有效期为到账之日起的一年内，积分过期不补发，敬请留意！若出现系统压力过大等问题，积分可能延期到账，请提前知悉！</div>
						<div class="textBlack">补充说明：</div>
					    <div>活动参与者理解并同意，活动参与者本人在参加本活动前已完整阅读了本活动规则；对活动规则已完全理解并全部同意。活动参与者保证，在活动过程中，将完全遵照活动规则的规定参与活动；凡在本次活动中涉嫌使用不正当手段者，主办方有权单方取消其参与本次活动，并无需承担任何责任。
如发现用户在活动过程中存在不符合活动规则的行为或使用任何不正当的手段（包括但不限于软件作弊、通过系统漏洞、利用黑客工具等）通过违反诚实守信原则的手段参加活动，兰蔻品牌方有权在不事先通知的前提下撤销违规交易、取消该用户参加活动的资格和已获得的相应权益，必要时将追究其法律责任。</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;
		right: 0;
		height: 7.26rem;
		width: 6.22rem;
		position: relative;
		background-size: cover;
		padding:1.31rem .6rem .6rem .56rem;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/110811/13/32891/37348/63a122adE77b2192d/4b9035b5284dc46a.png');
		.contetnDivAll1 {
			height:5.38rem;
			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: 5.3rem;	
				overflow: auto;
				font-size: 0.24rem;
				text-align: left;
				color: #000000;
				.bottom-40{
					margin-bottom: 0.4rem;
				}
				.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;
					}
				}
			}
			.contentTextDiv::-webkit-scrollbar { display: none }
		}
		.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: #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 {
		color: #fff;
		font-size: 0.5rem;
		position: absolute;
		top: -0.8rem;
		right: 0;
		height: 0.55rem;
		width: 0.55rem;
		line-height: 0.55rem;
		border-radius: 50%;
		border:.01rem solid #fff;
		text-align: center;
		vertical-align: middle;
		
	}
}
</style>
