<template>
	<div  id="normal-container">
		<IntegratedLayout>
			<div class="content">
				<div class="bread-menu">
					<span>AI Hub</span>
					<i class="el-icon-arrow-right"></i>
					<span class="crumbs gradient-color">{{$route.name}}</span>
				</div>
				<div class="top-text">
					<div class="title">
						{{$route.name}}
					</div>
					<div class="description">
						A comprehensive collection of cutting-edge AI tools, featuring detailed explanations of their
						functionalities, practical usage, and real-world application scenarios. Quickly grasp emerging
						product trends and learn how each tool can be leveraged for work, research, or creative projects.
					</div>
				</div>
				<nuxt-child />
			</div>
		</IntegratedLayout>
	</div>
</template>

<script>
	export default {
		data() {
			return {}
		},
		computed: {

		},
		created() {
			console.log(this.$route)
		},
		methods: {
			// 方法
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 100px;
		.bread-menu {
			font-size: $mid-font-size;
			margin: 24px 0 16px;
			font-family: 'Poppins-Medium';

			.crumbs {
				font-family: 'Poppins-SemiBold';
				font-weight: 600;
			}
		}

		.title {
			font-weight: bold;
			font-size: $huge-font-size1;
			font-family: 'Poppins-Bold';
		}

		.description {
			font-size: $big-font-size;
			color: $grey-color;
			font-family: 'Poppins-Medium';
		}
	}
</style>
