<template>
	<div class="taskrulePopDivAll">
		<!-- <div class="titleDiv"></div> -->
		<div class="contentDivAll">
			<div class="contetnDivAll1">
				<div style="display: flex;">
					<div class="contentTextDiv" @scroll="scrollRuleEvent">
						<div style="text-align:left;margin-bottom: 0.2rem;" v-for="item in taskRecordInfo">
							<p style="font-size:0.26rem;">{{item.remark}}任务，获得{{item.score}}次抽盒机会。</p>
						</div>
					</div>
					<div v-if="taskRecordInfo.length>9" 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 {
	props:['taskRecordInfo'],
	data() {
		return {
			ruleScrollTransform: 0
		};
	},
	created() {},
	methods: {
		scrollRuleEvent(e) {
			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">
.taskrulePopDivAll {
	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: 7.09rem;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/203638/23/26833/65347/639ab1aeE2b495314/6a31f3447f16d89e.png');
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.contetnDivAll1 {
			    width: 5rem;
			height: 3.6rem;
			margin-top: 2.6rem;
			.contentTextDiv::-webkit-scrollbar{
				display: none;
			}
			.contentTextDiv {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				width: 5.94rem;
				height: 3.6rem;
				overflow: auto;
			}
		}
		.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>
