<template>
	<div class="others-header">
		<router-link to="/">
			<span>{{ $t('MainHeader.Home') }}</span>
			<span class="iconfont icon-arrow-right-bold"></span>
		</router-link>
		<h1 class="title">{{ title }}</h1>
	</div>
</template>
<script setup lang="ts">
	import { computed, ref } from 'vue'
	const props = defineProps({
		title: { type: String, required: true }
	})
</script>

<style scoped lang="less">
	.others-header {
		padding: 50px 0;
		background-color: #666;
		display: flex;
		flex-direction: column;
		align-items: center;
		> a {
			font-size: 14px;
			font-weight: 400;
			color: #ffffff;
			text-decoration: none;
			> .iconfont {
				font-size: 10px;
				margin-left: 5px;
			}
		}
		> .title {
			font-size: 40px;
			font-weight: 400;
			line-height: 2;
			text-transform: none;
			color: #ffffff;
		}
		@media (max-width: 800px) {
			padding: 25px 0;
		}
	}
</style>
