447 lines
14 KiB
PHP
447 lines
14 KiB
PHP
@extends('layouts.site')
|
||
|
||
@section('page_class', 'page-home')
|
||
@section('title', 'AIWeb - AI 聚合导航入口')
|
||
@section('meta_description', '探索 AI 工具、模型、资讯与教程，快速搭建你的 AI 工作流。')
|
||
@section('canonical', url('/'))
|
||
|
||
@section('head')
|
||
<script type="application/ld+json">
|
||
{!! json_encode([
|
||
'@context' => 'https://schema.org',
|
||
'@type' => 'WebSite',
|
||
'name' => 'AIWeb',
|
||
'url' => url('/'),
|
||
'potentialAction' => [
|
||
'@type' => 'SearchAction',
|
||
'target' => route('tools.index').'?q={search_term_string}',
|
||
'query-input' => 'required name=search_term_string',
|
||
],
|
||
], JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT) !!}
|
||
</script>
|
||
<style>
|
||
.home-layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 290px;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.home-hero {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border: 1px solid var(--line-strong);
|
||
border-radius: var(--radius-xl);
|
||
background: linear-gradient(140deg, #f2f6ff, #ebf2ff 60%, #f7f5ff);
|
||
box-shadow: var(--shadow-md);
|
||
padding: 1.1rem;
|
||
}
|
||
|
||
.home-hero::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 220px;
|
||
height: 220px;
|
||
right: -56px;
|
||
top: -66px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(255, 255, 255, .76), rgba(255, 255, 255, .22));
|
||
}
|
||
|
||
.home-hero-inner {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.home-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .3rem;
|
||
border-radius: 999px;
|
||
border: 1px solid var(--line-strong);
|
||
background: rgba(255, 255, 255, .86);
|
||
color: var(--brand-strong);
|
||
padding: .18rem .62rem;
|
||
font-size: .78rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.home-title {
|
||
margin: .72rem 0 .4rem;
|
||
font-family: "Outfit", "Noto Sans SC", sans-serif;
|
||
font-size: clamp(1.45rem, 2.5vw, 2.1rem);
|
||
font-weight: 800;
|
||
color: var(--text-main);
|
||
}
|
||
|
||
.home-subtitle {
|
||
margin: 0;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.home-search {
|
||
margin-top: .95rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .45rem;
|
||
border: 1px solid var(--line-strong);
|
||
border-radius: 999px;
|
||
background: #fff;
|
||
padding: .42rem;
|
||
}
|
||
|
||
.home-search input {
|
||
border: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.home-search .btn {
|
||
border-radius: 999px;
|
||
min-width: 102px;
|
||
}
|
||
|
||
.home-hotwords {
|
||
margin-top: .72rem;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: .4rem;
|
||
}
|
||
|
||
.home-hotword {
|
||
border-radius: 999px;
|
||
border: 1px solid var(--line);
|
||
background: rgba(255, 255, 255, .86);
|
||
color: var(--text-main);
|
||
font-size: .76rem;
|
||
padding: .17rem .55rem;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.home-stats {
|
||
margin-top: .85rem;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: .62rem;
|
||
}
|
||
|
||
.home-stat {
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-lg);
|
||
background: #fff;
|
||
box-shadow: var(--shadow-sm);
|
||
padding: .74rem;
|
||
}
|
||
|
||
.home-stat-label {
|
||
color: var(--text-muted);
|
||
font-size: .78rem;
|
||
}
|
||
|
||
.home-stat-value {
|
||
margin-top: .15rem;
|
||
font-family: "Outfit", "Noto Sans SC", sans-serif;
|
||
font-size: 1.45rem;
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.home-panels {
|
||
margin-top: .9rem;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: .75rem;
|
||
}
|
||
|
||
.home-panel {
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-xl);
|
||
background: #fff;
|
||
box-shadow: var(--shadow-sm);
|
||
padding: .92rem;
|
||
}
|
||
|
||
.home-panel-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: .58rem;
|
||
}
|
||
|
||
.home-panel-head h2,
|
||
.home-panel-head h3 {
|
||
margin: 0;
|
||
font-family: "Outfit", "Noto Sans SC", sans-serif;
|
||
font-size: 1.04rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.home-list {
|
||
display: grid;
|
||
gap: .55rem;
|
||
}
|
||
|
||
.home-list-item {
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-md);
|
||
background: #fff;
|
||
padding: .62rem .7rem;
|
||
}
|
||
|
||
.home-list-item a {
|
||
color: var(--text-main);
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.home-list-item p,
|
||
.home-list-item div {
|
||
margin: .2rem 0 0;
|
||
color: var(--text-muted);
|
||
font-size: .84rem;
|
||
}
|
||
|
||
.home-side {
|
||
display: grid;
|
||
gap: .75rem;
|
||
}
|
||
|
||
.home-side-card {
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-xl);
|
||
background: #fff;
|
||
box-shadow: var(--shadow-sm);
|
||
padding: .9rem;
|
||
}
|
||
|
||
.home-side-card h3 {
|
||
margin: 0 0 .56rem;
|
||
font-family: "Outfit", "Noto Sans SC", sans-serif;
|
||
font-size: 1.02rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.rank-row {
|
||
display: flex;
|
||
gap: .55rem;
|
||
}
|
||
|
||
.rank-row + .rank-row {
|
||
margin-top: .6rem;
|
||
}
|
||
|
||
.rank-index {
|
||
width: 1.36rem;
|
||
height: 1.36rem;
|
||
border-radius: 50%;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #4f64ff, #2f49e5);
|
||
color: #fff;
|
||
font-size: .72rem;
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
margin-top: .1rem;
|
||
}
|
||
|
||
.home-note {
|
||
margin: 0;
|
||
padding-left: 1rem;
|
||
color: var(--text-muted);
|
||
font-size: .9rem;
|
||
}
|
||
|
||
.home-note li + li {
|
||
margin-top: .44rem;
|
||
}
|
||
|
||
@media (max-width: 1199.98px) {
|
||
.home-layout {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 991.98px) {
|
||
.home-panels {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.home-stats {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
@media (max-width: 575.98px) {
|
||
.home-hero,
|
||
.home-panel,
|
||
.home-side-card {
|
||
border-radius: 14px;
|
||
padding: .86rem;
|
||
}
|
||
|
||
.home-search {
|
||
flex-wrap: wrap;
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
|
||
.home-search .btn {
|
||
width: 100%;
|
||
}
|
||
|
||
.home-stats {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
@endsection
|
||
|
||
@section('content')
|
||
<div class="home-layout">
|
||
<div>
|
||
<section class="home-hero">
|
||
<div class="home-hero-inner">
|
||
<span class="home-tag"><i class="bi bi-stars"></i> AI 聚合入口</span>
|
||
<h1 class="home-title">探索 AI，从这里开始</h1>
|
||
<p class="home-subtitle">聚合工具导航、模型推荐、资讯文章和实战教程，让信息不再碎片化。</p>
|
||
|
||
<form method="get" action="{{ route('tools.index') }}" class="home-search">
|
||
<span class="px-2 text-muted"><i class="bi bi-search"></i></span>
|
||
<input class="form-control" type="search" name="q" placeholder="搜索你想找的 AI 工具或场景…" aria-label="搜索 AI 工具关键词" autocomplete="off" spellcheck="false">
|
||
<button class="btn btn-primary" type="submit">搜索工具</button>
|
||
</form>
|
||
|
||
<div class="home-hotwords">
|
||
@foreach($hotKeywords as $keyword)
|
||
<a class="home-hotword" href="{{ route('tools.index', ['q' => $keyword]) }}">{{ $keyword }}</a>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="home-stats">
|
||
<article class="home-stat">
|
||
<div class="home-stat-label">AI 工具</div>
|
||
<div class="home-stat-value">{{ $stats['tools'] }}</div>
|
||
</article>
|
||
<article class="home-stat">
|
||
<div class="home-stat-label">AI 模型</div>
|
||
<div class="home-stat-value">{{ $stats['models'] }}</div>
|
||
</article>
|
||
<article class="home-stat">
|
||
<div class="home-stat-label">AI 资讯</div>
|
||
<div class="home-stat-value">{{ $stats['articles'] }}</div>
|
||
</article>
|
||
<article class="home-stat">
|
||
<div class="home-stat-label">AI 教程</div>
|
||
<div class="home-stat-value">{{ $stats['guides'] }}</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="home-panels">
|
||
<article class="home-panel">
|
||
<div class="home-panel-head">
|
||
<h2><i class="bi bi-grid text-primary me-1"></i>工具精选</h2>
|
||
<a class="tiny-link" href="{{ route('tools.index') }}">更多</a>
|
||
</div>
|
||
<div class="home-list">
|
||
@forelse($toolList->take(4) as $item)
|
||
<article class="home-list-item">
|
||
<a href="{{ route('tools.show', $item->slug) }}">{{ $item->name }}</a>
|
||
<p class="line-clamp-2">{{ $item->summary }}</p>
|
||
</article>
|
||
@empty
|
||
<article class="home-list-item"><p class="mb-0">暂无工具内容</p></article>
|
||
@endforelse
|
||
</div>
|
||
</article>
|
||
|
||
<article class="home-panel">
|
||
<div class="home-panel-head">
|
||
<h2><i class="bi bi-cpu text-primary me-1"></i>模型推荐</h2>
|
||
<a class="tiny-link" href="{{ route('models.index') }}">更多</a>
|
||
</div>
|
||
<div class="home-list">
|
||
@forelse($modelList->take(4) as $item)
|
||
<article class="home-list-item">
|
||
<a href="{{ route('models.show', $item->slug) }}">{{ $item->name }}</a>
|
||
<div>综合评分 {{ $item->total_score }}</div>
|
||
</article>
|
||
@empty
|
||
<article class="home-list-item"><p class="mb-0">暂无模型内容</p></article>
|
||
@endforelse
|
||
</div>
|
||
</article>
|
||
|
||
<article class="home-panel">
|
||
<div class="home-panel-head">
|
||
<h3><i class="bi bi-newspaper text-primary me-1"></i>最新资讯</h3>
|
||
<a class="tiny-link" href="{{ route('news.index') }}">更多</a>
|
||
</div>
|
||
<div class="home-list">
|
||
@forelse($articleList->take(4) as $item)
|
||
<article class="home-list-item">
|
||
<a href="{{ route('news.show', $item->slug) }}">{{ $item->title }}</a>
|
||
<div>{{ $item->published_at?->format('m-d H:i') }}</div>
|
||
</article>
|
||
@empty
|
||
<article class="home-list-item"><p class="mb-0">暂无资讯内容</p></article>
|
||
@endforelse
|
||
</div>
|
||
</article>
|
||
|
||
<article class="home-panel">
|
||
<div class="home-panel-head">
|
||
<h3><i class="bi bi-journal-code text-primary me-1"></i>教程学习</h3>
|
||
<a class="tiny-link" href="{{ route('guides.index') }}">更多</a>
|
||
</div>
|
||
<div class="home-list">
|
||
@forelse($guideList->take(4) as $item)
|
||
<article class="home-list-item">
|
||
<a href="{{ route('guides.show', $item->slug) }}">{{ $item->title }}</a>
|
||
<p class="line-clamp-2">{{ $item->excerpt }}</p>
|
||
</article>
|
||
@empty
|
||
<article class="home-list-item"><p class="mb-0">暂无教程内容</p></article>
|
||
@endforelse
|
||
</div>
|
||
</article>
|
||
</section>
|
||
</div>
|
||
|
||
<aside class="home-side">
|
||
<section class="home-side-card">
|
||
<h3><i class="bi bi-fire text-danger me-1"></i>热门模型榜</h3>
|
||
@forelse($modelList->take(6) as $index => $item)
|
||
<article class="rank-row">
|
||
<span class="rank-index">{{ $index + 1 }}</span>
|
||
<div>
|
||
<a class="fw-semibold" href="{{ route('models.show', $item->slug) }}">{{ $item->name }}</a>
|
||
<div class="small text-muted-soft">综合 {{ $item->total_score }} 分</div>
|
||
</div>
|
||
</article>
|
||
@empty
|
||
<p class="small text-muted-soft mb-0">暂无榜单数据</p>
|
||
@endforelse
|
||
</section>
|
||
|
||
<section class="home-side-card">
|
||
<h3><i class="bi bi-lightning-charge text-warning me-1"></i>学习任务</h3>
|
||
<ol class="home-note">
|
||
<li>先看一篇模型推荐，明确选型标准。</li>
|
||
<li>选一个工具，完成一个真实任务。</li>
|
||
<li>结合教程搭建第一个工作流。</li>
|
||
<li>每周复盘并优化工具组合。</li>
|
||
</ol>
|
||
</section>
|
||
|
||
<section class="home-side-card">
|
||
<h3><i class="bi bi-shield-check text-success me-1"></i>使用说明</h3>
|
||
<ul class="home-note mb-0">
|
||
<li>内容标注来源与发布时间。</li>
|
||
<li>高风险主题会显示风险提示。</li>
|
||
<li>产品信息变化快，请以官方公告为准。</li>
|
||
</ul>
|
||
</section>
|
||
</aside>
|
||
</div>
|
||
@endsection
|