173 lines
12 KiB
HTML
173 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>WanderQ 首页结构稿</title>
|
||
<style>
|
||
:root {
|
||
--paper: #f3efe5;
|
||
--paper-deep: #e8e2d5;
|
||
--ink: #161b17;
|
||
--muted: #5d635d;
|
||
--forest: #173126;
|
||
--forest-soft: #29493a;
|
||
--acid: #d8ee45;
|
||
--clay: #a6553f;
|
||
--line: rgba(22, 27, 23, 0.19);
|
||
}
|
||
* { box-sizing: border-box; }
|
||
html, body { margin: 0; width: 100%; min-height: 100%; background: #d8d4ca; }
|
||
body { font-family: "Noto Sans SC", "PingFang SC", sans-serif; color: var(--ink); }
|
||
.canvas { width: 1440px; margin: 0 auto; background: var(--paper); overflow: hidden; }
|
||
.docbar {
|
||
height: 78px; padding: 0 72px; display: flex; align-items: center; justify-content: space-between;
|
||
background: var(--forest); color: var(--paper); border-bottom: 4px solid var(--acid);
|
||
}
|
||
.docbar strong { font-size: 17px; letter-spacing: .08em; }
|
||
.docbar span { color: rgba(243,239,229,.7); font-size: 12px; letter-spacing: .12em; }
|
||
.section-label {
|
||
display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: start;
|
||
padding: 42px 72px 26px; border-bottom: 1px solid var(--line);
|
||
}
|
||
.section-label .index { font: 500 13px/1.2 Inter, sans-serif; letter-spacing: .16em; color: var(--clay); }
|
||
.section-label h2 { margin: 0 0 8px; font-size: 23px; line-height: 1.3; }
|
||
.section-label p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
|
||
.site-header {
|
||
height: 88px; padding: 0 72px; display: grid; grid-template-columns: 220px 1fr 220px;
|
||
align-items: center; border-bottom: 1px solid var(--line);
|
||
}
|
||
.logo { font: 800 29px/1 Inter, sans-serif; letter-spacing: -.06em; }
|
||
.logo em { font-style: normal; color: #56b960; }
|
||
.nav { display: flex; justify-content: center; gap: 50px; font-size: 13px; font-weight: 600; }
|
||
.tools { display: flex; justify-content: flex-end; gap: 26px; font-size: 12px; align-items: center; }
|
||
.menu { font-size: 22px; letter-spacing: -.1em; }
|
||
.hero-band { padding: 34px 72px 30px; display: grid; grid-template-columns: 360px 1fr; gap: 44px; }
|
||
.hero-copy { padding-top: 48px; }
|
||
.eyebrow { color: var(--clay); font: 500 11px/1.2 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
|
||
.hero-copy h1 { margin: 22px 0 18px; font-size: 58px; line-height: 1.12; letter-spacing: -.04em; }
|
||
.hero-copy p { margin: 0; max-width: 300px; color: var(--muted); font-size: 14px; line-height: 1.85; }
|
||
.hero-note { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
|
||
.hero-note i { width: 7px; height: 7px; margin-top: 7px; background: var(--acid); border-radius: 50%; }
|
||
.hero-note span { font-size: 12px; line-height: 1.75; color: var(--forest-soft); }
|
||
.hero-visual { position: relative; }
|
||
.carousel-meta { height: 58px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
|
||
.active-group { display: flex; align-items: baseline; gap: 12px; }
|
||
.active-group b { font: 500 34px/1 Inter, sans-serif; }
|
||
.active-group span { font-size: 13px; color: var(--muted); }
|
||
.group-list { display: flex; gap: 22px; align-items: center; font-size: 11px; color: var(--muted); }
|
||
.group-list strong { color: var(--forest); border-bottom: 2px solid var(--forest); padding-bottom: 8px; }
|
||
.arrows { font: 400 26px/1 Inter, sans-serif; display: flex; gap: 18px; }
|
||
.image-triptych { height: 590px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding-top: 18px; }
|
||
.shot { position: relative; overflow: hidden; background: var(--paper-deep); }
|
||
.shot:nth-child(1) { border-radius: 30px 4px 4px 4px; }
|
||
.shot:nth-child(3) { border-radius: 4px 4px 30px 4px; }
|
||
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 65%, rgba(0,0,0,.48)); }
|
||
.shot span { position: absolute; left: 18px; bottom: 17px; z-index: 2; color: #fff; font-size: 12px; letter-spacing: .05em; }
|
||
.bridge {
|
||
min-height: 230px; padding: 52px 72px; display: grid; grid-template-columns: 150px 470px 1fr; gap: 28px;
|
||
align-items: center; background: var(--forest); color: var(--paper);
|
||
}
|
||
.bridge .number { color: var(--acid); font: 500 12px/1 Inter, sans-serif; letter-spacing: .16em; }
|
||
.bridge h3 { margin: 0; font-size: 34px; line-height: 1.35; letter-spacing: -.02em; }
|
||
.bridge p { margin: 0; max-width: 520px; color: rgba(243,239,229,.7); font-size: 14px; line-height: 1.9; }
|
||
.experience { padding-bottom: 86px; }
|
||
.experience-head { padding: 60px 72px 38px; display: grid; grid-template-columns: 150px 500px 1fr; gap: 28px; align-items: end; }
|
||
.experience-head .index { color: var(--clay); font: 500 13px/1 Inter, sans-serif; letter-spacing: .16em; align-self: start; padding-top: 10px; }
|
||
.experience-head h2 { margin: 0; font-size: 46px; line-height: 1.22; letter-spacing: -.035em; }
|
||
.experience-head p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.9; }
|
||
.cards { padding: 0 72px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
|
||
.card { min-height: 575px; display: flex; flex-direction: column; background: var(--forest); color: var(--paper); overflow: hidden; }
|
||
.card:nth-child(1) { border-radius: 30px 4px 4px 4px; }
|
||
.card:nth-child(2) { border-radius: 4px; transform: translateY(24px); }
|
||
.card:nth-child(3) { border-radius: 4px 4px 30px 4px; }
|
||
.card img { width: 100%; height: 340px; object-fit: cover; display: block; }
|
||
.card-copy { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
|
||
.card .tag { color: var(--acid); font-size: 11px; letter-spacing: .12em; }
|
||
.card h3 { margin: 12px 0 10px; font-size: 30px; line-height: 1.25; }
|
||
.card p { margin: 0; color: rgba(243,239,229,.62); font-size: 13px; line-height: 1.75; }
|
||
.card .go { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(243,239,229,.16); font-size: 12px; }
|
||
.card .go b { color: var(--acid); font-size: 21px; }
|
||
.flow-note { margin: 78px 72px 0; padding: 26px 30px; border: 1px solid var(--line); display: grid; grid-template-columns: 150px 1fr; gap: 28px; }
|
||
.flow-note strong { font-size: 13px; color: var(--clay); letter-spacing: .12em; }
|
||
.flow-note p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--muted); }
|
||
.footer { height: 90px; padding: 0 72px; display: flex; align-items: center; justify-content: space-between; background: var(--paper-deep); border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="canvas">
|
||
<div class="docbar">
|
||
<strong>WanderQ 首页结构稿</strong>
|
||
<span>DESKTOP · 1440 · STRUCTURE REVIEW</span>
|
||
</div>
|
||
|
||
<div class="section-label">
|
||
<div class="index">SECTION 01</div>
|
||
<div>
|
||
<h2>首屏只负责吸引，不承担产品分类</h2>
|
||
<p>保留四组照片轮播，但主题名称退居辅助信息。用户首先感受到贵州的气质、尺度与差异，而不是先理解栏目。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<header class="site-header">
|
||
<div class="logo">Wander<em>Q.</em></div>
|
||
<nav class="nav"><span>贵州体验</span><span>酒店</span><span>食物</span><span>关于我们</span></nav>
|
||
<div class="tools"><span>中 EN</span><span class="menu">☰</span><strong>开始规划</strong></div>
|
||
</header>
|
||
|
||
<section class="hero-band">
|
||
<div class="hero-copy">
|
||
<div class="eyebrow">GUIZHOU · CHINA</div>
|
||
<h1>不是看过贵州，<br />是走进贵州。</h1>
|
||
<p>用三张同一气质的竖图组成一幅目的地印象。每次轮播切换整组照片，而不是让四个主题争夺注意力。</p>
|
||
<div class="hero-note"><i></i><span>本区不出现“玩法入口”按钮。<br />唯一任务：让人愿意继续向下看。</span></div>
|
||
</div>
|
||
<div class="hero-visual">
|
||
<div class="carousel-meta">
|
||
<div class="active-group"><b>01</b><span>/ 04 野贵州</span></div>
|
||
<div class="group-list"><strong>野贵州</strong><span>活态遗产</span><span>贵州边缘</span><span>贵州之下</span></div>
|
||
<div class="arrows"><span>←</span><span>→</span></div>
|
||
</div>
|
||
<div class="image-triptych">
|
||
<div class="shot"><img src="/client-assets/home-hero-mountain-village.webp" alt="贵州山地村落" /><span>山地与村落</span></div>
|
||
<div class="shot"><img src="/client-assets/home-hero-waterfall-scale.webp" alt="贵州瀑布" /><span>瀑布的尺度</span></div>
|
||
<div class="shot"><img src="/client-assets/village-valley-fields.jpg" alt="贵州山谷" /><span>山谷与田野</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="bridge">
|
||
<div class="number">TRANSITION</div>
|
||
<h3>漂亮只是入口。<br />接下来，告诉他如何进入贵州。</h3>
|
||
<p>这一条深色过渡带把“目的地想象”转换成“旅行选择”。它明确告诉用户：上面是感受，下面才是 WanderQ 的产品表达。</p>
|
||
</section>
|
||
|
||
<section class="experience">
|
||
<div class="experience-head">
|
||
<div class="index">SECTION 02</div>
|
||
<h2>贵州，不只是看风景。</h2>
|
||
<p><strong>三种方式，深入贵州。</strong><br />进入洞穴与峡谷，走近仍在延续的村寨生活，或沿着山峰、森林与瀑布慢慢旅行。三种体验可以单独选择，也可以组合。</p>
|
||
</div>
|
||
<div class="cards">
|
||
<article class="card">
|
||
<img src="/client-assets/waterfall-abseil-spray.jpg" alt="贵州极境" />
|
||
<div class="card-copy"><span class="tag">01 · ADVENTURE</span><h3>贵州极境</h3><p>探洞、瀑降、峡谷穿越与山地徒步。把贵州独有的喀斯特地貌，变成真正可以进入的体验。</p><div class="go"><span>进入极境体验</span><b>→</b></div></div>
|
||
</article>
|
||
<article class="card">
|
||
<img src="/client-assets/culture-batik-making.jpg" alt="活态贵州" />
|
||
<div class="card-copy"><span class="tag">02 · LIVING CULTURE</span><h3>活态贵州</h3><p>村寨、非遗、节庆与地方生活。看见仍在被使用、被传承，而不是只供观看的文化。</p><div class="go"><span>走近在地生活</span><b>→</b></div></div>
|
||
</article>
|
||
<article class="card">
|
||
<img src="/client-assets/waterfall-huangguoshu-main.jpg" alt="山水贵州" />
|
||
<div class="card-copy"><span class="tag">03 · LANDSCAPE</span><h3>山水贵州</h3><p>黄果树、梵净山、小七孔、森林与湖泊。用更从容的节奏，建立对贵州山水的完整印象。</p><div class="go"><span>探索山水路线</span><b>→</b></div></div>
|
||
</article>
|
||
</div>
|
||
<div class="flow-note"><strong>USER FLOW</strong><p>首屏产生兴趣 → 深色过渡确认“下面有内容” → 三张卡片理解 WanderQ 的三种核心产品 → 进入对应体验页或组合行程。</p></div>
|
||
</section>
|
||
|
||
<footer class="footer"><span>WanderQ · Homepage Structure Draft</span><span>用于确认信息层级，不是最终视觉定稿</span></footer>
|
||
</main>
|
||
</body>
|
||
</html>
|