low-altitude-web/src/views/home/Home.vue

<template>
	<div class="home-wrapper">
		<div class="aside aside-left" :class="{ collapse: layoutStore.leftCollapse }">
			<!-- 左侧面板 -->
			<Transition name="emerge-left">
				<PanelSgzy v-if="layoutStore.leftPanelType === 'sgzy'" />
			</Transition>
			<Transition name="emerge-left">
				<PanelKypm v-if="layoutStore.leftPanelType === 'kypm'" />
			</Transition>
			<Transition name="emerge-left">
				<PanelSjwg v-if="layoutStore.leftPanelType === 'kytc'" />
			</Transition>
		</div>
		<!-- 工具栏 -->
		<ToolList />
		<!-- 空域分层 -->
		<Transition name="emerge-left">
			<FloatPanelFcky v-if="layoutStore.floatPanels.fcky" />
		</Transition>
	</div>
</template>

<script setup>
import { onMounted } from 'vue'
import ToolList from './cpns/ToolList.vue'
import useLayoutStore from '@/store/layout'
import PanelSgzy from './cpns/PanelSgzy.vue'
import PanelKypm from './cpns/PanelKypm.vue'
import PanelSjwg from './cpns/PanelSjwg.vue'
import FloatPanelFcky from '@/views/home/cpns/FloatPanelFcky.vue'

const layoutStore = useLayoutStore()

onMounted(() => {})
</script>

<style lang="scss" scoped>
.home-wrapper {
	transition:
		left 0.5s ease-out,
		right 0.5s ease-out;

	.aside {
		position: absolute;
		height: calc(100vh - var(--header-height) - var(--page-margin-y));
		width: var(--aside-width);
		padding: 15px 20px 20px;
		transition: all 0.5s ease;
		background: linear-gradient(to bottom, rgba(0, 0, 255, 0.1) 50%, rgba(0, 10, 30, 0.3) 100%);
		border-radius: 0px 0px 12px 12px;
		z-index: 3;
	}

	.aside-left {
		left: 0;

		&.collapse {
			left: calc(0px - var(--aside-width));
		}
	}

	.aside-right {
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		&.collapse {
			right: calc(0px - var(--aside-width));
		}
	}

	.b-fxdt {
		li {
			img {
				width: 250px;
				height: 110px;
				margin-left: -10px;
			}

			& > div {
				bottom: 5px;
				left: 100px;
				z-index: 9;

				& > span {
					display: block;
					font-size: 20px;
					text-shadow: 1px 2px 0px rgba(17, 20, 22, 0.22);
				}

				& > div {
					span:first-child {
						font-size: 30px;
						background: linear-gradient(80deg, rgba(29, 128, 224, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%);
						-webkit-background-clip: text !important;
						-webkit-text-fill-color: transparent;
						margin-right: 5px;
					}

					span:last-child {
						font-family: PingFang;
						font-size: 14px;
						text-shadow: 1px 2px 0px rgba(17, 20, 22, 0.22);
					}
				}
			}

			&:last-child > div {
				& > span {
					color: #e9ebcf;
				}

				& > div > span:first-child {
					background: linear-gradient(80deg, rgba(215, 215, 169, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%);
				}
			}
		}
	}

	.tag-text {
		display: block;
		height: 20px;
		min-width: 75px;
		width: fit-content;
		padding: 0 10px;
		border-radius: 10px;
		border: 1px solid #98cda4;
		font-weight: bold;
		font-size: 14px;
		line-height: 18px;
		color: #98cda4;
		text-align: center;

		&.red {
			color: #e34b4b;
			border-color: #e34b4b;
		}

		&.orange {
			color: #dfa9a9;
			border-color: #dfa9a9;
		}

		&.yellow {
			color: #ced09d;
			border-color: #ced09d;
		}
	}

	.tbody-row3 {
		max-height: 150px;
		overflow: hidden;
	}

	.b-wgzb {
		height: 200px;
		position: relative;

		#bg-wgzb {
			position: absolute;
			left: 0;
			top: -80px;
		}

		ul {
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			height: 100%;
			padding: 15px;

			li {
				width: 50%;
				height: fit-content;
				display: flex;
				flex-direction: column;

				& > span {
					display: block;
					width: 104px;
					height: 28px;
					margin-left: 20px;
					background: url('../../assets/images/page/bg-label.png');
					background-size: cover !important;
					line-height: 28px;
					font-size: 16px;
					text-align: center;
				}

				& > div {
					width: 163px;
					height: 45px;
					padding-left: 20px;
					display: flex;
					align-items: center;
					background: url('../../assets/images/page/bg-text-line.png');
					background-size: cover !important;

					& > span {
						font-size: 20px;
						margin-right: 13px;
					}

					& > div {
						width: 47px;
						height: 20px;
						background: linear-gradient(0deg, rgba(78, 113, 183, 0.7), rgba(158, 183, 234, 0.1));
						border-radius: 10px;
						border: 1px solid;
						// border-image: linear-gradient(0deg, #2C53A1, #97B1E4) 1 1;
						color: #97b4ed;
						font-size: 18px;
						line-height: 18px;
						text-align: center;

						& > span:last-child {
							font-size: 14px;
							margin-left: 1px;
						}
					}
				}

				&:nth-child(2n) {
					align-items: end;

					& > span {
						margin-right: 20px;
						background: url('../../assets/images/page/bg-label2.png');
					}

					& > div {
						padding-right: 20px;
						justify-content: end;
						background: url('../../assets/images/page/bg-text-line2.png');
					}
				}
			}
		}
	}
}
</style>