<template>
	<div class="content">
		<!-- 头部 -->
		<div :class="{'header':true,'scroll white':isScrollTop,'white':true}">
			<div class="back" @click="$router.go(-1)"><img src="../../../assets/images/home/expert/back.png" alt=""></div>
			<div class="header-title">XXX测评</div>
		</div>
		<div class="question pull-content list-section">
			<div class="question-item">
				<div class="number"><span>12</span><em>/</em>80</div>
				<h3>我最喜欢按兴致做事</h3>
				<div class="question-btns">
					<span @click="setQuestionEV()">完全相符合</span>
					<span @click="setQuestionEV()">比较相符合</span>
					<span @click="setQuestionEV()">不太好分辨</span>
					<span @click="setQuestionEV()">比较不符合</span>
					<span @click="setQuestionEV()">完全不符合</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "evaluation-question",
		data() {
			return {
				isScrollTop: false,
			}
		},
		created() {
			this.isScroll = true;
			window.addEventListener("scroll", this.eventScrollTop);
		},
		mounted() {
			
		},
		computed: {
			
		},
		methods: {
			// 滚动改变样式
			eventScrollTop() {
				let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
				if (scrollTop >= 5) {
					if (this.isScroll) {
						this.isScroll = false;
						this.isScrollTop = true;
					}
				} else {
					if (!this.isScroll) {
						this.isScroll = true;
						this.isScrollTop = false;
					}
				}
			}
		},
		destroyed() {
			window.removeEventListener("scroll", this.eventScrollTop);
		},
		//keep-alive进入时触发
		activated() {
			this.isScroll = true;
			window.addEventListener("scroll", this.eventScrollTop)
		},
		//keep-alive离开时触发
		deactivated() {
			window.removeEventListener("scroll", this.eventScrollTop);
		}
	}
</script>

<style scoped>
	
</style>