leiyun
/
pc_nuxt
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
7 Commits
1 Branch
586 KiB
 
 
 
 
Struktur: 729fc71de3
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „729fc71de3“
${ noResults }
pc_nuxt/app/pages/index.vue

706 Zeilen
33 KiB
Originalformat Blame Verlauf 

  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 || pkgBonusPercent(pkg)" class="mt-1 flex min-h-5 items-center gap-2 text-xs">

  199.             <span v-if="pkg.old_price_yuan" class="text-[var(--c-a0aabb)] line-through">￥{{ pkg.old_price_yuan }}</span>

  200.             <span

  201.               v-if="pkgBonusPercent(pkg)"

  202.               class="rounded-full bg-[var(--c-edfdf4)] px-2 py-0.5 font-extrabold text-[var(--c-159a54)]"

  203.             >

  204.               多送{{ pkgBonusPercent(pkg) }}%

  205.             </span>

  206.           </div>

  207. 

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

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

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

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

  212.             </li>

  213.           </ul>

  214. 

  215.           <NuxtLink

  216.             to="/recharge"

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

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

  219.               ? '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'

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

  221.           >

  222.             立即充值

  223.           </NuxtLink>

  224.         </div>

  225.       </div>

  226. 

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

  228.     </section>

  229. 

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

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

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

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

  234.           <div>

  235.             <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)]">

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

  237.               AI 资讯

  238.             </span>

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

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

  241.           </div>

  242.           <NuxtLink

  243.             to="/info"

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

  245.           >

  246.             查看全部资讯

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

  248.           </NuxtLink>

  249.         </div>

  250. 

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

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

  253.           <NuxtLink

  254.             v-for="col in COLUMNS"

  255.             :key="col.colId"

  256.             :to="col.path"

  257.             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)]"

  258.           >

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

  260.             {{ col.name }}

  261.           </NuxtLink>

  262.         </div>

  263. 

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

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

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

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

  268.             <NuxtLink

  269.               :to="topNews.url"

  270.               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)]"

  271.             >

  272.               <img

  273.                 v-if="topNews.cover"

  274.                 :src="topNews.cover"

  275.                 :alt="topNews.title"

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

  277.                 loading="lazy"

  278.               >

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

  280. 

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

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

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

  284.                 </span>

  285.               </div>

  286. 

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

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

  289.                   {{ topNews.title }}

  290.                 </h3>

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

  292.                   {{ topNews.info }}

  293.                 </p>

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

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

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

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

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

  299.                   </span>

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

  301.                     阅读全文

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

  303.                   </span>

  304.                 </div>

  305.               </div>

  306.             </NuxtLink>

  307.           </article>

  308. 

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

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

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

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

  313.                 <NuxtLink

  314.                   :to="item.url"

  315.                   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)]"

  316.                 >

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

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

  319.                     <img

  320.                       v-if="item.cover"

  321.                       :src="item.cover"

  322.                       :alt="item.title"

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

  324.                       loading="lazy"

  325.                     >

  326.                     <span

  327.                       v-else

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

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

  330.                   </div>

  331. 

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

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

  334.                       {{ item.title }}

  335.                     </h3>

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

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

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

  339.                       </span>

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

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

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

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

  344.                       </span>

  345.                     </div>

  346.                   </div>

  347.                 </NuxtLink>

  348.               </article>

  349.             </div>

  350.           </div>

  351.         </div>

  352.       </div>

  353.     </section>

  354. 

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

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

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

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

  359.           <div>

  360.             <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)]">

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

  362.               作品广场

  363.             </span>

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

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

  366.           </div>

  367.           <NuxtLink

  368.             to="/pic/"

  369.             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)]"

  370.           >

  371.             浏览全部作品

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

  373.           </NuxtLink>

  374.         </div>

  375. 

  376.         <!--

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

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

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

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

  381.         -->

  382.         <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">

  383.           <NuxtLink

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

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

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

  387.             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)]"

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

  389.           >

  390.             <img

  391.               :src="item.img"

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

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

  394.               loading="lazy"

  395.             >

  396. 

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

  398.             <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">

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

  400.             </span>

  401. 

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

  403.             <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">

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

  405.                 <p

  406.                   v-if="item.prompts"

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

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

  409.                 >

  410.                   {{ item.prompts }}

  411.                 </p>

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

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

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

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

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

  417.                     {{ item.like_num || 0 }}

  418.                   </span>

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

  420.                     查看

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

  422.                   </span>

  423.                 </div>

  424.               </div>

  425.             </div>

  426.           </NuxtLink>

  427.         </div>

  428. 

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

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

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

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

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

  434.         </div>

  435.       </div>

  436.     </section>

  437. 

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

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

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

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

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

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

  444. 

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

  446.           <NuxtLink

  447.             to="/writing/naming/"

  448.             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"

  449.           >

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

  451.             开始创作

  452.           </NuxtLink>

  453.           <NuxtLink

  454.             to="/recharge"

  455.             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"

  456.           >

  457.             查看套餐

  458.           </NuxtLink>

  459.         </div>

  460. 

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

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

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

  464.             {{ p }}

  465.           </span>

  466.         </div>

  467.       </div>

  468.     </section>

  469.   </div>

  470. </template>

  471. 

  472. <script setup>

  473. useSeoMeta({

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

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

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

  477. })

  478. useHead({

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

  480. })

  481. 

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

  483. 

  484. const { post } = useApi()

  485. const { isLogin } = useUser()

  486. 

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

  488. const demo = ref({

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

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

  491. })

  492. 

  493. async function loadDemo() {

  494.   try {

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

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

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

  498.     if (v2?.value) {

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

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

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

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

  503.         return

  504.       }

  505.     }

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

  507.     if (old?.value) {

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

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

  510.     }

  511.   } catch {

  512.     // 保留兜底图

  513.   }

  514. }

  515. 

  516. // ==================== 静态内容 ====================

  517. const tools = [

  518.   {

  519.     title: 'AI 取名',

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

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

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

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

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

  525.     appKey: 'ai-name',

  526.     price: '点数计费',

  527.     hot: true,

  528.   },

  529.   {

  530.     title: '动漫头像',

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

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

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

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

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

  536.     appKey: 'anime-avatar',

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

  538.     price: '点数计费',

  539.     hot: true,

  540.   },

  541.   {

  542.     title: '证件照',

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

  544.     to: '/id-photo',

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

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

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

  548.     appKey: 'id-photo',

  549.     price: '按张计费',

  550.     soon: false,

  551.   },

  552.   {

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

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

  555.     to: '/portrait-photo',

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

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

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

  559.     appKey: 'portrait-photo',

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

  561.     price: '按张计费',

  562.     soon: false,

  563.   },

  564.   {

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

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

  567.     to: '/old-photo',

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

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

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

  571.     appKey: 'old-photo',

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

  573.     price: '按张计费',

  574.     soon: false,

  575.   },

  576.   {

  577.     title: '更多能力',

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

  579.     to: '#',

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

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

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

  583.     price: '持续更新',

  584.     soon: true,

  585.   },

  586. ]

  587. 

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

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

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

  591.     try {

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

  593.         app_key: tool.appKey,

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

  595.       })

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

  597.       const points = Number(rawPoints)

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

  599.     } catch {

  600.       return [tool.appKey, null]

  601.     }

  602.   }))

  603.   return Object.fromEntries(entries)

  604. })

  605. 

  606. function toolPrice(tool) {

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

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

  609. }

  610. 

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

  612. 

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

  614. const packages = ref([])

  615. const pkgLoading = ref(true)

  616. 

  617. async function loadPackages() {

  618.   try {

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

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

  621.   } catch {

  622.     packages.value = []

  623.   } finally {

  624.     pkgLoading.value = false

  625.   }

  626. }

  627. 

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

  629. function isFeatured(pkg, idx) {

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

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

  632. }

  633. function pkgIcon(idx) {

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

  635. }

  636. function pkgSubtitle(pkg) {

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

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

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

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

  641. }

  642. function pkgBonusPercent(pkg) {

  643.   const provided = Number(pkg.bonus_percent || 0)

  644.   if (Number.isFinite(provided) && provided > 0) return Math.round(provided)

  645. 

  646.   const price = Number(pkg.price || 0) || Number(pkg.price_yuan || 0) * 100

  647.   const oldPrice = Number(pkg.old_price || 0) || Number(pkg.old_price_yuan || 0) * 100

  648.   if (!Number.isFinite(price) || !Number.isFinite(oldPrice) || price <= 0 || oldPrice <= price) return 0

  649.   return Math.max(0, Math.round((oldPrice / price - 1) * 100))

  650. }

  651. function pkgFeatures(pkg) {

  652.   return [

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

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

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

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

  657.   ]

  658. }

  659. 

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

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

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

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

  664. 

  665. const news = computed(() =>

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

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

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

  669. 

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

  671. function formatViews(n) {

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

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

  674. }

  675. 

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

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

  678. const ART_TYPE_MAP = {

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

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

  681. }

  682. function artTypeName(type) {

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

  684. }

  685. 

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

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

  688. 

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

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

  691. 

  692. onMounted(() => {

  693.   loadDemo()

  694.   loadPackages()

  695. })

  696. 

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

  698. </script>

  699. 

  700. <style scoped>

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

  702. .h-13 {

  703.   height: 3.25rem;

  704. }

  705. </style>