236 lines
14 KiB
PHP
236 lines
14 KiB
PHP
@extends('layouts.app')
|
||
|
||
@section('content')
|
||
{{-- Hero：由后台「首页轮播」管理（富文本 + 双 CTA）；mode=carousel 轮播，mode=single 独立单图 --}}
|
||
<section class="relative overflow-hidden bg-gradient-to-br from-primary to-primary-hover text-white">
|
||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
|
||
@if ($heroSlides->isEmpty())
|
||
<p class="text-white/80">尚未配置首页轮播内容，请到后台「首页轮播」添加。</p>
|
||
@elseif ($heroMode === 'single')
|
||
@include('partials.hero-slide', ['slide' => $heroSlides->first()])
|
||
@else
|
||
<div class="hero-carousel" data-hero>
|
||
<div class="hero-track">
|
||
@foreach ($heroSlides as $slide)
|
||
<div class="hero-slide @if ($loop->first) is-active @endif" data-index="{{ $loop->index }}">
|
||
@include('partials.hero-slide', ['slide' => $slide])
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
|
||
@if ($heroSlides->count() > 1)
|
||
<button type="button" class="hero-arrow hero-prev" aria-label="上一条" data-prev>‹</button>
|
||
<button type="button" class="hero-arrow hero-next" aria-label="下一条" data-next>›</button>
|
||
<div class="hero-dots">
|
||
@foreach ($heroSlides as $slide)
|
||
<button type="button" class="hero-dot @if ($loop->first) is-active @endif" data-dot="{{ $loop->index }}" aria-label="第 {{ $loop->index + 1 }} 条"></button>
|
||
@endforeach
|
||
</div>
|
||
@endif
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</section>
|
||
|
||
{{-- 核心产品 --}}
|
||
<section class="px-4 sm:px-6 lg:px-8 py-14 lg:py-20">
|
||
<div class="max-w-8xl mx-auto">
|
||
<div class="flex flex-wrap items-end justify-between gap-4">
|
||
<div>
|
||
<h2 class="text-2xl font-bold tracking-tight text-fg">核心产品</h2>
|
||
<p class="mt-1 text-sm text-muted">覆盖多口 TypeC 接口、协议转换与同步整流控制芯片</p>
|
||
</div>
|
||
<a href="{{ url('/products') }}" class="text-sm font-medium text-primary hover:underline">查看全部产品 →</a>
|
||
</div>
|
||
|
||
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||
@forelse ($products as $product)
|
||
<a href="{{ route('products.show', $product->slug) }}" class="group flex flex-col rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
|
||
<span class="inline-block w-fit rounded bg-primary-soft px-2 py-1 font-mono text-xs font-medium text-primary">{{ $product->model ?: $product->slug }}</span>
|
||
<h3 class="mt-4 text-lg font-semibold text-fg transition group-hover:text-primary">{{ $product->name }}</h3>
|
||
<p class="mt-2 line-clamp-3 text-sm text-muted">{{ $product->summary ?: Str::limit(strip_tags($product->description), 90) }}</p>
|
||
<span class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-primary">
|
||
查看详情 <x-icon name="arrow" :size="16" />
|
||
</span>
|
||
</a>
|
||
@empty
|
||
<p class="text-sm text-muted">产品正在整理中，敬请期待。</p>
|
||
@endforelse
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- 解决方案 --}}
|
||
<section class="px-4 sm:px-6 lg:px-8 py-14 lg:py-20">
|
||
<div class="max-w-8xl mx-auto">
|
||
<div class="flex flex-wrap items-end justify-between gap-4">
|
||
<div>
|
||
<h2 class="text-2xl font-bold tracking-tight text-fg">解决方案</h2>
|
||
<p class="mt-1 text-sm text-muted">覆盖 30W–140W 多功率段与多场景的快充参考设计</p>
|
||
</div>
|
||
<a href="{{ url('/solutions') }}" class="text-sm font-medium text-primary hover:underline">查看全部方案 →</a>
|
||
</div>
|
||
|
||
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||
@forelse ($solutions as $solution)
|
||
<a href="{{ route('solutions.show', $solution->slug) }}" class="group flex flex-col rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
|
||
<span class="inline-block w-fit rounded bg-primary-soft px-2 py-1 font-mono text-xs font-medium text-primary">{{ $solution->power }}</span>
|
||
<h3 class="mt-4 text-lg font-semibold text-fg transition group-hover:text-primary">{{ $solution->name }}</h3>
|
||
<p class="mt-2 line-clamp-3 text-sm text-muted">{{ $solution->summary }}</p>
|
||
<span class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-primary">
|
||
查看详情 <x-icon name="arrow" :size="16" />
|
||
</span>
|
||
</a>
|
||
@empty
|
||
<p class="text-sm text-muted">方案正在整理中，敬请期待。</p>
|
||
@endforelse
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- 技术文章 --}}
|
||
@if ($articles->isNotEmpty())
|
||
<section class="border-t border-line bg-surface px-4 py-14 sm:px-6 lg:py-20">
|
||
<div class="max-w-8xl mx-auto">
|
||
<div class="flex flex-wrap items-center justify-between gap-4">
|
||
<div>
|
||
<h2 class="text-2xl font-bold tracking-tight text-fg">技术文章</h2>
|
||
<p class="mt-1 text-sm text-muted">设计指南、应用笔记与行业方案解读</p>
|
||
</div>
|
||
<a href="{{ url('/articles') }}" class="text-sm font-medium text-primary hover:underline">浏览全部文章 →</a>
|
||
</div>
|
||
|
||
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||
@foreach ($articles as $article)
|
||
<a href="{{ route('articles.show', $article->slug) }}" class="group flex flex-col rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
|
||
<span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-soft text-primary">
|
||
<x-icon name="doc" :size="22" />
|
||
</span>
|
||
<h3 class="mt-4 text-lg font-semibold text-fg transition group-hover:text-primary">{{ $article->title }}</h3>
|
||
<p class="mt-2 line-clamp-3 text-sm text-muted">{{ $article->summary ?: Str::limit(strip_tags($article->body), 90) }}</p>
|
||
<span class="mt-4 text-xs text-muted">{{ $article->published_at?->format('Y-m-d') }}</span>
|
||
</a>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
{{-- 新闻动态 --}}
|
||
@if ($news->isNotEmpty())
|
||
<section class="border-t border-line bg-surface px-4 py-14 sm:px-6 lg:py-20">
|
||
<div class="max-w-8xl mx-auto">
|
||
<div class="flex flex-wrap items-center justify-between gap-4">
|
||
<div>
|
||
<h2 class="text-2xl font-bold tracking-tight text-fg">新闻动态</h2>
|
||
<p class="mt-1 text-sm text-muted">行业资讯、公司动态与展会活动</p>
|
||
</div>
|
||
<a href="{{ url('/news') }}" class="text-sm font-medium text-primary hover:underline">浏览全部新闻 →</a>
|
||
</div>
|
||
|
||
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||
@foreach ($news as $item)
|
||
<a href="{{ route('news.show', $item->slug) }}" class="group flex flex-col rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
|
||
<span class="inline-block w-fit rounded bg-primary-soft px-2 py-1 font-mono text-xs font-medium text-primary">{{ $item->categoryLabel() }}</span>
|
||
<h3 class="mt-4 text-lg font-semibold text-fg transition group-hover:text-primary">{{ $item->title }}</h3>
|
||
<p class="mt-2 line-clamp-3 text-sm text-muted">{{ $item->summary }}</p>
|
||
<span class="mt-4 text-xs text-muted">{{ $item->published_at?->format('Y-m-d') }}</span>
|
||
</a>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
{{-- 能力与资源 --}}
|
||
<section class="px-4 sm:px-6 lg:px-8 py-14 lg:py-20">
|
||
<div class="max-w-8xl mx-auto">
|
||
<h2 class="text-2xl font-bold tracking-tight text-fg">能力与资源</h2>
|
||
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||
<a href="{{ url('/products') }}" class="group rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
|
||
<span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-soft text-primary"><x-icon name="box" :size="22" /></span>
|
||
<h3 class="mt-4 font-semibold text-fg">产品中心</h3>
|
||
<p class="mt-1 text-sm text-muted">多口 TypeC 接口IC 完整选型。</p>
|
||
</a>
|
||
<a href="{{ url('/articles') }}" class="group rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
|
||
<span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-soft text-primary"><x-icon name="doc" :size="22" /></span>
|
||
<h3 class="mt-4 font-semibold text-fg">技术文章</h3>
|
||
<p class="mt-1 text-sm text-muted">设计指南、应用笔记与方案解读。</p>
|
||
</a>
|
||
<a href="{{ url('/glossary') }}" class="group rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
|
||
<span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-soft text-primary"><x-icon name="book" :size="22" /></span>
|
||
<h3 class="mt-4 font-semibold text-fg">术语库</h3>
|
||
<p class="mt-1 text-sm text-muted">PD / PHY / 快充协议关键术语速查。</p>
|
||
</a>
|
||
<a href="{{ url('/forum') }}" class="group rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
|
||
<span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-soft text-primary"><x-icon name="chat" :size="22" /></span>
|
||
<h3 class="mt-4 font-semibold text-fg">技术论坛</h3>
|
||
<p class="mt-1 text-sm text-muted">与工程师交流选型、调试与量产经验。</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- CTA 条 --}}
|
||
<section class="px-4 sm:px-6 lg:px-8 pb-16">
|
||
<div class="max-w-8xl mx-auto rounded-2xl bg-surface-2 px-6 py-10 text-center sm:px-10">
|
||
<h2 class="text-xl font-bold tracking-tight text-fg sm:text-2xl">需要选型支持或样品申请？</h2>
|
||
<p class="mt-2 text-sm text-muted">我们的应用工程师可协助您完成方案评估与量产导入。</p>
|
||
<a href="{{ url('/contact') }}" class="mt-6 inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 text-sm font-semibold text-white transition hover:bg-primary-hover">
|
||
联系我们 <x-icon name="arrow" :size="18" />
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
(function () {
|
||
var carousels = document.querySelectorAll('[data-hero]');
|
||
carousels.forEach(function (root) {
|
||
var slides = Array.prototype.slice.call(root.querySelectorAll('.hero-slide'));
|
||
var dots = Array.prototype.slice.call(root.querySelectorAll('.hero-dot'));
|
||
if (slides.length < 2) return;
|
||
|
||
var current = 0;
|
||
var timer = null;
|
||
var INTERVAL = 6000;
|
||
|
||
function show(index) {
|
||
current = (index + slides.length) % slides.length;
|
||
slides.forEach(function (s, i) {
|
||
s.classList.toggle('is-active', i === current);
|
||
});
|
||
dots.forEach(function (d, i) {
|
||
d.classList.toggle('is-active', i === current);
|
||
});
|
||
}
|
||
|
||
function next() { show(current + 1); }
|
||
function prev() { show(current - 1); }
|
||
|
||
function start() {
|
||
stop();
|
||
timer = setInterval(next, INTERVAL);
|
||
}
|
||
function stop() {
|
||
if (timer) { clearInterval(timer); timer = null; }
|
||
}
|
||
|
||
root.querySelector('[data-next]').addEventListener('click', function () { next(); start(); });
|
||
root.querySelector('[data-prev]').addEventListener('click', function () { prev(); start(); });
|
||
dots.forEach(function (d) {
|
||
d.addEventListener('click', function () {
|
||
show(parseInt(d.getAttribute('data-dot'), 10));
|
||
start();
|
||
});
|
||
});
|
||
|
||
root.addEventListener('mouseenter', stop);
|
||
root.addEventListener('mouseleave', start);
|
||
|
||
show(0);
|
||
start();
|
||
});
|
||
})();
|
||
</script>
|
||
@endsection
|