<template>
	<div class="bg bg-1">
		<div class="topright"></div>
		<div class="bottomleft"></div>
	</div>
	<div class="bg bg-2">
		<div class="bottom-1"></div>
		<div class="bottom-2"></div>
		<div class="bottom-3"></div>
	</div>
	<div class="home">
		<left-nav />
		<div class="right-main">
			<top-nav />
			<div class="bottom-view"><router-view></router-view></div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed } from 'vue'
	import LeftNav from './left-nav.vue'
	import TopNav from './top-nav.vue'
	import { useGlobalStore } from '@/stores'
	const globalStore = useGlobalStore()
	const loading = computed(() => globalStore.state.loading)
</script>

<style lang="less" scoped>
	.home {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		user-select: none;
		> .right-main {
			flex: 1;
			display: flex;
			flex-direction: column;
			> .bottom-view {
				flex: 1;
				overflow: hidden;
				display: flex;
				> * {
					flex: 1;
				}
			}
		}
	}
	.bg-1 {
		z-index: -1;
		animation: opacity-in 0.5s ease-in-out 1 both;
	}
	.bg-2 {
		animation: z-index-10to-1 0.5s ease-in-out 1 both;
	}
	.bg {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: hidden;
		// background-color: rgba(248, 247, 245, 1);
		> * {
			position: absolute;
			border-radius: 50%;
		}
		> .topright {
			width: 174.7rem;
			height: 42.1rem;
			top: -15.7rem;
			right: -70rem;

			background: linear-gradient(
				86.85deg,
				rgba(244, 147, 116, 0.6) 13.62%,
				rgba(241, 193, 145, 0.6) 25.57%,
				rgba(255, 178, 91, 0.582) 41.03%,
				rgba(242, 173, 126, 0.6) 59.37%,
				rgba(255, 232, 200, 0.6) 75.27%
			);
			opacity: 0.2;
			filter: blur(20.7656rem);
			transform: rotate(178.95deg);
		}
		> .bottomleft {
			// border-radius: 0;
			// border: 1px solid #000;
			width: 62.418rem;
			height: 68.245rem;
			left: -30rem;
			bottom: 0;

			background: linear-gradient(
				161.16deg,
				rgba(132, 230, 255, 0.2) 14.98%,
				rgba(255, 223, 142, 0.2) 68.79%
			);
			filter: blur(8.263rem);
			transform: rotate(-25.36deg);
		}
		> .bottom-1 {
			animation: bottom-1 0.5s ease-in-out 1 both;
			background: linear-gradient(
				87.58deg,
				rgba(241, 193, 145, 0.8) 23.02%,
				rgba(255, 178, 91, 0.776) 35.36%,
				rgba(244, 147, 116, 0.8) 56.32%,
				rgba(242, 173, 126, 0.8) 67.34%,
				rgba(255, 232, 200, 0.8) 82.74%
			);
			filter: blur(13.17rem);
			transform: matrix(-1, 0.03, -0.05, -1, 0, 0);
		}
		> .bottom-2 {
			animation: bottom-2 0.5s ease-in-out 1 both;

			background: conic-gradient(
				from 94.36deg at 71.77% 41.01%,
				rgba(242, 171, 180, 0.2) 0deg,
				rgba(255, 105, 117, 0.2) 100.75deg,
				rgba(254, 59, 83, 0.2) 179.32deg,
				rgba(255, 105, 117, 0.2) 252deg,
				rgba(242, 171, 180, 0.2) 360deg
			);
			filter: blur(12.927rem);
			transform: matrix(-0.05, 1, -1, -0.03, 0, 0);
		}
		> .bottom-3 {
			animation: bottom-3 0.5s ease-in-out 1 both;
			background: linear-gradient(
				130.72deg,
				rgba(242, 171, 180, 0.24) 29.52%,
				rgba(234, 133, 200, 0.24) 39.73%,
				rgba(238, 64, 173, 0.24) 55.81%,
				rgba(234, 133, 158, 0.24) 69.59%,
				rgba(242, 171, 180, 0.24) 82.61%
			);
			filter: blur(11.5411rem);
			transform: matrix(-0.26, -0.97, 0.99, -0.15, 0, 0);
		}
		@keyframes bottom-1 {
			0% {
				width: 15rem;
				height: 15rem;
				left: 50%;
				bottom: 50%;
				transform: translate(0, 50%);
			}
			100% {
				width: 138.014rem;
				height: 29.323rem;
				left: 32.123rem;
				bottom: -21rem;
				transform: translate(0, 0);
			}
		}
		@keyframes bottom-2 {
			0% {
				width: 15rem;
				height: 15rem;
				left: 50%;
				bottom: 50%;
				transform: translate(0, 50%);
			}
			100% {
				width: 42.215rem;
				height: 98.009rem;
				left: 150rem;
				bottom: -65rem;
				transform: translate(0, 0);
			}
		}
		@keyframes bottom-3 {
			0% {
				width: 15rem;
				height: 15rem;
				left: 50%;
				bottom: 50%;
				transform: translate(0, 50%);
			}
			100% {
				width: 51.936rem;
				height: 97.139rem;
				left: 40rem;
				bottom: -65rem;
				transform: translate(0, 0);
			}
		}
	}
</style>
