home主页和AiTools页

2025-10-10 10:41:39 +08:00
parent c37c97e97e
commit 672a2f4c90
219 changed files with 20979 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,2 @@
+NUXT_ENV_BASE_API = https://prod.jysd.tech    #设置开发环境的api的基础路径
+# NUXT_ENV_PUBLIC_PATH = /                      #设置资源路径前缀
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,2 @@
+NUXT_ENV_BASE_API = https://prod.jysd.tech   #设置生产环境的api的基础路径
+# NUXT_ENV_PUBLIC_PATH = ./                      #设置资源路径前缀
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,90 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
--- a/README.md
+++ b/README.md
@ -0,0 +1,119 @@
+# vue2-ssr-template
+
+
+
+### 常用正则表达式
+
+#### 表单验证
+
+```
+/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/   // 邮箱
+/^1[3-9]\d{9}$/                                  // 中国大陆手机号
+const ID_REGEX = {
+  mainland: /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/, // 大陆身份证
+  hongkong: /^[A-Z]{1,2}\d{6}\([0-9A]\)$/, // 香港身份证
+  macau: /^[157]\/\d{6}\(\d\)$/, // 澳门身份证
+  taiwan: /^[A-Z][0-9]{9}$/ // 台湾身份证
+};
+/^[a-zA-Z0-9]{6,20}$/                 // 6-20位数字或字母
+/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/ // 6-20位字母+数字组合
+```
+
+
+
+#### 数字相关
+
+```
+/^\d+$/                // 纯数字（整数）
+/^-?\d+$/               // 整数（含负数）
+/^\d+(\.\d+)?$/         // 正数（整数 + 小数）
+/^-?\d+(\.\d+)?$/       // 数字（整数 + 小数 + 负数）
+```
+
+
+
+#### 字母 & 字符串
+
+```
+/^[a-zA-Z]+$/           // 纯英文
+/^[A-Z]+$/              // 全大写
+/^[a-z]+$/              // 全小写
+/^[a-zA-Z0-9]+$/        // 英文 + 数字
+/^[\u4e00-\u9fa5]+$/    // 纯中文
+```
+
+
+
+#### 其它
+
+```
+/^\s+|\s+$/g                            // 去除首尾空格（配合 .replace 使用）
+/[\u4e00-\u9fa5]/                       // 匹配中文字符
+/^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)){3}$/  // IPv4
+```
+
+
+
+### 常用工具函数 
+
+#### 数字 & 字符串
+
+```
+export const clamp = (n, min, max) => Math.min(max, Math.max(min, n));  //将数值限制在 [min, max] 区间内
+export const pad = (n, len = 2) => String(n).padStart(len, '0');      //左侧补0
+export const capitalize = (s) => (isStr(s) && s ? s.charAt(0).toUpperCase() + s.slice(1) : '');  //单词首字母大写
+```
+
+
+
+#### 时间格式化
+
+```
+/**
+ * 按模板格式化日期（YYYY-MM-DD HH:mm:ss）
+ * @param {Date|number|string} [date=new Date()]
+ * @param {string} [fmt='YYYY-MM-DD HH:mm:ss']
+ * @returns {string}
+ */
+export const formatDate = (date = new Date(), fmt = 'YYYY-MM-DD HH:mm:ss') => {
+  const d = date instanceof Date ? date : new Date(date);
+  const rep = {
+    YYYY: d.getFullYear(),
+    MM: pad(d.getMonth() + 1),
+    DD: pad(d.getDate()),
+    HH: pad(d.getHours()),
+    mm: pad(d.getMinutes()),
+    ss: pad(d.getSeconds()),
+  };
+  return fmt.replace(/YYYY|MM|DD|HH|mm|ss/g, (k) => String(rep[k]));
+};
+```
+
+
+
+#### 复制文本到剪贴板
+
+```
+/**
+ * 复制文本到剪贴板（非安全上下文降级方案）
+ * @param {string} text
+ * @returns {Promise<void>|void}
+ */
+export const copyText = (text) => {
+  if (typeof navigator !== 'undefined' && navigator.clipboard && window.isSecureContext) {
+    return navigator.clipboard.writeText(text);
+  }
+  const ta = document.createElement('textarea');
+  ta.value = text;
+  ta.style.position = 'fixed';
+  ta.style.opacity = '0';
+  document.body.appendChild(ta);
+  ta.select();
+  document.execCommand('copy');
+  ta.remove();
+};
+```
+
+
+
+#### 
--- a/api/about.js
+++ b/api/about.js
@ -0,0 +1,3 @@
+export default ($axios) => ({
+    
+})
--- a/api/home.js
+++ b/api/home.js
@ -0,0 +1,5 @@
+export default ($axios) => ({
+    // getGameList(params) {
+    //     return $axios.get('/x/game', { params })
+    // },
+})
--- a/api/user.js
+++ b/api/user.js
@ -0,0 +1,3 @@
+export default ($axios) => ({
+
+})
--- a/components/Footer.vue
+++ b/components/Footer.vue
@ -0,0 +1,117 @@
+<template>
+	<div id="footer-container">
+		<IntegratedLayout>
+			<div class="container">
+				<div class="left-container">
+					<img src="/logo/logo-rect.png" />
+					<span>AIProdLaunch</span>
+				</div>
+				<div class="right-container">
+					<div>
+						<img src="/logo/bottom-logo.png" />
+					</div>
+					<div class="navigation-bottom">
+						<span v-for="item in first">
+							{{item.name}}
+						</span>
+					</div>
+					<div class="navigation-bottom">
+						<span v-for="item in two" @click="goto(item.path)">
+							{{item.name}}
+						</span>
+					</div>
+					<div class="bottom-span">
+						All rights reserved ©2025 AIToolsFinder.
+					</div>
+				</div>
+			</div>
+
+		</IntegratedLayout>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "Footer",
+		data() {
+			return {
+				first: [{
+						name: 'Home'
+					},
+					{
+						name: 'AI Daily News'
+					},
+					{
+						name: 'AI Hub'
+					},
+					{
+						name: 'Learn'
+					},
+					{
+						name: 'About Us'
+					}
+				],
+				two: [{
+						name: 'Privacy Policy',
+						path: '/privacy'
+					},
+					{
+						name: 'Terms Of Service',
+						path: '/service'
+					},
+				]
+			}
+		},
+		methods: {
+			goto(path) {
+				this.$router.push(path)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	#footer-container {
+		width: 100%;
+		height: $footerBarHeight;
+
+		.container {
+			height: $footerBarHeight;
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+		}
+	}
+
+	.left-container {
+		@include flex-center;
+		flex-direction: column;
+
+		span {
+			font-size: $larg-font-size;
+			color: $main-color;
+			font-weight: bold;
+		}
+	}
+
+	.right-container {
+		text-align: right;
+	}
+
+	.bottom-span {
+		color: $grey-color;
+	}
+
+	.navigation-bottom {
+		span {
+			display: inline-block;
+			padding: 14px;
+		}
+
+		span:last-child {
+			padding-right: 0;
+		}
+	}
+</style>
--- a/components/Header.vue
+++ b/components/Header.vue
@ -0,0 +1,164 @@
+<template>
+	<div id="header-container">
+		<IntegratedLayout>
+			<div class="navigation-container">
+				<div class="logo">
+					<img src="/logo/white-logo.png" />
+					<span>AIProdLaunch</span>
+				</div>
+				<div class="flex">
+					<div class="navigation-item pointer" v-for="item in navRoutes" :key="item.path"
+						@click="handleParentClick(item)" @mouseenter="showSubmenu(item)" @mouseleave="hideSubmenu">
+						<span
+							:class="{ 'selected-navigation': $route.matched.some(record => record.path === item.path) }">{{
+								item.meta.navigationName }}
+								<i class="el-icon-arrow-down" v-if="item.meta.children"></i>
+						</span>
+						<div v-if="activeMenu === item.path && item.meta.children" class="submenu">
+							<div v-for="sub in item.children" :key="sub.path" @click.stop="goto(sub.path)"
+								class="submenu-item pointer">
+								<img :src="`/logo/${sub.meta.icon}.png`" />
+								{{ sub.name }}
+							</div>
+						</div>
+					</div>
+				</div>
+
+			</div>
+		</IntegratedLayout>
+
+	</div>
+</template>
+
+<script>
+import {
+	routes
+} from '../router';
+
+export default {
+	name: "Header",
+
+	computed: {
+		/**
+		 * 得到routes的meta里非hidden的路由
+		 */
+		navRoutes() {
+			const r = routes.filter(e => {
+				if (e.meta) {
+					return !e.meta.hidden
+				}
+				return false
+			})
+			return r
+		},
+
+		/**
+		 * 得到当前的路由path
+		 */
+		currentRoutePath() {
+			return this.$route.path
+		}
+	},
+	data() {
+		return {
+			activeMenu: null
+		}
+	},
+	methods: {
+		handleParentClick(item) {
+			// 只有没有子菜单时才跳转
+			if (!item.children || item.children.length === 0) {
+				this.goto(item.path);
+			}
+		},
+		/**
+		 * 编程式导航
+		 * @param {String} path 导航的路径
+		 */
+		goto(path) {
+			console.log(path)
+			this.$router.push(path)
+		},
+		showSubmenu(item) {
+			if (item.children) {
+				this.activeMenu = item.path;
+			}
+		},
+		hideSubmenu() {
+			this.activeMenu = null;
+		},
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+#header-container {
+	width: 100%;
+	height: $navigationBarHeight;
+	background: $header-backgroungd;
+
+
+	.navigation-container {
+		height: $navigationBarHeight;
+		display: flex;
+		font-weight: 500;
+		align-items: center;
+		justify-content: space-between;
+
+		.logo {
+			@include flex-center;
+			color: $white;
+
+			span {
+				font-size: $normal-font-size;
+			}
+		}
+
+		.navigation-item {
+			margin-left: 20px;
+			padding: 10px;
+			position: relative;
+
+			span {
+				color: $grey;
+
+				&:hover {
+					color: $white;
+				}
+
+				&.selected-navigation {
+					color: $white;
+				}
+			}
+
+			.submenu {
+				z-index: 10;
+				position: absolute;
+				top: 100%;
+				left: 50%;
+				padding: 20px 10px;
+				transform: translateX(-50%);
+				background: $white;
+				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+				border-radius: 6px;
+
+				&-item {
+					white-space: nowrap; // 防止文字换行
+					padding: 10px;
+					color: #000000;
+					@include display-flex;
+
+					img {
+						margin-right: 10px;
+					}
+
+					&:hover {
+						background: #F5F6F9;
+						color: $main-color;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
--- a/components/IntegratedLayout.vue
+++ b/components/IntegratedLayout.vue
@ -0,0 +1,33 @@
+<template>
+	<div id="sub-container">
+		<el-row>
+			<el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="4">
+				<div>&nbsp;</div>
+			</el-col>
+			<el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
+				<!-- <div class="container-content"> -->
+					<slot></slot>
+				<!-- </div> -->
+			</el-col>
+			<el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="4">
+				<div>&nbsp;</div>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+	export default {
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	#sub-container {
+		.container-content {
+			height: 100%;
+		}
+
+		// overflow: auto;
+	}
+</style>
--- a/components/Pagination.vue
+++ b/components/Pagination.vue
@ -0,0 +1,105 @@
+<template>
+	<div class="pagination">
+		<!-- 上一页按钮 -->
+		<button class="pagination-btn" :disabled="currentPage === 1" @click="gotoPage(currentPage - 1)">
+			<i class="el-icon-arrow-left"></i> </button>
+
+		<!-- 页面范围 -->
+		<span v-for="pageNum in visiblePages" :key="pageNum"
+			:class="['pagination-number', { active: currentPage === pageNum }]" @click="gotoPage(pageNum)">
+			{{ pageNum }}
+		</span>
+
+		<!-- 下一页按钮 -->
+		<button class="pagination-btn" :disabled="currentPage === totalPages" @click="gotoPage(currentPage + 1)">
+			<i class="el-icon-arrow-right"></i>
+		</button>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			currentPage: {
+				type: Number,
+				required: true,
+				default: 1,
+			},
+			totalPages: {
+				type: Number,
+				required: true,
+				default: 1,
+			},
+		},
+		methods: {
+			// 跳转到指定页
+			gotoPage(pageNum) {
+				if (pageNum >= 1 && pageNum <= this.totalPages) {
+					this.$emit("page-change", pageNum);
+				}
+			},
+		},
+		computed: {
+			// 计算显示的页码范围
+			visiblePages() {
+				const range = 5; // 显示的页码数量
+				const half = Math.floor(range / 2);
+				let start = this.currentPage - half;
+				let end = this.currentPage + half;
+
+				// 调整范围，防止超出总页数
+				if (start < 1) {
+					start = 1;
+					end = Math.min(range, this.totalPages);
+				}
+				if (end > this.totalPages) {
+					end = this.totalPages;
+					start = Math.max(this.totalPages - range + 1, 1);
+				}
+
+				return Array.from({
+					length: end - start + 1
+				}, (_, i) => start + i);
+			},
+		},
+	};
+</script>
+
+<style scoped lang="scss">
+	.pagination {
+		position: relative;
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		gap: 8px;
+		margin: 20px;
+	}
+
+	.pagination-btn,
+	.pagination-number {
+		width: 32px;
+		height: 32px;
+		border: 1px solid #E2E8F0;
+		border-radius: 6px;
+		background-color: $white;
+		color: $main-font-color;
+		cursor: pointer;
+	}
+
+	.pagination-number {
+		@include flex-center;
+	}
+
+	.pagination-btn:disabled {
+		opacity: 0.5;
+		color: #E2E8F0;
+		cursor: not-allowed;
+	}
+
+
+	.pagination-number.active {
+		border-color: $main-color;
+		color: $main-color;
+		font-weight: bold;
+	}
+</style>
--- a/layouts/default.vue
+++ b/layouts/default.vue
@ -0,0 +1,46 @@
+<template>
+	<!-- 上下布局 -->
+	<div id="default-layout">
+		<Header></Header>
+		<div id="home-container">
+			<Nuxt />
+		</div>
+		<Footer></Footer>
+
+		<el-backtop target="#default-layout" :visibility-height="500" class="custom-backtop">
+			<div class="backtop-content">
+				<img src="/logo/back-top.png" />
+			</div>
+		</el-backtop>
+	</div>
+</template>
+
+<script>
+	export default {
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	#default-layout {
+		position: relative;
+		@include flex-column;
+		overflow: auto;
+	}
+
+	.custom-backtop {
+		position: fixed;
+		right: 15% !important;
+		bottom: 30% !important;
+		z-index: 999;
+		transition: transform 0.3s;
+
+	}
+
+	#home-container {
+		width: 100%;
+		// min-height: 100vh;
+
+		background-color: $background-color;
+	}
+</style>
--- a/layouts/login.vue
+++ b/layouts/login.vue
@ -0,0 +1,18 @@
+<template>
+    <div id="login-layout">
+        <Nuxt></Nuxt>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Login'
+}
+</script>
+
+<style lang="scss" scoped>
+#login-layout {
+    width: 100%;
+    height: 100%;
+}
+</style>
--- a/middleware/auth.js
+++ b/middleware/auth.js
@ -0,0 +1,9 @@
+//登录鉴权
+
+export default function ({ store, redirect }) {
+    // const token = 'example'
+
+    // if (!token) {
+    //     return redirect('/login')
+    // }
+}
--- a/nuxt.config.js
+++ b/nuxt.config.js
@ -0,0 +1,112 @@
+export default {
+    /**
+     *
+        ssr: true + target: 'server' → SSR
+        ssr: true + target: 'static' → 静态生成（SSG）
+        ssr: false → SPA 模式
+     */
+    ssr: true,
+    target: 'server',
+
+    // publicPath: process.env.NUXT_ENV_PUBLIC_PATH || '/',         //服务器资源路径是否有前缀
+
+    loading: false,   //是否在路由切换或者asyncData/Fetch异步请求期间出现进度条 ，可自定义，详情见：https://v2.nuxt.com/docs/features/loading#loading
+
+    // Global page headers: https://go.nuxtjs.dev/config-head
+    //全局配置项，设置一些基础不会变动的东西
+    head: {
+        title: 'AIProdLaunch',   //设置标签页名字
+        htmlAttrs: {
+            lang: 'zh-CN'   //设置语言为中文  英文：en
+        },
+        meta: [
+            { charset: 'utf-8' },   //字符集
+            { name: 'viewport', content: 'width=device-width, initial-scale=1' },   //完美视口
+            { hid: 'description', name: 'description', content: '网站的默认描述' },  //设置描述
+            { hid: 'keywords', name: 'keywords', content: 'default' },    //设置关键词
+            { name: 'format-detection', content: 'telephone=no' },
+            { property: 'og:type', content: 'website' },  // 分享在平台时告诉平台这是网站类型的页面
+            { property: 'og:site_name', content: '我的网站' },   //分享在平台时告诉平台这个页面属于哪个网站
+            { property: 'og:image', content: 'https://www.example.com/logo.png' } //定义网页在分享时的描述信息
+        ],
+        link: [
+            { rel: 'icon', type: 'image/x-icon', href: '/logo.png' }
+        ]
+    },
+
+// 设置页面级或者layouts的head，供参考
+//     head() {
+//     return {
+//       title: '关于我们',
+//       meta: [
+//         { hid: 'description', name: 'description', content: '默认描述' },
+//         { hid: 'keywords', name: 'keywords', content: 'example' },
+//         { property: 'og:title', content: '关于我们 - 我的网站' }, //定义网页在分享时的标题
+//         { property: 'og:description', content: '这是关于我们的详细信息' }  //定义网页在分享时的描述信息
+//       ]
+//     }
+//   }
+
+    // Global CSS: https://go.nuxtjs.dev/config-css
+    css: [
+        'normalize.css/normalize.css',  // 引入
+        '@/styles/index.scss',   //引入全局样式
+		'@/styles/text.scss'
+    ],
+
+    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+    plugins: [
+        '@/plugins/router.js',  //给路由进行全局路由配置
+        '@/plugins/axios.js',   //设置请求和拦截响应器
+        '@/plugins/api.js',      //将api注入到全局
+		'@/plugins/element.js',
+		'@/plugins/global-function.js',
+    ],
+
+    // Auto import components: https://go.nuxtjs.dev/config-components
+    components: true,
+
+    // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
+    buildModules: [
+        '@nuxtjs/style-resources'    //导入样式引入模块
+    ],
+
+    styleResources: {
+        scss: [
+            '@/styles/variables.scss',  //全局变量 、全局混入 、全局函数等放这里全局引入
+            '@/styles/mixins.scss'
+        ]
+    },
+
+    // Modules: https://go.nuxtjs.dev/config-modules
+    modules: [
+        '@nuxtjs/router',   //导入路由模块，不使用默认的路由，使用自己写的路由，路由写在router.js里面
+        'cookie-universal-nuxt',   //导入cookie模块，能够得到$cookie
+        '@nuxtjs/axios',   //导入nuxtjs/axios模块，能够得到$axios
+        ['@nuxtjs/dotenv', { filename: `.env.${process.env.NODE_ENV}` }],   //导入模块，能够使之读取环境变量
+    ],
+
+    routerModule: {
+        keepDefaultRouter: false   //true:保留默认路由，和默认路由合并   false：不保留默认路由，完全使用router.js里面的路由
+    },
+
+    // Build Configuration: https://go.nuxtjs.dev/config-build
+    build: {
+    },
+
+    axios: {
+        baseURL: process.env.NUXT_ENV_BASE_API || 'https://api.example.com', // API 根地址
+        credentials: true,        // 是否跨域请求时携带 cookie
+        timeout: 30000,           // 请求超时时间（ms）
+        // proxy:true,          //开启代理
+    },
+
+    //代理
+    // proxy: {
+    //     '/api': {                             // 需要转发代理的请求前缀
+    //         target: 'http://localhost:3000',  // 代理的目标地址
+    //         pathRewrite: { '^/api/': '' },    // 重写路径：去掉 /api 前缀
+    //         changeOrigin: true                // 是否改变请求源
+    //     },
+    // }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,30 @@
+{
+	"name": "template",
+	"version": "1.0.0",
+	"private": true,
+	"scripts": {
+		"dev": "nuxt",
+		"build": "nuxt build",
+		"start": "nuxt start",
+		"generate": "nuxt generate"
+	},
+	"dependencies": {
+		"@nuxtjs/axios": "^5.13.6",
+		"@nuxtjs/dotenv": "^1.4.2",
+		"@nuxtjs/proxy": "^2.1.0",
+		"@nuxtjs/router": "^1.7.0",
+		"@nuxtjs/style-resources": "^1.2.2",
+		"cookie-universal-nuxt": "^2.2.2",
+		"core-js": "^3.25.3",
+		"normalize.css": "^8.0.1",
+		"nuxt": "^2.15.8",
+		"vue": "^2.7.10",
+		"element-ui": "^2.15.14",
+		"vue-server-renderer": "^2.7.10",
+		"vue-template-compiler": "^2.7.10"
+	},
+	"devDependencies": {
+		"sass": "^1.90.0",
+		"sass-loader": "^10.5.2"
+	}
+}
--- a/pages/AIHub/AITools.vue
+++ b/pages/AIHub/AITools.vue
@ -0,0 +1,125 @@
+<template>
+	<div class="tools-container">
+		<div class="card" v-for="item in 6">
+			<div class="left">
+				<img src="" />
+			</div>
+			<div class="right">
+				<div>
+					<div class="title-text">
+						AI Diagnostic Tool Analyzes 10M+ Medical Images with 99.5% Accuracy
+					</div>
+					<div class="content-text">
+						Revolutionary AI system detects diseases from X-rays, MRIs, and CT scans using a database of 10
+						million annotated images, supporting early diagnosis in 150 countries.
+					</div>
+				</div>
+
+				<div class="bottom-info">
+					<div class="first">
+						<div>
+							<img src="/logo/logo_xs.png" />
+							<span>AI toolkit</span>
+						</div>
+
+						<div class="praise">
+							<img src="/logo/praise.png" />
+							<span>{{praise_count}}</span>
+						</div>
+					</div>
+
+					<div class="time">
+						<img src="/logo/clock.png" />
+						<span>2025-07-12</span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div>
+			<Pagination :current-page="currentPage" :total-pages="totalPages" @page-change="handlePageChange" />
+			
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				praise_count: 12,
+				currentPage: 1,
+				totalPages: 10, // 假设总页数为 10
+			}
+		},
+		methods: {
+			handlePageChange(pageNumber) {
+				this.currentPage = pageNumber;
+				
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.card {
+		background: $white;
+		box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
+		border-radius: 12px;
+		padding: 40px 30px;
+		display: flex;
+		margin-bottom: 30px;
+		gap: 30px;
+	}
+
+	.left {
+		img {
+			width: 440px;
+			height: 220px;
+			border-radius: 6px;
+		}
+
+	}
+
+	.bottom-info,
+	.right {
+		display: flex;
+		justify-content: space-between;
+
+	}
+
+	.right {
+		flex-direction: column;
+
+		.title-text {
+			margin-bottom: 14px;
+			font-weight: 600;
+			font-size: $normal-font-size;
+			color: #3A4A65;
+		}
+
+		.content-text {
+			font-weight: 400;
+			font-size: $mid-font-size;
+			color: $grey-color;
+		}
+	}
+
+	.bottom-info {
+		color: #C8CFD7;
+		font-size: 15px;
+
+		.first {
+			width: 30%;
+			display: flex;
+			justify-content: space-between
+		}
+
+		img {
+			margin-right: 8px
+		}
+
+		div {
+			@include display-flex;
+		}
+	}
+</style>
--- a/pages/AIHub/Frameworks.vue
+++ b/pages/AIHub/Frameworks.vue
@ -0,0 +1,22 @@
+<template>
+    <div>
+        <!-- 组件内容 -->
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            // 数据项
+        }
+    },
+    methods: {
+        // 方法
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/pages/AIHub/index.vue
+++ b/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>
--- a/pages/About/About.vue
+++ b/pages/About/About.vue
@ -0,0 +1,146 @@
+<template>
+	<div class="text-container">
+		<div class="top">
+			<div class="title">
+				About AIToolsFinder
+			</div>
+			<div class="date">
+				Last updated April 4, 2024
+			</div>
+		</div>
+
+		<div>
+			How do we process your information? We process your information to provide, improve, and administer our
+			Services, communicate with you for security and fraud prevention, and comply with the law. We may also
+			process your information for other purposes with your consent. We process your information only when we have
+			a valid legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.How do we
+			process your information? We process your information to provide, improve, and administer our Services,
+			communicate with you for security and fraud prevention, and comply with the law. We may also process your
+			information for other purposes with your consent. We process your information only when we have a valid
+			legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.How do we
+			process your information? We process your information to provide, improve, and administer our Services,
+			communicate with you for security and fraud prevention, and comply with the law. We may also process your
+			information for other purposes with your consent. We process your information only when we have a valid
+			legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.
+			How do we process your information? We process your information to provide, improve, and administer our
+			Services, communicate with you for security and fraud prevention, and comply with the law. We may also
+			process your information for other purposes with your consent. We process your information only when we have
+			a valid legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.How do we
+			process your information? We process your information to provide, improve, and administer our Services,
+			communicate with you for security and fraud prevention, and comply with the law. We may also process your
+			information for other purposes with your consent. We process your information only when we have a valid
+			legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.How do we
+			process your information? We process your information to provide, improve, and administer our Services,
+			communicate with you for security and fraud prevention, and comply with the law. We may also process your
+			information for other purposes with your consent. We process your information only when we have a valid
+			legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				// 数据项
+			}
+		},
+		methods: {
+			// 方法
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/pages/About/Privacy.vue
+++ b/pages/About/Privacy.vue
@ -0,0 +1,146 @@
+<template>
+	<div class="text-container">
+		<div class="top">
+			<div class="title">
+				Privacy Policy
+			</div>
+			<div class="date">
+				Last updated April 4, 2024
+			</div>
+		</div>
+
+		<div>
+			How do we process your information? We process your information to provide, improve, and administer our
+			Services, communicate with you for security and fraud prevention, and comply with the law. We may also
+			process your information for other purposes with your consent. We process your information only when we have
+			a valid legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.How do we
+			process your information? We process your information to provide, improve, and administer our Services,
+			communicate with you for security and fraud prevention, and comply with the law. We may also process your
+			information for other purposes with your consent. We process your information only when we have a valid
+			legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.How do we
+			process your information? We process your information to provide, improve, and administer our Services,
+			communicate with you for security and fraud prevention, and comply with the law. We may also process your
+			information for other purposes with your consent. We process your information only when we have a valid
+			legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.
+			How do we process your information? We process your information to provide, improve, and administer our
+			Services, communicate with you for security and fraud prevention, and comply with the law. We may also
+			process your information for other purposes with your consent. We process your information only when we have
+			a valid legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.How do we
+			process your information? We process your information to provide, improve, and administer our Services,
+			communicate with you for security and fraud prevention, and comply with the law. We may also process your
+			information for other purposes with your consent. We process your information only when we have a valid
+			legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.How do we
+			process your information? We process your information to provide, improve, and administer our Services,
+			communicate with you for security and fraud prevention, and comply with the law. We may also process your
+			information for other purposes with your consent. We process your information only when we have a valid
+			legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				// 数据项
+			}
+		},
+		methods: {
+			// 方法
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/pages/About/Service.vue
+++ b/pages/About/Service.vue
@ -0,0 +1,146 @@
+<template>
+	<div class="text-container">
+		<div class="top">
+			<div class="title">
+				Terms Of Service
+			</div>
+			<div class="date">
+				Last updated April 4, 2024
+			</div>
+		</div>
+
+		<div>
+			How do we process your information? We process your information to provide, improve, and administer our
+			Services, communicate with you for security and fraud prevention, and comply with the law. We may also
+			process your information for other purposes with your consent. We process your information only when we have
+			a valid legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.How do we
+			process your information? We process your information to provide, improve, and administer our Services,
+			communicate with you for security and fraud prevention, and comply with the law. We may also process your
+			information for other purposes with your consent. We process your information only when we have a valid
+			legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.How do we
+			process your information? We process your information to provide, improve, and administer our Services,
+			communicate with you for security and fraud prevention, and comply with the law. We may also process your
+			information for other purposes with your consent. We process your information only when we have a valid
+			legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.
+			How do we process your information? We process your information to provide, improve, and administer our
+			Services, communicate with you for security and fraud prevention, and comply with the law. We may also
+			process your information for other purposes with your consent. We process your information only when we have
+			a valid legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.How do we
+			process your information? We process your information to provide, improve, and administer our Services,
+			communicate with you for security and fraud prevention, and comply with the law. We may also process your
+			information for other purposes with your consent. We process your information only when we have a valid
+			legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.How do we
+			process your information? We process your information to provide, improve, and administer our Services,
+			communicate with you for security and fraud prevention, and comply with the law. We may also process your
+			information for other purposes with your consent. We process your information only when we have a valid
+			legal reason to do so. Learn more about how we process your information.How do we process your
+			information? We process your information to provide, improve, and administer our Services, communicate with
+			you for security and fraud prevention, and comply with the law. We may also process your information for
+			other purposes with your consent. We process your information only when we have a valid legal reason to do
+			so. Learn more about how we process your information.How do we process your information? We process your
+			information to provide, improve, and administer our Services, communicate with you for security and fraud
+			prevention, and comply with the law. We may also process your information for other purposes with your
+			consent. We process your information only when we have a valid legal reason to do so. Learn more about how
+			we process your information.How do we process your information? We process your information to provide,
+			improve, and administer our Services, communicate with you for security and fraud prevention, and comply
+			with the law. We may also process your information for other purposes with your consent. We process your
+			information only when we have a valid legal reason to do so. Learn more about how we process your
+			information.How do we process your information? We process your information to provide, improve, and
+			administer our Services, communicate with you for security and fraud prevention, and comply with the law. We
+			may also process your information for other purposes with your consent. We process your information only
+			when we have a valid legal reason to do so. Learn more about how we process your information.
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				// 数据项
+			}
+		},
+		methods: {
+			// 方法
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/pages/About/index.vue
+++ b/pages/About/index.vue
@ -0,0 +1,17 @@
+<template>
+	<div id="normal-container">
+		<IntegratedLayout>
+			<nuxt-child />
+		</IntegratedLayout>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'About',
+	}
+</script>
+
+<style lang="scss" scoped>
+	
+</style>
--- a/pages/Home/ToolList.vue
+++ b/pages/Home/ToolList.vue
@ -0,0 +1,71 @@
+<template>
+	<div class="list">
+		<div v-for="item in list" class="tools" @click="checkTool(item)">
+			<span class="tool-card" :class="item.active?'checkedBg':''">
+				<span class="content">
+					<img :src="`/logo/${item.img}_${item.active ? 'checkd' : 'un'}.png`" />
+					<span>{{ item.name }}</span>
+				</span>
+
+			</span>
+
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: ['list'],
+		data() {
+			return {
+				ischeck: 'check',
+			}
+		},
+		created() {
+			this.list.forEach(item => {
+				this.$set(item, 'active', false)
+			})
+		},
+		methods: {
+			checkTool(item) {
+				this.list.forEach(i => this.$set(i, 'active', false)) // 重置其他项
+				this.$set(item, 'active', true)
+				 this.$emit('tool-selected', item.name) // 发送工具名称
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.list {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr); // 4列布局
+		gap: 20px; // 网格间距
+
+		.tools {
+			max-width: 300px;
+		}
+
+		.tool-card {
+			background: #FFFFFF;
+			box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
+			border-radius: 12px;
+			padding: 10px 16px;
+			display: inline-block;
+
+			.content {
+				@include display-flex;
+
+				img {
+					margin-right: 5px;
+				}
+			}
+
+		}
+
+		.tools .checkedBg {
+			color: $white;
+			background: linear-gradient(90deg, $linear-gradient-start 22%, $linear-gradient-end 73%);
+		}
+	}
+</style>
--- a/pages/Home/Toolbar.vue
+++ b/pages/Home/Toolbar.vue
@ -0,0 +1,153 @@
+<template>
+	<div :id="id">
+		<div class="bar-list">
+			<div class="top-box">
+				<div>
+					<img :src="`/logo/${tool.img}_check.png`" />
+					<span class="title-text .gradient-color">
+						{{tool.name}}
+					</span>
+				</div>
+				<div class="more pointer" v-if="!tagList.length">
+					View more<i class="el-icon-arrow-right"></i>
+				</div>
+			</div>
+			<div v-if="tagList.length">
+				<div class="tags" ref="tagsContainer" @mousedown="startDrag" @mousemove="onDrag" @mouseup="stopDrag"
+					@mouseleave="stopDrag">
+					<div class="tag-item" v-for="(item,index) in 10">
+						AI Image & illustration Generation
+					</div>
+				</div>
+				<div class="line"></div>
+			</div>
+			<div>
+				<div class="more pointer" v-if="tagList.length">
+					View more<i class="el-icon-arrow-right"></i>
+				</div>
+				<div class="item-card">
+					<div class="card-caontainer" v-for="(item,index) in 8">
+						<div class="title">
+							<img src="/logo/collect.png" />
+							<span>
+								Skywork
+							</span>
+						</div>
+						<div class="content">
+							Latest ToolsLatest ToolsLatest ToolsLatest Tools
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: ['tool','id'],
+		data() {
+			return {
+				isDragging: false,
+				startX: 0,
+				scrollLeft: 0,
+				tagList: [],
+			}
+		},
+		methods: {
+			startDrag(e) {
+				this.isDragging = true;
+				this.startX = e.pageX - this.$refs.tagsContainer.offsetLeft;
+				this.scrollLeft = this.$refs.tagsContainer.scrollLeft;
+			},
+			onDrag(e) {
+				if (!this.isDragging) return;
+				e.preventDefault();
+				const x = e.pageX - this.$refs.tagsContainer.offsetLeft;
+				const walk = (x - this.startX) * 2; // 调整滑动速度
+				this.$refs.tagsContainer.scrollLeft = this.scrollLeft - walk;
+			},
+			stopDrag() {
+				this.isDragging = false;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.bar-list {
+		margin: 50px 0;
+	}
+
+	.top-box {
+		@include display-flex;
+		justify-content: space-between;
+
+		.title-text {
+		
+			font-weight: 600;
+			font-size: $larg-font-size;
+		}
+	}
+
+	.tags {
+		display: flex;
+		overflow-x: auto;
+		gap: 12px;
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+		// cursor: grab;
+		user-select: none;
+
+	}
+
+	.tag-item {
+		flex-shrink: 0;
+		padding: 10px;
+		@include gradient-border($linear-gradient-start, $linear-gradient-end);
+		// cursor: grab;
+		/* 显示抓取手势 */
+
+		&:active {
+			// cursor: grabbing;
+			/* 抓取中状态 */
+		}
+	}
+
+	.more {
+		text-align: right;
+		color: $grey-color;
+		font-size: $mid-font-size;
+	}
+
+	.item-card {
+		display: grid;
+		gap: 20px;
+		grid-template-columns: repeat(4, 1fr);
+		margin-top: 30px;
+	}
+
+	.card-caontainer {
+		background: #FFFFFF;
+		box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
+		border-radius: 8px;
+		padding: 16px;
+		border: 1px solid #E2E8F0;
+
+		.title {
+			display: flex;
+			align-items: center;
+
+			span {
+				color: $main-font-color;
+				font-size: $big-font-size;
+				font-weight: 600;
+			}
+		}
+
+		.content {
+			color: $grey-color;
+			// line-height: 30px;
+		}
+	}
+</style>
--- a/pages/Home/index.vue
+++ b/pages/Home/index.vue
@ -0,0 +1,305 @@
+<template>
+	<div id="home-page">
+		<IntegratedLayout>
+			<div class="top-title">
+				<div class="first-text gradient-color">
+					AIToolsFinder
+				</div>
+				<div class="second-text">
+					Get global AI tools in one stop
+				</div>
+				<div class="third-text">
+					It includes over a <span class="special">thousand global AI tools</span>, covering writing, images,
+					videos, audio, programming,
+					music, design, chatting, etc., and recommends learning platforms, frameworks and models
+				</div>
+				<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>
+
+			<div class="card flex">
+				<div class="left-card card-box">
+					<el-carousel indicator-position="outside">
+						<el-carousel-item v-for="item in 4" :key="item">
+						</el-carousel-item>
+					</el-carousel>
+
+				</div>
+				<div class="right-card card-box">
+					<div class="clearfix">
+						<img src="/logo/hot.png" />
+						Popular Tools
+					</div>
+					<div class="line">
+
+					</div>
+					<div class="pop-item">
+						<div v-for="item in pop_tools" class="box">
+							<div class="img-box">
+								<img src="/logo/bottom-logo.png" />
+							</div>
+							<div>
+								{{ item.name }}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="tool-list">
+				<ToolList :list="list" @tool-selected="scrollToTool"></ToolList>
+			</div>
+			<div class="line">
+			</div>
+			<div class="toolbar" v-for="tool in list">
+				<Toolbar :tool="tool" :id="`tool-${tool.name}`"></Toolbar>
+			</div>
+
+		</IntegratedLayout>
+		<!-- <el-backtop target=".scroll-container" :bottom="100">
+			<div>
+				<img src="/logo/back-top.png" />
+			</div>
+		</el-backtop> -->
+	</div>
+</template>
+
+<script>
+	import ToolList from './ToolList.vue'
+	import Toolbar from './Toolbar.vue'
+	export default {
+		name: 'Home',
+		components: {
+			ToolList,
+			Toolbar
+		},
+		data() {
+			return {
+				pop_tools: [{
+						name: 'Gemini',
+						src: ''
+					},
+					{
+						name: 'Gemini',
+						src: ''
+					},
+					{
+						name: 'Gemini',
+						src: ''
+					},
+					{
+						name: 'Gemini',
+						src: ''
+					},
+					{
+						name: 'Gemini',
+						src: ''
+					},
+					{
+						name: 'Gemini',
+						src: ''
+					},
+				],
+				list: [{
+						name: 'AI Image Tool',
+						img: 'image'
+					},
+					{
+						name: 'AI Office Tools',
+						img: 'office'
+					},
+					{
+						name: 'AI Video Tool',
+						img: 'Video'
+					},
+					{
+						name: 'AI Programming Tools',
+						img: 'program'
+					},
+					{
+						name: 'AI Chat Assistant',
+						img: 'chat'
+					},
+					{
+						name: 'AI Writing Tool',
+						img: 'write'
+					},
+					{
+						name: 'AI learning Website',
+						img: 'learn'
+					},
+					{
+						name: 'AI Design Tool',
+						img: 'design'
+					},
+					{
+						name: 'AI Search Engine',
+						img: 'search'
+					},
+					{
+						name: 'AI Development Platform',
+						img: 'develop'
+					},
+					{
+						name: 'AI Audio Tool',
+						img: 'audio'
+					},
+					{
+						name: 'AI Model Evaluation',
+						img: 'model'
+					},
+					{
+						name: 'AI Prompt Command',
+						img: 'prompt'
+					},
+					{
+						name: 'AI Content Detection',
+						img: 'content'
+					},
+					{
+						name: 'AI Agent',
+						img: 'agent'
+					},
+					{
+						name: 'Model Training',
+						img: 'train'
+					}
+				]
+			}
+		},
+		methods: {
+			scrollToTool(toolName) {
+				const target = document.getElementById(`tool-${toolName}`)
+				if (target) {
+					target.scrollIntoView({
+						behavior: 'smooth',
+						block: 'start'
+					})
+				}
+			}
+		}
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	#home-page {
+		flex: 1;
+		overflow-y: auto; // 必须启用滚动
+		position: relative; // 添加相对定位
+		background-repeat: no-repeat;
+		background-size: contain; // 控制图片自适应
+		background-position: top center;
+		background-image: url('/logo/mask.png');
+	}
+
+
+
+	.top-title {
+		@include flex-center;
+		flex-direction: column;
+		font-weight: bold;
+		height: 400px;
+		margin-top: 180px;
+
+		div {
+			text-align: center;
+		}
+
+
+		.first-text {
+			line-height: 90px;
+			font-size: $huge-font-size2;
+		}
+
+		.second-text {
+			margin: 18px 0;
+			font-size: $huge-font-size3;
+		}
+
+		.third-text {
+			width: 716px;
+			height: 81px;
+			font-weight: 500;
+			color: $grey-color;
+			font-size: $normal-font-size;
+
+			.special {
+				color: $main-color;
+			}
+		}
+	}
+
+	
+
+	.card {
+		display: grid;
+		grid-template-columns: 2fr 1fr; // 4列布局
+		gap: 20px; // 网格间距
+		margin: 0 auto;
+		height: 366px;
+
+		.card-box {
+			background: $white;
+			box-shadow: 0px 18px 33px 0px rgba(0, 0, 0, 0.05);
+			border-radius: 12px;
+			border: 1px solid #FFFFFF;
+		}
+
+		.left-card {
+			// min-width: 805px;
+		}
+
+		.right-card {
+			padding: 20px;
+			// min-width: 372px;
+		}
+
+		.clearfix {
+			display: flex;
+			align-items: center;
+			margin-bottom: 20px;
+			font-size: $larg-font-size;
+		}
+
+		.img-box {
+			width: 50px;
+			height: 50px;
+			margin: 15px 0;
+			background: #FFFFFF;
+			border-radius: 12px;
+			border: 1px solid #E2E8F0;
+			@include flex-center;
+
+			&:hover {
+				transform: scale(1.15);
+				cursor: pointer;
+				@include gradient-border($linear-gradient-start, $linear-gradient-end);
+
+			}
+		}
+
+		.pop-item {
+			display: grid;
+			grid-auto-rows: 1fr;
+			grid-template-columns: repeat(3, 1fr);
+			gap: 10px; // 新增间距控制
+
+			.box {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+			}
+		}
+
+	}
+
+	.tool-list {
+		margin: 40px 0;
+	}
+
+	.input-container {
+		margin: 60px auto;
+	}
+</style>
--- a/pages/Login/index.vue
+++ b/pages/Login/index.vue
@ -0,0 +1,18 @@
+<template>
+    <div id="login-container">
+        登录
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Login',
+    layout:"login"
+}
+</script>
+
+<style lang="scss" scoped>
+#login-container{
+    
+}
+</style>
--- a/pages/User/index.vue
+++ b/pages/User/index.vue
@ -0,0 +1,17 @@
+<template>
+    <div id="user-container">
+        用户
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'User',
+}
+</script>
+
+<style lang="scss" scoped>
+#user-container{
+    flex: 1;
+}
+</style>
--- a/plugins/api.js
+++ b/plugins/api.js
@ -0,0 +1,26 @@
+import homeApi from '~/api/home'
+import aboutApi from '~/api/about'
+import userApi from '~/api/user'
+
+/**
+ * 将api注入到全局
+ * 
+ * 在页面或组件里使用
+ *  async mounted() {
+        const games = await this.$api.game.getGameList({ page: 1 })
+    }
+
+    async asyncData({ app }) {
+        const games = await app.$api.game.getGameList({ page: 1 })
+    },
+
+ */
+export default ({ $axios }, inject) => {
+    const api = {
+        home: homeApi($axios),
+        about: aboutApi($axios),
+        user: userApi($axios),
+    }
+
+    inject('api', api) // 将api注入到全局
+}
--- a/plugins/axios.js
+++ b/plugins/axios.js
@ -0,0 +1,26 @@
+//设置请求和拦截响应器
+
+export default function({
+  $axios,
+  app
+}) {
+  // 请求拦截器
+  $axios.onRequest(config => {
+
+    // 如果用 token，从 cookie 拿
+    const token = app.$cookies.get('token')
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}` //鉴权方式，这里使用的bearer
+    }
+    return config
+  }, error => Promise.reject(error))
+
+  // 响应拦截器
+  $axios.onResponse(response => {
+    if(response.code!=0){
+      return response
+    }
+    return response.data // 直接返回 data，调用时不用再写 res.data
+  }, error => Promise.reject(error))
+
+}
--- a/plugins/element.js
+++ b/plugins/element.js
@ -0,0 +1,146 @@
+import Vue from 'vue';
+import 'element-ui/lib/theme-chalk/index.css'
+import {
+  Pagination,
+  Dialog,
+  Autocomplete,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Menu,
+  Submenu,
+  MenuItem,
+  MenuItemGroup,
+  Input,
+  InputNumber,
+  Radio,
+  RadioGroup,
+  RadioButton,
+  Checkbox,
+  CheckboxButton,
+  CheckboxGroup,
+  Switch,
+  Select,
+  Option,
+  OptionGroup,
+  Button,
+  ButtonGroup,
+  Table,
+  TableColumn,
+  DatePicker,
+  TimeSelect,
+  TimePicker,
+  Popover,
+  Tooltip,
+  Breadcrumb,
+  BreadcrumbItem,
+  Form,
+  FormItem,
+  Tabs,
+  TabPane,
+  Tag,
+  Tree,
+  Alert,
+  Slider,
+  Icon,
+  Row,
+  Col,
+  Upload,
+  Progress,
+  Badge,
+  Card,
+  Rate,
+  Steps,
+  Step,
+  Carousel,
+  CarouselItem,
+  Collapse,
+  CollapseItem,
+  Cascader,
+  ColorPicker,
+  Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
+  Loading,
+  MessageBox,
+  Message,
+  Notification,
+  Backtop
+} from 'element-ui';
+
+Vue.use(Backtop);
+Vue.use(Pagination);
+Vue.use(Dialog);
+Vue.use(Autocomplete);
+Vue.use(Dropdown);
+Vue.use(DropdownMenu);
+Vue.use(DropdownItem);
+Vue.use(Menu);
+Vue.use(Submenu);
+Vue.use(MenuItem);
+Vue.use(MenuItemGroup);
+Vue.use(Input);
+Vue.use(InputNumber);
+Vue.use(Radio);
+Vue.use(RadioGroup);
+Vue.use(RadioButton);
+Vue.use(Checkbox);
+Vue.use(CheckboxButton);
+Vue.use(CheckboxGroup);
+Vue.use(Switch);
+Vue.use(Select);
+Vue.use(Option);
+Vue.use(OptionGroup);
+Vue.use(Button);
+Vue.use(ButtonGroup);
+Vue.use(Table);
+Vue.use(TableColumn);
+Vue.use(DatePicker);
+Vue.use(TimeSelect);
+Vue.use(TimePicker);
+Vue.use(Popover);
+Vue.use(Tooltip);
+Vue.use(Breadcrumb);
+Vue.use(BreadcrumbItem);
+Vue.use(Form);
+Vue.use(FormItem);
+Vue.use(Tabs);
+Vue.use(TabPane);
+Vue.use(Tag);
+Vue.use(Tree);
+Vue.use(Alert);
+Vue.use(Slider);
+Vue.use(Icon);
+Vue.use(Row);
+Vue.use(Col);
+Vue.use(Upload);
+Vue.use(Progress);
+Vue.use(Badge);
+Vue.use(Card);
+Vue.use(Rate);
+Vue.use(Steps);
+Vue.use(Step);
+Vue.use(Carousel);
+Vue.use(CarouselItem);
+Vue.use(Collapse);
+Vue.use(CollapseItem);
+Vue.use(Cascader);
+Vue.use(ColorPicker);
+Vue.use(Container);
+Vue.use(Header);
+Vue.use(Aside);
+Vue.use(Main);
+Vue.use(Footer);
+
+Vue.use(Loading.directive);
+
+Vue.prototype.$loading = Loading.service;
+Vue.prototype.$msgbox = MessageBox;
+Vue.prototype.$alert = MessageBox.alert;
+Vue.prototype.$confirm = MessageBox.confirm;
+Vue.prototype.$prompt = MessageBox.prompt;
+Vue.prototype.$notify = Notification;
+Vue.prototype.$message = Message;
--- a/plugins/global-function.js
+++ b/plugins/global-function.js
@ -0,0 +1,5 @@
+import Vue from 'vue'
+export default ({ app }, inject) => {
+  const eventBus = new Vue()
+  inject('bus', eventBus)
+}
--- a/plugins/router.js
+++ b/plugins/router.js
@ -0,0 +1,13 @@
+// 设置全局前置守卫和后置守卫
+
+export default ({ app, store }) => {
+    //全局前置守卫
+    // app.router.beforeEach((to, from, next) => {
+
+    // })
+
+    //全局后置守卫
+    // app.router.afterEach((to, from) => {
+
+    // })
+}
--- a/router.js
+++ b/router.js
@ -0,0 +1,163 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+// 引入页面组件
+import Home from '@/pages/Home/index.vue'
+import AboutIndex from '@/pages/About/index.vue'
+import User from '@/pages/User/index.vue'
+import Login from '@/pages/Login/index.vue'
+import Privacy from '@/pages/About/Privacy.vue'
+import About from '@/pages/About/About.vue'
+import Service from '@/pages/About/Service.vue'
+import AIHub from '@/pages/AIHub/index.vue'
+import AITools from '@/pages/AIHub/AITools.vue'
+import Frameworks from '@/pages/AIHub/Frameworks.vue'
+Vue.use(VueRouter)
+
+export const routes = [{
+		path: '/',
+		name: 'home',
+		component: Home,
+		meta: {
+			navigationName: "Home",
+			hidden: false
+		} //navigationName：显示在header组件里面导航按钮的名字   hidden：是否在导航栏里面显示
+	},
+	{
+		path: '/launches',
+		name: 'AI Launches',
+		component: About,
+		meta: {
+			navigationName: "AI Launches",
+			hidden: false
+		}
+	},
+	{
+		path: '/hub',
+		name: 'AI Hub',
+		component:AIHub,
+		meta: {
+			navigationName: "AI Hub",
+			hidden: false,
+			children: true,
+		},
+		children: [{
+				path: '/tools', // 相对路径，实际路径会是/hub/tools
+				name: 'AI Tools',
+				component: AITools,
+				meta: {
+					icon: 'tools',
+					hidden: true // 隐藏于主导航，只在子菜单显示
+				}
+			},
+			{
+				path: '/frameworks', // 路径改为全小写更规范
+				name: 'Frameworks',
+				component: Frameworks,
+				meta: {
+					icon: 'frameworks',
+					hidden: true
+				}
+			}
+		]
+	},
+	{
+		path: '/login',
+		name: 'AI Daily News',
+		component: Login,
+		meta: {
+			navigationName: "AI Daily News",
+			hidden: false
+		}
+	},
+	{
+		path: '/learn',
+		name: 'Learn',
+		component: Login,
+		meta: {
+			navigationName: "Learn",
+			hidden: false,
+			children: true,
+		},
+		children: [{
+				name: 'AI Observer',
+				path: '/observer',
+				component: Privacy,
+				meta: {
+					icon: 'observer',
+					hidden: true
+				}
+			},
+			{
+				name: 'In-depth Analysis',
+				path: '/analysis',
+				component: About,
+				meta: {
+					icon: 'analysis',
+					hidden: true
+				}
+			},
+			{
+				name: 'Pioneer In The Field',
+				path: '/pioneer',
+				component: Service,
+				meta: {
+					icon: 'pioneer',
+					hidden: true
+				}
+			}
+		]
+	},
+	{
+		path: '/about',
+		name: 'About Us',
+		component: AboutIndex,
+		meta: {
+			navigationName: "About Us",
+			hidden: false
+		},
+		children: [{
+				path: '/privacy',
+				component: Privacy,
+				meta: {
+					hidden: true
+				}
+			},
+			{
+				path: '/about',
+				component: About,
+				meta: {
+					hidden: true
+				}
+			},
+			{
+				path: '/service',
+				component: Service,
+				meta: {
+					hidden: true
+				}
+			}
+		]
+
+	},
+
+	{
+		path: '*',
+		redirect: '/'
+	}
+]
+
+const router = new VueRouter({
+	mode: 'history',
+	// mode: 'hash',
+	// base:'/example/',  //服务器资源放在子路径下，不在根路径时配置
+	routes,
+	scrollBehavior: () => ({
+		y: 0,
+		behavior: 'smooth'
+	}), //当更新路由时，滚动条滑动到顶部
+})
+
+export function createRouter() {
+	return router
+}
--- a/static/favicon.ico
+++ b/static/favicon.ico
--- a/static/logo.png
+++ b/static/logo.png
--- a/static/logo/
+++ b/static/logo/
--- a/static/logo/Frame(15).png
+++ b/static/logo/Frame(15).png
--- a/static/logo/Frame(16).png
+++ b/static/logo/Frame(16).png
--- a/static/logo/Frame(17).png
+++ b/static/logo/Frame(17).png
--- a/static/logo/Frame(20).png
+++ b/static/logo/Frame(20).png
--- a/static/logo/Frame(21).png
+++ b/static/logo/Frame(21).png
--- a/static/logo/Frame(23).png
+++ b/static/logo/Frame(23).png
--- a/static/logo/Frame@2x(1).png
+++ b/static/logo/Frame@2x(1).png
--- a/static/logo/Frame@2x(1)_1.png
+++ b/static/logo/Frame@2x(1)_1.png
--- a/static/logo/Frame@2x(1)_2.png
+++ b/static/logo/Frame@2x(1)_2.png
--- a/static/logo/Frame@2x(10).png
+++ b/static/logo/Frame@2x(10).png
--- a/static/logo/Frame@2x(10)_1.png
+++ b/static/logo/Frame@2x(10)_1.png
--- a/static/logo/Frame@2x(11).png
+++ b/static/logo/Frame@2x(11).png
--- a/static/logo/Frame@2x(11)_1.png
+++ b/static/logo/Frame@2x(11)_1.png
--- a/static/logo/Frame@2x(12).png
+++ b/static/logo/Frame@2x(12).png
--- a/static/logo/Frame@2x(12)_1.png
+++ b/static/logo/Frame@2x(12)_1.png
--- a/static/logo/Frame@2x(13).png
+++ b/static/logo/Frame@2x(13).png
--- a/static/logo/Frame@2x(13)_1.png
+++ b/static/logo/Frame@2x(13)_1.png
--- a/static/logo/Frame@2x(14).png
+++ b/static/logo/Frame@2x(14).png
--- a/static/logo/Frame@2x(14)_1.png
+++ b/static/logo/Frame@2x(14)_1.png
--- a/static/logo/Frame@2x(15).png
+++ b/static/logo/Frame@2x(15).png
--- a/static/logo/Frame@2x(15)_1.png
+++ b/static/logo/Frame@2x(15)_1.png
--- a/static/logo/Frame@2x(16).png
+++ b/static/logo/Frame@2x(16).png
--- a/static/logo/Frame@2x(16)_1.png
+++ b/static/logo/Frame@2x(16)_1.png
--- a/static/logo/Frame@2x(17).png
+++ b/static/logo/Frame@2x(17).png
--- a/static/logo/Frame@2x(17)_1.png
+++ b/static/logo/Frame@2x(17)_1.png
--- a/static/logo/Frame@2x(18).png
+++ b/static/logo/Frame@2x(18).png
--- a/static/logo/Frame@2x(18)_1.png
+++ b/static/logo/Frame@2x(18)_1.png
--- a/static/logo/Frame@2x(19).png
+++ b/static/logo/Frame@2x(19).png
--- a/static/logo/Frame@2x(19)_1.png
+++ b/static/logo/Frame@2x(19)_1.png
--- a/static/logo/Frame@2x(2).png
+++ b/static/logo/Frame@2x(2).png
--- a/static/logo/Frame@2x(2)_1.png
+++ b/static/logo/Frame@2x(2)_1.png
--- a/static/logo/Frame@2x(2)_2.png
+++ b/static/logo/Frame@2x(2)_2.png
--- a/static/logo/Frame@2x(20).png
+++ b/static/logo/Frame@2x(20).png
--- a/static/logo/Frame@2x(20)_1.png
+++ b/static/logo/Frame@2x(20)_1.png
--- a/static/logo/Frame@2x(21).png
+++ b/static/logo/Frame@2x(21).png
--- a/static/logo/Frame@2x(21)_1.png
+++ b/static/logo/Frame@2x(21)_1.png
--- a/static/logo/Frame@2x(22).png
+++ b/static/logo/Frame@2x(22).png
--- a/static/logo/Frame@2x(22)_1.png
+++ b/static/logo/Frame@2x(22)_1.png
--- a/static/logo/Frame@2x(23)_1.png
+++ b/static/logo/Frame@2x(23)_1.png
--- a/static/logo/Frame@2x(24).png
+++ b/static/logo/Frame@2x(24).png
--- a/static/logo/Frame@2x(24)_1.png
+++ b/static/logo/Frame@2x(24)_1.png
--- a/static/logo/Frame@2x(25).png
+++ b/static/logo/Frame@2x(25).png
--- a/static/logo/Frame@2x(26).png
+++ b/static/logo/Frame@2x(26).png
--- a/static/logo/Frame@2x(27).png
+++ b/static/logo/Frame@2x(27).png
--- a/static/logo/Frame@2x(28).png
+++ b/static/logo/Frame@2x(28).png
--- a/static/logo/Frame@2x(29).png
+++ b/static/logo/Frame@2x(29).png
--- a/static/logo/Frame@2x(3).png
+++ b/static/logo/Frame@2x(3).png
--- a/static/logo/Frame@2x(3)_1.png
+++ b/static/logo/Frame@2x(3)_1.png
--- a/static/logo/Frame@2x(30).png
+++ b/static/logo/Frame@2x(30).png
--- a/static/logo/Frame@2x(31).png
+++ b/static/logo/Frame@2x(31).png
--- a/static/logo/Frame@2x(4).png
+++ b/static/logo/Frame@2x(4).png
--- a/static/logo/Frame@2x(4)_1.png
+++ b/static/logo/Frame@2x(4)_1.png
--- a/static/logo/Frame@2x(5).png
+++ b/static/logo/Frame@2x(5).png
--- a/static/logo/Frame@2x(5)_1.png
+++ b/static/logo/Frame@2x(5)_1.png
--- a/static/logo/Frame@2x(6).png
+++ b/static/logo/Frame@2x(6).png
--- a/static/logo/Frame@2x(6)_1.png
+++ b/static/logo/Frame@2x(6)_1.png
--- a/static/logo/Frame@2x(7).png
+++ b/static/logo/Frame@2x(7).png
--- a/static/logo/Frame@2x(7)_1.png
+++ b/static/logo/Frame@2x(7)_1.png
--- a/static/logo/Frame@2x(8).png
+++ b/static/logo/Frame@2x(8).png
--- a/static/logo/Frame@2x(8)_1.png
+++ b/static/logo/Frame@2x(8)_1.png
--- a/static/logo/Frame@2x(9).png
+++ b/static/logo/Frame@2x(9).png
--- a/Show More
+++ b/Show More