<template>
	<div class="character-page">
		<img src="./assets/images/background.png" alt="" class="bg" />
        <!-- 主要内容 -->
		<div class="main">
			<!-- 科技领袖 -->
			<tech-leader v-if="type == 1" />
			<!-- 国会议员 -->
			<member-of-congress v-if="type == 2" />
			<!-- 智库研究人员 -->
			<think-tank-person v-if="type == 3" />
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import TechLeader from './components/techLeader/index.vue';
import MemberOfCongress from './components/memberOfCongress/index.vue';
import ThinkTankPerson from './components/thinkTankPerson/index.vue';

// 获取路由参数，1为科技领袖，2为国会议员，3为智库研究人员
const route = useRoute();
const type = ref(route.query.type || 1);
</script>


<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
.character-page {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 100;
	overflow: auto;
	.bg {
		width: 100%;
		height: 459px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
	}
	.main {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
}
</style>
