FiDA_Front/src/views/home/index.vue

<template>
	<div class="bg bg-1" :class="{ animation: isAnimation }">
		<div class="topright"></div>
		<div class="bottomleft"></div>
	</div>
	<div class="bg bg-2" :class="{ animation: isAnimation }">
		<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>
	<setting />
	<flow-canvas ref="flowCanvasRef" />
	<depth-canvas ref="depthCanvasRef" />
</template>

<script setup lang="ts">
	import { computed, onMounted, onUnmounted, ref } from 'vue'
	import LeftNav from './left-nav.vue'
	import TopNav from './top-nav.vue'
	import setting from './setting/index.vue'
	import { useUserInfoStore, useGlobalStore } from '@/stores'
	import FlowCanvas from '@/components/Canvas/FlowCanvas/index.vue'
	import DepthCanvas from '@/components/Canvas/DepthCanvas/index.vue'
	import myEvent from '@/utils/myEvent'
	const userInfoStore = useUserInfoStore()
	const globalStore = useGlobalStore()
	userInfoStore.getUserInfo()
	const isAnimation = computed(() => globalStore.state.homeAnimation)

	const flowCanvasRef = ref(null)
	const openFlowCanvas = (config) => flowCanvasRef.value.open(config)
	myEvent.add('openFlowCanvas', openFlowCanvas)

	const depthCanvasRef = ref(null)
	const openDepthCanvas = (config) => depthCanvasRef.value.open(config)
	myEvent.add('openDepthCanvas', openDepthCanvas)

	onMounted(() => {
		setTimeout(() => {
			globalStore.setHomeAnimation(false)
		}, 1000)
	})
	onUnmounted(() => {
		myEvent.remove('openFlowCanvas', openFlowCanvas)
		myEvent.remove('openDepthCanvas', openDepthCanvas)
	})
</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;
		background: #f8f7f5;
		&.animation {
			animation: opacity-in 0.5s ease-in-out 1 both;
		}
	}
	.bg-2 {
		z-index: -1;
		&.animation {
			animation: z-index-10to-1 0.5s ease-in-out 1 both;
		}
	}
	.bg {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: hidden;
		> * {
			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 {
			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);

			width: 138.014rem;
			height: 29.323rem;
			left: 32.123rem;
			bottom: -21rem;
			transform: translate(0, 0);
		}
		> .bottom-2 {
			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);

			width: 42.215rem;
			height: 98.009rem;
			left: 150rem;
			bottom: -65rem;
			transform: translate(0, 0);
		}
		> .bottom-3 {
			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);

			width: 51.936rem;
			height: 97.139rem;
			left: 40rem;
			bottom: -65rem;
			transform: translate(0, 0);
		}
		&.animation {
			> .bottom-1 {
				animation: bottom-1 0.5s ease-in-out 1 both;
			}
			> .bottom-2 {
				animation: bottom-2 0.5s ease-in-out 1 both;
			}
			> .bottom-3 {
				animation: bottom-3 0.5s ease-in-out 1 both;
			}
		}

		@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>