leiyun
/
pc_nuxt
1
0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
2 коммитов
1 ветка
586 KiB
 
 
 
 
Дерево: 64b466469e
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из '64b466469e'
${ noResults }
pc_nuxt/app/pages/index.vue

689 строки
32 KiB
Исходник Вина История 

  1. <template>

  2.   <div class="overflow-hidden">

  3.     <!-- ==================== 1. Hero ==================== -->

  4.     <section class="relative border-b border-[var(--c-e8eef7)] bg-gradient-to-br from-[var(--c-ffffff)] via-[var(--c-eef6ff)] to-[var(--c-f3fbf9)]">

  5.       <div class="pointer-events-none absolute -right-32 -top-40 size-[420px] rounded-full bg-[var(--c-0b8cff)]/10 blur-3xl" />

  6.       <div class="pointer-events-none absolute -bottom-40 -left-24 size-[360px] rounded-full bg-[var(--c-20d3a2)]/10 blur-3xl" />

  7. 

  8.       <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-24">

  9.         <div class="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">

  10.           <!-- 左：文案 -->

  11.           <div>

  12.             <span class="inline-flex items-center gap-1.5 rounded-full bg-[var(--c-ffffff)] px-3.5 py-1.5 text-xs font-extrabold text-[var(--c-0b8cff)] shadow-[0_4px_14px_var(--sh-11-140-255-120)]">

  13.               <UIcon name="i-lucide-sparkles" class="size-3.5" />

  14.               一站式 AI 创作平台

  15.             </span>

  16. 

  17.             <h1 class="mt-5 text-4xl font-extrabold leading-[1.15] tracking-tight text-[var(--c-172033)] sm:text-5xl lg:text-[56px]">

  18.               解放你的<br>

  19.               <span class="bg-gradient-to-r from-[var(--c-0b8cff)] via-[var(--c-3aa9ff)] to-[var(--c-20d3a2)] bg-clip-text text-transparent">生产力</span>

  20.             </h1>

  21. 

  22.             <p class="mt-5 max-w-xl text-base leading-relaxed text-[var(--c-66758a)] sm:text-lg">

  23.               AI 取名、动漫头像、证件照、AI 绘画……把重复又费时的创作交给 AI，

  24.               几秒钟拿到可直接用的结果。按点数计费，多端通用。

  25.             </p>

  26. 

  27.             <div class="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center">

  28.               <NuxtLink

  29.                 to="/writing/naming/"

  30.                 class="inline-flex h-13 items-center justify-center gap-2 rounded-full bg-gradient-to-r from-[var(--c-0b8cff)] to-[var(--c-3aa9ff)] px-8 text-base font-bold text-white shadow-[0_14px_30px_var(--sh-11-140-255-280)] transition-all hover:-translate-y-0.5 hover:shadow-[0_18px_36px_var(--sh-11-140-255-360)]"

  31.               >

  32.                 <UIcon name="i-lucide-zap" class="size-5" />

  33.                 免费开始创作

  34.               </NuxtLink>

  35.               <a

  36.                 href="#tools"

  37.                 class="inline-flex h-13 items-center justify-center gap-2 rounded-full bg-[var(--c-ffffff)] px-8 text-base font-bold text-[var(--c-172033)] shadow-[0_8px_20px_var(--sh-23-32-51-60)] transition-colors hover:bg-[var(--c-f7faff)]"

  38.               >

  39.                 查看全部工具

  40.                 <UIcon name="i-lucide-arrow-down" class="size-4" />

  41.               </a>

  42.             </div>

  43. 

  44.           </div>

  45. 

  46.           <!-- 右：动漫头像示例（原图 / 生成图 对照） -->

  47.           <div class="relative mx-auto w-full max-w-lg lg:max-w-none">

  48.             <div class="grid grid-cols-2 gap-4 sm:gap-5">

  49.               <!-- 原图 -->

  50.               <figure class="group relative overflow-hidden rounded-3xl bg-[var(--c-e7eef8)] shadow-[0_18px_44px_var(--sh-23-58-110-120)]">

  51.                 <img

  52.                   :src="demo.original"

  53.                   alt="上传的原始照片示例"

  54.                   class="aspect-[3/4] w-full object-cover"

  55.                   loading="eager"

  56.                 >

  57.                 <figcaption class="absolute left-3 top-3 rounded-full bg-[var(--c-0f172a)]/55 px-2.5 py-1 text-[11px] font-bold text-white backdrop-blur">

  58.                   原图

  59.                 </figcaption>

  60.               </figure>

  61. 

  62.               <!-- 生成图 -->

  63.               <figure class="group relative overflow-hidden rounded-3xl bg-[var(--c-e7eef8)] shadow-[0_24px_54px_var(--sh-11-140-255-220)] ring-2 ring-[var(--c-0b8cff)] sm:translate-y-6">

  64.                 <img

  65.                   :src="demo.anime"

  66.                   alt="AI 生成的动漫头像示例"

  67.                   class="aspect-[3/4] w-full object-cover"

  68.                   loading="eager"

  69.                 >

  70.                 <figcaption class="absolute left-3 top-3 rounded-full bg-[var(--c-0b8cff)] px-2.5 py-1 text-[11px] font-bold text-white">

  71.                   AI 动漫头像

  72.                 </figcaption>

  73.               </figure>

  74.             </div>

  75. 

  76.             <!-- 浮标 -->

  77.             <div class="absolute -top-4 right-2 flex items-center gap-1.5 rounded-full bg-[var(--c-ffffff)] px-3.5 py-2 shadow-[0_10px_24px_var(--sh-23-58-110-160)]">

  78.               <UIcon name="i-lucide-sparkles" class="size-4 text-[var(--c-ff8a00)]" />

  79.               <span class="text-xs font-extrabold text-[var(--c-172033)]">10 秒出图</span>

  80.             </div>

  81.           </div>

  82.         </div>

  83.       </div>

  84.     </section>

  85. 

  86.     <!-- ==================== 2. 工具（Services） ==================== -->

  87.     <section id="tools" class="mx-auto max-w-7xl scroll-mt-20 px-4 py-16 sm:px-6 lg:px-8 lg:py-24">

  88.       <div class="mx-auto max-w-2xl text-center">

  89.         <span class="inline-flex items-center gap-1.5 rounded-full bg-[var(--c-eef7ff)] px-3 py-1 text-xs font-extrabold text-[var(--c-0b8cff)]">

  90.           <UIcon name="i-lucide-layout-grid" class="size-3.5" />

  91.           AI 工具箱

  92.         </span>

  93.         <h2 class="mt-4 text-3xl font-extrabold text-[var(--c-172033)] sm:text-4xl">开箱即用的 AI 能力</h2>

  94.         <p class="mt-4 text-base leading-relaxed text-[var(--c-66758a)]">

  95.           不用学提示词、不用配环境，选好参数点一下就出结果。

  96.         </p>

  97.       </div>

  98. 

  99.       <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">

  100.         <template v-for="tool in tools" :key="tool.title">

  101.           <!-- 已上线：可点击卡片 -->

  102.           <NuxtLink

  103.             v-if="!tool.soon"

  104.             :to="tool.to"

  105.             class="group relative flex cursor-pointer flex-col overflow-hidden rounded-3xl border border-[var(--c-eef2f7)] bg-[var(--c-ffffff)] p-6 transition-all duration-300 hover:-translate-y-1 hover:border-[var(--c-0b8cff)]/30 hover:shadow-[0_20px_44px_var(--sh-23-58-110-120)]"

  106.           >

  107.             <span

  108.               v-if="tool.hot"

  109.               class="absolute right-5 top-5 rounded-full bg-[var(--c-fff4ec)] px-2.5 py-1 text-[10px] font-extrabold text-[var(--c-ff681f)]"

  110.             >热门</span>

  111. 

  112.             <div

  113.               class="flex size-14 items-center justify-center rounded-2xl transition-transform duration-300 group-hover:scale-105"

  114.               :class="tool.iconBg"

  115.             >

  116.               <UIcon :name="tool.icon" class="size-7" :class="tool.iconColor" />

  117.             </div>

  118. 

  119.             <h3 class="mt-5 text-lg font-extrabold text-[var(--c-172033)]">{{ tool.title }}</h3>

  120.             <p class="mt-2 flex-1 text-sm leading-relaxed text-[var(--c-66758a)]">{{ tool.desc }}</p>

  121. 

  122.             <div class="mt-5 flex items-center justify-between border-t border-[var(--c-f1f5fa)] pt-4">

  123.               <span class="text-sm font-extrabold text-[var(--c-0b8cff)]">{{ toolPrice(tool) }}</span>

  124.               <span class="inline-flex items-center gap-1 text-sm font-bold text-[var(--c-172033)] transition-colors group-hover:text-[var(--c-0b8cff)]">

  125.                 立即使用

  126.                 <UIcon name="i-lucide-arrow-right" class="size-4 transition-transform group-hover:translate-x-0.5" />

  127.               </span>

  128.             </div>

  129.           </NuxtLink>

  130. 

  131.           <!-- 未上线：静态卡片 -->

  132.           <div

  133.             v-else

  134.             class="relative flex cursor-default flex-col overflow-hidden rounded-3xl border border-[var(--c-eef2f7)] bg-[var(--c-ffffff)] p-6 opacity-70"

  135.           >

  136.             <span class="absolute right-5 top-5 rounded-full bg-[var(--c-f1f5fa)] px-2.5 py-1 text-[10px] font-bold text-[var(--c-8a97a8)]">

  137.               即将上线

  138.             </span>

  139. 

  140.             <div class="flex size-14 items-center justify-center rounded-2xl" :class="tool.iconBg">

  141.               <UIcon :name="tool.icon" class="size-7" :class="tool.iconColor" />

  142.             </div>

  143. 

  144.             <h3 class="mt-5 text-lg font-extrabold text-[var(--c-172033)]">{{ tool.title }}</h3>

  145.             <p class="mt-2 flex-1 text-sm leading-relaxed text-[var(--c-66758a)]">{{ tool.desc }}</p>

  146. 

  147.             <div class="mt-5 flex items-center justify-between border-t border-[var(--c-f1f5fa)] pt-4">

  148.               <span class="text-sm font-extrabold text-[var(--c-0b8cff)]">{{ tool.price }}</span>

  149.               <span class="text-sm text-[var(--c-a0aabb)]">敬请期待</span>

  150.             </div>

  151.           </div>

  152.         </template>

  153.       </div>

  154.     </section>

  155. 

  156.     <!-- ==================== 4. 点数套餐（Pricing） ==================== -->

  157.     <section id="pricing" class="mx-auto max-w-7xl scroll-mt-20 px-4 py-16 sm:px-6 lg:px-8 lg:py-24">

  158.       <div class="mx-auto max-w-2xl text-center">

  159.         <span class="inline-flex items-center gap-1.5 rounded-full bg-[var(--c-fff4ec)] px-3 py-1 text-xs font-extrabold text-[var(--c-ff681f)]">

  160.           <UIcon name="i-lucide-coins" class="size-3.5" />

  161.           点数套餐

  162.         </span>

  163.         <h2 class="mt-4 text-3xl font-extrabold text-[var(--c-172033)] sm:text-4xl">按需付费，没有订阅</h2>

  164.         <p class="mt-4 text-base text-[var(--c-66758a)]">点数长期有效，小程序、H5、PC 端共享同一份余额。</p>

  165.       </div>

  166. 

  167.       <!-- 加载中骨架 -->

  168.       <div v-if="pkgLoading" class="mx-auto mt-12 grid max-w-4xl gap-6 sm:grid-cols-3">

  169.         <div v-for="i in 3" :key="i" class="h-[380px] animate-pulse rounded-3xl bg-[var(--c-eef2f7)]" />

  170.       </div>

  171. 

  172.       <div v-else-if="packages.length" class="mx-auto mt-12 grid max-w-5xl items-start gap-6 sm:grid-cols-3">

  173.         <div

  174.           v-for="(pkg, idx) in packages"

  175.           :key="pkg.id"

  176.           class="relative rounded-3xl border-2 bg-[var(--c-ffffff)] p-7 transition-all duration-300"

  177.           :class="isFeatured(pkg, idx)

  178.             ? 'border-[var(--c-0b8cff)] shadow-[0_24px_50px_var(--sh-11-140-255-180)] sm:-mt-4 sm:pb-10'

  179.             : 'border-[var(--c-eef2f7)] hover:border-[var(--c-0b8cff)]/30 hover:shadow-[0_16px_36px_var(--sh-23-58-110-100)]'"

  180.         >

  181.           <span

  182.             v-if="isFeatured(pkg, idx)"

  183.             class="absolute -top-3.5 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-gradient-to-r from-[var(--c-0b8cff)] to-[var(--c-3aa9ff)] px-4 py-1.5 text-[11px] font-extrabold text-white shadow-[0_8px_18px_var(--sh-11-140-255-300)]"

  184.           >

  185.             {{ pkg.badge || '最受欢迎' }}

  186.           </span>

  187. 

  188.           <div class="flex size-12 items-center justify-center rounded-2xl bg-[var(--c-eef7ff)]">

  189.             <UIcon :name="pkgIcon(idx)" class="size-6 text-[var(--c-0b8cff)]" />

  190.           </div>

  191. 

  192.           <h3 class="mt-4 text-lg font-extrabold text-[var(--c-172033)]">{{ pkg.title }}</h3>

  193.           <p class="mt-1 text-xs text-[var(--c-8a97a8)]">{{ pkgSubtitle(pkg) }}</p>

  194. 

  195.           <div class="mt-5 flex items-end gap-1">

  196.             <span class="text-4xl font-extrabold text-[var(--c-172033)]">￥{{ pkg.price_yuan }}</span>

  197.           </div>

  198.           <div v-if="pkg.old_price_yuan" class="mt-1 text-xs text-[var(--c-a0aabb)] line-through">￥{{ pkg.old_price_yuan }}</div>

  199. 

  200.           <ul class="mt-6 space-y-2.5">

  201.             <li v-for="f in pkgFeatures(pkg)" :key="f" class="flex items-start gap-2 text-sm text-[var(--c-4b5b70)]">

  202.               <UIcon name="i-lucide-check" class="mt-0.5 size-4 shrink-0 text-[var(--c-17a65a)]" />

  203.               <span>{{ f }}</span>

  204.             </li>

  205.           </ul>

  206. 

  207.           <NuxtLink

  208.             to="/recharge"

  209.             class="mt-7 flex h-11 items-center justify-center rounded-full text-sm font-bold transition-all"

  210.             :class="isFeatured(pkg, idx)

  211.               ? 'bg-gradient-to-r from-[var(--c-0b8cff)] to-[var(--c-3aa9ff)] text-white shadow-[0_10px_22px_var(--sh-11-140-255-250)] hover:opacity-90'

  212.               : 'bg-[var(--c-eef7ff)] text-[var(--c-0b8cff)] hover:bg-[var(--c-e0f0ff)]'"

  213.           >

  214.             立即充值

  215.           </NuxtLink>

  216.         </div>

  217.       </div>

  218. 

  219.       <p class="mt-8 text-center text-xs text-[var(--c-a0aabb)]">* 点数购买后长期有效，不支持退款</p>

  220.     </section>

  221. 

  222.     <!-- ==================== 4.5 热门资讯（移植原 PC 首页） ==================== -->

  223.     <section v-if="news.length" class="border-y border-[var(--c-e8eef7)] bg-[var(--c-ffffff)] py-16 lg:py-24">

  224.       <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">

  225.         <div class="flex flex-wrap items-end justify-between gap-4">

  226.           <div>

  227.             <span class="inline-flex items-center gap-1.5 rounded-full bg-[var(--c-eef7ff)] px-3 py-1 text-xs font-extrabold text-[var(--c-0b8cff)]">

  228.               <UIcon name="i-lucide-newspaper" class="size-3.5" />

  229.               AI 资讯

  230.             </span>

  231.             <h2 class="mt-4 text-3xl font-extrabold text-[var(--c-172033)] sm:text-4xl">热门资讯</h2>

  232.             <p class="mt-3 text-base text-[var(--c-66758a)]">AI 前沿动态、使用教程与常见问题解答</p>

  233.           </div>

  234.           <NuxtLink

  235.             to="/info"

  236.             class="inline-flex items-center gap-1.5 text-sm font-bold text-[var(--c-0b8cff)] hover:underline"

  237.           >

  238.             查看全部资讯

  239.             <UIcon name="i-lucide-arrow-right" class="size-4" />

  240.           </NuxtLink>

  241.         </div>

  242. 

  243.         <!-- 栏目快捷入口 -->

  244.         <div class="mt-6 flex flex-wrap gap-2">

  245.           <NuxtLink

  246.             v-for="col in COLUMNS"

  247.             :key="col.colId"

  248.             :to="col.path"

  249.             class="inline-flex items-center gap-1.5 rounded-full bg-[var(--c-f7f9fd)] px-4 py-2 text-sm font-bold text-[var(--c-5b6b80)] transition-colors hover:bg-[var(--c-eef7ff)] hover:text-[var(--c-0b8cff)]"

  250.           >

  251.             <UIcon :name="col.icon" class="size-4" />

  252.             {{ col.name }}

  253.           </NuxtLink>

  254.         </div>

  255. 

  256.         <!-- 头条大卡 + 列表 -->

  257.         <div class="mt-8 grid gap-6 lg:grid-cols-12 lg:gap-8">

  258.           <!-- 头条：图片铺满 + 底部渐变压字 -->

  259.           <article v-if="topNews" class="lg:col-span-5">

  260.             <NuxtLink

  261.               :to="topNews.url"

  262.               class="group relative block h-full min-h-[320px] overflow-hidden rounded-3xl bg-[var(--c-0f172a)] shadow-[0_14px_36px_var(--sh-23-58-110-140)]"

  263.             >

  264.               <img

  265.                 v-if="topNews.cover"

  266.                 :src="topNews.cover"

  267.                 :alt="topNews.title"

  268.                 class="absolute inset-0 size-full object-cover transition-transform duration-700 group-hover:scale-105"

  269.                 loading="lazy"

  270.               >

  271.               <div class="absolute inset-0 bg-gradient-to-t from-[var(--c-0b1324)]/92 via-[var(--c-0b1324)]/45 to-transparent" />

  272. 

  273.               <div class="absolute left-5 top-5">

  274.                 <span class="rounded-full bg-[var(--c-ffffff)]/95 px-2.5 py-1 text-[11px] font-extrabold text-[var(--c-0b8cff)]">

  275.                   {{ colName(topNews.col_id) }}

  276.                 </span>

  277.               </div>

  278. 

  279.               <div class="relative flex h-full min-h-[320px] flex-col justify-end p-5 sm:p-6">

  280.                 <h3 class="line-clamp-2 text-xl font-extrabold leading-snug text-white sm:text-2xl">

  281.                   {{ topNews.title }}

  282.                 </h3>

  283.                 <p v-if="topNews.info" class="mt-2.5 line-clamp-2 text-sm leading-relaxed text-white/75">

  284.                   {{ topNews.info }}

  285.                 </p>

  286.                 <div class="mt-4 flex items-center gap-4 text-xs text-white/60">

  287.                   <span>{{ topNews.time }}</span>

  288.                   <span class="inline-flex items-center gap-1">

  289.                     <UIcon name="i-lucide-eye" class="size-3.5" />

  290.                     {{ formatViews(topNews.view_num) }}

  291.                   </span>

  292.                   <span class="ml-auto inline-flex items-center gap-1 font-bold text-white/85 transition-transform group-hover:translate-x-0.5">

  293.                     阅读全文

  294.                     <UIcon name="i-lucide-arrow-right" class="size-3.5" />

  295.                   </span>

  296.                 </div>

  297.               </div>

  298.             </NuxtLink>

  299.           </article>

  300. 

  301.           <!-- 列表：统一缩略图 + 序号，桌面两列 -->

  302.           <div class="lg:col-span-7">

  303.             <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">

  304.               <article v-for="(item, idx) in restNews" :key="item.id">

  305.                 <NuxtLink

  306.                   :to="item.url"

  307.                   class="group flex h-full gap-3.5 rounded-2xl border border-[var(--c-eef2f7)] bg-[var(--c-ffffff)] p-3 transition-all hover:-translate-y-0.5 hover:border-[var(--c-0b8cff)]/30 hover:shadow-[0_12px_28px_var(--sh-23-58-110-100)]"

  308.                 >

  309.                   <!-- 缩略图（无封面时用序号占位，保证排版整齐） -->

  310.                   <div class="relative size-[74px] shrink-0 overflow-hidden rounded-xl bg-gradient-to-br from-[var(--c-eef6ff)] to-[var(--c-f3fbf9)]">

  311.                     <img

  312.                       v-if="item.cover"

  313.                       :src="item.cover"

  314.                       :alt="item.title"

  315.                       class="size-full object-cover transition-transform duration-500 group-hover:scale-110"

  316.                       loading="lazy"

  317.                     >

  318.                     <span

  319.                       v-else

  320.                       class="flex size-full items-center justify-center text-lg font-extrabold text-[var(--c-0b8cff)]/45"

  321.                     >{{ idx + 2 }}</span>

  322.                   </div>

  323. 

  324.                   <div class="flex min-w-0 flex-1 flex-col">

  325.                     <h3 class="line-clamp-2 text-sm font-bold leading-snug text-[var(--c-172033)] transition-colors group-hover:text-[var(--c-0b8cff)]">

  326.                       {{ item.title }}

  327.                     </h3>

  328.                     <div class="mt-auto flex items-center gap-2.5 pt-2 text-[11px] text-[var(--c-a0aabb)]">

  329.                       <span class="rounded bg-[var(--c-f7f9fd)] px-1.5 py-0.5 font-bold text-[var(--c-7b8797)]">

  330.                         {{ colName(item.col_id) }}

  331.                       </span>

  332.                       <span>{{ item.time }}</span>

  333.                       <span class="inline-flex items-center gap-0.5">

  334.                         <UIcon name="i-lucide-eye" class="size-3" />

  335.                         {{ formatViews(item.view_num) }}

  336.                       </span>

  337.                     </div>

  338.                   </div>

  339.                 </NuxtLink>

  340.               </article>

  341.             </div>

  342.           </div>

  343.         </div>

  344.       </div>

  345.     </section>

  346. 

  347.     <!-- ==================== 5. AI 绘画作品（数据源：/art/getlist） ==================== -->

  348.     <section class="border-y border-[var(--c-e8eef7)] bg-[var(--c-ffffff)] py-16 lg:py-24">

  349.       <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">

  350.         <div class="flex flex-wrap items-end justify-between gap-5">

  351.           <div>

  352.             <span class="inline-flex items-center gap-1.5 rounded-full bg-[var(--c-f3f0ff)] px-3 py-1 text-xs font-extrabold text-[var(--c-7a5af8)]">

  353.               <UIcon name="i-lucide-images" class="size-3.5" />

  354.               作品广场

  355.             </span>

  356.             <h2 class="mt-4 text-3xl font-extrabold text-[var(--c-172033)] sm:text-4xl">看看大家用 AI 画出了什么</h2>

  357.             <p class="mt-3 text-base text-[var(--c-66758a)]">来自 AI 在线用户的公开作品，鼠标悬停可查看生成提示词</p>

  358.           </div>

  359.           <NuxtLink

  360.             to="/pic/"

  361.             class="inline-flex h-11 items-center gap-1.5 rounded-full bg-[var(--c-f7f9fd)] px-6 text-sm font-bold text-[var(--c-5b6b80)] transition-colors hover:bg-[var(--c-eef7ff)] hover:text-[var(--c-0b8cff)]"

  362.           >

  363.             浏览全部作品

  364.             <UIcon name="i-lucide-arrow-right" class="size-4" />

  365.           </NuxtLink>

  366.         </div>

  367. 

  368.         <!--

  369.           12 张作品的马赛克排布（各断点都能整行铺满，不留空格）：

  370.             桌面 5 列：首图占 2×2 + 右侧 6 小图（2 行 × 3 个） + 第 3 行 5 小图

  371.             平板 3 列：首图占 2×2 + 右侧 2 小图 + 后续 3 行 × 3 个

  372.             移动 2 列：全部等大，6 行

  373.         -->

  374.         <div v-if="artworks.length" class="mt-10 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5 lg:gap-4">

  375.           <NuxtLink

  376.             v-for="(item, idx) in artworks"

  377.             :key="`${item.chat_open_id}_${item.img_index}`"

  378.             :to="`/pic/${item.chat_open_id}_${item.img_index || 0}.html`"

  379.             class="group relative aspect-square overflow-hidden rounded-2xl bg-[var(--c-eef3f8)] ring-1 ring-[var(--c-eef2f7)] transition-all hover:ring-2 hover:ring-[var(--c-0b8cff)]/50 hover:shadow-[0_14px_32px_var(--sh-23-58-110-140)]"

  380.             :class="idx === 0 ? 'sm:col-span-2 sm:row-span-2' : ''"

  381.           >

  382.             <img

  383.               :src="item.img"

  384.               :alt="item.prompts || 'AI 绘画作品'"

  385.               class="size-full object-cover transition-transform duration-700 group-hover:scale-105"

  386.               loading="lazy"

  387.             >

  388. 

  389.             <!-- 常驻的类型角标 -->

  390.             <span class="absolute left-3 top-3 rounded-full bg-[var(--c-ffffff)]/90 px-2 py-0.5 text-[10px] font-bold text-[var(--c-4b5b70)] backdrop-blur">

  391.               {{ artTypeName(item.ai_type) }}

  392.             </span>

  393. 

  394.             <!-- hover 提示词浮层 -->

  395.             <div class="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100">

  396.               <div class="p-3 lg:p-4">

  397.                 <p

  398.                   v-if="item.prompts"

  399.                   class="line-clamp-3 text-xs leading-relaxed text-white/95"

  400.                   :class="idx === 0 && 'lg:text-sm'"

  401.                 >

  402.                   {{ item.prompts }}

  403.                 </p>

  404.                 <p v-else class="text-xs text-white/80">AI 生成作品</p>

  405.                 <div class="mt-2 flex items-center gap-3 text-[10px] text-white/70">

  406.                   <span v-if="item.resolution">{{ item.resolution }}</span>

  407.                   <span class="inline-flex items-center gap-1">

  408.                     <UIcon name="i-lucide-heart" class="size-3" />

  409.                     {{ item.like_num || 0 }}

  410.                   </span>

  411.                   <span class="ml-auto inline-flex items-center gap-1 font-bold text-white">

  412.                     查看

  413.                     <UIcon name="i-lucide-arrow-up-right" class="size-3" />

  414.                   </span>

  415.                 </div>

  416.               </div>

  417.             </div>

  418.           </NuxtLink>

  419.         </div>

  420. 

  421.         <!-- 无数据兜底 -->

  422.         <div v-else class="mt-10 rounded-3xl bg-[var(--c-f7f9fd)] py-16 text-center">

  423.           <UIcon name="i-lucide-image-off" class="mx-auto mb-4 size-12 text-[var(--c-a0aabb)]" />

  424.           <div class="text-base font-extrabold text-[var(--c-172033)]">还没有公开作品</div>

  425.           <div class="mt-2 text-sm text-[var(--c-8a95a6)]">成为第一个分享 AI 作品的人</div>

  426.         </div>

  427.       </div>

  428.     </section>

  429. 

  430.     <!-- ==================== 6. 结尾 CTA ==================== -->

  431.     <section class="relative overflow-hidden bg-[var(--c-f3f7fb)] py-16 lg:py-24">

  432.       <div class="pointer-events-none absolute -right-20 top-0 size-72 rounded-full bg-[var(--c-0b8cff)]/10 blur-3xl" />

  433.       <div class="relative mx-auto max-w-3xl px-4 text-center sm:px-6">

  434.         <h2 class="text-3xl font-extrabold text-[var(--c-172033)] sm:text-4xl">现在就开始，几秒钟拿到结果</h2>

  435.         <p class="mt-4 text-base text-[var(--c-66758a)]">注册即可体验，按点数付费，不用订阅、不绑定套餐。</p>

  436. 

  437.         <div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">

  438.           <NuxtLink

  439.             to="/writing/naming/"

  440.             class="inline-flex h-13 w-full items-center justify-center gap-2 rounded-full bg-gradient-to-r from-[var(--c-0b8cff)] to-[var(--c-3aa9ff)] px-8 text-base font-bold text-white shadow-[0_14px_30px_var(--sh-11-140-255-280)] transition-all hover:-translate-y-0.5 sm:w-auto"

  441.           >

  442.             <UIcon name="i-lucide-zap" class="size-5" />

  443.             开始创作

  444.           </NuxtLink>

  445.           <NuxtLink

  446.             to="/recharge"

  447.             class="inline-flex h-13 w-full items-center justify-center rounded-full bg-[var(--c-ffffff)] px-8 text-base font-bold text-[var(--c-0b8cff)] shadow-[0_8px_20px_var(--sh-23-32-51-60)] transition-colors hover:bg-[var(--c-f7faff)] sm:w-auto"

  448.           >

  449.             查看套餐

  450.           </NuxtLink>

  451.         </div>

  452. 

  453.         <div class="mt-10 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-[var(--c-66758a)]">

  454.           <span v-for="p in promises" :key="p" class="inline-flex items-center gap-1.5">

  455.             <UIcon name="i-lucide-circle-check" class="size-4 text-[var(--c-17a65a)]" />

  456.             {{ p }}

  457.           </span>

  458.         </div>

  459.       </div>

  460.     </section>

  461.   </div>

  462. </template>

  463. 

  464. <script setup>

  465. useSeoMeta({

  466.   title: 'AI在线网站-你的AI伙伴让创作更简单',

  467.   description: 'AI在线是一个 AI 工具的集合地，可以找到各种各样的 AI 工具，满足你的不同需求。无论你是想翻译一段文字，还是想生成一篇文章，或者是想制作一张图片，AI在线都能为你提供帮助， AI 工具大全宝库！',

  468.   keywords: 'AI，AI在线，AI伙伴，免费AI网站',

  469. })

  470. useHead({

  471.   link: [{ rel: 'canonical', href: 'https://tool.aionline.cc/' }],

  472. })

  473. 

  474. import { COLUMNS, articleUrl, colName, formatTime } from '~/composables/useArticle'

  475. 

  476. const { post } = useApi()

  477. const { isLogin } = useUser()

  478. 

  479. // ==================== 首屏动漫头像示例（后台可配，带兜底） ====================

  480. const demo = ref({

  481.   original: 'https://cdn.aionline.cc/ai/anime/original_1.png',

  482.   anime: 'https://cdn.aionline.cc/ai/anime/anime_1.png',

  483. })

  484. 

  485. async function loadDemo() {

  486.   try {

  487.     const res = await post('/common/getconfig', { keys: 'anime_demo_v2,anime_demo' })

  488.     const rows = res.list || []

  489.     const v2 = rows.find(i => i.key === 'anime_demo_v2')

  490.     if (v2?.value) {

  491.       const data = typeof v2.value === 'string' ? JSON.parse(v2.value) : v2.value

  492.       const first = Array.isArray(data) ? data[0] : data

  493.       if (first?.original && first?.anime) {

  494.         demo.value = { original: first.original, anime: first.anime }

  495.         return

  496.       }

  497.     }

  498.     const old = rows.find(i => i.key === 'anime_demo')

  499.     if (old?.value) {

  500.       const pics = String(old.value).split(',').map(s => s.trim()).filter(Boolean)

  501.       if (pics.length >= 2) demo.value = { original: pics[0], anime: pics[1] }

  502.     }

  503.   } catch {

  504.     // 保留兜底图

  505.   }

  506. }

  507. 

  508. // ==================== 静态内容 ====================

  509. const tools = [

  510.   {

  511.     title: 'AI 取名',

  512.     desc: '结合姓氏、性别、出生信息，从诗经楚辞典故中生成有出处的好名字，含寓意与音律解析。',

  513.     to: '/writing/naming/',

  514.     icon: 'i-lucide-signature',

  515.     iconBg: 'bg-[var(--c-eef7ff)]',

  516.     iconColor: 'text-[var(--c-0b8cff)]',

  517.     appKey: 'ai-name',

  518.     price: '点数计费',

  519.     hot: true,

  520.   },

  521.   {

  522.     title: '动漫头像',

  523.     desc: '上传一张自拍，一键生成专属动漫风格头像，多种画风可选，支持原图对比。',

  524.     to: '/draw/anime/',

  525.     icon: 'i-lucide-user-round',

  526.     iconBg: 'bg-[var(--c-f3f0ff)]',

  527.     iconColor: 'text-[var(--c-7a5af8)]',

  528.     appKey: 'anime-avatar',

  529.     billingParams: { model: 'tencent_anime' },

  530.     price: '点数计费',

  531.     hot: true,

  532.   },

  533.   {

  534.     title: '证件照',

  535.     desc: '一键生成标准证件照，自动换底色、智能裁剪，满足各类办证尺寸要求。',

  536.     to: '/id-photo',

  537.     icon: 'i-lucide-id-card',

  538.     iconBg: 'bg-[var(--c-edfdf4)]',

  539.     iconColor: 'text-[var(--c-17a65a)]',

  540.     appKey: 'id-photo',

  541.     price: '按张计费',

  542.     soon: false,

  543.   },

  544.   {

  545.     title: '形象照 / 写真',

  546.     desc: '上传一张人像，生成商务形象照、日常职业照，或古风、港风等艺术写真，一次最多 4 张。',

  547.     to: '/portrait-photo',

  548.     icon: 'i-lucide-camera',

  549.     iconBg: 'bg-[var(--c-fff4ec)]',

  550.     iconColor: 'text-[var(--c-ff681f)]',

  551.     appKey: 'portrait-photo',

  552.     billingParams: { model: 'standard', count: 1 },

  553.     price: '按张计费',

  554.     soon: false,

  555.   },

  556.   {

  557.     title: '老照片修复',

  558.     desc: '黑白、泛黄、有划痕的老照片，一键修复破损并自然上色，支持前后对比。',

  559.     to: '/old-photo',

  560.     icon: 'i-lucide-wand-sparkles',

  561.     iconBg: 'bg-[var(--c-fff4ec)]',

  562.     iconColor: 'text-[var(--c-e85f1c)]',

  563.     appKey: 'old-photo',

  564.     billingParams: { mode: 'colorize' },

  565.     price: '按张计费',

  566.     soon: false,

  567.   },

  568.   {

  569.     title: '更多能力',

  570.     desc: '文本转语音、AI 装修设计等更多 AI 能力持续上线，敬请期待。',

  571.     to: '#',

  572.     icon: 'i-lucide-layout-grid',

  573.     iconBg: 'bg-[var(--c-f1f5fa)]',

  574.     iconColor: 'text-[var(--c-8a97a8)]',

  575.     price: '持续更新',

  576.     soon: true,

  577.   },

  578. ]

  579. 

  580. const { data: toolBillingData } = await useAsyncData('home-tool-billing', async () => {

  581.   const billableTools = tools.filter(tool => tool.appKey)

  582.   const entries = await Promise.all(billableTools.map(async (tool) => {

  583.     try {

  584.       const res = await post('/billing/config', {

  585.         app_key: tool.appKey,

  586.         ...(tool.billingParams || {}),

  587.       })

  588.       const rawPoints = res?.data?.quote?.points ?? res?.data?.points

  589.       const points = Number(rawPoints)

  590.       return [tool.appKey, Number.isFinite(points) ? points : null]

  591.     } catch {

  592.       return [tool.appKey, null]

  593.     }

  594.   }))

  595.   return Object.fromEntries(entries)

  596. })

  597. 

  598. function toolPrice(tool) {

  599.   const points = toolBillingData.value?.[tool.appKey]

  600.   return points === 0 ? '免费使用' : tool.price

  601. }

  602. 

  603. const promises = ['点数长期有效', '多端共享余额', '结果可下载复制', '生成失败不扣点']

  604. 

  605. // ==================== 点数套餐（真实数据） ====================

  606. const packages = ref([])

  607. const pkgLoading = ref(true)

  608. 

  609. async function loadPackages() {

  610.   try {

  611.     const res = await post('/point/packagelist')

  612.     packages.value = (res.list || []).slice(0, 3)

  613.   } catch {

  614.     packages.value = []

  615.   } finally {

  616.     pkgLoading.value = false

  617.   }

  618. }

  619. 

  620. // 中间一档或带「推荐」角标的高亮

  621. function isFeatured(pkg, idx) {

  622.   const hasRecommend = packages.value.some(p => p.badge === '推荐')

  623.   return hasRecommend ? pkg.badge === '推荐' : idx === 1

  624. }

  625. function pkgIcon(idx) {

  626.   return ['i-lucide-sprout', 'i-lucide-rocket', 'i-lucide-crown'][idx] || 'i-lucide-coins'

  627. }

  628. function pkgSubtitle(pkg) {

  629.   const p = Number(pkg.points || 0)

  630.   if (p <= 200) return '轻量体验，先试试手感'

  631.   if (p <= 1500) return '日常创作，性价比最高'

  632.   return '高频创作，一次买够'

  633. }

  634. function pkgFeatures(pkg) {

  635.   return [

  636.     `获得 ${pkg.points} 点数`,

  637.     '点数长期有效，不过期',

  638.     '小程序 / H5 / PC 通用',

  639.     '可用于全部 AI 工具',

  640.   ]

  641. }

  642. 

  643. // ==================== 热门资讯（移植原 PC 首页，SSR 渲染利于 SEO） ====================

  644. const { data: newsData } = await useAsyncData('home-news', () =>

  645.   post('/article/getlist', { page_no: 1, page_size: 7, is_recommend: 1 })

  646.     .catch(() => ({ list: [] })))

  647. 

  648. const news = computed(() =>

  649.   (newsData.value?.list || []).map(i => ({ ...i, url: articleUrl(i), time: formatTime(i.publish_time, 'YYYY-MM-DD') })))

  650. const topNews = computed(() => news.value[0] || null)

  651. const restNews = computed(() => news.value.slice(1, 7))

  652. 

  653. /** 阅读量简写：1280 → 1.3k */

  654. function formatViews(n) {

  655.   const v = Number(n || 0)

  656.   return v >= 1000 ? `${(v / 1000).toFixed(1)}k` : String(v)

  657. }

  658. 

  659. // ==================== AI 绘画作品（数据源同原 PC 首页：/art/getlist） ====================

  660. // ai_type：2 MJ绘画 3/7/8 AI画头像 4 变年龄 5 变性别 6 AI绘画

  661. const ART_TYPE_MAP = {

  662.   2: 'MJ 绘画', 3: 'AI 头像', 4: 'AI 变年龄',

  663.   5: 'AI 变性别', 6: 'AI 绘画', 7: 'AI 头像', 8: 'AI 头像',

  664. }

  665. function artTypeName(type) {

  666.   return ART_TYPE_MAP[Number(type)] || 'AI 作品'

  667. }

  668. 

  669. const { data: artData } = await useAsyncData('home-art', () =>

  670.   post('/art/getlist', { page_no: 1, page_size: 30 }).catch(() => ({ list: [] })))

  671. 

  672. // 展示 12 张：首图占 2×2，其余 1×1，桌面 5 列共 3 行正好铺满

  673. const artworks = computed(() => (artData.value?.list || []).filter(i => i.img).slice(0, 12))

  674. 

  675. onMounted(() => {

  676.   loadDemo()

  677.   loadPackages()

  678. })

  679. 

  680. watch(isLogin, () => loadPackages())

  681. </script>

  682. 

  683. <style scoped>

  684. /* Tailwind 没有 h-13，这里补一个统一的按钮高度 */

  685. .h-13 {

  686.   height: 3.25rem;

  687. }

  688. </style>