home主页和AiTools页

pages/AIHub/index.vue

@@ -0,0 +1,72 @@
+<template>
+	<div  id="normal-container">
+		<IntegratedLayout>
+			<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>
+			<div class="input">
+				<div class="input-container">
+					<input type="text" placeholder="Please enter the key words">
+					<i class="el-icon-search gradient-color search-icon pointer"></i>
+				</div>
+			</div>
+			<nuxt-child />
+		</IntegratedLayout>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {}
+		},
+		computed: {
+
+		},
+		created() {
+			console.log(this.$route)
+		},
+		methods: {
+			// 方法
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.bread-menu {
+		font-size: $mid-font-size;
+		margin: 100px 0;
+	}
+
+	.title {
+		font-weight: bold;
+		font-size: $huge-font-size1;
+	}
+
+	.description {
+		font-size: $big-font-size;
+		color: $grey-color;
+	}
+
+	.input {
+		display: flex;
+		justify-content: flex-end;
+		.input-container {
+			margin-top: 100px;
+			margin-bottom:60px;
+
+		}
+	}
+</style>