<!--科技要闻-->
<template>
	<div class="content-wrapper">
		<div class="main-nav">
			<div
				v-for="item in navList"
				:key="item.name"
				class="nav-item"
				:class="{ active: activeNav === item.name }"
				@click="handleNavClick(item.name)"
			>
				<div class="item-content">
					<img v-if="activeNav === item.name" :src="right" class="active-icon" alt="" />
					<span>{{ item.name }}</span>
				</div>
				<img v-if="activeNav === item.name" :src="background" class="active-bg" alt="" />
			</div>
		</div>
		<!-- 切换不同的组件 -->
		<AllGovernment v-if="activeNav === '全政府'" />
		<AddDomain v-if="activeNav === '全领域'" />
		<AllUnion v-if="activeNav === '全联盟'" />
		<AllElement v-if="activeNav === '全要素'" />
	</div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import right from "./assets/right-white.png";
import background from "./assets/background.png";

// 组件引入
import AllGovernment from "./components/allGovernment/index.vue";
import AddDomain from "./components/addDomain/index.vue";
import AllUnion from "./components/allUnion/index.vue";
import AllElement from "./components/allElement/index.vue";

const navList = ref([{ name: "全政府" }, { name: "全领域" }, { name: "全联盟" }, { name: "全要素" }]);

const activeNav = ref("全政府");

const handleNavClick = name => {
	activeNav.value = name;
};
</script>

<style lang="scss" scoped>
.content-wrapper {
	width: 1601px;
	height: auto;
	margin: 0 auto;
	.main-nav {
		width: 1600px;
		height: 55px;
		// margin: 0 auto;
		padding: 4px 5px;
		display: flex;
		align-items: center;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.65);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		box-sizing: border-box;
		gap: 8px;
		margin-bottom: 16px;
		.nav-item {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			position: relative;
			// transition: all 0.3s;

			.item-content {
				display: flex;
				align-items: center;
				z-index: 1;

				.active-icon {
					width: 18px;
					height: 18px;
					margin-right: 8px;
				}

				span {
					font-family: "YouSheBiaoTiHei";
					font-size: 24px;
					font-weight: 400;
					line-height: 31px;
					color: rgb(59, 65, 75);
				}
			}

			.active-bg {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 400px;
				height: 60px;
				z-index: 0;
			}

			&.active {
				background-color: rgba(5, 95, 194, 1);
				border: 1px solid rgba(174, 214, 255, 1);
				border-radius: 10px;

				span {
					// color: rgb(5, 95, 194);
					color: #fff;
				}
			}
		}
	}
}
</style>
