Lucanlee/cloud-chip.cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
Lucanlee
2026-08-08 18:27:38 +08:00
parent efc150c937
commit 060eb79c09
336 changed files with 24613 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/home.blade.php
+235
View File
@@ -0,0 +1,235 @@
@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>&#8249;</button>
<button type="button" class="hero-arrow hero-next" aria-label="下一条" data-next>&#8250;</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