index.vue
3.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<script lang="ts" setup>
import type { appListType, appType } from "~/api/types/app";
import type { adListType } from "~/api/types/ad";
import { getAppList, getAllApp } from "~/api/app";
import type { webSiteType } from "~/api/types/webSite";
import { getAdList } from "~/api/ad";
const recommendList = ref<appType[]>([]);
const appList = ref<appListType[]>([]);
const adList = ref<adListType | null>(null);
// 获取轮播广告
const adRes = await getAdList();
adList.value = adRes[0];
// 获取推荐应用
const recommendRes = await getAppList({
pageSize: 10,
pageNum: 1,
isRecommend: "1",
});
recommendList.value = recommendRes.rows;
// 获取全部应用
const allRes = await getAllApp();
appList.value = allRes.data;
const webSite = useState<webSiteType>("webSite");
useHead({
title: webSite.value.webname,
meta: [
{ name: "description", content: webSite.value.webdescription },
{ name: "keywords", content: webSite.value.webkeywords },
{ name: "format-detection", content: "telephone=no" },
{ name: "referrer", content: "origin-when-cross-origin" },
{
name: "robots",
content:
"follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large",
},
{ property: "og:locale", content: "zh_CN" },
{
property: "og:title",
content: "Annie网站 - 优质 AI 工具集合、AI 资源网站、AI 导航平台",
},
{
property: "og:description",
content:
"专业 AI 工具导航网站，汇集全网优质 AI 工具，包含 AI 写作、AI 绘画、AI 视频、AI 对话、AI 代码、AI 设计、AI 办公等各类 AI 资源，让你快速找到好用的 AI 工具。",
},
// { property: 'og:image', content: 'https://aiboxgo.com/images/logo.png'},
{ property: "og:url", content: "https://aiboxgo.com/" },
{ property: "og:site_name", content: "Annie网站" },
{ property: "og:type", content: "website" },
{ property: "twitter:card", content: "summary_large_image" },
{
property: "twitter:title",
content: "Annie网站 - 优质 AI 工具集合、AI 资源网站、AI 导航平台",
},
{
property: "twitter:description",
content:
"专业 AI 工具导航网站，汇集全网优质 AI 工具，包含 AI 写作、AI 绘画、AI 视频、AI 对话、AI 代码、AI 设计、AI 办公等各类 AI 资源，让你快速找到好用的 AI 工具。",
},
],
});
</script>
<template>
<div class="flex flex-col min-h-screen bg-white">
<main class="flex-grow md:p-6 p-2 bg-white">
<!-- 轮播广告区域 -->
<ADSwiperCarousel :adSwiperList="adList" />
<!-- Banner 区域 -->
<HomeBanner />
<!-- 广告区域 -->
<!-- 工具展示区 -->
<section class="md:mb-12 mb-6">
<!-- 推荐工具区 -->
<HomeRecommend
:recommendList="recommendList"
navTitle="推荐工具"
navIcon="star"
/>
<div v-for="appItem in appList" class="md:mb-12 mb-6">
<!-- 分类导航及内容 -->
<HomeContent :appData="appItem" />
</div>
</section>
</main>
</div>
</template>