<template>
	<view class="content">
		<!-- 账户余额 -->
		<view class="total">
			<view class="item nowrap"><image src="@/static/icons/gemstone-icon.png"/>能量球 99</view>
			<view class="item nowrap"><image src="@/static/icons/crystal-icon.png"/>能量碎片 11</view>
		</view>
		<!-- 矿机 -->
		<view class="ore">
			<image class="ore-back" src="@/static/background/chain-back-00.png" mode="widthFix"></image>
			<view class="ball">
				<view class="shadow"></view>
			</view>
			<view class="ore-lists">
				<view class="oct-float ore-item" v-for="(item, index) in crystalArr" :key="index" @click="ledCrystal(index)">
					<block v-if="item.amount !== null">
						<image src="/static/imgs/crystal-ore-icon.png" mode="widthFix" class="icon" />
						<view class="text">能量碎片{{ item.amount || '-'}}</view>
					</block>
				</view>
				<navigator url="../index/index" open-type="switchTab" hover-class="none" class="oct-float ore-item-nav">
					<image src="/static/imgs/gemstone-ore-icon.png" mode="widthFix" class="icon" />
					<view class="text">购物<uni-icons type="arrowright" color="#FFFFFF" size="14"></uni-icons></view>
				</navigator>
			</view>
		</view>
		<!-- 任务分类 -->
		<scroll-view class="task-block" scroll-x="true">
		     <view class="item" v-for="(item, index) in categoryArr" :key="index" @click="JumpUrl(item.url, item.title)">
		     	<view class="text">{{ item.remark }}</view>
		     	<view class="icon">
		     		<image :src="item.cover" />
		     	</view>
		     	<view class="title">{{ item.title }}</view>
		     </view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				crystalArr  : [],
				categoryArr : [],
			};
		}
	}
</script>

<style scoped>
	/* 星球旋转 */
	.ball{
		position: absolute;
		height: 480rpx;
		width: 480rpx;
		top: 50%;
		left: 50%;
		margin-top: -240rpx;
		margin-left: -240rpx;
		border-radius: 50%;
		-webkit-transform-style: preserve-3d;
		background: url(/static/background/chain-back-02.png) repeat-x;
		background-size: auto 100%;
		-webkit-animation: move-map 30s infinite linear;
		-moz-animation: move-map 30s infinite linear;
		-o-animation: move-map 30s infinite linear;
		-ms-animation: move-map 30s infinite linear;
		animation: move-map 30s infinite linear;
		box-shadow: 0 0 50rpx 50rpx rgba(31,25,34, .2);
	}
	.shadow{
		position: absolute;
		top: 1%;
		left: 5%;
		width: 90%;
		height: 90%;
		border-radius: 50%;
		filter: blur(5px);
		z-index: 3;
		background: radial-gradient(circle at 50% 0, rgba(255,255,255, .6) , rgba(255, 255, 255, .0) 58%);
	}
	.ball:before,
	.ball::after{
		position: absolute;
		top: 0;
		left: 0;
		content: "";
		width: 100%;
		height: 100%;
		border-radius: 50%;
		filter: blur(5px);
		z-index: 2;
	}
	.ball:before {
		background: radial-gradient(circle at 100% 50%, #5881d3 , rgba(255, 255, 255, .0) 45%);
	}
	.ball::after {
		background: radial-gradient(circle at 0 50%, #ca66e0 , rgba(255, 255, 255, .0) 45%);
	}
	@-webkit-keyframes move-map {
		0% {background-position: -1250rpx 0; }
		100% {background-position: 0 0;}
	}
	@-ms-keyframes move-map {
		0% {background-position: -1250rpx 0; }
		100% {background-position: 0 0;}
	}
	
	@keyframes move-map {
		0% {background-position: -1250rpx 0; }
		100% {background-position: 0 0;}
	}
	
	/* 水晶漂浮动画 */
	.oct-float {
		animation: 4s octfloat infinite;
	}
	@keyframes octfloat {
		0% {
			margin-top: 0;
		}
	
		50% {
			margin-top: 15rpx;
		}
	
		100% {
			margin-top: 0;
		}
	}
</style>

<style lang="scss" scoped>
	.content{
		min-height: calc(100vh - 60px);
		background: #1f1922;
		overflow: hidden;
	}
	// 数据统计
	.total {
		position: relative;
		margin: $margin ($margin + $margin/2);
		background: #2b2449;
		padding: 0;
		display: flex;
		border-radius: $radius;
		.item {
			width: 50%;
			padding: 0 $padding;
			text-align: center;
			color: white;
			font-size: $title-size-sm;
			line-height: 76rpx;
			image{
				width: 38rpx;
				height: 38rpx;
				vertical-align: top;
				margin-top: calc((76rpx - 38rpx) / 2);
				margin-right: $margin / 2;
			}
		}
	
		&::before {
			position: absolute;
			top: 0;
			bottom: 0;
			content: "";
			width: 2rpx;
			left: 50%;
			background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .7), transparent);
		}
	}
	// 矿石
	.ore {
		position: relative;
		padding-top: 120%;
		&>image {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.ore-lists {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			.oct-float-item{
				position: absolute;
				text-align: center;
				.text {
					margin-top: $margin / 2;
					color: white;
					font-size: $title-size-sm;
					line-height: 40rpx;
					text-shadow: 0 3rpx 3rpx rgba($color: #000000, $alpha: .2);
				}
				.icon {
					width: 58rpx;
					vertical-align: top;
				}
			}
			.ore-item-nav{
				@extend .oct-float-item;
				right: $margin * 3;
				top: 12%;
			}
			.ore-item {
				@extend .oct-float-item;
				&:nth-child(1) { top: 16%; left: 13%; }
				&:nth-child(2) { top: 50%; right: 10%; }
				&:nth-child(3) { top: 23%; right: 20%; }
				&:nth-child(4) { top: 70%; left: 33%;}
				&:nth-child(5) { top: 40%; left: 20%; }
				&:nth-child(6) { top: 58%; left: 10%;}
				&:nth-child(7) { top: 10%; right: 43%;}
				&:nth-child(8) { top: 46%; right: 29%;}
			}
		}
	}
	// 任务
	.task-block {
		white-space: nowrap;
		.item {
			background: rgba($color: $mian-color, $alpha: .2);
			display: inline-block;
			margin-left: $margin;
			width: 210rpx;
			padding: $padding * 2 $padding;
			border-radius: $radius;
			box-sizing: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .06);
			text-align: center;
			&:first-child {
				margin-left: $margin + $margin/2;
			}
			&:last-child {
				margin-right: $margin + $margin/2;
			}
			.icon {
				display: inline-block;
				margin: $margin 0;
				width: 98rpx;
				height: 98rpx;
				line-height: 98rpx;
				background: $mian-color-deep;
				border-radius: 50%;
				text-align: center;
				image {
					width: 56rpx;
					height: 56rpx;
					vertical-align: middle;
				}
			}
			.text {
				font-size: $title-size-m;
				color: $mian-color;
			}
			.title {
				font-size: $title-size;
				color: white;
				font-weight: bold;
			}
		}
	}
</style>
