<template>
	<div class="info-wrapper">
		<div class="header-item">国家科技安全</div>
		<div class="header-item">></div>
		<div class="header-item back-item" @click="handleBackHome">中美博弈概览</div>
		<div class="header-item">></div>
		<div class="header-item">{{ curTitleName }}</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import router from "@/router";

const props = defineProps({
	curTitleName: {
		type: String,
		required: true
	}
});

// 返回首页
const handleBackHome = () => {
	router.push({
		path: "/overview"
	});
};
</script>

<style lang="scss" scoped>
.info-wrapper {
	height: 64px;
	line-height: 64px;
	display: flex;
	justify-content: flex-end;
	font-family: Microsoft YaHei;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	.header-item {
		margin: 0 3px;
	}
	.back-item {
		cursor: pointer;
		&:hover {
			color: #ccc;
		}
	}
}
</style>