audio/website
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update eversolo site cms and media workflows

Browse Source
This commit is contained in:
Codex
2026-05-31 17:29:08 +08:00
parent 8529276a6f
commit 895d28b88d
144 changed files with 8614 additions and 2814 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/design/home-recognition-five-variants.html
+586
View File
@@ -0,0 +1,586 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Eversolo Home Recognition Section - 5 Concepts</title>
<style>
:root {
--ink: #151719;
--muted: #69707a;
--line: rgba(18, 24, 31, 0.1);
--soft: #f4f6f5;
--surface: #ffffff;
--cold: #dfe7e5;
--sage: #7f928d;
--steel: #56616b;
--gold: #b49a65;
--blue: #45616f;
--green: #60786d;
font-family:
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: #f7f8f7;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
main {
display: grid;
gap: 48px;
padding: 48px 32px 72px;
}
.intro {
max-width: 1180px;
margin: 0 auto;
}
.intro p,
.note {
color: var(--muted);
line-height: 1.75;
}
.variant {
max-width: 1180px;
margin: 0 auto;
overflow: hidden;
border: 1px solid var(--line);
background: var(--surface);
}
.variant > header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
border-bottom: 1px solid var(--line);
padding: 26px 30px;
}
.variant h2 {
margin: 0;
font-size: 24px;
font-weight: 620;
letter-spacing: 0;
}
.variant header span {
color: var(--muted);
font-size: 13px;
}
.canvas {
padding: 34px;
}
.eyebrow {
color: var(--steel);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.section-title {
margin: 8px 0 0;
font-size: 34px;
font-weight: 620;
letter-spacing: 0;
}
.subcopy {
max-width: 620px;
margin: 12px 0 0;
color: var(--muted);
font-size: 15px;
line-height: 1.8;
}
.award {
display: grid;
gap: 8px;
min-height: 98px;
align-content: center;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.74);
padding: 18px;
}
.award strong {
font-size: 15px;
font-weight: 620;
line-height: 1.45;
}
.award small,
.source {
color: var(--muted);
font-size: 12px;
line-height: 1.5;
}
.badge {
display: inline-flex;
width: max-content;
align-items: center;
gap: 8px;
color: var(--steel);
font-size: 12px;
font-weight: 650;
}
.badge::before {
width: 28px;
height: 28px;
border: 1px solid rgba(86, 97, 107, 0.24);
background: linear-gradient(180deg, #f8faf9, #e9eeec);
content: "";
}
.quote {
line-height: 1.75;
}
.quote p {
margin: 0;
}
.v1 .canvas {
background: linear-gradient(180deg, #f8f9f8 0%, #eef2f1 100%);
}
.v1 .award-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 24px;
}
.v1 .award {
border-right: 0;
}
.v1 .award:last-child {
border-right: 1px solid var(--line);
}
.v1 .voices {
display: grid;
grid-template-columns: 1.25fr repeat(2, 1fr);
gap: 1px;
margin-top: 14px;
background: var(--line);
}
.v1 .quote {
min-height: 184px;
background: white;
padding: 24px;
}
.v1 .quote:first-child {
background: #151719;
color: white;
}
.v1 .quote:first-child .source {
color: rgba(255, 255, 255, 0.65);
}
.v2 .canvas {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 28px;
background: #fbfbfa;
}
.v2 .left {
display: grid;
align-content: space-between;
min-height: 440px;
border-right: 1px solid var(--line);
padding-right: 28px;
}
.v2 .hero-quote {
margin-top: 44px;
font-size: 30px;
font-weight: 540;
line-height: 1.42;
}
.v2 .awards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.v2 .voice-list {
display: grid;
gap: 10px;
}
.v2 .voice-row {
display: grid;
grid-template-columns: 150px 1fr;
gap: 18px;
border-bottom: 1px solid var(--line);
padding: 18px 0;
}
.v3 .canvas {
background: #f3f6f5;
}
.v3 .matrix {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
margin-top: 28px;
}
.v3 .metric {
grid-column: span 3;
min-height: 154px;
border: 1px solid var(--line);
background: #ffffff;
padding: 20px;
}
.v3 .metric .number {
color: var(--green);
font-size: 44px;
font-weight: 600;
}
.v3 .quote-band {
grid-column: span 8;
display: grid;
align-content: center;
min-height: 220px;
background: #202629;
color: white;
padding: 28px;
}
.v3 .quote-band p {
max-width: 650px;
margin: 0;
font-size: 24px;
line-height: 1.55;
}
.v3 .side-voices {
grid-column: span 4;
display: grid;
gap: 12px;
}
.v3 .side-voices .quote {
border: 1px solid var(--line);
background: white;
padding: 18px;
}
.v4 .canvas {
background: #121618;
color: #f5f6f4;
}
.v4 .subcopy,
.v4 .source,
.v4 .eyebrow {
color: rgba(245, 246, 244, 0.66);
}
.v4 .stage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 28px;
}
.v4 .award-wall,
.v4 .voice-wall {
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.045);
padding: 22px;
}
.v4 .award-wall {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.v4 .award {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.055);
}
.v4 .voice-wall {
display: grid;
gap: 18px;
}
.v4 .quote p {
color: rgba(255, 255, 255, 0.9);
}
.v5 .canvas {
background: #f7f8f8;
}
.v5 .board {
display: grid;
grid-template-columns: 320px 1fr;
gap: 18px;
margin-top: 28px;
}
.v5 .index {
display: grid;
gap: 10px;
}
.v5 .index-item {
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--line);
padding: 14px 0;
color: var(--steel);
font-size: 14px;
}
.v5 .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.v5 .quote-card {
min-height: 210px;
border: 1px solid var(--line);
background: white;
padding: 20px;
}
.v5 .quote-card.featured {
grid-column: span 2;
background: #e8efed;
}
.v5 .quote-card.featured p {
max-width: 520px;
font-size: 24px;
line-height: 1.55;
}
@media (max-width: 900px) {
main {
padding: 24px 16px 48px;
}
.variant > header,
.canvas,
.v2 .canvas {
padding: 22px;
}
.v1 .award-strip,
.v1 .voices,
.v2 .canvas,
.v2 .awards,
.v3 .matrix,
.v4 .stage,
.v4 .award-wall,
.v5 .board,
.v5 .cards {
display: grid;
grid-template-columns: 1fr;
}
.v2 .left {
min-height: auto;
border-right: 0;
border-bottom: 1px solid var(--line);
padding-right: 0;
padding-bottom: 24px;
}
.v2 .voice-row {
grid-template-columns: 1fr;
}
.v3 .metric,
.v3 .quote-band,
.v3 .side-voices,
.v5 .quote-card.featured {
grid-column: span 1;
}
}
</style>
</head>
<body>
<main>
<section class="intro">
<div class="eyebrow">Eversolo homepage section exploration</div>
<h1>首页 Award 与媒体声音区 - 五版设计方向</h1>
<p>
同一批奖项与媒体评价内容，分别探索权威背书、编辑化叙事、指标化扫描、深色听音室、媒体看板五种方向。
这些方案保留 Eversolo 当前的克制、理性和音频产品质感，避免营销页式大卡堆叠。
</p>
</section>
<section class="variant v1">
<header>
<h2>01 Authority Strip</h2>
<span>最稳妥：保留现有双层结构，但提升信息层级</span>
</header>
<div class="canvas">
<div class="eyebrow">Awards & Press</div>
<h3 class="section-title">被专业机构和真实聆听者持续验证</h3>
<p class="subcopy">奖项先建立可信度，媒体声音再解释这种可信度来自哪里。</p>
<div class="award-strip">
<div class="award"><span class="badge">IF</span><strong>2026 iF 设计奖</strong><small>2026</small></div>
<div class="award"><span class="badge">EISA</span><strong>年度超值流媒体功放</strong><small>2025-2026</small></div>
<div class="award"><span class="badge">EISA</span><strong>年度高端流媒体播放器</strong><small>2025-2026</small></div>
<div class="award"><span class="badge">HFN</span><strong>Hi-Fi News Outstanding Product</strong><small>2025</small></div>
</div>
<div class="voices">
<div class="quote">
<div class="source">EISA</div>
<p>“However you use Eversolo’s streamer, your music will sound and look great.”</p>
</div>
<div class="quote">
<div class="source">Darko Audio</div>
<p>“I have yet to experience one that nails everything quite like Eversolo does.”</p>
</div>
<div class="quote">
<div class="source">AVForums</div>
<p>“It combines sound quality and complete functionality into a truly outstanding all-rounder.”</p>
</div>
</div>
</div>
</section>
<section class="variant v2">
<header>
<h2>02 Editorial Lead</h2>
<span>偏官网叙事：一句主评价带出奖项和媒体列表</span>
</header>
<div class="canvas">
<div class="left">
<div>
<div class="eyebrow">Recognition</div>
<h3 class="section-title">声音、设计与完整体验的共同认可</h3>
<p class="hero-quote">“I have yet to experience one that nails everything quite like Eversolo does.”</p>
<div class="source">John Grandberg · Darko Audio</div>
</div>
</div>
<div>
<div class="awards">
<div class="award"><span class="badge">IF</span><strong>iF Design Award</strong><small>2026</small></div>
<div class="award"><span class="badge">EISA</span><strong>Best Streaming Amplifier</strong><small>2025</small></div>
<div class="award"><span class="badge">EISA</span><strong>High-End Streamer</strong><small>2025</small></div>
<div class="award"><span class="badge">HFN</span><strong>Outstanding Product</strong><small>2025</small></div>
</div>
<div class="voice-list">
<div class="voice-row"><strong>EISA</strong><span>Music will sound and look great.</span></div>
<div class="voice-row"><strong>AVForums</strong><span>Sound quality that is hard to touch at this price.</span></div>
<div class="voice-row"><strong>Audio Science Review</strong><span>Happy to add the DMP-A6 to the recommended list.</span></div>
</div>
</div>
</div>
</section>
<section class="variant v3">
<header>
<h2>03 Signal Matrix</h2>
<span>偏产品能力：奖项像参数一样可扫描，评价作为声音证据</span>
</header>
<div class="canvas">
<div class="eyebrow">Verified by design, press, and listening</div>
<h3 class="section-title">从设计奖到声音评价，形成连续信号</h3>
<div class="matrix">
<div class="metric"><div class="number">04</div><strong>Major awards</strong><small>Design, amplifier, streamer, product recognition</small></div>
<div class="metric"><div class="number">05</div><strong>Press voices</strong><small>EISA, Darko, AVForums, ASR, Hi-Fi News</small></div>
<div class="metric"><div class="number">26</div><strong>iF Design</strong><small>Industrial design recognition</small></div>
<div class="metric"><div class="number">25</div><strong>EISA season</strong><small>Two product categories</small></div>
<div class="quote-band">
<div class="source">Featured voice · AVForums</div>
<p>“It combines this with a sound quality that is pretty much untouchable for under a grand.”</p>
</div>
<div class="side-voices">
<div class="quote"><div class="source">EISA</div><p>Music will sound and look great.</p></div>
<div class="quote"><div class="source">Hi-Fi News</div><p>A rare balance between price, completeness, and sound.</p></div>
</div>
</div>
</div>
</section>
<section class="variant v4">
<header>
<h2>04 Listening Room Dark</h2>
<span>偏高端音频：深色空间，奖项和声音像展柜信息</span>
</header>
<div class="canvas">
<div class="eyebrow">Recognition in the listening room</div>
<h3 class="section-title">Every award points back to the listening experience</h3>
<p class="subcopy">适合首页整体如果向更高端、更沉浸的产品质感推进。</p>
<div class="stage">
<div class="award-wall">
<div class="award"><span class="badge">IF</span><strong>iF Design Award</strong><small>2026</small></div>
<div class="award"><span class="badge">EISA</span><strong>Best Streaming Amplifier</strong><small>2025</small></div>
<div class="award"><span class="badge">EISA</span><strong>High-End Streamer</strong><small>2025</small></div>
<div class="award"><span class="badge">HFN</span><strong>Outstanding Product</strong><small>2025</small></div>
</div>
<div class="voice-wall">
<div class="quote"><div class="source">Darko Audio</div><p>“Nails everything quite like Eversolo does.”</p></div>
<div class="quote"><div class="source">Audio Science Review</div><p>“Happy to add the Eversolo DMP-A6 to my recommended list.”</p></div>
<div class="quote"><div class="source">Hi-Fi News</div><p>“A rare balance between price, completeness, and sound.”</p></div>
</div>
</div>
</div>
</section>
<section class="variant v5">
<header>
<h2>05 Press Board</h2>
<span>偏媒体中心：奖项作为索引，评价作为可扩展内容板</span>
</header>
<div class="canvas">
<div class="eyebrow">Awards index / Media board</div>
<h3 class="section-title">快速浏览所有背书，展开真正有力的声音</h3>
<div class="board">
<div class="index">
<div class="index-item"><span>iF Design Award</span><strong>2026</strong></div>
<div class="index-item"><span>EISA Amplifier</span><strong>2025</strong></div>
<div class="index-item"><span>EISA Streamer</span><strong>2025</strong></div>
<div class="index-item"><span>Hi-Fi News</span><strong>2025</strong></div>
</div>
<div class="cards">
<div class="quote-card featured"><div class="source">Darko Audio</div><p>“I have yet to experience one that nails everything quite like Eversolo does.”</p></div>
<div class="quote-card"><div class="source">EISA</div><p>Music will sound and look great.</p></div>
<div class="quote-card"><div class="source">AVForums</div><p>Sound quality that is hard to touch under a grand.</p></div>
<div class="quote-card"><div class="source">ASR</div><p>Recommended list.</p></div>
</div>
</div>
</div>
</section>
<section class="intro note">
<strong>推荐落地顺序：</strong>如果只想稳妥升级，选 01；如果想让首页更有官网质感，选 02；
如果希望强调产品能力和“专业验证”，选 03；如果首页后续整体改成更高端沉浸，选 04；
如果后续奖项和媒体数量会持续增加，选 05。
</section>
</main>
</body>
</html>