<v-radio-group v-model="zoneValue">
	<v-radio value="DI Guild" color="#0075ff">
		<template #label>
			<div class="zone-cell flex-center">
				<div class="label">DI Guild</div>
				<div class="flex_bd">
					<div class="zone-progress-bar">
						<div class="zone-progress-value zone-progress-e08372" :style="{width: computeWidth(0) + '%' }" data-aos data-aos-duration="2000">
							<img src="../assets/images/BoxItem.png" class="sm-avatar">
						</div>
						<div class="zone-val">5,544,545</div>
					</div>
				</div>
			</div>
		</template>
	</v-radio>
	<v-radio value="MC Guild" color="#0075ff">
		<template #label>
			<div class="zone-cell flex-center">
				<div class="label">MC Guild</div>
				<div class="flex_bd">
					<div class="zone-progress-bar">
						<div class="zone-progress-value zone-progress-beaed3"
							:style="{width: computeWidth(1) + '%' }" data-aos data-aos-duration="2000">
							<img src="../assets/images/BoxItem.png" class="sm-avatar">
						</div>
						<div class="zone-val">5,544,545</div>
					</div>
				</div>
			</div>
		</template>
	</v-radio>
	<v-radio value="Media KOL1" color="#0075ff">
		<template #label>
			<div class="zone-cell flex-center">
				<div class="label">Media KOL1</div>
				<div class="flex_bd">
					<div class="zone-progress-bar">
						<div class="zone-progress-value zone-progress-db80b9"
							:style="{width: computeWidth(2) + '%' }" data-aos data-aos-duration="2000">
							<img src="../assets/images/BoxItem.png" class="sm-avatar">
						</div>
						<div class="zone-val">5,544,545</div>
					</div>
				</div>
			</div>
		</template>
	</v-radio>
	<v-radio value="input" color="#0075ff">
		<template #label>
			<div class="zone-input flex-center">
				<div class="flex_bd">
					<input
type="text" class="ui-input"
						placeholder="Enter a land Address for passport">
				</div>
				<v-btn color="btn-primary" rounded elevation="0">Submit</v-btn>
			</div>
		</template>
	</v-radio>
</v-radio-group>

computed: {
	computeWidth() {
		return function(index){
			let num = (this.progressList[index].value / 100) * 100
			return num.toFixed(2)
		}
	}
},
mounted() {
	// 在项目加载完成之后初始化wow
	this.$nextTick(() => {
		AOS.init({
		   offset: 10,   
		   duration: 600,   
		   easing: 'ease-in-sine',   
		   delay: 100
		})
	})
	window.addEventListener("scroll", this.handleScroll);
	
},
destroyed() {
	window.removeEventListener('scroll', this.handleScroll)
},
methods: {
	handleScroll() {
		var scrollNum = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
		if(scrollNum >800){
			this.progressList=[
				{
					value:70
				},{
					value:40
				},{
					value:35
				}
			]
		}else{
			this.progressList=[
				{
					value:0
				},{
					value:0
				},{
					value:0
				}
			]
		}
	}
}